完整代碼位置:AndroidShaderDemo
幀緩沖區(qū)對象FBO(依高斯模糊為例子說明)
一般情況下，圖像會被渲染到窗口上保礼，但是有些情況需要多次渲染，最后才將最終的渲染圖像輸出到窗口，這時候就需要用到幀緩沖區(qū)對象。用幀緩沖區(qū)對象怕膛，可以先把圖像渲染到紋理，然后操作這個紋理秦踪。FBO的學(xué)習(xí)可以參考[gpuimage]的Gaussian Blur褐捻。因為Gaussian Blur filter封裝了很多東西，這里為了清楚說明幀緩沖區(qū)對象的使用椅邓，在AndroidShaderDemo里重新寫了這部分柠逞，可以參考 TwoFilterRender，里面包含兩個Program:
TwoFilterOneProgram twoFilterOneProgram;//第一步用的shader景馁，渲染到FBO
TwoFilterTwoProgram twoFilterTwoProgram;//第二步用的shader板壮，渲染到屏幕
Gaussian Blur filter里兩次渲染用的shader其實是一樣的，這里區(qū)分開合住，比如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卷積矩陣的數(shù)組[-4, -3, -2, -1, 0 , 1, 2, 3, 4]卿樱，然后在fragment shader里將這9個坐標點的rgb值同9個坐標點的權(quán)值點積，結(jié)果就是該像素最終的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個點根據(jù)不同權(quán)重將9個像素點顏色混合起來殿如。
最后看下怎么渲染，第一步渲染到FBO最爬，第二步渲染到屏幕涉馁。
要渲染到FBO，首先要創(chuàng)建FBO,FBO的創(chuàng)建過程如下:
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的創(chuàng)建過程和創(chuàng)建普通紋理類似爱致，區(qū)別就是在創(chuàng)建FBO的同時烤送，還創(chuàng)建一個空的紋理對象mFrameBufferTextures，然后通過glFramebufferTexture2D將FBO(mFrameBuffers)和紋理對象(mFrameBufferTextures)關(guān)聯(lián)起來糠悯。
下面在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节视，用一樣的代碼。結(jié)果如下:
圖像確實模糊了假栓，但是卻上下顛倒了寻行，這是因為使用了之前的頂點紋理坐標：
public static final float CUBE[] = {//翻轉(zhuǎn)頂點信息中的紋理坐標,統(tǒng)一用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,
};
之前統(tǒng)一用1去減是因為從資源讀的圖片坐標原點在左上角，而紋理的坐標原點在左下角:
為了得到正確的圖像匾荆，不用1去減拌蜘，所以第二次渲染用的頂點數(shù)據(jù)為:
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最終結(jié)果改為灰度圖拦坠。結(jié)果如下
可以看到原始圖像變成模糊的灰度圖了。
