一种基于FBO实现渲染流水线的思路

假如我希望实现如下特性：

1、使用片元shader，把YUV信号作为纹理输入，采样过程中转换为RGB信号。

2、把第1步取得的画面通过片元shader，使用3*3的卷积核，实现卷积模糊。

那么，就有如下几种方案：

第一种：

片元shader每次采样3*3个坐标，转换后记录到数组，之后对数组实现卷积处理，最后输出片元颜色。

第二种：

片元shader每次采样1个坐标，转换后直接输出到片元颜色，此时采样后的输出就会在指定的frameBuffer中。然后第二个片元shader使用framebuffer作为纹理输入，采样时每次采样3*3的坐标进行卷积。

        两种方案的采样和计算工作量是一致的，但很显然第一种方案会随着希望插入的处理步骤的增加，而使得整个片元shader逐渐膨胀，而且也不方便灵活增删处理过程。假如我想做一个视频剪辑软件，处理步骤可以是1、2、3，也可以是先3、1、2，这样在单个shader就很难实现这么灵活的分配了，那是否有更好的办法呢？

参考了一下吴亚峰的《OpenGL ES 3.x游戏开发 下卷》中1.6章节《帧缓冲与渲染缓冲》与1.7章节《多重渲染目标》后，我发现了以下几个可能能用得上的OpenGL特性：

1、FBO：

2、FBO映射为纹理：

其实这两个特性也是所谓离屏渲染所依赖的特性。通过以上两个feature，那完全可以一个shader渲染到framebuffer中的图像，拿过来继续作为纹理输入进行下一步的加工处理。每一步的输出，都可以下一步加工的纹理输入，这样即可随意分配shader的处理顺序和深度，类似于可以自由装配的OpenGL图像处理流水线工厂，使得灵活性大大增加，能更容易实现多图层、多流水线，适合鱼视频编辑、多重图像处理等领域。我的架构设计如下：

每个Layer可以按照需要插入多个相同或者不同的shaderProgram，顺序随意，最后全部Layer一一叠加为最终画面。 

实际代码如下：

首先是图层类 Layer.cpp：

//
// Created by jiezhuchen on 2021/7/5.
//

#include 
#include 
#include "Layer.h"
#include "RenderProgram.h"
#include "shaderUtil.h"

using namespace OPENGL_VIDEO_RENDERER;

Layer::Layer(float x, float y, float z, float w, float h, int windowW, int windowH) {
    mX = x;
    mY = y;
    mZ = z;
    mWidth = w;
    mHeight = h;
    mWindowW = windowW;
    mWindowH = windowH;
    mRenderSrcData.data = nullptr;
    createFrameBuffer();
    createLayerProgram();
}

Layer::~Layer() {
    destroy();
}

void Layer::initObjMatrix() {
    //创建单位矩阵
    setIdentityM(mObjectMatrix, 0);
    setIdentityM(mUserObjectMatrix, 0);
    setIdentityM(mUserObjectRotateMatrix, 0);
}

void Layer::scale(float sx, float sy, float sz) {
    scaleM(mObjectMatrix, 0, sx, sy, sz);
}

void Layer::translate(float dx, float dy, float dz) {
    translateM(mObjectMatrix, 0, dx, dy, dz);
}

void Layer::rotate(int degree, float roundX, float roundY, float roundZ) {
    rotateM(mObjectMatrix, 0, degree, roundX, roundY, roundZ);
}

/**用户直接设定缩放量**/
void Layer::setUserScale(float sx, float sy, float sz) {
    mUserObjectMatrix[0] = sx;
    mUserObjectMatrix[5] = sy;
    mUserObjectMatrix[10] = sz;
}

/**用户直接设定位置偏移量**/
void Layer::setUserTransLate(float dx, float dy, float dz) { //由于opengl的矩阵旋转过，所以原本改3、7、11的矩阵位置变成12、13、14
    mUserObjectMatrix[12] = dx;
    mUserObjectMatrix[13] = dy;
    mUserObjectMatrix[14] = dz;
}

/**用户直接设定旋转量**/
void Layer::setUserRotate(float degree, float vecX, float vecY, float vecZ) {
    setIdentityM(mUserObjectRotateMatrix, 0); //先复原
    rotateM(mUserObjectRotateMatrix, 0, degree, vecX, vecY, vecZ);
}

void Layer::locationTrans(float cameraMatrix[], float projMatrix[], int muMVPMatrixPointer) {
    multiplyMM(mMVPMatrix, 0, mUserObjectMatrix, 0, mObjectMatrix, 0);
    multiplyMM(mMVPMatrix, 0, mUserObjectRotateMatrix, 0, mMVPMatrix, 0);
    multiplyMM(mMVPMatrix, 0, cameraMatrix, 0, mMVPMatrix, 0);         //将摄像机矩阵乘以物体矩阵
    multiplyMM(mMVPMatrix, 0, projMatrix, 0, mMVPMatrix, 0);         //将投影矩阵乘以上一步的结果矩阵
    glUniformMatrix4fv(muMVPMatrixPointer, 1, false, mMVPMatrix);        //将最终变换关系传入渲染管线
}

//todo 每一次修改都会导致绑定的纹理本身被修改，这样会导致循环论证一样的问题，所以要使用双Framebuffer
void Layer::createFrameBuffer() {
    int frameBufferCount = sizeof(mFrameBufferPointerArray) / sizeof(GLuint);

    //生成framebuffer
    glGenFramebuffers(frameBufferCount, mFrameBufferPointerArray);

    //生成渲染缓冲buffer
    glGenRenderbuffers(frameBufferCount, mRenderBufferPointerArray);

    //生成framebuffer纹理pointer
    glGenTextures(frameBufferCount, mFrameBufferTexturePointerArray);

    //遍历framebuffer并初始化
    for (int i = 0; i < frameBufferCount; i++) {
        //绑定帧缓冲，遍历两个framebuffer分别初始化
        glBindFramebuffer(GL_FRAMEBUFFER, mFrameBufferPointerArray[i]);
        //绑定缓冲pointer
        glBindRenderbuffer(GL_RENDERBUFFER, mRenderBufferPointerArray[i]);
        //为渲染缓冲初始化存储，分配显存
        glRenderbufferStorage(GL_RENDERBUFFER,
                GL_DEPTH_COMPONENT16, mWindowW, mWindowH); //设置framebuffer的长宽

        glBindTexture(GL_TEXTURE_2D, mFrameBufferTexturePointerArray[i]); //绑定纹理Pointer

        glTexParameterf(GL_TEXTURE_2D,//设置MIN采样方式
                GL_TEXTURE_MIN_FILTER, GL_LINEAR);
        glTexParameterf(GL_TEXTURE_2D,//设置MAG采样方式
                GL_TEXTURE_MAG_FILTER, GL_LINEAR);
        glTexParameterf(GL_TEXTURE_2D,//设置S轴拉伸方式
                GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
        glTexParameterf(GL_TEXTURE_2D,//设置T轴拉伸方式
                GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
        glTexImage2D//设置颜色附件纹理图的格式
                (
                        GL_TEXTURE_2D,
                0,                        //层次
                GL_RGBA,        //内部格式
                mWindowW,            //宽度
                mWindowH,            //高度
                0,                        //边界宽度
                GL_RGBA,            //格式
                GL_UNSIGNED_BYTE,//每个像素数据格式
                nullptr
        );
        glFramebufferTexture2D        //设置自定义帧缓冲的颜色缓冲附件
                (
                        GL_FRAMEBUFFER,
                GL_COLOR_ATTACHMENT0,    //颜色缓冲附件
                GL_TEXTURE_2D,
                mFrameBufferTexturePointerArray[i],                        //纹理id
                0                                //层次
        );
        glFramebufferRenderbuffer    //设置自定义帧缓冲的深度缓冲附件
                (
                        GL_FRAMEBUFFER,
                GL_DEPTH_ATTACHMENT,        //深度缓冲附件
                GL_RENDERBUFFER,            //渲染缓冲
                mRenderBufferPointerArray[i]                //渲染深度缓冲id
        );
    }
    //绑回系统默认framebuffer，否则会显示不出东西
    glBindFramebuffer(GL_FRAMEBUFFER, 0);//绑定帧缓冲id
}

void Layer::createLayerProgram() {
    char vertShader[] = GL_SHADER_STRING(
            ##version 300 es\n
            uniform mat4 uMVPMatrix; //旋转平移缩放 总变换矩阵。物体矩阵乘以它即可产生变换
            in vec3 objectPosition; //物体位置向量，参与运算但不输出给片源

            in vec4 objectColor; //物理颜色向量
            in vec2 vTexCoord; //纹理内坐标
            out vec4 fragObjectColor;//输出处理后的颜色值给片元程序
            out vec2 fragVTexCoord;//输出处理后的纹理内坐标给片元程序

            void main() {
                    gl_Position = uMVPMatrix * vec4(objectPosition, 1.0); //设置物体位置
                    fragVTexCoord = vTexCoord; //默认无任何处理，直接输出物理内采样坐标
                    fragObjectColor = objectColor; //默认无任何处理，输出颜色值到片源
            }
    );
    char fragShader[] = GL_SHADER_STRING(
            ##version 300 es\n
            precision highp float;
            uniform sampler2D textureFBO;//纹理输入
            in vec4 fragObjectColor;//接收vertShader处理后的颜色值给片元程序
            in vec2 fragVTexCoord;//接收vertShader处理后的纹理内坐标给片元程序
            out vec4 fragColor;//输出到的片元颜色

            void main() {
                    vec4 color = texture(textureFBO, fragVTexCoord);//采样纹理中对应坐标颜色，进行纹理渲染
                    color.a = color.a * fragObjectColor.a;//利用顶点透明度信息控制纹理透明度
                    fragColor = color;
            }
    );
    float ratio = (float) mWindowH / mWindowW;;
    float tempTexCoord[] =   //纹理内采样坐标,类似于canvas坐标 //这东西有问题，导致两个framebuffer的画面互相取纹理时互为颠倒
            {
                    1.0, 0.0,
                    0.0, 0.0,
                    1.0, 1.0,
                    0.0, 1.0
            };
    memcpy(mTexCoor, tempTexCoord, sizeof(tempTexCoord));
    float tempColorBuf[] = {
            1.0, 1.0, 1.0, 1.0,
            1.0, 1.0, 1.0, 1.0,
            1.0, 1.0, 1.0, 1.0,
            1.0, 1.0, 1.0, 1.0
    };
    memcpy(mColorBuf, tempColorBuf, sizeof(tempColorBuf));
    float vertxData[] = {
            mX + 2, mY, mZ,
            mX, mY, mZ,
            mX + 2, mY + ratio * 2, mZ,
            mX, mY + ratio * 2, mZ,
    };
    memcpy(mVertxData, vertxData, sizeof(vertxData));
    mLayerProgram = createProgram(vertShader + 1, fragShader + 1);
    //获取程序中顶点位置属性引用"指针"
    mObjectPositionPointer = glGetAttribLocation(mLayerProgram.programHandle, "objectPosition");
    //纹理采样坐标
    mVTexCoordPointer = glGetAttribLocation(mLayerProgram.programHandle, "vTexCoord");
    //获取程序中顶点颜色属性引用"指针"
    mObjectVertColorArrayPointer = glGetAttribLocation(mLayerProgram.programHandle, "objectColor");
    //获取程序中总变换矩阵引用"指针"
    muMVPMatrixPointer = glGetUniformLocation(mLayerProgram.programHandle, "uMVPMatrix");
    //创建单位矩阵
    initObjMatrix();
}

void Layer::destroy() {
    //todo
}

void Layer::addRenderProgram(RenderProgram *program) {
    mRenderProgramList.push_back(program);
}

void Layer::removeRenderProgram(RenderProgram *program) {
    mRenderProgramList.remove(program);
}

/**给每个模板传入渲染数据**/  //todo 修改一下，如果data更新了才调用第一个渲染器loadData刷新纹理，节约CPU资源    加一个needRefresh标志
void Layer::loadData(char *data, int width, int height, int pixelFormat, int offset) {
    mRenderSrcData.data = data;
    mRenderSrcData.width = width;
    mRenderSrcData.height = height;
    mRenderSrcData.pixelFormat = pixelFormat;
    mRenderSrcData.offset = offset;
}

/**@param texturePointers 可以用于渲染已经绑定好的纹理，或者直接传入FBO，把上一个图层的结果进一步进行渲染，例如叠加图片、或者进行毛玻璃效果处理。当然也可以在一个图层上叠加更多渲染器实现，但多图层便于不同画面不同大小的重叠，渲染器在同一个图层中大小保持一致**/
void Layer::loadTexture(GLuint texturePointer, int width, int height) {
    mRenderSrcTexture.texturePointer = texturePointer;
    mRenderSrcTexture.width = width;
    mRenderSrcTexture.height = height;
}

void Layer::drawLayerToFrameBuffer(float *cameraMatrix, float *projMatrix, GLuint outputFBOPointer, DrawType drawType) {
    glUseProgram(mLayerProgram.programHandle);
    glBindFramebuffer(GL_FRAMEBUFFER, outputFBOPointer);
    //保留物体缩放现场
    float objMatrixClone[16];
    memcpy(objMatrixClone, mObjectMatrix, sizeof(objMatrixClone));
    //这里的坐标轴逻辑上应该是x,y,z密度都相等的，但因为设备各式各样，x,y轴可能有不同程度的密度拉伸，所以要处理一下：
    /**保持图片宽高的原理:
     * 0、计算纹理占当前
     * 最后贴图时，顶点乘以修改后的物体缩放关系矩阵，就实现了
     * **/
    if (drawType == DRAW_DATA) {
        float ratio =
                mWindowW > mWindowH ? ((float) mWindowH / (float) mWindowW) : ((float) mWindowW /
                                                                               (float) mWindowH); //计算当前视口的短边/长边比例，从而得知X轴和Y轴的-1～1的归一化长度之间的实际长度的比例
        //确定图片哪一边更能覆盖对应轴的视口长度，哪一边就让其充满空间，另一边则按OpenGL视口的短边/长边比缩放，此时任意长宽比的图片都会变成矩形，再乘以图片本身的比例转换为图片本身宽高比，即可在纹理渲染时还原图片本身比例
        float widthPercentage = (float) mRenderSrcData.width / (float) mWindowW;
        float heightPercentage = (float) mRenderSrcData.height / (float) mWindowH;
        if (widthPercentage > heightPercentage) { //如果宽占比更多，宽拉伸到尽，高按照视口比例重新调整为统一密度的单位，然后再根据图片高对宽的比例调整物体的高的边的缩放
            scale(1.0, ratio * ((float) mRenderSrcData.height / mRenderSrcData.width), 1.0); //SCALEY为图片高占宽的比例 * 视口比例
        } else {
            scale(ratio * ((float) mRenderSrcData.width / mRenderSrcData.height), 1.0, 1.0);
        }
    } else {
        float ratio =
                mWindowW > mWindowH ? ((float) mWindowH / (float) mWindowW) : ((float) mWindowW /
                                                                               (float) mWindowH); //计算当前视口的短边/长边比例，从而得知X轴和Y轴的-1～1的归一化长度之间的实际长度的比例
        //确定图片哪一边更能覆盖对应轴的视口长度，哪一边就让其充满空间，另一边则按OpenGL视口的短边/长边比缩放，此时任意长宽比的图片都会变成矩形，再乘以图片本身的比例转换为图片本身宽高比，即可在纹理渲染时还原图片本身比例
        float widthPercentage = (float) mRenderSrcTexture.width / (float) mWindowW;
        float heightPercentage = (float) mRenderSrcTexture.height / (float) mWindowH;
        if (widthPercentage > heightPercentage) {
            scale(1.0, ratio * ((float) mRenderSrcTexture.height / mRenderSrcTexture.width), 1.0);
            //另外几种成功的算法：
//            scale(1.0, ((float) (mRenderSrcTexture.width * (mWindowH / mRenderSrcTexture.height)) / (float) mWindowW) * ratio, 1.0);
//            scale(1.0, ((float) mWindowW / mWindowH) * ((float) mRenderSrcTexture.height / mRenderSrcTexture.width) * (1 / ratio), 1.0);
//            scale(1.0, ((float) mRenderSrcTexture.height / mWindowH) * ((float) mWindowW / mRenderSrcTexture.width) * (ratio), 1.0);
        } else {
            scale(ratio * ((float) mRenderSrcTexture.width / mRenderSrcTexture.height), 1.0, 1.0);  //比例式 ： 容器w * 纹理
        }
    }
    //物体坐标*缩放平移旋转矩阵->应用按图片比例缩放效果
    locationTrans(cameraMatrix, projMatrix, muMVPMatrixPointer);
    //还原缩放现场
    memcpy(mObjectMatrix, objMatrixClone, sizeof(mObjectMatrix));
//    /**实现两个Framebuffer的画面叠加，这里解释一下：
//     * 如果是偶数个渲染器，那么在交替渲染之后，那么第0个FBO的画面是上一个画面，第1个FBO为最新画面，所以要先绘制第0个FBO内容再叠加第一个
//     * 否则则是交替后，第1个渲染器是上个画面，第0个FBO是上一个画面，叠加顺序则要进行更改**/
//    for(int i = 0; i < 2; i ++) {
//        glActiveTexture(GL_TEXTURE0);
//        if (mRenderProgramList.size() % 2 == 0) {
//            setUserScale(0.5, 0.5, 0);
//            setUserTransLate(-0.5, 0, 0);
//            glBindTexture(GL_TEXTURE_2D, mFrameBufferTexturePointerArray[i]);
//        } else {
//            setUserScale(0.5, 0.5, 0);
//            setUserTransLate(0.5, 0, 0);
//            glBindTexture(GL_TEXTURE_2D, mFrameBufferTexturePointerArray[1 - i]);
//        }
//        glUniform1i(glGetUniformLocation(mLayerProgram.programHandle, "textureFBO"), 0); //获取纹理属性的指针
//        //将顶点位置数据送入渲染管线
//        glVertexAttribPointer(mObjectPositionPointer, 3, GL_FLOAT, false, 0, mVertxData); //三维向量，size为2
//        //将顶点颜色数据送入渲染管线
//        glVertexAttribPointer(mObjectVertColorArrayPointer, 4, GL_FLOAT, false, 0, mColorBuf);
//        //将顶点纹理坐标数据传送进渲染管线
//        glVertexAttribPointer(mVTexCoordPointer, 2, GL_FLOAT, false, 0, mTexCoor);  //二维向量，size为2
//        glEnableVertexAttribArray(mObjectPositionPointer); //启用顶点属性
//        glEnableVertexAttribArray(mObjectVertColorArrayPointer);  //启用颜色属性
//        glEnableVertexAttribArray(mVTexCoordPointer);  //启用纹理采样定位坐标
//        glDrawArrays(GL_TRIANGLE_STRIP, 0, 4); //绘制线条，添加的point浮点数/3才是坐标数（因为一个坐标由x,y,z3个float构成，不能直接用）
//        glDisableVertexAttribArray(mObjectPositionPointer);
//        glDisableVertexAttribArray(mObjectVertColorArrayPointer);
//        glDisableVertexAttribArray(mVTexCoordPointer);
//    }
    /**如果是偶数个fragShaderProgram，则最终画面落于FBO_1。否则奇数时落于FBO_0，并不需要把两个FBO分两次叠加起来**/
    glActiveTexture(GL_TEXTURE0);
    if (mRenderProgramList.size() % 2 == 0) {
        //setUserScale(0.5, 0.5, 0); //测试代码
        //setUserTransLate(-0.5, 0, 0); //测试代码
        glBindTexture(GL_TEXTURE_2D, mFrameBufferTexturePointerArray[1]);
    } else {
        //setUserScale(0.5, 0.5, 0); //测试代码
        //setUserTransLate(0.5, 0, 0); //测试代码
        glBindTexture(GL_TEXTURE_2D, mFrameBufferTexturePointerArray[0]);
    }
    glUniform1i(glGetUniformLocation(mLayerProgram.programHandle, "textureFBO"), 0); //获取纹理属性的索引，给索引对应变量赋当前ActiveTexture的索引
    //将顶点位置数据送入渲染管线
    glVertexAttribPointer(mObjectPositionPointer, 3, GL_FLOAT, false, 0, mVertxData); //三维向量，size为2
    //将顶点颜色数据送入渲染管线
    glVertexAttribPointer(mObjectVertColorArrayPointer, 4, GL_FLOAT, false, 0, mColorBuf);
    //将顶点纹理坐标数据传送进渲染管线
    glVertexAttribPointer(mVTexCoordPointer, 2, GL_FLOAT, false, 0, mTexCoor);  //二维向量，size为2
    glEnableVertexAttribArray(mObjectPositionPointer); //启用顶点属性
    glEnableVertexAttribArray(mObjectVertColorArrayPointer);  //启用颜色属性
    glEnableVertexAttribArray(mVTexCoordPointer);  //启用纹理采样定位坐标
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4); //绘制线条，添加的point浮点数/3才是坐标数（因为一个坐标由x,y,z3个float构成，不能直接用）
    glDisableVertexAttribArray(mObjectPositionPointer);
    glDisableVertexAttribArray(mObjectVertColorArrayPointer);
    glDisableVertexAttribArray(mVTexCoordPointer);
}

/**逐步加工绘制
 * @param cameraMatrix 摄像机矩阵，确定观察者的位置、观察画面的旋转程度和观察方向
 * @param projMatrix 投影矩阵，决定3d物体通过怎样的系数投影到屏幕**/  //todo 修改一下，如果data更新了才调用第一个渲染器loadData刷新纹理，节约CPU资源
void
Layer::drawTo(float *cameraMatrix, float *projMatrix, GLuint outputFBOPointer, int fboW, int fboH, DrawType drawType) {
    //清理双Framebuffer残留的内容
    for (int i = 0; i < 2; i++) {
        glBindFramebuffer(GL_FRAMEBUFFER, mFrameBufferPointerArray[i]);
        glClear(GL_DEPTH_BUFFER_BIT | GL_COLOR_BUFFER_BIT); //清理屏幕
    }
    int i = 0;
    /**第0个渲染器以data为数据输入，使用FBO[0]渲染结果。第1个渲染器使用FBO_texture[0]作为纹理输入，渲染结果输出到FBO[1]。
     * 第2个渲染器使用FBO_texture[1]作为纹理输入，渲染结果输出到FBO[0]，依次循环互换结果和输入，实现效果叠加。
     * 使用双FBO互为绑定的原因是为了解决部分shader算法如果绑定的FBO_texture和输出的FBO是同一个将会出现异常，所以使用此方法**/
    for (auto item = mRenderProgramList.begin(); item != mRenderProgramList.end(); item++, i++) {
        //接收绘制数据的framebuffer和作为纹理输入使用的framebuffer不能是同一个
        int layerFrameBuffer = i % 2 == 0 ? mFrameBufferPointerArray[0] : mFrameBufferPointerArray[1];
        int fboTexture = i % 2 == 1 ? mFrameBufferTexturePointerArray[0] : mFrameBufferTexturePointerArray[1];
        //第一个渲染器接受图层原始数据（图层原始数据可以是输出的字节数组，或是纹理本身，例如OES纹理），其他的从上一个渲染结果中作为输入
        if (i == 0) {
            switch (drawType) {
                case DRAW_DATA: {
                    if (mRenderSrcData.data != nullptr) {
                        (*item)->loadData(mRenderSrcData.data, mRenderSrcData.width,
                                          mRenderSrcData.height,
                                          mRenderSrcData.pixelFormat, mRenderSrcData.offset);
                        //渲染器处理结果放到图层FBO中
                        (*item)->drawTo(cameraMatrix, projMatrix, RenderProgram::DRAW_DATA,
                                        layerFrameBuffer, mWindowW, mWindowH);
                    }
                    break;
                }
                case DRAW_TEXTURE: {
                    Textures texture;
                    texture.texturePointers = mRenderSrcTexture.texturePointer;
                    texture.width = mRenderSrcTexture.width;
                    texture.height = mRenderSrcTexture.height;
                    Textures textures[1];
                    textures[0] = texture;
                    (*item)->loadTexture(textures);
                    //渲染器处理结果放到图层FBO中
                    (*item)->drawTo(cameraMatrix, projMatrix, RenderProgram::DRAW_TEXTURE,
                                    layerFrameBuffer, mWindowW, mWindowH);
                    break;
                }
            }
        } else { //如果只有一个渲染器则走不到else里，否则第0个打后的渲染器依次使用上一个渲染器的结果，也就是图层FBO中的数据作为输入  bug
            //使用上一个渲染器保存到FBO的结果，也就是FBO_texture作为纹理输入进行二次处理
            Textures t[1];
            t[0].texturePointers = fboTexture;
            t[0].width = mWindowW;
            t[0].height = mWindowH;
            (*item)->loadTexture(t); //使用上一个渲染器的渲染结果作为绘制输入
            //渲染器处理结果放到图层FBO中
            (*item)->drawTo(cameraMatrix, projMatrix, RenderProgram::DRAW_TEXTURE,
                            layerFrameBuffer, mWindowW, mWindowH);
        }
    }
    //最后渲染到目标framebuffer
    drawLayerToFrameBuffer(cameraMatrix, projMatrix, outputFBOPointer, drawType);
    //渲染统计
    mFrameCount++;
}

        其中createFrameBuffer创建了两个FBO对象，参考的技术是双缓冲机制，每次进行当前fragShaderProgram渲染时，FBO_0保存了上一个fragShaderProgram的渲染结果，作为纹理输入到当前正在执行的fragShaderProgram，FBO_1用于保存当前fragShaderProgram渲染的结果。执行下一个fragShaderProgram时，FBO_1作为输入，FBO_0作为输出，依次类推，每渲染一次就交换一次。实现单个图层多重效果的渲染。

        其中drawTo方法可以传入用于承载图层内容的FBO，默认就是0号FBO，也就是glSurfaceview在创建EGLContext的时候并绑定到view上的那个，使得内容可以呈现于屏幕上。其中比较重要部分的代码如下:

for (auto item = mRenderProgramList.begin(); item != mRenderProgramList.end(); item++, i++) {
        //接收绘制数据的framebuffer和作为纹理输入使用的framebuffer不能是同一个
        int layerFrameBuffer = i % 2 == 0 ? mFrameBufferPointerArray[0] : mFrameBufferPointerArray[1];
        int fboTexture = i % 2 == 1 ? mFrameBufferTexturePointerArray[0] : mFrameBufferTexturePointerArray[1];
        //第一个渲染器接受图层原始数据（图层原始数据可以是输出的字节数组，或是纹理本身，例如OES纹理），其他的从上一个渲染结果中作为输入
        if (i == 0) {
            switch (drawType) {
                case DRAW_DATA: {
                    if (mRenderSrcData.data != nullptr) {
                        (*item)->loadData(mRenderSrcData.data, mRenderSrcData.width,
                                          mRenderSrcData.height,
                                          mRenderSrcData.pixelFormat, mRenderSrcData.offset);
                        //渲染器处理结果放到图层FBO中
                        (*item)->drawTo(cameraMatrix, projMatrix, RenderProgram::DRAW_DATA,
                                        layerFrameBuffer, mWindowW, mWindowH);
                    }
                    break;
                }
                case DRAW_TEXTURE: {
                    Textures texture;
                    texture.texturePointers = mRenderSrcTexture.texturePointer;
                    texture.width = mRenderSrcTexture.width;
                    texture.height = mRenderSrcTexture.height;
                    Textures textures[1];
                    textures[0] = texture;
                    (*item)->loadTexture(textures);
                    //渲染器处理结果放到图层FBO中
                    (*item)->drawTo(cameraMatrix, projMatrix, RenderProgram::DRAW_TEXTURE,
                                    layerFrameBuffer, mWindowW, mWindowH);
                    break;
                }
            }
        } else { //如果只有一个渲染器则走不到else里，否则第0个打后的渲染器依次使用上一个渲染器的结果，也就是图层FBO中的数据作为输入  bug
            //使用上一个渲染器保存到FBO的结果，也就是FBO_texture作为纹理输入进行二次处理
            Textures t[1];
            t[0].texturePointers = fboTexture;
            t[0].width = mWindowW;
            t[0].height = mWindowH;
            (*item)->loadTexture(t); //使用上一个渲染器的渲染结果作为绘制输入
            //渲染器处理结果放到图层FBO中
            (*item)->drawTo(cameraMatrix, projMatrix, RenderProgram::DRAW_TEXTURE,
                            layerFrameBuffer, mWindowW, mWindowH);
        }
    }

        之前介绍createFrameBuffer的设计原理时有说过其使用了双缓冲机制，所以fragShaderProgram的数目的奇偶性的不同，图层渲染的最终画面可能会落入不同的Framebuffer中。例如图层的渲染流水线有3个fragShaderProgram的话，那么就是先渲染画面输出到了Framebuffer0，再把framebuffer0作为输入，渲染后输出到Framebuffer1，然后再把Framebuffer1作为输入，输出到Framebuffer0。这种轮换模式，使得fragShaderProgram的渲染效果可以不停叠加。

renderProgram的基类设计如下：

//
// Created by jiezhuchen on 2021/6/21.
//

#include 
#include 
#include "RenderProgram.h"
#include "matrix.c"
#include "shaderUtil.c"

using namespace OPENGL_VIDEO_RENDERER;

void RenderProgram::initObjMatrix() {
    //创建单位矩阵
    setIdentityM(mObjectMatrix, 0);
}

void RenderProgram::scale(float sx, float sy, float sz) {
    scaleM(mObjectMatrix, 0, sx, sy, sz);
}

void RenderProgram::translate(float dx, float dy, float dz) {
    translateM(mObjectMatrix, 0, dx, dy, dz);
}

void RenderProgram::rotate(int degree, float roundX, float roundY, float roundZ) {
    rotateM(mObjectMatrix, 0, degree, roundX, roundY, roundZ);
}

float* RenderProgram::getObjectMatrix() {
    return mObjectMatrix;
}

void RenderProgram::setObjectMatrix(float objMatrix[]) {
    memcpy(mObjectMatrix, objMatrix, sizeof(mObjectMatrix));
}

void RenderProgram::locationTrans(float cameraMatrix[], float projMatrix[], int muMVPMatrixPointer) {
    multiplyMM(mMVPMatrix, 0, cameraMatrix, 0, mObjectMatrix, 0);         //将摄像机矩阵乘以物体矩阵
    multiplyMM(mMVPMatrix, 0, projMatrix, 0, mMVPMatrix, 0);         //将投影矩阵乘以上一步的结果矩阵
    glUniformMatrix4fv(muMVPMatrixPointer, 1, false, mMVPMatrix);        //将最终变换关系传入渲染管线
}

然后继承之后，按照自己的需要，实现自己的渲染流水线，例子如下（LUT滤镜渲染器）：

//
// Created by jiezhuchen on 2021/6/21.
//

#include 
#include 

#include 
#include 
#include 
#include "RenderProgramFilter.h"
#include "android/log.h"


using namespace OPENGL_VIDEO_RENDERER;
static const char *TAG = "nativeGL";
#define LOGI(fmt, args...) __android_log_print(ANDROID_LOG_INFO,  TAG, fmt, ##args)
#define LOGD(fmt, args...) __android_log_print(ANDROID_LOG_DEBUG, TAG, fmt, ##args)
#define LOGE(fmt, args...) __android_log_print(ANDROID_LOG_ERROR, TAG, fmt, ##args)

RenderProgramFilter::RenderProgramFilter() {
    vertShader = GL_SHADER_STRING(
            $#version 300 es\n
            uniform mat4 uMVPMatrix; //旋转平移缩放 总变换矩阵。物体矩阵乘以它即可产生变换
            in vec3 objectPosition; //物体位置向量，参与运算但不输出给片源

            in vec4 objectColor; //物理颜色向量
            in vec2 vTexCoord; //纹理内坐标
            out vec4 fragObjectColor;//输出处理后的颜色值给片元程序
            out vec2 fragVTexCoord;//输出处理后的纹理内坐标给片元程序

            void main() {
                gl_Position = uMVPMatrix * vec4(objectPosition, 1.0); //设置物体位置
                fragVTexCoord = vTexCoord; //默认无任何处理，直接输出物理内采样坐标
                fragObjectColor = objectColor; //默认无任何处理，输出颜色值到片源
            }
    );
    fragShader = GL_SHADER_STRING(
            ##version 300 es\n
            precision highp float;
            precision highp sampler2DArray;
            uniform sampler2D sTexture;//图像纹理输入
            uniform sampler2DArray lutTexture;//滤镜纹理输入
            uniform float pageSize;
            uniform float frame;//第几帧
            uniform vec2 resolution;//分辨率
            in vec4 fragObjectColor;//接收vertShader处理后的颜色值给片元程序
            in vec2 fragVTexCoord;//接收vertShader处理后的纹理内坐标给片元程序
            out vec4 fragColor;//输出到的片元颜色

            void main() {
                vec4 srcColor = texture(sTexture, fragVTexCoord);
                srcColor.r = clamp(srcColor.r, 0.01, 0.99);
                srcColor.g = clamp(srcColor.g, 0.01, 0.99);
                srcColor.b = clamp(srcColor.b, 0.01, 0.99);
                fragColor = texture(lutTexture, vec3(srcColor.b, srcColor.g, srcColor.r * (pageSize - 1.0)));

            }
    );

    float tempTexCoord[] =   //纹理内采样坐标,类似于canvas坐标 //这东西有问题，导致两个framebuffer的画面互相取纹理时互为颠倒
            {
                    1.0, 0.0,
                    0.0, 0.0,
                    1.0, 1.0,
                    0.0, 1.0
            };
    memcpy(mTexCoor, tempTexCoord, sizeof(tempTexCoord));
    float tempColorBuf[] = {
            1.0, 1.0, 1.0, 1.0,
            1.0, 1.0, 1.0, 1.0,
            1.0, 1.0, 1.0, 1.0,
            1.0, 1.0, 1.0, 1.0
    };
    memcpy(mColorBuf, tempColorBuf, sizeof(tempColorBuf));
}

RenderProgramFilter::~RenderProgramFilter() {
    destroy();
}

void RenderProgramFilter::createRender(float x, float y, float z, float w, float h, int windowW,
                                      int windowH) {
    mWindowW = windowW;
    mWindowH = windowH;
    initObjMatrix(); //使物体矩阵初始化为单位矩阵，否则接下来的矩阵操作因为都是乘以0而无效
    float vertxData[] = {
            x + w, y, z,
            x, y, z,
            x + w, y + h, z,
            x, y + h, z,
    };
    memcpy(mVertxData, vertxData, sizeof(vertxData));
    mImageProgram = createProgram(vertShader + 1, fragShader + 1);
    //获取程序中顶点位置属性引用"指针"
    mObjectPositionPointer = glGetAttribLocation(mImageProgram.programHandle, "objectPosition");
    //纹理采样坐标
    mVTexCoordPointer = glGetAttribLocation(mImageProgram.programHandle, "vTexCoord");
    //获取程序中顶点颜色属性引用"指针"
    mObjectVertColorArrayPointer = glGetAttribLocation(mImageProgram.programHandle, "objectColor");
    //获取程序中总变换矩阵引用"指针"
    muMVPMatrixPointer = glGetUniformLocation(mImageProgram.programHandle, "uMVPMatrix");
    //渲染方式选择，0为线条，1为纹理
    mGLFunChoicePointer = glGetUniformLocation(mImageProgram.programHandle, "funChoice");
    //渲染帧计数指针
    mFrameCountPointer = glGetUniformLocation(mImageProgram.programHandle, "frame");
    //设置分辨率指针，告诉gl脚本现在的分辨率
    mResoulutionPointer = glGetUniformLocation(mImageProgram.programHandle, "resolution");
}

void RenderProgramFilter::setAlpha(float alpha) {
    if (mColorBuf != nullptr) {
        for (int i = 3; i < sizeof(mColorBuf) / sizeof(float); i += 4) {
            mColorBuf[i] = alpha;
        }
    }
}

//todo
void RenderProgramFilter::setBrightness(float brightness) {

}

//todo
void RenderProgramFilter::setContrast(float contrast) {

}

//todo
void RenderProgramFilter::setWhiteBalance(float redWeight, float greenWeight, float blueWeight) {

}

void RenderProgramFilter::loadData(char *data, int width, int height, int pixelFormat, int offset) {
    if (!mIsTexutresInited) {
        glUseProgram(mImageProgram.programHandle);
        glGenTextures(1, mTexturePointers);
        mGenTextureId = mTexturePointers[0];
        mIsTexutresInited = true;
    }
    //绑定处理
    glBindTexture(GL_TEXTURE_2D, mGenTextureId);
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    glTexImage2D(GL_TEXTURE_2D, 0, pixelFormat, width, height, 0, pixelFormat, GL_UNSIGNED_BYTE, (void*) (data + offset));
    mDataWidth = width;
    mDataHeight = height;
}

/**@param texturePointers 传入需要渲染处理的纹理，可以为上一次处理的结果，例如处理完后的FBOTexture **/
void RenderProgramFilter::loadTexture(Textures textures[]) {
    mInputTexturesArrayPointer = textures[0].texturePointers;
    mInputTextureWidth = textures[0].width;
    mInputTextureHeight = textures[0].height;
}

/**设置LUT滤镜**/
void RenderProgramFilter::loadLut(char* lutPixels, int lutWidth, int lutHeight, int unitLength) { //纹理更新只能在GL线程里面操作，所以这里只能先保存一下数据
    mLutWidth = lutWidth;
    mLutHeight = lutHeight;
    mLutUnitLen = unitLength;
    mLutPixels = (char*) malloc(mLutWidth * mLutHeight * 4);
    memcpy(mLutPixels, lutPixels, mLutWidth * mLutHeight * 4);
}


/**@param outputFBOPointer 绘制到哪个framebuffer，系统默认一般为0 **/
void RenderProgramFilter::drawTo(float *cameraMatrix, float *projMatrix, DrawType drawType, int outputFBOPointer, int fboW, int fboH) {
    if (mIsDestroyed) {
        return;
    }
    glUseProgram(mImageProgram.programHandle);
    //设置视窗大小及位置
    glBindFramebuffer(GL_FRAMEBUFFER, outputFBOPointer);
    glViewport(0, 0, mWindowW, mWindowH);
    glUniform1i(mGLFunChoicePointer, 1);
    //传入位置信息
    locationTrans(cameraMatrix, projMatrix, muMVPMatrixPointer);
    //开始渲染：
    if (mVertxData != nullptr && mColorBuf != nullptr) {
        //将顶点位置数据送入渲染管线
        glVertexAttribPointer(mObjectPositionPointer, 3, GL_FLOAT, false, 0, mVertxData); //三维向量，size为2
        //将顶点颜色数据送入渲染管线
        glVertexAttribPointer(mObjectVertColorArrayPointer, 4, GL_FLOAT, false, 0, mColorBuf);
        //将顶点纹理坐标数据传送进渲染管线
        glVertexAttribPointer(mVTexCoordPointer, 2, GL_FLOAT, false, 0, mTexCoor);  //二维向量，size为2
        glEnableVertexAttribArray(mObjectPositionPointer); //启用顶点属性
        glEnableVertexAttribArray(mObjectVertColorArrayPointer);  //启用颜色属性
        glEnableVertexAttribArray(mVTexCoordPointer);  //启用纹理采样定位坐标
        float resolution[2];

        switch (drawType) {
            case OPENGL_VIDEO_RENDERER::RenderProgram::DRAW_DATA:
                glActiveTexture(GL_TEXTURE0); //激活0号纹理
                glBindTexture(GL_TEXTURE_2D, mGenTextureId); //0号纹理绑定内容
                glUniform1i(glGetUniformLocation(mImageProgram.programHandle, "sTexture"), 0); //映射到渲染脚本，获取纹理属性的指针
                resolution[0] = (float) mDataWidth;
                resolution[1] = (float) mDataHeight;
                glUniform2fv(mResoulutionPointer, 1, resolution);
                break;
            case OPENGL_VIDEO_RENDERER::RenderProgram::DRAW_TEXTURE:
                glActiveTexture(GL_TEXTURE0); //激活0号纹理
                glBindTexture(GL_TEXTURE_2D, mInputTexturesArrayPointer); //0号纹理绑定内容
                glUniform1i(glGetUniformLocation(mImageProgram.programHandle, "sTexture"), 0); //映射到渲染脚本，获取纹理属性的指针
                resolution[0] = (float) mInputTextureWidth;
                resolution[1] = (float) mInputTextureHeight;
                glUniform2fv(mResoulutionPointer, 1, resolution);
                break;
        }

        int longLen = mLutWidth > mLutHeight ? mLutWidth : mLutHeight;
        if (mLutPixels) {
            if (mHadLoadLut) {
                glBindTexture(GL_TEXTURE_2D_ARRAY, mLutTexutresPointers[0]);
                glTexImage3D(GL_TEXTURE_2D_ARRAY, 0, GL_RGBA, 0, 0, 0, 0, GL_RGBA, GL_UNSIGNED_BYTE,
                             nullptr);
                glDeleteTextures(1, mLutTexutresPointers);
            }
            glGenTextures(1, mLutTexutresPointers);
            glBindTexture(GL_TEXTURE_2D_ARRAY, mLutTexutresPointers[0]);
            glTexParameterf(GL_TEXTURE_2D_ARRAY, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
            glTexParameterf(GL_TEXTURE_2D_ARRAY, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
            glTexParameterf(GL_TEXTURE_2D_ARRAY, GL_TEXTURE_WRAP_R, GL_CLAMP_TO_EDGE);
            glTexParameteri(GL_TEXTURE_2D_ARRAY, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
            glTexParameteri(GL_TEXTURE_2D_ARRAY, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
            glTexImage3D(GL_TEXTURE_2D_ARRAY, 0, GL_RGBA, mLutUnitLen, mLutUnitLen, longLen / mLutUnitLen, 0, GL_RGBA, GL_UNSIGNED_BYTE, mLutPixels);
            //lut数据加载完毕，清理内存
            free(mLutPixels);
            mLutPixels = nullptr;
            mHadLoadLut = true;
        }
        if (mHadLoadLut) {
            glActiveTexture(GL_TEXTURE1); //激活1号纹理
            glBindTexture(GL_TEXTURE_2D_ARRAY, mLutTexutresPointers[0]);
            glUniform1i(glGetUniformLocation(mImageProgram.programHandle, "lutTexture"), 1); //映射到渲染脚本，获取纹理属性的指针
            glUniform1f(glGetUniformLocation(mImageProgram.programHandle, "pageSize"), longLen / mLutUnitLen); //映射到渲染脚本，获取纹理属性的指针
        }
        glDrawArrays(GL_TRIANGLE_STRIP, 0, /*mPointBufferPos / 3*/ 4); //绘制线条，添加的point浮点数/3才是坐标数（因为一个坐标由x,y,z3个float构成，不能直接用）
        glDisableVertexAttribArray(mObjectPositionPointer);
        glDisableVertexAttribArray(mObjectVertColorArrayPointer);
        glDisableVertexAttribArray(mVTexCoordPointer);
    }
}

void RenderProgramFilter::destroy() {
    if (!mIsDestroyed) {
        //释放纹理所占用的显存
        glBindTexture(GL_TEXTURE_2D, 0);
        glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, 0, 0, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE, nullptr);
        glDeleteTextures(1, mTexturePointers);
        glBindTexture(GL_TEXTURE_2D_ARRAY, mLutTexutresPointers[0]);
        glTexImage3D(GL_TEXTURE_2D_ARRAY, 0, GL_RGBA, 0, 0, 0, 0, GL_RGBA, GL_UNSIGNED_BYTE,
                     nullptr);
        glDeleteTextures(1, mLutTexutresPointers);
        //删除不用的shaderprogram
        destroyProgram(mImageProgram);
    }
    mIsDestroyed = true;
}

简单说一下Layer和自己写的render如何搭配使用：

1、创建图层，输入需要处理的纹理或者数据：

Layer *layer = new Layer(-1, -mRatio, 0, 2, mRatio * 2, mWidth, mHeight); //创建铺满全屏的图层;
        //载入数据：
        LOGI("cjztest, Java_com_opengldecoder_jnibridge_JniBridge_addFullContainerLayer containerW:%d, containerH:%d, w:%d, h:%d", mWidth, mHeight, textureWidthAndHeightPointer[0], textureWidthAndHeightPointer[1]);
        layer->loadTexture(texturePointer, textureWidthAndHeightPointer[0], textureWidthAndHeightPointer[1]);
        layer->loadData((char *) dataPointer, dataWidthAndHeightPointer[0], dataWidthAndHeightPointer[1], dataPixelFormat, 0);
        if (mLayerList) {
            struct ListElement* cursor = mLayerList;
            while (cursor->next) {
                cursor = cursor->next;
            }
            cursor->next = (struct ListElement*) malloc(sizeof(struct ListElement));
            cursor->next->layer = layer;
            cursor->next->next = nullptr;
        } else {
            mLayerList = (struct ListElement*) malloc(sizeof(struct ListElement));
            mLayerList->layer = layer;
            mLayerList->next = nullptr;
        }

2、对图层添加想要的fragShader渲染器

                RenderProgramFilter *renderProgramFilter = new RenderProgramFilter();
                renderProgramFilter->createRender(-1, -mRatio, 0, 2,
                                                  mRatio * 2,
                                                  mWidth,
                                                  mHeight);
                resultProgram = renderProgramFilter;
                layer->addRenderProgram(resultProgram);

3、输入画面呈现用的framebuffer索引

        //防止画面残留：
        glClear(GL_DEPTH_BUFFER_BIT | GL_COLOR_BUFFER_BIT); //清理屏幕
        glClearColor(0.0, 0.0, 0.0, 0.0);
        //遍历图层并渲染
        if (mLayerList) {
            struct ListElement* cursor = mLayerList;
            while (cursor) {
                cursor->layer->drawTo(mCameraMatrix, mProjMatrix, fboPointer, fboWidth, fboHeight, Layer::DRAW_TEXTURE);
                cursor = cursor->next;
            }
        }

Demo代码地址：

learnOpengl: 我的OpenGL联系库 - Gitee.comhttps://gitee.com/cjzcjl/learnOpenGLDemo/tree/main/app/src/main/cpp/opengl_decoder

实际效果，这个Demo依次开启了卷积和LUT滤镜两个流水线fragShader:

在安卓上基于OpenGL ES实现渲染流水线和Lut滤镜，效果展示

至此，一个简单的OpenGL 多图层多重渲染流水线的简易框架就搭建完毕，可以在此之上扩充为一个视频编辑软件或者图像处理软件。