OpenGL纹理转换谜团:纹理写入FRAMEBUFFER后的镜像现象

在OpenGL中,最近将一个 GL_TEXTURE_2D 纹理写入GL_FRAMEBUFFER ,然后从GL_FRAMEBUFFER读取GL_TEXTURE_2D纹理后,发现GL_TEXTURE_2D纹理变为了输入纹理的镜像纹理。效果图如下图所示。

本文将探讨这个问题的原因,并提出两种解决方案。

一、纹理写入帧缓冲

  • OpenGL中,我们通常使用以下API将纹理ID绑定到FRAMEBUFFER的颜色缓冲区
java 复制代码
GLES30.glBindFramebuffer(GLES30.GL_FRAMEBUFFER, frameBufferId);  
GLES30.glFramebufferTexture2D(GLES30.GL_FRAMEBUFFER, GLES30.GL_COLOR_ATTACHMENT0, GLES30.GL_TEXTURE_2D, tex2DId, 0);
  • GL_TEXTURE_2D纹理渲染FRAMEBUFFER帧缓冲区中;
java 复制代码
// 激活纹理
GLES30.glActiveTexture(GLES30.GL_TEXTURE0);
// 将所需的纹理对象绑定到Shader中纹理单元0上
GLES30.glUniform1i(mTextureIdHandle, 0);
// 绑定纹理
GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, texId);
// 绑定FRAMEBUFFER缓冲区
GLES30.glBindFramebuffer(GLES30.GL_FRAMEBUFFER, frameBufferId);
// 绘制矩形
GLES30.glDrawArrays(GLES30.GL_TRIANGLE_STRIP, 0, mVertexCount);
// 取消FRAMEBUFFER的绑定
GLES30.glBindFramebuffer(GLES30.GL_FRAMEBUFFER, GLES30.GL_NONE);
  • 最后,绘制渲染GL_TEXTURE_2D纹理,从FrameBuffer中读取纹理数据
java 复制代码
// 激活纹理
GLES30.glActiveTexture(GLES30.GL_TEXTURE0);
GLES30.glUniform1i(mTex2DIdHandle, 0);
// 绑定纹理
GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, tex2DId);
// 绘制矩形
GLES30.glDrawArrays(GLES30.GL_TRIANGLE_STRIP, 0, mVertexCount);

二、问题原因

OpenGL中,帧缓冲区对象(FBO:Framebuffer Object)的纹理附件默认使用的是纹理坐标系,其原点约定在屏幕的左下角;而在纹理坐标系约定中,如在进行图像处理、计算机视觉等,我们通常使用的是以左上角为原点的纹理坐标系约定

三、解决方案

当我们将纹理绑定到帧缓冲区对象的颜色附件中后,如果输出的纹理坐标与输入的纹理坐标系一直(即原点一直位于左上角),那么最终得到的纹理将会是输入纹理的镜像纹理。

为了解决这个问题,我们可以采取以下两种方法:

  1. 从帧缓冲区读取纹理数据后:调整输出纹理矩形的顶点坐标或纹理坐标的值,使其坐标系与FOB的坐标系相匹配,从而达到正常展示的目的。
    以下举例中为按帧缓冲区坐标系,调整纹理坐标后的顶点与纹理对应关系:
java 复制代码
// 按帧缓冲区坐标系,调整纹理坐标后的顶点与纹理对应关系:
// 顶点个数
mVertexCount = 4;
// 顶点坐标
float vertices[] =
        {
                -1.0f, 1.0f, 0.0f,
                -1.0f, -1.0f, 0.0f,
                1.0f, 1.0f, 0.0f,
                1.0f, -1.0f, 0.0f
        };
// 纹理坐标
float texCoor[] =new float[] 
            {
                    0.0f, 1.0f,
                    0.0f, 0.0f,
                    1.0f, 1.0f,
                    1.0f, 0.0f
            };
}
  1. 在绑定纹理到帧缓冲区之前,通过设置纹理的纹理坐标变换矩阵来翻转纹理坐标系。将原点从左上角变为左下角,与默认的纹理坐标系约定一致。
    (该方法需要在Shader中进行变化,有些复杂,可参考第一种方式,这里不详细说明)

三、源码下载

ExternalOES纹理数据 转换为 TEXTURE-2D纹理数据:
https://download.csdn.net/download/aiwusheng/88650498

参考

解密视频魔法:ExternalOES转化TEXTURE_2D纹理:
https://editor.csdn.net/md/?articleId=135137815