学习OpenGL ES for Android（二十二）— 帧缓冲

「爱情、让人受尽委屈。」 2023-06-30 02:51 14阅读 0赞

我们学过的颜色缓冲，深度缓冲已经模板缓冲结合起来就叫帧缓冲。默认系统会定义一个帧缓冲（在移动端就是EGL创建的），而且我们还可以创建自定义的帧缓冲来替代系统创建的。大概的步骤如下：

1.  创建一个帧缓冲并绑定；
2.  正常绘制我们的图像（此时绘制的图像会绘制到自定义的帧缓冲上）；
3.  重新绑定到系统帧缓冲上；
4.  绘制我们自定义帧缓冲的内容（此时我们可以对帧缓冲的内容进行各种处理以此实现各种效果）。

创建帧缓冲非常简单，使用以下方法

> glGenFramebuffers( int n, int\[\] framebuffers, int offset )：n表示数量（通常是1）；framebuffers用于存储创建后的帧缓冲；offset：偏移量；默认情况下我们只需要创建一个自定义的帧缓冲就可以了。

之后我们可以使用glBindFramebuffer( int target, int framebuffer )来绑定到自定义的帧缓冲；target必须是GLES20.GL\_FRAMEBUFFER；framebuffer就是我们创建好的帧缓冲。

之后我们需要附加至少一个缓冲（颜色、深度或模板缓冲），至少有一个颜色附件(Attachment)。我们最常用的是纹理附件，我们绘制的结果会存储在一个纹理图像内，可以方便的使用和处理它。创建一个纹理附件和生成一个纹理非常相似，但是它不是使用GLUtils.texImage2D生成纹理，而是使用GLES20.glTexImage2D创建一个用来存储我们需要绘制的结果。我们把创建帧缓冲的过程封装一下，代码如下

public static int[] createFrameBuffer(int width, int height) {
            int[] values = new int[1];
            // 纹理缓冲
            GLES20.glGenTextures(1, values, 0);
            int mOffscreenTexture = values[0];   // expected > 0
            GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mOffscreenTexture);
    
            // 创建纹理存储。
            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_MIN_FILTER,
                    GLES20.GL_NEAREST);
            GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER,
                    GLES20.GL_LINEAR);
            GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S,
                    GLES20.GL_CLAMP_TO_EDGE);
            GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T,
                    GLES20.GL_CLAMP_TO_EDGE);
    
            // 自定义帧缓冲
            GLES20.glGenFramebuffers(1, values, 0);
            int mFramebuffer = values[0];    // expected > 0
            GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, mFramebuffer);
    
            // 深度缓冲
            GLES20.glGenRenderbuffers(1, values, 0);
            int mDepthBuffer = values[0];    // expected > 0
            GLES20.glBindRenderbuffer(GLES20.GL_RENDERBUFFER, mDepthBuffer);
    
            // 为深度缓冲区分配存储空间。
            GLES20.glRenderbufferStorage(GLES20.GL_RENDERBUFFER, GLES20.GL_DEPTH_COMPONENT16,
                    width, height);
    
            // 将深度缓冲区和纹理（颜色缓冲区）附加到帧缓冲区对象。
            GLES20.glFramebufferRenderbuffer(GLES20.GL_FRAMEBUFFER, GLES20.GL_DEPTH_ATTACHMENT,
                    GLES20.GL_RENDERBUFFER, mDepthBuffer);
            GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0,
                    GLES20.GL_TEXTURE_2D, mOffscreenTexture, 0);
    
            // 判断是否创建成功
            int status = GLES20.glCheckFramebufferStatus(GLES20.GL_FRAMEBUFFER);
            if (status != GLES20.GL_FRAMEBUFFER_COMPLETE) {
                // 未创建成功
                throw new RuntimeException("Framebuffer not complete, status=" + status);
            }
            // 切换到默认缓冲
            GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);
    
            return new int[]{mOffscreenTexture, mFramebuffer, mDepthBuffer};
        }

代码中的glBindRenderbuffer是创建一个渲染缓冲区，使用glFramebufferRenderbuffer和帧缓冲绑定之后，可以减少内存的浪费。

下面是使用帧缓冲的绘制流程关键代码

@Override
        public void onDrawFrame(GL10 gl) {
            int[] result = OpenGLUtil.createFrameBuffer(disWidth, disHeight);
            frameBufferTexture = result[0];
            frameBuffer = result[1];
            renderBuffer = result[2];
            // 绑定到我们自定义的帧缓冲
            GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, frameBuffer);
            super.onDrawFrame(gl);
    
            drawFloor();
            drawCube();
    
            // 重新绑定到系统的帧缓冲
            GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);
            GLES20.glDisable(GLES20.GL_DEPTH_TEST);
            GLES20.glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
            GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);
            // 绘制我们自定义帧缓冲的内容
            drawFrameBuffers();
    
            release();
        }

我们绘制了地板和两个箱子，不做任何处理的情况下显示效果如下，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg_size_16_color_FFFFFF_t_70][]

就像我们把两张图片合成了一张然后再显示。然后我们可以对“合成后的图像”进行各种后期处理了。

**反相效果**，我们用1减去颜色即可，修改着色器代码

……
    main(){
        vec4 tex = texture2D(texture, TextCoord);
        gl_FragColor = vec4(vec3(1.0 - tex.rgb), 1.0);
    }

显示效果如下，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg_size_16_color_FFFFFF_t_70 1][]

**灰度**：移除场景中除了黑白灰以外所有的颜色，让整个图像灰度化(Grayscale)。正常情况对颜色值平均值即可，也可以用加权来处理。虽然可能看不出差别，但是在一些更复杂的情况下效果会比较好。着色器代码如下，

……
    void main() {
        vec4 tex = texture2D(texture, TextCoord);
        float average = (tex.r + tex.g + tex.b) / 3.0;
        // 加权
        //float average = 0.2126 * tex.r + 0.7152 * tex.g + 0.0722 * tex.b;
        gl_FragColor = vec4(average, average, average, 1.0);
    }

显示效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg_size_16_color_FFFFFF_t_70 2][]

**核效果，模糊和边缘检测**：这三种效果都是需要一个核(Kernel)的数组，它类似矩阵，需要当前像素点和它周围八个像素点的处理效果，当然还需要这些像素点的坐标位置offsets。在这里我们在java中处理好数据后再传入到着色器中，减小着色器的计算压力。修改后的着色器代码

……
    uniform float kernel[9];
    uniform vec2 offsets[9];
    
    void main() {
        vec4 sum = vec4(0.0);
        for (int i = 0; i < 9; i++){
            vec4 texc = texture2D(texture, TextCoord + offsets[i]);
            sum += texc * kernel[i];
        }
        gl_FragColor = sum;
    }

这些显示效果如下

当然我们还可以只在指定的范围内做处理，在其他范围内不做处理。

关于帧缓冲更详细的内容可以参考[https://learnopengl-cn.github.io/04%20Advanced%20OpenGL/05%20Framebuffers/][https_learnopengl-cn.github.io_04_20Advanced_20OpenGL_05_20Framebuffers]，本章源码[https://github.com/jklwan/OpenGLProject/blob/master/sample/src/main/java/com/chends/opengl/renderer/advanced/opengl/FrameBuffersRenderer.java][https_github.com_jklwan_OpenGLProject_blob_master_sample_src_main_java_com_chends_opengl_renderer_advanced_opengl_FrameBuffersRenderer.java]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200114194042535.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200114194252578.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200114194936670.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg==,size_16,color_FFFFFF,t_70
[https_learnopengl-cn.github.io_04_20Advanced_20OpenGL_05_20Framebuffers]: https://learnopengl-cn.github.io/04%20Advanced%20OpenGL/05%20Framebuffers/
[https_github.com_jklwan_OpenGLProject_blob_master_sample_src_main_java_com_chends_opengl_renderer_advanced_opengl_FrameBuffersRenderer.java]: https://github.com/jklwan/OpenGLProject/blob/master/sample/src/main/java/com/chends/opengl/renderer/advanced/opengl/FrameBuffersRenderer.java