帧缓冲区对象FBO(依高斯模糊为例子说明)

一般情况下，图像会被渲染到窗口上，但是有些情况需要多次渲染，最后才将最终的渲染图像输出到窗口，这时候就需要用到帧缓冲区对象。用帧缓冲区对象，可以先把图像渲染到纹理，然后操作这个纹理。FBO的学习可以参考[gpuimage]的Gaussian Blur。因为Gaussian Blur filter封装了很多东西，这里为了清楚说明帧缓冲区对象的使用，在AndroidShaderDemo里重新写了这部分，可以参考 TwoFilterRender，里面包含两个Program:

TwoFilterOneProgram twoFilterOneProgram;//第一步用的shader，渲染到FBO

TwoFilterTwoProgram twoFilterTwoProgram;//第二步用的shader，渲染到屏幕

Gaussian Blur filter里两次渲染用的shader其实是一样的，这里区分开，比如vertex shader，这里分别写成两个文件two_filter_one_vertex_shader，two_filter_two_vertex_shader，里面代码是一样的。这里看下vertex shader代码:

attribute vec4 a_Position;

attribute vec2 a_TextureCoordinates;

varying vec2 v_TextureCoordinates;

const int GAUSSIAN_SAMPLES = 9;

uniform float texelWidthOffset;

uniform float texelHeightOffset;

varying vec2 blurCoordinates[GAUSSIAN_SAMPLES];

void main()

{

gl_Position = a_Position;

v_TextureCoordinates = a_TextureCoordinates.xy;

int multiplier = 0;

vec2 blurStep;

vec2 singleStepOffset = vec2(texelHeightOffset, texelWidthOffset);

for (int i = 0; i < GAUSSIAN_SAMPLES; i++){//生成个3X3矩阵

multiplier = (i - ((GAUSSIAN_SAMPLES - 1) / 2));

blurStep = float(multiplier) * singleStepOffset;

blurCoordinates[i] = a_TextureCoordinates.xy + blurStep;

}

}

主要功能就是生成类似3X3卷积矩阵的数组[-4, -3, -2, -1, 0 , 1, 2, 3, 4]，然后在fragment shader里将这9个坐标点的rgb值同9个坐标点的权值点积，结果就是该像素最终的rgb。fragment shader代码如下:

precision mediump float;

uniform sampler2D u_TextureUnit0;//texture

const lowp int GAUSSIAN_SAMPLES = 9;

varying highp vec2 v_TextureCoordinates;

varying highp vec2 blurCoordinates[GAUSSIAN_SAMPLES];

void main()

{

lowp vec3 sum = vec3(0.0);

lowp vec4 fragColor=texture2D(u_TextureUnit0, v_TextureCoordinates);

sum += texture2D(u_TextureUnit0, blurCoordinates[0]).rgb * 0.05;

sum += texture2D(u_TextureUnit0, blurCoordinates[1]).rgb * 0.09;

sum += texture2D(u_TextureUnit0, blurCoordinates[2]).rgb * 0.12;

sum += texture2D(u_TextureUnit0, blurCoordinates[3]).rgb * 0.15;

sum += texture2D(u_TextureUnit0, blurCoordinates[4]).rgb * 0.18;

sum += texture2D(u_TextureUnit0, blurCoordinates[5]).rgb * 0.15;

sum += texture2D(u_TextureUnit0, blurCoordinates[6]).rgb * 0.12;

sum += texture2D(u_TextureUnit0, blurCoordinates[7]).rgb * 0.09;

sum += texture2D(u_TextureUnit0, blurCoordinates[8]).rgb * 0.05;

gl_FragColor = vec4(sum,fragColor.a);

}

高斯模糊(Gaussian Blur)shader的作用其实就是将取样像素点附近的9个点根据不同权重将9个像素点颜色混合起来。

最后看下怎么渲染，第一步渲染到FBO，第二步渲染到屏幕。

要渲染到FBO，首先要创建FBO,FBO的创建过程如下:

GLES20.glGenFramebuffers(1, mFrameBuffers, 0);

GLES20.glGenTextures(1, mFrameBufferTextures, 0);

GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mFrameBufferTextures[0]);

GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA, width, height, 0,

GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, null);

GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D,

GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);

GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D,

GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);

GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D,

GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE);

GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D,

GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE);

GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, mFrameBuffers[0]);

GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0,

GLES20.GL_TEXTURE_2D, mFrameBufferTextures[0], 0);

GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);

GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);

FBO的创建过程和创建普通纹理类似，区别就是在创建FBO的同时，还创建一个空的纹理对象mFrameBufferTextures，然后通过glFramebufferTexture2D将FBO(mFrameBuffers)和纹理对象(mFrameBufferTextures)关联起来。

下面在onDrawFrame方法里进行渲染，第一次渲染时，选择渲染到FBO

//render to framebuffer

GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, mFrameBuffers[0]);

GLES20.glClearColor(0, 0, 0, 0);

//画图形过程省略，和之前代码一样，可参考完整代码

GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);

首先绑定个FBO,然后画图，画完后再解绑,这里画图用的第一个shader。

然后进行第二次渲染，因为第一次渲染完，解绑了FBO,第二次就渲染到屏幕上了，第二次渲染用了第二个shader，用一样的代码。结果如下:

flip.png

图像确实模糊了，但是却上下颠倒了，这是因为使用了之前的顶点纹理坐标：

public static final float CUBE[] = {//翻转顶点信息中的纹理坐标,统一用1去减

-1.0f, -1.0f, 0f, 1f - 0f,

1.0f, -1.0f, 1f, 1f -0f,

-1.0f, 1.0f, 0f, 1f -1f,

1.0f, 1.0f, 1f, 1f -1f,

};

之前统一用1去减是因为从资源读的图片坐标原点在左上角，而纹理的坐标原点在左下角:

20160718114147782.png

为了得到正确的图像，不用1去减，所以第二次渲染用的顶点数据为:

public static final float FlipCUBE[] = {//重点看纹理坐标

-1.0f, -1.0f, 0f, 0f,

1.0f, -1.0f, 1f, 0f,

-1.0f, 1.0f, 0f, 1f,

1.0f, 1.0f, 1f, 1f,

};

然后再次跑下程序，这里为了说明确实进行了两次渲染，把two_filter_two_fragment_shader最终结果改为灰度图。结果如下

two_filter_render.png

可以看到原始图像变成模糊的灰度图了。