天天看點

GPUImage簡單濾鏡使用(一)

  今天來學習一下一個簡單濾鏡使用的流程,通過調節亮度濾鏡來了解。先将GPUImage庫導入到項目中,引入頭檔案"GPUImage.h"

     一、建立亮度濾鏡對象

      GPUImageBrightnessFilter *filter = [[GPUImageBrightnessFilter alloc] init],經過alloc init之後,程式為我們建立了頂點數組以及幀緩沖區,紋理,并綁定為目前使用的對象。

  1.為頂點着色添加屬性

   首先我們來看一該濾鏡的頂點着色器字元串

attribute vec4 position;
 attribute vec4 inputTextureCoordinate;
 
 varying vec2 textureCoordinate;
 
 void main()
 {
     gl_Position = position;
     textureCoordinate = inputTextureCoordinate.xy;
 }      

 我們了解到該頂點有2個需要添加的屬性position,inputTextureCoordinate.我們需要在程式中添加這2個屬性,通過下列方法來添加

- (void)initializeAttributes;
{
    [filterProgram addAttribute:@"position"];
    [filterProgram addAttribute:@"inputTextureCoordinate"];

    // Override this, calling back to this super method, in order to add new attributes to your vertex shader
}      
  2.片段着色提供uniform
        
varying highp vec2 textureCoordinate;
 
 uniform sampler2D inputImageTexture;
 uniform lowp float brightness;
 
 void main()
 {
     lowp vec4 textureColor = texture2D(inputImageTexture, textureCoordinate);
     
     gl_FragColor = vec4((textureColor.rgb + vec3(brightness)), textureColor.w);
 }        

  brightnessUniform = [filterProgram uniformIndex:@"brightness"]

  filterInputTextureUniform = [filterProgram uniformIndex:@"inputImageTexture"]

  3.啟用頂點數組

  glEnableVertexAttribArray(filterPositionAttribute);

      glEnableVertexAttribArray(filterTextureCoordinateAttribute)

 4.建立紋理
      
- (void)generateTexture;
{
    glActiveTexture(GL_TEXTURE1);
    glGenTextures(1, &_texture);
    glBindTexture(GL_TEXTURE_2D, _texture);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, _textureOptions.minFilter);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, _textureOptions.magFilter);
    // This is necessary for non-power-of-two textures
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, _textureOptions.wrapS);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, _textureOptions.wrapT);
    
    // TODO: Handle mipmaps
}      
 
  5.建立幀緩沖區      

      glGenFramebuffers(1, &framebuffer)

  6.幀緩沖綁定紋理

  glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, _texture, 0);

   二、設定亮度值

  filter.brightness = value

  三、設定紋理尺寸

    [filter forceProcessingAtSize:image.size]

  四、建立GPUImagePicture對象

     GPUImagePicture *pic = [[GPUImagePicture alloc] initWithImage:image]

  五、向建立好的GPUImagePicture對象添加target

  六,處理圖像

  [pic processImage]

進行圖像渲染并繪制

glClearColor(backgroundColorRed, backgroundColorGreen, backgroundColorBlue, backgroundColorAlpha);
    glClear(GL_COLOR_BUFFER_BIT);

    glActiveTexture(GL_TEXTURE2);
    glBindTexture(GL_TEXTURE_2D, [firstInputFramebuffer texture]);
    
    glUniform1i(filterInputTextureUniform, 2);    

    glVertexAttribPointer(filterPositionAttribute, 2, GL_FLOAT, 0, 0, vertices);
    glVertexAttribPointer(filterTextureCoordinateAttribute, 2, GL_FLOAT, 0, 0, textureCoordinates);
    
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);      

  七、[filter useNextFrameForImageCapture]

   八、擷取處理後的圖像

  image = [filter imageFromCurrentFramebuffer]

GPUImageBrightnessFilter *filter = [[GPUImageBrightnessFilter alloc] init];
    filter.brightness = value;
    [filter forceProcessingAtSize:image.size];
    GPUImagePicture *pic = [[GPUImagePicture alloc] initWithImage:image];
    [pic addTarget:filter];
    
    [pic processImage];
    [filter useNextFrameForImageCapture];
    image = [filter imageFromCurrentFramebuffer];