iOS编程高性能之路－GPU着色器实现实时滤镜（3

iOS编程高性能之路－GPU着色器实现实时滤镜（3）

  (2012-09-11 19:35:53)

转载▼

标签：  滤镜   着色器   opengles   path   ios   it

实时滤镜实现

在了解了如何添加滤镜(http://blog.sina.com.cn/s/blog_7011f21c0101afz4.html) 和着色器(http://blog.sina.com.cn/s/blog_7011f21c0101akez.html) 下一步我们就可以来真正的实现实时滤镜效果了。

上节我们讲到 在fsh 里面 有Sample2D 这一个类型 ，其实这个就是我们需要的纹理，有了这个纹理我们就可以随意操纵这个纹理里面的像素点，那用他来产生滤镜效果也是轻而易举的事情了。

所以首先要做的就是对原来的接收帧数据做改造，不是让他直接变成bitmap而是让他变成纹理，为此我们需要引入OpenGL ES view（这个我们可以从opengles的模板工程里面取出来）。我们拿到回调中的数据  CVImageBufferRef  pixBuf =  CMSampleBufferGetImageBuffer (sbuf);

再利用以下代码就可以转成texture 渲染在opengl view上

glGenTextures(1, &videoFrameTexture);

glBindTexture(GL_TEXTURE_2D, videoFrameTexture);

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

// This is necessary for non-power-of-two textures

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

// Using BGRA extension to pull in video frame data directly

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, bufferWidth, bufferHeight, 0, GL_BGRA, GL_UNSIGNED_BYTE,CVPixelBufferGetBaseAddress(cameraFrame));

通过从opengl es模板中的shader加载函数我们就可以在上一篇所将的vsh fsh中对像素点进行修改。这时我们可以看到操作三通道，四通道都是轻而易举 没有降帧。

当然对与高阶的滤镜效果 我们可以自己生成噪点纹理 或是 其他效果的纹理做叠加，这个是我之前自己创建的油画纹理，原理很简单 就是在当前像素某个范围内随机找出一个点 用这个点的颜色来替换当前点 从而造成一种扩散的效果

 

int w = 320;

int h = 460;

int range = 6;

    

UInt8 *pixels = malloc(sizeof(UInt8)*w*h*4);

int pixOff = 0;

int wOff=0;

for (int y = 0; y < h; y++) {

   pixOff = wOff;

   for (int x = 0; x < w; x++) {

      int color = rand()%range;

      pixels[pixOff] = color;

      pixels[pixOff+1] = color;

      pixels[pixOff+2] = color;

          pixels[pixOff+3] = 255;

      pixOff+=4;

   }

   wOff += w * 4;

}

    

glGenTextures(1, &randomTexture);

        

glBindTexture(GL_TEXTURE_2D, randomTexture);

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

 

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

 

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, w, h, 0, GL_BGRA, GL_UNSIGNED_BYTE, pixels);

free(pixels);