OpenGL着色器设计

[原材料] → [切割] → [上色] → [组装] → [成品]

顶点数据          顶点着色器              片段着色器
[三角形顶点]  →  [把顶点放到屏幕上]  →  [给每个像素上色]  →  屏幕
   ↑                  ↑                      ↑
(CPU传入)          shader.vert           shader.frag

// renderer/videorenderer.cpp 第23-27行
const QString vSrcPath = ":/shaderSource/shader.vert";  // 顶点着色器路径
const QString fSrcPath = ":/shaderSource/shader.frag";  // 片段着色器路径
if (!m_program.addCacheableShaderFromSourceFile(QOpenGLShader::Vertex, vSrcPath) ||
    !m_program.addCacheableShaderFromSourceFile(QOpenGLShader::Fragment, fSrcPath) ||
    !m_program.link()) {
    qDebug() << "着色器程序编译失败";
    return;
}

// resource/shader.vert (14行)
#version 330 core

layout(location = 0) in vec2 aPos;       // 顶点坐标
layout(location = 1) in vec2 aTexCoord;  // 纹理坐标

uniform mat4 transform = mat4(1.0);      // 变换矩阵

out vec2 TexCoord;                        // 传给片段着色器

void main() {
    gl_Position = transform * vec4(aPos, 0.0, 1.0);
    TexCoord = aTexCoord;
}

// videorenderer.cpp 第45-51行
float vertices[] = {
    // 位置(x,y)    纹理(u,v)
    -1.f,  1.f,     0.f, 1.f,   // 左上角
    -1.f, -1.f,     0.f, 0.f,   // 左下角
     1.f, -1.f,     1.f, 0.f,   // 右下角
     1.f,  1.f,     1.f, 1.f    // 右上角
};

  (-1, 1) ───────── (1, 1)          (0,1) ────── (1,1)
    │        ↑         │               │      ↑      │
    │    纹理(0,1)      │               │   左上角    │
    │                  │               │             │
  (-1,-1) ───────── (1,-1)          (0,0) ────── (1,0)
      屏幕坐标 (NDC)                       纹理坐标 (UV)

// resource/shader.frag (199行)
#version 330 core

in vec2 TexCoord;                    // 从顶点着色器传来的纹理坐标

// === CPU 传入的 uniform 参数 ===
uniform int pixFormat = -1;         // 像素格式：0=RGB, 6=YUV, ...
uniform sampler2D yTex;             // Y 纹理（或 RGB 纹理）
uniform sampler2D uTex;             // U 纹理
uniform sampler2D vTex;             // V 纹理
uniform sampler2D aTex;             // A(透明度) 纹理
uniform sampler2D subTex;           // 字幕纹理
uniform int colorSpace = 1;         // 色彩空间：0=BT.601, 1=BT.709, 2=BT.2020
uniform bool fullRange = false;     // YUV 范围：false=电视, true=电脑

out vec4 FragColor;                 // 最终输出：该像素的颜色

void main() {
    // 第1步：根据像素格式采样纹理，得到原始颜色
    // 第2步：YUV→RGB 转换（如果需要）
    // 第3步：亮度/对比度/饱和度调整
    // 第4步：混合字幕
    // 第5步：输出最终颜色
}

// shader.frag 第104-117行（简化） 其实在main里
if (pixFormat == 0) {
    // RGB_PACKED: 三个颜色通道打包在一起，直接取
    color = vec4(texture(yTex, TexCoord).rgb, 1.0);

} else if (pixFormat == 6 || pixFormat == 7) {
    // YUV / YUVA: 亮度和颜色分开存储，分别从不同纹理取
    float y = texture(yTex, TexCoord).r;  // 亮度从纹理0取
    float u = texture(uTex, TexCoord).r;  // 蓝色分量从纹理1取
    float v = texture(vTex, TexCoord).r;  // 红色分量从纹理2取
    // ... 然后转成 RGB
}

// shader.frag 第33-39行 — BT.709 转换矩阵
vec3 yuv2rgb709(float y, float u, float v) {
    y = y * 1.1643835616;
    return vec3(
        y + 1.7927410714 * v - 0.9729450750,           // 红色通道
        y - 0.2132486143 * u - 0.5329093286 * v + 0.3014826655,  // 绿色通道
        y + 2.1124017857 * u - 1.1334022179            // 蓝色通道
    );
}

// videorenderer.cpp 第260-268行
if (frm->color_space == AVCOL_SPC_BT709) {
    currentColorSpace = 1;   // 着色器里用 BT.709
} else if (frm->color_space == AVCOL_SPC_BT2020_NCL) {
    currentColorSpace = 2;   // 着色器里用 BT.2020
} else {
    currentColorSpace = 0;   // 默认 BT.601
}

render() 被调用（每帧一次）
 │
 ├─ ① 准备视频纹理
 │    glActiveTexture(GL_TEXTURE0 + 0);         // 选中纹理单元0
 │    glBindTexture(GL_TEXTURE_2D, m_texArr[0]); // 绑定Y纹理
 │    glTexSubImage2D(...);                      // 上传解码后的Y数据
 │    // 对 U、V 纹理重复（纹理单元1、2）
 │
 ├─ ② 绑定着色器程序
 │    m_program.bind();                          // 激活着色器
 │
 ├─ ③ 设置 uniform 参数（CPU→GPU通信）
 │    m_program.setUniformValue("colorSpace", 1);     // BT.709
 │    m_program.setUniformValue("fullRange", false);   // 电视范围
 │    m_program.setUniformValue("transform", matrix);  // 变换矩阵
 │
 ├─ ④ 绘制
 │    glBindVertexArray(m_vao);                  // 绑定矩形顶点数据
 │    glDrawElements(GL_TRIANGLES, 6, ...);      // 画两个三角形=一个矩形
 │
 └─ ⑤ 解绑
      m_program.release();

m_program.bind();
// 告诉着色器：yTex 去纹理单元 0 取数据
m_program.setUniformValue(m_program.uniformLocation("yTex"), 0);
// 告诉着色器：uTex 去纹理单元 1 取数据
m_program.setUniformValue(m_program.uniformLocation("uTex"), 1);
// 告诉着色器：vTex 去纹理单元 2 取数据
m_program.setUniformValue(m_program.uniformLocation("vTex"), 2);
// 告诉着色器：aTex 去纹理单元 3 取数据
m_program.setUniformValue(m_program.uniformLocation("aTex"), 3);

// videorenderer.cpp 第518-541行
void VideoRenderer::bindAllTexturesForDraw() {
    for (int i = 0; i < 4; ++i) {
        glActiveTexture(GL_TEXTURE0 + i);         // 切到第 i 个槽位
        if (m_texArr[i] != 0) {
            glBindTexture(GL_TEXTURE_2D, m_texArr[i]);  // 放纹理进去
        } else {
            glBindTexture(GL_TEXTURE_2D, 0);      // 空的就解绑，防止误采样
        }
    }
	....
}

// videorenderer.cpp 第466-481行
void VideoRenderer::initTex(GLuint &tex, const QSize &size,
                            const std::array<unsigned int, 3> &para,
                            uint8_t *fill) {
    if (tex != 0)
        glDeleteTextures(1, &tex);     // 先删旧的
    glGenTextures(1, &tex);            // 生成新纹理ID
    glBindTexture(GL_TEXTURE_2D, tex); // 绑定

    // 设置采样参数
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);  // 不重复
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);     // 缩小时线性插值
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);     // 放大时线性插值

    // 分配 GPU 内存并上传数据
    glTexImage2D(GL_TEXTURE_2D, 0, para[0],           // 内部格式(如 GL_R8)
                 size.width(), size.height(), 0,
                 para[1], para[2],                     // 外部格式(如 GL_RED) + 数据类型
                 fill);                                // 实际数据（可为空）
}

// videorenderer.cpp 第483-516行
QMatrix4x4 VideoRenderer::getTransformMat() {
    QMatrix4x4 mat;
    mat.setToIdentity();                      // 初始化为单位矩阵

    mat.translate(m_tx, m_ty, 0.0f);          // ⑤ 平移

    // ④ 画面比例修正
    float scaleX = ..., scaleY = ...;
    mat.scale(scaleX / scaleX0, scaleY / scaleY0, 1.0f);

    mat.scale(m_scaleX, m_scaleY, 1.0f);      // ③ 缩放+镜像
    mat.rotate(m_angle, 0, 0, 1);             // ② 旋转

    mat.scale(scaleX0, scaleY0, 1.f);         // ① 原始比例

    return mat;
}

 ┌─────────────────────────────────────────────────────────┐
 │ CPU 端                                                  │
 │                                                         │
 │ ① FFmpeg 解码                                           │
 │    mp4 文件 → avcodec_decode → AVFrame (YUV420p 裸数据) │
 │                                                         │
 │ ② 提取元数据                                            │
 │    frm->width, frm->height → m_frameSize                │
 │    frm->color_space → currentColorSpace (BT.709/2020)   │
 │    frm->format → pixFormat (6=YUV, 0=RGB...)            │
 │                                                         │
 │ ③ 上传到 GPU 纹理                                       │
 │    glTexSubImage2D → Y plane 存入纹理单元0              │
 │    glTexSubImage2D → U plane 存入纹理单元1              │
 │    glTexSubImage2D → V plane 存入纹理单元2              │
 │                                                         │
 │ ④ 设置着色器参数                                        │
 │    uniform pixFormat  = 6  (YUV格式)                    │
 │    uniform colorSpace = 1  (BT.709)                     │
 │    uniform fullRange  = false                           │
 │    uniform transform  = 旋转/缩放/平移矩阵              │
 │                                                         │
 │ ⑤ 触发绘制                                             │
 │    glDrawElements() → GPU 开始工作                      │
 └────────────────────┬────────────────────────────────────┘
                      │
 ┌────────────────────▼────────────────────────────────────┐
 │ GPU 端                                                  │
 │                                                         │
 │ ⑥ 顶点着色器 (shader.vert) × 4次                       │
 │    每个顶点: pos = transform × 原始位置                 │
 │    输出: 4个屏幕位置 + 插值用的纹理坐标                 │
 │                                                         │
 │ ⑦ 光栅化 (GPU 硬件自动完成)                            │
 │    把矩形切成一个个像素                                 │
 │    纹理坐标在顶点间线性插值                             │
 │                                                         │
 │ ⑧ 片段着色器 (shader.frag) × 1920×1080次               │
 │    每个像素:                                            │
 │      y = texture(yTex, uv).r  ← 从纹理0取亮度          │
 │      u = texture(uTex, uv).r  ← 从纹理1取色度          │
 │      v = texture(vTex, uv).r  ← 从纹理2取色度          │
 │      rgb = yuv2rgb709(y, u, v)  ← BT.709矩阵转换       │
 │      rgb = (rgb-0.5)*contrast+0.5  ← 对比度            │
 │      叠加字幕 (如有)                                    │
 │      FragColor = rgb  ← 写入帧缓冲                     │
 └────────────────────┬────────────────────────────────────┘
                      │
 ┌────────────────────▼────────────────────────────────────┐
 │ 屏幕                                                    │
 │     FBO → Qt Quick → 显示器                             │
 └─────────────────────────────────────────────────────────┘