OpenGLES-之FBO渲染到纹理细节

首先什么是FBO：

FBO(frame buffer object)，即帧缓冲区对象，在Android中，绘制三角形一般都是直接重写GLSurfaceView，因为Android已经集成好了OpenGLES的环境，渲染操作都是在默认的帧缓冲去做的，这个帧缓冲是我们在创建一个Surface的时候自动创建的，但这仅限于demo级别，实际应用中，如果我们需要渲染到纹理，往往不使用窗口系统默认提供的帧缓冲区域，需要自己创建了。

很好，上面不仅仅介绍了FBO的概念还介绍了另一个知识点也就是，默认的时候都是在默认的帧缓冲去做的，也就是默认渲染到屏幕的缓冲区，这也就说明了一个问题，为什么我们上一篇介绍渲染贴图的时候不需要FBO也能渲染出图片了

其次为什么要使用帧缓冲？

之前绘制使用的纹理都是使用图片加载得到的纹理，如果我们要对纹理在着色器中做一些处理，模糊、虚化、双屏、镜子等特效，那么使用帧缓冲可以很好的实现。此外，帧缓冲提供了一个很高效的机制，它能够快速的分离和附着纹理或渲染缓冲对象，这比在帧缓冲之间切换要快得多。
简单来讲就是如果你需要对纹理在着色器做一些处理以后再渲染的话，那么使用FBO就可以派上用场了

FBO的渲染挂载点是什么？：

首先FBO是一个容器，自身不能用于渲染，需要与一些可渲染的缓冲区绑定在一起，像纹理或者渲染缓冲区。Render Buffer Object（RBO）即为渲染缓冲对象，分为color buffer(颜色)、depth buffer(深度)、stencil buffer(模板)。

我们今天不讲RBO，我们今天的主题是FBO与纹理的使用也就是渲染到纹理的功能，Demo中不会对于图片做二期处理，只是演示最简单的FBO渲染到纹理的使用。

说一下大致的步骤：

生成FrameBuffer
生成Texture
1.绑定纹理缓存到纹理单元
2.设置采样，拉伸方式
3.指定纹理图片生成2D纹理
4.解除绑定
绑定framebuffer
挂载textureID到framebufferId
解除Framebuffer绑定
渲染到纹理

贴上代码如下：

    public void draw(float[] mvpMatrix, float[] mMatrix) {

        GLES20.glClear(GLES20.GL_DEPTH_BUFFER_BIT | GLES20.GL_COLOR_BUFFER_BIT);

        Bitmap bitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.texture1);
        // 生成FrameBuffer
        int [] framebuffers = new int[1];
        GLES20.glGenFramebuffers(1, framebuffers, 0);
        // 生成Texture
        int [] textures = new int[2];
        GLES20.glGenTextures(2, textures, 0);
        int colorTxtureId = textures[1];
        mLoadedTextureId = textures[0];


        //绑定纹理缓存到纹理单元
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mLoadedTextureId);
        //设置采样，拉伸方式
        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.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S,GLES20.GL_MIRRORED_REPEAT);
        GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T,GLES20.GL_MIRRORED_REPEAT);
        //指定纹理图片生成2D纹理
        GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);
        //释放bitmap
        bitmap.recycle();
        //解除绑定
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);

        //绑定纹理缓存到纹理单元
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, colorTxtureId);
        //设置采样，拉伸方式
        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.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S,GLES20.GL_MIRRORED_REPEAT);
        GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T,GLES20.GL_MIRRORED_REPEAT);

        GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGB, FBORenderer.sScreenWidth, FBORenderer.sScreenHeight,0, GLES20.GL_RGB, GLES20.GL_UNSIGNED_SHORT_5_6_5, null);

        //绑定framebuffer
        int framebufferId = framebuffers[0];
        GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, framebufferId);
        //挂载textureID到framebufferId
        GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0, GLES20.GL_TEXTURE_2D, colorTxtureId, 0);

        if (GLES20.glCheckFramebufferStatus(GLES20.GL_FRAMEBUFFER)== GLES20.GL_FRAMEBUFFER_COMPLETE) {
            Log.e("shapefbo", "glFramebufferTexture2D error");
        }

        int frameBufferVertexShader = loaderShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode);
        int frameBufferFagmentShader = loaderShader(GLES20.GL_FRAGMENT_SHADER, fragmentShaderCode);

        //解除绑定
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);

        mFrameBufferProgram = GLES20.glCreateProgram();
        GLES20.glAttachShader(mFrameBufferProgram, frameBufferVertexShader);
        GLES20.glAttachShader(mFrameBufferProgram, frameBufferFagmentShader);
        GLES20.glLinkProgram(mFrameBufferProgram);
        GLES20.glUseProgram(mFrameBufferProgram);
        int positionHandle1 = GLES20.glGetAttribLocation(mFrameBufferProgram, "aPosition");
        int textureCoordHandle1 = GLES20.glGetAttribLocation(mFrameBufferProgram, "aTextureCoord");
        int textureHandle1 = GLES20.glGetUniformLocation(mFrameBufferProgram, "uTexture");
        mSqureBufferfbo.position(0);
        GLES20.glVertexAttribPointer(positionHandle1, 2, GLES20.GL_FLOAT, false, (2+2) * 4, mSqureBufferfbo);
        mSqureBufferfbo.position(2);
        GLES20.glVertexAttribPointer(textureCoordHandle1, 2, GLES20.GL_FLOAT, false, (2+2) * 4, mSqureBufferfbo);
        GLES20.glEnableVertexAttribArray(positionHandle1);
        GLES20.glEnableVertexAttribArray(textureCoordHandle1);

        GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mLoadedTextureId);
        GLES20.glUniform1i(textureHandle1, 0);
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);
        GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER,0);



        Bitmap bitmap1 = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.pic);
        //绑定纹理缓存到纹理单元
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mLoadedTextureId);
        //设置采样，拉伸方式
        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.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S,GLES20.GL_MIRRORED_REPEAT);
        GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T,GLES20.GL_MIRRORED_REPEAT);
        //指定纹理图片生成2D纹理
        GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap1, 0);
        //释放bitmap
        bitmap.recycle();
        //解除绑定
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);


        GLES20.glActiveTexture(GLES20.GL_TEXTURE1);
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, colorTxtureId);
        GLES20.glUniform1i(textureHandle1, 1);
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);

        GLES20.glDeleteTextures(2, textures, 0);
        GLES20.glDeleteFramebuffers(1, framebuffers, 0);
    }

首先清楚缓存 GLES20.glClear(GLES20.GL_DEPTH_BUFFER_BIT | GLES20.GL_COLOR_BUFFER_BIT); 这个就不说了，其次生成一个framebuffer 与两个纹理贴图，一个用来绑定framebuffer渲染到纹理，另一个用来做渲染

// 生成FrameBuffer
        int [] framebuffers = new int[1];
        GLES20.glGenFramebuffers(1, framebuffers, 0);
        // 生成Texture
        int [] textures = new int[2];
        GLES20.glGenTextures(2, textures, 0);
        int colorTxtureId = textures[1];
        mLoadedTextureId = textures[0];

然后用来渲染的纹理mLoadedTextureId指定了纹理图片生成2D纹理bitmap，再指定framebuffer渲染到纹理的采样方式，最后面绑定framebuffer再把纹理colorTxtureId挂载到framebufferId

        GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, framebufferId);
        //挂载textureID到framebufferId
        GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0, GLES20.GL_TEXTURE_2D, colorTxtureId, 0);

有了上面第一句话，渲染的默认缓冲区就不是屏幕了，而是生成的framebuffer，最后面开始绘制

        GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mLoadedTextureId);
        GLES20.glUniform1i(textureHandle1, 0);
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);

这个时候就是framebuffer渲染到纹理了，最后面解绑Framebuffer

GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER,0);

这句话很重要，一定要解绑才能把缓冲区再次切换成默认缓冲区也即是屏幕。

然后下面是我自己加的步骤，为了是这个实验更加清晰，首先我加了在原来的纹理对象mLoadedTextureId中再绑定了bitmap1图像，这样做是为了区分mLoadedTextureId的纹理渲染效果以及Framebuffer的渲染到纹理的效果，最后面得到渲染到Framebuffer的纹理colorTxtureId，使用它可以把这个纹理贴图最后再次绘制到屏幕上去

        GLES20.glActiveTexture(GLES20.GL_TEXTURE1);
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, colorTxtureId);
        GLES20.glUniform1i(textureHandle1, 1);
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);

看结果你就会知道这个时候绘制的还是bitmap这个图片，如果想显示bitmap1图片那么就是用mLoadedTextureId纹理就可以了

        GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mLoadedTextureId);
        GLES20.glUniform1i(textureHandle1, 0);
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);

这就说明了绑定了Framebuffer的图片渲染并没有直接渲染到屏幕而是渲染到了Framebuffer挂载的纹理上面，最后面利用这个纹理在屏幕缓冲区中还可以显示出来

其实FBO还有一种用法就是利用 GLES20.glReadPixels 去获取到缓冲区的数据了，当然这个要看你的实际场景了

好了<OpenGLES-之FBO渲染到纹理细节>就介绍到这里了，希望能帮助到大家理解FBO的使用，如果有什么疑问欢迎小伙伴给我留言😁···