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

小智003
438 阅读11分钟

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

引言

之前的章节我们使用OpenGL ES绘制图形然后显示到屏幕上，貌似看着并没有什么问题。

如果我们现在不想显示到屏幕中，但还想利用OpenGL ES对图像的强大处理能力那又该如何是好？抑或我们上一节学习到的图片滤镜，真实的情况需要多个滤镜叠加使用，把所有的滤镜都放到一个着色器中似乎不是一种优秀的编程模式。

上面提到问题，接下来我们会给出答案。

什么是FBO

FBO（Frame Buffer Object）即帧缓冲区对象，实际上是一个可添加缓冲区的容器，可以为其添加纹理或渲染缓冲区对象（RBO）。

FBO可以让我们的渲染不渲染到屏幕上，而是渲染到离屏Buffer中。可以理解为将OpenGL ES绘制的图像内容输出到一块内存中，而我们可以对这块内存进行多次绘制。当然这块内存中的数据也可保存到本地SD卡中，也可重新绘制到屏幕上用于显示。

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

640.webp

FBO优点

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

FBO怎么用

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

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

1. 创建FBO

创建FBO基本步骤是：

  • 创建2D纹理（颜色缓冲区）
  • 创建帧缓冲区
  • 创建深度缓冲区
  • 将纹理和深度缓冲区附着到帧缓冲区上
/**
 * 创建帧缓冲区（FBO）
 *
 * @param width
 * @param height
 */
public void createFrameBuffers(int width, int height) {
    if (mFrameBuffer > 0) {
        destroyFrameBuffers();
    }
    // 1.创建一个纹理对象并绑定它，这将是颜色缓冲区。
    int[] values = new int[1];
    GLES20.glGenTextures(1, values, 0);
    GLESUtils.checkGlError("glGenTextures");
    mOffscreenTexture = values[0];
    GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mOffscreenTexture);
    GLESUtils.checkGlError("glBindTexture " + mOffscreenTexture);

    // 2.创建纹理存储对象
    GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA, width, height,
            0, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, null);

    // 3.设置参数。我们可能正在使用二维的非幂函数，所以某些值可能无法使用。
    // 设置缩小过滤为使用纹理中坐标最接近的一个像素的颜色作为需要绘制的像素颜色
    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);
    //设置环绕方向S，截取纹理坐标到[1/2n,1-1/2n]。将导致永远不会与border融合
    GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE);
    //设置环绕方向T，截取纹理坐标到[1/2n,1-1/2n]。将导致永远不会与border融合
    GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE);
    GLESUtils.checkGlError("glTexParameter");

    // 4.创建帧缓冲区对象并将其绑定
    GLES20.glGenFramebuffers(1, values, 0);
    GLESUtils.checkGlError("glGenFramebuffers");
    mFrameBuffer = values[0];    // expected > 0
    GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, mFrameBuffer);
    GLESUtils.checkGlError("glBindFramebuffer " + mFrameBuffer);

    // 5.创建深度缓冲区并绑定它
    GLES20.glGenRenderbuffers(1, values, 0);
    GLESUtils.checkGlError("glGenRenderbuffers");
    mDepthBuffer = values[0];    // expected > 0
    GLES20.glBindRenderbuffer(GLES20.GL_RENDERBUFFER, mDepthBuffer);
    GLESUtils.checkGlError("glBindRenderbuffer " + mDepthBuffer);

    // 为深度缓冲区分配存储空间。
    GLES20.glRenderbufferStorage(GLES20.GL_RENDERBUFFER, GLES20.GL_DEPTH_COMPONENT16, width, height);
    GLESUtils.checkGlError("glRenderbufferStorage");

    // 6.将深度缓冲区和纹理（颜色缓冲区）附着到帧缓冲区对象
    GLES20.glFramebufferRenderbuffer(GLES20.GL_FRAMEBUFFER, GLES20.GL_DEPTH_ATTACHMENT,
            GLES20.GL_RENDERBUFFER, mDepthBuffer);
    GLESUtils.checkGlError("glFramebufferRenderbuffer");
    GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0,
            GLES20.GL_TEXTURE_2D, mOffscreenTexture, 0);
    GLESUtils.checkGlError("glFramebufferTexture2D");

    // 检查是否一切正常
    int status = GLES20.glCheckFramebufferStatus(GLES20.GL_FRAMEBUFFER);
    if (status != GLES20.GL_FRAMEBUFFER_COMPLETE) {
        throw new RuntimeException("Framebuffer not complete, status=" + status);
    }

    // 解绑纹理
    GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);
    // 解绑Frame Buffer
    GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);
    // 解绑Render Buffer
    GLES20.glBindRenderbuffer(GLES20.GL_RENDERBUFFER, 0);

    GLESUtils.checkGlError("prepareFramebuffer done");
}

2. 渲染到FBO

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

public int draw(int textureId, float[] matrix) {
    GLES20.glViewport(0, 0, mWidth, mHeight);
    if (bindFBO) {
        // 绑定FBO
        GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, mFrameBuffer);
    }

    onDraw(textureId, matrix);

    if (bindFBO) {
        // 解绑FBO
        GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);
        //返回fbo的纹理id
        return mOffscreenTexture;
    } else {
        return textureId;
    }
}

3. 释放FBO

/**
 * 销毁帧缓冲区（FBO）
 */
public void destroyFrameBuffers() {
    // 删除fbo的纹理
    if (mOffscreenTexture > 0) {
        GLES20.glDeleteTextures(1, new int[]{mOffscreenTexture}, 0);
        mOffscreenTexture = -1;
    }
    if (mFrameBuffer > 0) {
        GLES20.glDeleteFramebuffers(1, new int[]{mFrameBuffer}, 0);
        mFrameBuffer = -1;
    }
    if (mDepthBuffer > 0) {
        GLES20.glDeleteRenderbuffers(1, new int[]{mDepthBuffer}, 0);
        mDepthBuffer = -1;
    }
}

完整代码

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

先定义个接口如下：

public interface AFilter {

    void setTextureSize(int width, int height);

    void setFrameBuffer(int frameBuffer);

    int getFrameBuffer();

    int getOffscreenTexture();

    void setBindFBO(boolean bindFBO);

    void bindFBO();

    void unBindFBO();

    void surfaceCreated();

    void surfaceChanged(int width, int height);

    int draw(int textureId, float[] matrix);

    void onDraw(int textureId, float[] matrix);

    void release();
}

抽象类中实现FBO功能：

/**
 * 滤镜效果抽象类
 */
public abstract class BaseFilter implements AFilter {

    /**
     * 离屏渲染纹理id
     */
    private int mOffscreenTexture = -1;
    /**
     * 帧缓冲区
     */
    private int mFrameBuffer = -1;
    /**
     * 深度缓冲区
     */
    private int mDepthBuffer = -1;
    /**
     * 是否使用离屏渲染
     */
    protected boolean bindFBO;
    private int mWidth;
    private int mHeight;

    @Override
    public void setBindFBO(boolean bindFBO) {
        this.bindFBO = bindFBO;
    }

    @Override
    public void setFrameBuffer(int frameBuffer) {
        mFrameBuffer = frameBuffer;
    }

    @Override
    public int getFrameBuffer() {
        return mFrameBuffer;
    }

    @Override
    public int getOffscreenTexture() {
        return mOffscreenTexture;
    }

    @Override
    public void bindFBO() {
        if (mFrameBuffer > 0) {
            GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, mFrameBuffer);
        }
    }

    @Override
    public void unBindFBO() {
        GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);
    }

    /**
     * 创建帧缓冲区（FBO）
     *
     * @param width
     * @param height
     */
    public void createFrameBuffers(int width, int height) {
        if (mFrameBuffer > 0) {
            destroyFrameBuffers();
        }
        // 1.创建一个纹理对象并绑定它，这将是颜色缓冲区。
        int[] values = new int[1];
        GLES20.glGenTextures(1, values, 0);
        GLESUtils.checkGlError("glGenTextures");
        mOffscreenTexture = values[0];
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mOffscreenTexture);
        GLESUtils.checkGlError("glBindTexture " + mOffscreenTexture);

        // 2.创建纹理存储对象
        GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA, width, height,
                0, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, null);

        // 3.设置参数。我们可能正在使用二维的非幂函数，所以某些值可能无法使用。
        // 设置缩小过滤为使用纹理中坐标最接近的一个像素的颜色作为需要绘制的像素颜色
        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);
        //设置环绕方向S，截取纹理坐标到[1/2n,1-1/2n]。将导致永远不会与border融合
        GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE);
        //设置环绕方向T，截取纹理坐标到[1/2n,1-1/2n]。将导致永远不会与border融合
        GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE);
        GLESUtils.checkGlError("glTexParameter");

        // 4.创建帧缓冲区对象并将其绑定
        GLES20.glGenFramebuffers(1, values, 0);
        GLESUtils.checkGlError("glGenFramebuffers");
        mFrameBuffer = values[0];    // expected > 0
        GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, mFrameBuffer);
        GLESUtils.checkGlError("glBindFramebuffer " + mFrameBuffer);

        // 5.创建深度缓冲区并绑定它
        GLES20.glGenRenderbuffers(1, values, 0);
        GLESUtils.checkGlError("glGenRenderbuffers");
        mDepthBuffer = values[0];    // expected > 0
        GLES20.glBindRenderbuffer(GLES20.GL_RENDERBUFFER, mDepthBuffer);
        GLESUtils.checkGlError("glBindRenderbuffer " + mDepthBuffer);

        // 为深度缓冲区分配存储空间。
        GLES20.glRenderbufferStorage(GLES20.GL_RENDERBUFFER, GLES20.GL_DEPTH_COMPONENT16, width, height);
        GLESUtils.checkGlError("glRenderbufferStorage");

        // 6.将深度缓冲区和纹理（颜色缓冲区）附着到帧缓冲区对象
        GLES20.glFramebufferRenderbuffer(GLES20.GL_FRAMEBUFFER, GLES20.GL_DEPTH_ATTACHMENT,
                GLES20.GL_RENDERBUFFER, mDepthBuffer);
        GLESUtils.checkGlError("glFramebufferRenderbuffer");
        GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0,
                GLES20.GL_TEXTURE_2D, mOffscreenTexture, 0);
        GLESUtils.checkGlError("glFramebufferTexture2D");

        // 检查是否一切正常
        int status = GLES20.glCheckFramebufferStatus(GLES20.GL_FRAMEBUFFER);
        if (status != GLES20.GL_FRAMEBUFFER_COMPLETE) {
            throw new RuntimeException("Framebuffer not complete, status=" + status);
        }

        // 解绑纹理
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);
        // 解绑Frame Buffer
        GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);
        // 解绑Render Buffer
        GLES20.glBindRenderbuffer(GLES20.GL_RENDERBUFFER, 0);

        GLESUtils.checkGlError("prepareFramebuffer done");
    }

    /**
     * 销毁帧缓冲区（FBO）
     */
    public void destroyFrameBuffers() {
        // 删除fbo的纹理
        if (mOffscreenTexture > 0) {
            GLES20.glDeleteTextures(1, new int[]{mOffscreenTexture}, 0);
            mOffscreenTexture = -1;
        }
        if (mFrameBuffer > 0) {
            GLES20.glDeleteFramebuffers(1, new int[]{mFrameBuffer}, 0);
            mFrameBuffer = -1;
        }
        if (mDepthBuffer > 0) {
            GLES20.glDeleteRenderbuffers(1, new int[]{mDepthBuffer}, 0);
            mDepthBuffer = -1;
        }
    }

    @Override
    public void surfaceChanged(int width, int height) {
        mWidth = width;
        mHeight = height;
        if (bindFBO) {
            createFrameBuffers(width, height);
        }
    }

    public int draw(int textureId, float[] matrix) {
        GLES20.glViewport(0, 0, mWidth, mHeight);
        if (bindFBO) {
            // 绑定FBO
            bindFBO();
        }

        onDraw(textureId, matrix);

        if (bindFBO) {
            // 解绑FBO
            unBindFBO();
            //返回fbo的纹理id
            return mOffscreenTexture;
        } else {
            return textureId;
        }
    }

    @Override
    public void release() {
        destroyFrameBuffers();
    }
}

FBO示例

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

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

public static native void glReadPixels(
    int x,
    int y,
    int width,
    int height,
    int format,
    int type,
    java.nio.Buffer pixels
);

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

public static byte[] Bitmap2Bytes(Bitmap bm, int compress) {
    ByteArrayOutputStream baos = new ByteArrayOutputStream();
    bm.compress(Bitmap.CompressFormat.JPEG, compress, baos);
    return baos.toByteArray();
}

private Bitmap readBufferPixelToBitmap(int width, int height) {
    ByteBuffer buf = ByteBuffer.allocateDirect(width * height * 4);
    buf.order(ByteOrder.LITTLE_ENDIAN);
    GLES20.glReadPixels(0, 0, width, height, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, buf);
    buf.rewind();

    Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    bmp.copyPixelsFromBuffer(buf);
    return bmp;
}

完整的渲染代码如下：

static class MyRenderer implements Renderer {

    private Context mContext;
    private GrayFilter mImageFilter = new GrayFilter();
    private int mTextureId;
    private Bitmap mBitmap;

    private float[] mMVPMatrix = new float[16];

    public MyRenderer(Context context) {
        mContext = context;
        mBitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.girl);
        mImageFilter.setBindFBO(true);
        Matrix.setIdentityM(mMVPMatrix, 0);
    }

    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig config) {
        Log.i(TAG, "onSurfaceCreated...");
        mTextureId = GLESUtils.create2DTexture(mBitmap);
        mImageFilter.surfaceCreated();
    }

    @Override
    public void onSurfaceChanged(GL10 gl, int width, int height) {
        Log.i(TAG, "onSurfaceChanged...");
        mImageFilter.surfaceChanged(mBitmap.getWidth(), mBitmap.getHeight());
    }

    @Override
    public void onDrawFrame(GL10 gl) {
        long start = System.currentTimeMillis();
        mImageFilter.draw(mTextureId, mMVPMatrix);
        Log.i(TAG, "onDrawFrame:" + (System.currentTimeMillis() - start) + "ms");

        mImageFilter.bindFBO();
        Bitmap resultBitmap = readBufferPixelToBitmap(mBitmap.getWidth(), mBitmap.getHeight());
        mImageFilter.unBindFBO();
        Log.i(TAG, "readBufferPixelToBitmap:" + (System.currentTimeMillis() - start) + "ms");

        byte[] jpgData = Bitmap2Bytes(resultBitmap, 100);
        FileUtils.writeFile(mContext.getExternalFilesDir("gles").getAbsolutePath() + File.separator + "gray.jpg", jpgData);
    }

    @Override
    protected void finalize() throws Throwable {
        super.finalize();
        if (mImageFilter != null) {
            mImageFilter.release();
        }
    }

    public static byte[] Bitmap2Bytes(Bitmap bm, int compress) {
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        bm.compress(Bitmap.CompressFormat.JPEG, compress, baos);
        return baos.toByteArray();
    }

    private Bitmap readBufferPixelToBitmap(int width, int height) {
        ByteBuffer buf = ByteBuffer.allocateDirect(width * height * 4);
        buf.order(ByteOrder.LITTLE_ENDIAN);
        GLES20.glReadPixels(0, 0, width, height, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, buf);
        buf.rewind();

        Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        bmp.copyPixelsFromBuffer(buf);
        return bmp;
    }
}

注意：我们在调用glReadPixels前需要绑定FBO否则无法读取到图像，读取完成后解绑FBO

脱离了屏幕渲染，我们利用GPU强大的图像处理能力，通过后台计算导出了图像数据，该灰度图是从SD卡中获取

gray_girl.jpg

2. 多种滤镜叠加

如果没有FBO，我们要实现多种滤镜叠加，我们只能把所有的滤镜都写到一个GLSL中，通过流程控制来使用哪些滤镜。而随着代码量的增加，滤镜的增加删除都需要改GLSL这无疑是灾难。

而现在有了FBO，我们可以动态的对这块显存操作，使用不同的滤镜渲染。这样我们可以像链式调用一样，动态的添加删除滤镜。

FBO.png

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

  1. 首先我们将原图绘制到灰度滤镜的FBO中
  2. 我们将灰度FBO对应纹理作为下一个滤镜的原图传入，将灰度图通过亮度滤镜提亮或变暗
  3. 最后我们将亮度FBO对应纹理进行显示，实现屏幕显示多种滤镜叠加的效果
private GrayFilter mGrayFilter;
private HueFilter mHueFilter;
private OriginFilter mOriginFilter;

@Override
public void onDraw(int textureId, float[] matrix) {
    int fboId = mGrayFilter.draw(textureId, MatrixUtils.getOriginalMatrix());
    fboId = mHueFilter.draw(fboId, MatrixUtils.getOriginalMatrix());
    mOriginFilter.draw(fboId, matrix);
}

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

多滤镜叠加代码如下：

/**
 * 离屏渲染多种滤镜叠加
 */
public class OverlayFilter extends BaseFilter {

    private int mTextureWidth;
    private int mTextureHeight;
    private GrayFilter mGrayFilter;
    private HueFilter mHueFilter;
    private OriginFilter mOriginFilter;

    public OverlayFilter() {
        mGrayFilter = new GrayFilter();
        mGrayFilter.setBindFBO(true);

        mHueFilter = new HueFilter(new float[]{-0.2f, -0.2f, -0.2f});
        mHueFilter.setBindFBO(true);

        mOriginFilter = new OriginFilter();
    }

    @Override
    public void setTextureSize(int width, int height) {
        mTextureWidth = width;
        mTextureHeight = height;
        mGrayFilter.setTextureSize(mTextureWidth, mTextureHeight);
        mHueFilter.setTextureSize(mTextureWidth, mTextureHeight);
    }

    @Override
    public void surfaceCreated() {
        mGrayFilter.surfaceCreated();
        mHueFilter.surfaceCreated();
        mOriginFilter.surfaceCreated();
    }

    @Override
    public void surfaceChanged(int width, int height) {
        super.surfaceChanged(width, height);
        mGrayFilter.surfaceChanged(mTextureWidth, mTextureHeight);
        mHueFilter.surfaceChanged(mTextureWidth, mTextureHeight);
        mOriginFilter.surfaceChanged(width, height);
    }

    @Override
    public void onDraw(int textureId, float[] matrix) {
        int fboId = mGrayFilter.draw(textureId, MatrixUtils.getOriginalMatrix());
        fboId = mHueFilter.draw(fboId, MatrixUtils.getOriginalMatrix());
        mOriginFilter.draw(fboId, matrix);
    }

    @Override
    public void release() {
        super.release();
        mGrayFilter.release();
        mHueFilter.release();
        mOriginFilter.release();
    }
}

8.jpg

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

最后

该章节我们学习了OpenGL ES的一种高端技术离屏渲染，我们可以不依赖屏幕就能做到对图像进行后台渲染，他比直接渲染到屏幕更加高效，也为我们深入使用OpenGL ES提供了新思路，新方法。

OpenGL ES系列：github.com/xiaozhi003/…，如果对你有帮助可以star下，万分感谢^_^

avatar
文章
阅读
粉丝