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

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

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

一、纹理写入帧缓冲

• 在OpenGL中，我们通常使用以下API将纹理ID绑定到FRAMEBUFFER的颜色缓冲区。

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帧缓冲区中；

// 激活纹理
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中读取纹理数据。

// 激活纹理
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的坐标系相匹配，从而达到正常展示的目的。
   
   以下举例中为按帧缓冲区坐标系，调整纹理坐标后的顶点与纹理对应关系：

// 按帧缓冲区坐标系，调整纹理坐标后的顶点与纹理对应关系：
// 顶点个数
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