Android OpenGLES2.0开发（十）：FBO离屏渲染

人生是一场单程的旅行，即使有些遗憾我们也没有从头再来的机会，与其纠结无法改变的已往不如微笑着爱惜未来。
  

• Android OpenGLES开发：EGL环境搭建
  
• Android OpenGLES2.0开发（一）：艰难的开始
  
• Android OpenGLES2.0开发（二）：环境搭建
  
• Android OpenGLES2.0开发（三）：绘制一个三角形
  
• Android OpenGLES2.0开发（四）：矩阵变更和相机投影
  
• Android OpenGLES2.0开发（五）：绘制正方形和圆形
  
• Android OpenGLES2.0开发（六）：着色器语言GLSL
  
• Android OpenGLES2.0开发（七）：纹理贴图之显示图片
  
• Android OpenGLES2.0开发（八）：Camera预览
  
• Android OpenGLES2.0开发（九）：图片滤镜
  
• Android OpenGLES2.0开发（十）：FBO离屏渲染
  

弁言

之前的章节我们利用OpenGL ES绘制图形然后显示到屏幕上，貌似看着并没有什么题目。
假如我们现在不想显示到屏幕中，但还想利用OpenGL ES对图像的强大处理能力那又该怎样是好？抑或我们上一节学习到的图片滤镜，真实的情况需要多个滤镜叠加利用，把全部的滤镜都放到一个着色器中好像不是一种良好的编程模式。
上面提到题目，接下来我们会给出答案。
什么是FBO

FBO（Frame Buffer Object）即帧缓冲区对象，实际上是一个可添加缓冲区的容器，可以为其添加纹理或渲染缓冲区对象（RBO）。
FBO可以让我们的渲染不渲染到屏幕上，而是渲染到离屏Buffer中。可以明白为将OpenGL ES绘制的图像内容输出到一块内存中，而我们可以对这块内存进行多次绘制。固然这块内存中的数据也可生存到当地SD卡中，也可重新绘制到屏幕上用于显示。
   

• FBO是一个容器，自身不能用于渲染，需要与一些可渲染的缓冲区绑定在一起，像纹理或者渲染缓冲区。
  
• 可以给他添加添加纹理（Texture ）或渲染缓冲区对象（RBO）
  
• 它仅且提供了 3 个附着（Attachment）：颜色附着、深度附着、模板附着。
  
  
  
  

  FBO优点

• 灵活性和控制性‌：FBO允许开发者将渲染结果输出到自定义的帧缓冲区，而不是传统的窗口系统提供的帧缓冲区。这使得开发者可以更灵活地控制渲染过程和结果，适用于需要特殊渲染效果的场景‌
  
• 性能优化‌：通过利用FBO，开发者可以制止不必要的渲染操作，例如在不需要渲染到屏幕的情况下，可以直接将渲染结果存储在内存中，从而提高渲染服从‌
  
• 独立于窗口系统‌：FBO完全受OpenGL控制，不依赖于窗口系统提供的帧缓存。这意味着它可以在没有窗口系统的情况下利用，适用于无窗口环境的渲染需求‌
  
• 多目标应用‌：FBO可以用于多种应用场景，包罗但不限于实时渲染、图像处理、视频游戏开发等。其灵活性和高性能使其在需要高质量图形输出的应用中具有显著上风‌
  

FBO怎么用

我们对OpenGL ES的绘制流程很熟悉了，怎样将渲染结果输出到FBO中实在很简单。

• 创建FBO缓冲区，在这期间需要绑定纹理和深度缓冲区（可选）
  
• 渲染到FBO，与之前的渲染没有本质的区别，只是在draw前绑定FBO缓冲区，绘制结束解绑FBO即可
  
• 开释FBO，将FBO缓冲区开释
  

1. 创建FBO

创建FBO基本步骤是：

• 创建2D纹理（颜色缓冲区）
  
• 创建帧缓冲区
  
• 创建深度缓冲区
  
• 将纹理和深度缓冲区附着到帧缓冲区上
  

1. /**
2. * 创建帧缓冲区（FBO）
3. *
4. * @param width
5. * @param height
6. */
7. public void createFrameBuffers(int width, int height) {
8.     if (mFrameBuffer > 0) {
9.         destroyFrameBuffers();
10.     }
11.     // 1.创建一个纹理对象并绑定它，这将是颜色缓冲区。
12.     int[] values = new int[1];
13.     GLES20.glGenTextures(1, values, 0);
14.     GLESUtils.checkGlError("glGenTextures");
15.     mOffscreenTexture = values[0];
16.     GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mOffscreenTexture);
17.     GLESUtils.checkGlError("glBindTexture " + mOffscreenTexture);
19.     // 2.创建纹理存储对象
20.     GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA, width, height,
21.             0, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, null);
23.     // 3.设置参数。我们可能正在使用二维的非幂函数，所以某些值可能无法使用。
24.     // 设置缩小过滤为使用纹理中坐标最接近的一个像素的颜色作为需要绘制的像素颜色
25.     GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST);
26.     //设置放大过滤为使用纹理中坐标最接近的若干个颜色，通过加权平均算法得到需要绘制的像素颜色
27.     GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);
28.     //设置环绕方向S，截取纹理坐标到[1/2n,1-1/2n]。将导致永远不会与border融合
29.     GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE);
30.     //设置环绕方向T，截取纹理坐标到[1/2n,1-1/2n]。将导致永远不会与border融合
31.     GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE);
32.     GLESUtils.checkGlError("glTexParameter");
34.     // 4.创建帧缓冲区对象并将其绑定
35.     GLES20.glGenFramebuffers(1, values, 0);
36.     GLESUtils.checkGlError("glGenFramebuffers");
37.     mFrameBuffer = values[0];    // expected > 0
38.     GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, mFrameBuffer);
39.     GLESUtils.checkGlError("glBindFramebuffer " + mFrameBuffer);
41.     // 5.创建深度缓冲区并绑定它
42.     GLES20.glGenRenderbuffers(1, values, 0);
43.     GLESUtils.checkGlError("glGenRenderbuffers");
44.     mDepthBuffer = values[0];    // expected > 0
45.     GLES20.glBindRenderbuffer(GLES20.GL_RENDERBUFFER, mDepthBuffer);
46.     GLESUtils.checkGlError("glBindRenderbuffer " + mDepthBuffer);
48.     // 为深度缓冲区分配存储空间。
49.     GLES20.glRenderbufferStorage(GLES20.GL_RENDERBUFFER, GLES20.GL_DEPTH_COMPONENT16, width, height);
50.     GLESUtils.checkGlError("glRenderbufferStorage");
52.     // 6.将深度缓冲区和纹理（颜色缓冲区）附着到帧缓冲区对象
53.     GLES20.glFramebufferRenderbuffer(GLES20.GL_FRAMEBUFFER, GLES20.GL_DEPTH_ATTACHMENT,
54.             GLES20.GL_RENDERBUFFER, mDepthBuffer);
55.     GLESUtils.checkGlError("glFramebufferRenderbuffer");
56.     GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0,
57.             GLES20.GL_TEXTURE_2D, mOffscreenTexture, 0);
58.     GLESUtils.checkGlError("glFramebufferTexture2D");
60.     // 检查是否一切正常
61.     int status = GLES20.glCheckFramebufferStatus(GLES20.GL_FRAMEBUFFER);
62.     if (status != GLES20.GL_FRAMEBUFFER_COMPLETE) {
63.         throw new RuntimeException("Framebuffer not complete, status=" + status);
64.     }
66.     // 解绑纹理
67.     GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);
68.     // 解绑Frame Buffer
69.     GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);
70.     // 解绑Render Buffer
71.     GLES20.glBindRenderbuffer(GLES20.GL_RENDERBUFFER, 0);
73.     GLESUtils.checkGlError("prepareFramebuffer done");
74. }

复制代码

2. 渲染到FBO

渲染实在很简单，onDraw照旧执行本来的绘制流程，只是在方法前和后添加了FBO的逻辑

1. public int draw(int textureId, float[] matrix) {
2.     GLES20.glViewport(0, 0, mWidth, mHeight);
3.     if (bindFBO) {
4.         // 绑定FBO
5.         GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, mFrameBuffer);
6.     }
8.     onDraw(textureId, matrix);
10.     if (bindFBO) {
11.         // 解绑FBO
12.         GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);
13.         //返回fbo的纹理id
14.         return mOffscreenTexture;
15.     } else {
16.         return textureId;
17.     }
18. }

复制代码

3. 开释FBO

1. /**
2. * 销毁帧缓冲区（FBO）
3. */
4. public void destroyFrameBuffers() {
5.     // 删除fbo的纹理
6.     if (mOffscreenTexture > 0) {
7.         GLES20.glDeleteTextures(1, new int[]{mOffscreenTexture}, 0);
8.         mOffscreenTexture = -1;
9.     }
10.     if (mFrameBuffer > 0) {
11.         GLES20.glDeleteFramebuffers(1, new int[]{mFrameBuffer}, 0);
12.         mFrameBuffer = -1;
13.     }
14.     if (mDepthBuffer > 0) {
15.         GLES20.glDeleteRenderbuffers(1, new int[]{mDepthBuffer}, 0);
16.         mDepthBuffer = -1;
17.     }
18. }

复制代码

完备代码

在上一篇中我们实现了多个图片滤镜的效果，为了使得他们都支持FBO功能，我们建立一个抽象类将FBO的功能放到抽象类中，完备的代码如下：
先定义个接口如下：

1. public interface AFilter {
3.     void setTextureSize(int width, int height);
5.     void setFrameBuffer(int frameBuffer);
7.     int getFrameBuffer();
9.     int getOffscreenTexture();
11.     void setBindFBO(boolean bindFBO);
13.     void bindFBO();
15.     void unBindFBO();
17.     void surfaceCreated();
19.     void surfaceChanged(int width, int height);
21.     int draw(int textureId, float[] matrix);
23.     void onDraw(int textureId, float[] matrix);
25.     void release();
26. }

复制代码

抽象类中实现FBO功能：

1. /**
2. * 滤镜效果抽象类
3. */
4. public abstract class BaseFilter implements AFilter {
6.     /**
7.      * 离屏渲染纹理id
8.      */
9.     private int mOffscreenTexture = -1;
10.     /**
11.      * 帧缓冲区
12.      */
13.     private int mFrameBuffer = -1;
14.     /**
15.      * 深度缓冲区
16.      */
17.     private int mDepthBuffer = -1;
18.     /**
19.      * 是否使用离屏渲染
20.      */
21.     protected boolean bindFBO;
22.     private int mWidth;
23.     private int mHeight;
25.     @Override
26.     public void setBindFBO(boolean bindFBO) {
27.         this.bindFBO = bindFBO;
28.     }
30.     @Override
31.     public void setFrameBuffer(int frameBuffer) {
32.         mFrameBuffer = frameBuffer;
33.     }
35.     @Override
36.     public int getFrameBuffer() {
37.         return mFrameBuffer;
38.     }
40.     @Override
41.     public int getOffscreenTexture() {
42.         return mOffscreenTexture;
43.     }
45.     @Override
46.     public void bindFBO() {
47.         if (mFrameBuffer > 0) {
48.             GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, mFrameBuffer);
49.         }
50.     }
52.     @Override
53.     public void unBindFBO() {
54.         GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);
55.     }
57.     /**
58.      * 创建帧缓冲区（FBO）
59.      *
60.      * @param width
61.      * @param height
62.      */
63.     public void createFrameBuffers(int width, int height) {
64.         if (mFrameBuffer > 0) {
65.             destroyFrameBuffers();
66.         }
67.         // 1.创建一个纹理对象并绑定它，这将是颜色缓冲区。
68.         int[] values = new int[1];
69.         GLES20.glGenTextures(1, values, 0);
70.         GLESUtils.checkGlError("glGenTextures");
71.         mOffscreenTexture = values[0];
72.         GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mOffscreenTexture);
73.         GLESUtils.checkGlError("glBindTexture " + mOffscreenTexture);
75.         // 2.创建纹理存储对象
76.         GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA, width, height,
77.                 0, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, null);
79.         // 3.设置参数。我们可能正在使用二维的非幂函数，所以某些值可能无法使用。
80.         // 设置缩小过滤为使用纹理中坐标最接近的一个像素的颜色作为需要绘制的像素颜色
81.         GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST);
82.         //设置放大过滤为使用纹理中坐标最接近的若干个颜色，通过加权平均算法得到需要绘制的像素颜色
83.         GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);
84.         //设置环绕方向S，截取纹理坐标到[1/2n,1-1/2n]。将导致永远不会与border融合
85.         GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE);
86.         //设置环绕方向T，截取纹理坐标到[1/2n,1-1/2n]。将导致永远不会与border融合
87.         GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE);
88.         GLESUtils.checkGlError("glTexParameter");
90.         // 4.创建帧缓冲区对象并将其绑定
91.         GLES20.glGenFramebuffers(1, values, 0);
92.         GLESUtils.checkGlError("glGenFramebuffers");
93.         mFrameBuffer = values[0];    // expected > 0
94.         GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, mFrameBuffer);
95.         GLESUtils.checkGlError("glBindFramebuffer " + mFrameBuffer);
97.         // 5.创建深度缓冲区并绑定它
98.         GLES20.glGenRenderbuffers(1, values, 0);
99.         GLESUtils.checkGlError("glGenRenderbuffers");
100.         mDepthBuffer = values[0];    // expected > 0
101.         GLES20.glBindRenderbuffer(GLES20.GL_RENDERBUFFER, mDepthBuffer);
102.         GLESUtils.checkGlError("glBindRenderbuffer " + mDepthBuffer);
104.         // 为深度缓冲区分配存储空间。
105.         GLES20.glRenderbufferStorage(GLES20.GL_RENDERBUFFER, GLES20.GL_DEPTH_COMPONENT16, width, height);
106.         GLESUtils.checkGlError("glRenderbufferStorage");
108.         // 6.将深度缓冲区和纹理（颜色缓冲区）附着到帧缓冲区对象
109.         GLES20.glFramebufferRenderbuffer(GLES20.GL_FRAMEBUFFER, GLES20.GL_DEPTH_ATTACHMENT,
110.                 GLES20.GL_RENDERBUFFER, mDepthBuffer);
111.         GLESUtils.checkGlError("glFramebufferRenderbuffer");
112.         GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0,
113.                 GLES20.GL_TEXTURE_2D, mOffscreenTexture, 0);
114.         GLESUtils.checkGlError("glFramebufferTexture2D");
116.         // 检查是否一切正常
117.         int status = GLES20.glCheckFramebufferStatus(GLES20.GL_FRAMEBUFFER);
118.         if (status != GLES20.GL_FRAMEBUFFER_COMPLETE) {
119.             throw new RuntimeException("Framebuffer not complete, status=" + status);
120.         }
122.         // 解绑纹理
123.         GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);
124.         // 解绑Frame Buffer
125.         GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);
126.         // 解绑Render Buffer
127.         GLES20.glBindRenderbuffer(GLES20.GL_RENDERBUFFER, 0);
129.         GLESUtils.checkGlError("prepareFramebuffer done");
130.     }
132.     /**
133.      * 销毁帧缓冲区（FBO）
134.      */
135.     public void destroyFrameBuffers() {
136.         // 删除fbo的纹理
137.         if (mOffscreenTexture > 0) {
138.             GLES20.glDeleteTextures(1, new int[]{mOffscreenTexture}, 0);
139.             mOffscreenTexture = -1;
140.         }
141.         if (mFrameBuffer > 0) {
142.             GLES20.glDeleteFramebuffers(1, new int[]{mFrameBuffer}, 0);
143.             mFrameBuffer = -1;
144.         }
145.         if (mDepthBuffer > 0) {
146.             GLES20.glDeleteRenderbuffers(1, new int[]{mDepthBuffer}, 0);
147.             mDepthBuffer = -1;
148.         }
149.     }
151.     @Override
152.     public void surfaceChanged(int width, int height) {
153.         mWidth = width;
154.         mHeight = height;
155.         if (bindFBO) {
156.             createFrameBuffers(width, height);
157.         }
158.     }
160.     public int draw(int textureId, float[] matrix) {
161.         GLES20.glViewport(0, 0, mWidth, mHeight);
162.         if (bindFBO) {
163.             // 绑定FBO
164.             bindFBO();
165.         }
167.         onDraw(textureId, matrix);
169.         if (bindFBO) {
170.             // 解绑FBO
171.             unBindFBO();
172.             //返回fbo的纹理id
173.             return mOffscreenTexture;
174.         } else {
175.             return textureId;
176.         }
177.     }
179.     @Override
180.     public void release() {
181.         destroyFrameBuffers();
182.     }
183. }

复制代码

FBO示例

1. 灰度图渲染并将结果生存到SD卡

我们想从显存中获取图像数据，OpenGL ES为我们提供了一个接口GLES20.glReadPixels，在图像渲染完后，我们可以通过该API获取图像数据到内存中

1. public static native void glReadPixels(
2.     int x,
3.     int y,
4.     int width,
5.     int height,
6.     int format,
7.     int type,
8.     java.nio.Buffer pixels
9. );

复制代码

这个接口可以获取RGBA原始图像数据，我们可以将他转换为Bitmap，然后Bitmap转为byte[]生存到当地

1. public static byte[] Bitmap2Bytes(Bitmap bm, int compress) {
2.     ByteArrayOutputStream baos = new ByteArrayOutputStream();
3.     bm.compress(Bitmap.CompressFormat.JPEG, compress, baos);
4.     return baos.toByteArray();
5. }
7. private Bitmap readBufferPixelToBitmap(int width, int height) {
8.     ByteBuffer buf = ByteBuffer.allocateDirect(width * height * 4);
9.     buf.order(ByteOrder.LITTLE_ENDIAN);
10.     GLES20.glReadPixels(0, 0, width, height, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, buf);
11.     buf.rewind();
13.     Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
14.     bmp.copyPixelsFromBuffer(buf);
15.     return bmp;
16. }

复制代码

完备的渲染代码如下：

1. static class MyRenderer implements Renderer {
3.     private Context mContext;
4.     private GrayFilter mImageFilter = new GrayFilter();
5.     private int mTextureId;
6.     private Bitmap mBitmap;
8.     private float[] mMVPMatrix = new float[16];
10.     public MyRenderer(Context context) {
11.         mContext = context;
12.         mBitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.girl);
13.         mImageFilter.setBindFBO(true);
14.         Matrix.setIdentityM(mMVPMatrix, 0);
15.     }
17.     @Override
18.     public void onSurfaceCreated(GL10 gl, EGLConfig config) {
19.         Log.i(TAG, "onSurfaceCreated...");
20.         mTextureId = GLESUtils.create2DTexture(mBitmap);
21.         mImageFilter.surfaceCreated();
22.     }
24.     @Override
25.     public void onSurfaceChanged(GL10 gl, int width, int height) {
26.         Log.i(TAG, "onSurfaceChanged...");
27.         mImageFilter.surfaceChanged(mBitmap.getWidth(), mBitmap.getHeight());
28.     }
30.     @Override
31.     public void onDrawFrame(GL10 gl) {
32.         long start = System.currentTimeMillis();
33.         mImageFilter.draw(mTextureId, mMVPMatrix);
34.         Log.i(TAG, "onDrawFrame:" + (System.currentTimeMillis() - start) + "ms");
36.         mImageFilter.bindFBO();
37.         Bitmap resultBitmap = readBufferPixelToBitmap(mBitmap.getWidth(), mBitmap.getHeight());
38.         mImageFilter.unBindFBO();
39.         Log.i(TAG, "readBufferPixelToBitmap:" + (System.currentTimeMillis() - start) + "ms");
41.         byte[] jpgData = Bitmap2Bytes(resultBitmap, 100);
42.         FileUtils.writeFile(mContext.getExternalFilesDir("gles").getAbsolutePath() + File.separator + "gray.jpg", jpgData);
43.     }
45.     @Override
46.     protected void finalize() throws Throwable {
47.         super.finalize();
48.         if (mImageFilter != null) {
49.             mImageFilter.release();
50.         }
51.     }
53.     public static byte[] Bitmap2Bytes(Bitmap bm, int compress) {
54.         ByteArrayOutputStream baos = new ByteArrayOutputStream();
55.         bm.compress(Bitmap.CompressFormat.JPEG, compress, baos);
56.         return baos.toByteArray();
57.     }
59.     private Bitmap readBufferPixelToBitmap(int width, int height) {
60.         ByteBuffer buf = ByteBuffer.allocateDirect(width * height * 4);
61.         buf.order(ByteOrder.LITTLE_ENDIAN);
62.         GLES20.glReadPixels(0, 0, width, height, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, buf);
63.         buf.rewind();
65.         Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
66.         bmp.copyPixelsFromBuffer(buf);
67.         return bmp;
68.     }
69. }

复制代码

  留意：我们在调用glReadPixels前需要绑定FBO否则无法读取到图像，读取完成后解绑FBO
  离开了屏幕渲染，我们利用GPU强大的图像处理能力，通过后台计算导出了图像数据，该灰度图是从SD卡中获取

2. 多种滤镜叠加

假如没有FBO，我们要实现多种滤镜叠加，我们只能把全部的滤镜都写到一个GLSL中，通过流程控制来利用哪些滤镜。而随着代码量的增加，滤镜的增加删除都需要改GLSL这无疑是灾难。
而现在有了FBO，我们可以动态的对这块显存操作，利用不同的滤镜渲染。如许我们可以像链式调用一样，动态的添加删除滤镜。

我们利用了灰度滤镜，亮度滤镜以及将FBO绘制到屏幕上的滤镜

• 起首我们将原图绘制到灰度滤镜的FBO中
  
• 我们将灰度FBO对应纹理作为下一个滤镜的原图传入，将灰度图通过亮度滤镜提亮或变暗
  
• 最后我们将亮度FBO对应纹理进行显示，实现屏幕显示多种滤镜叠加的效果
  

1. private GrayFilter mGrayFilter;
2. private HueFilter mHueFilter;
3. private OriginFilter mOriginFilter;
5. @Override
6. public void onDraw(int textureId, float[] matrix) {
7.     int fboId = mGrayFilter.draw(textureId, MatrixUtils.getOriginalMatrix());
8.     fboId = mHueFilter.draw(fboId, MatrixUtils.getOriginalMatrix());
9.     mOriginFilter.draw(fboId, matrix);
10. }

复制代码

  这里需要留意下：我们GrayFilter、HueFilter内部都拥有本身的FBO。看起来没有题目，假如现在要叠加几十个滤镜，每个滤镜都有本身的FBO，显存会吃不消。
聪明的你应该能想到，只需要存在2个FBO即可实现不限数量的滤镜叠加，一个FBO用于存储上一次渲染的结果，一个FBO存储当前渲染的结果，两个FBO做到正确切换即可。
  多滤镜叠加代码如下：

1. /**
2. * 离屏渲染多种滤镜叠加
3. */
4. public class OverlayFilter extends BaseFilter {
6.     private int mTextureWidth;
7.     private int mTextureHeight;
8.     private GrayFilter mGrayFilter;
9.     private HueFilter mHueFilter;
10.     private OriginFilter mOriginFilter;
12.     public OverlayFilter() {
13.         mGrayFilter = new GrayFilter();
14.         mGrayFilter.setBindFBO(true);
16.         mHueFilter = new HueFilter(new float[]{-0.2f, -0.2f, -0.2f});
17.         mHueFilter.setBindFBO(true);
19.         mOriginFilter = new OriginFilter();
20.     }
22.     @Override
23.     public void setTextureSize(int width, int height) {
24.         mTextureWidth = width;
25.         mTextureHeight = height;
26.         mGrayFilter.setTextureSize(mTextureWidth, mTextureHeight);
27.         mHueFilter.setTextureSize(mTextureWidth, mTextureHeight);
28.     }
30.     @Override
31.     public void surfaceCreated() {
32.         mGrayFilter.surfaceCreated();
33.         mHueFilter.surfaceCreated();
34.         mOriginFilter.surfaceCreated();
35.     }
37.     @Override
38.     public void surfaceChanged(int width, int height) {
39.         super.surfaceChanged(width, height);
40.         mGrayFilter.surfaceChanged(mTextureWidth, mTextureHeight);
41.         mHueFilter.surfaceChanged(mTextureWidth, mTextureHeight);
42.         mOriginFilter.surfaceChanged(width, height);
43.     }
45.     @Override
46.     public void onDraw(int textureId, float[] matrix) {
47.         int fboId = mGrayFilter.draw(textureId, MatrixUtils.getOriginalMatrix());
48.         fboId = mHueFilter.draw(fboId, MatrixUtils.getOriginalMatrix());
49.         mOriginFilter.draw(fboId, matrix);
50.     }
52.     @Override
53.     public void release() {
54.         super.release();
55.         mGrayFilter.release();
56.         mHueFilter.release();
57.         mOriginFilter.release();
58.     }
59. }

复制代码

灰度图+变暗两种效果叠加效果图
最后

该章节我们学习了OpenGL ES的一种高端技术离屏渲染，我们可以不依赖屏幕就能做到对图像进行后台渲染，他比直接渲染到屏幕更加高效，也为我们深入利用OpenGL ES提供了新思路，新方法。
OpenGL ES系列：https://github.com/xiaozhi003/AndroidOpenGLDemo.git，假如对你有资助可以star下，万分感谢^_^

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。