3. AR特效渲染管线

3.1 渲染管线概览

AR特效渲染管线将相机实时预览帧转换为GPU纹理，经过坐标系对齐与特效着色器处理后输出到屏幕。整个流程遵循“采集→转换→上传→渲染→合成”的线性模型，其中GPU纹理流转是性能瓶颈的核心。

3.2 GPU纹理流转流程

以下流程图展示了从相机设备到屏幕显示的完整纹理流转路径：

3.3 相机预览帧处理

Android端通过CameraX.ImageAnalysis或Camera2 API获取Image对象，iOS端通过AVCaptureVideoDataOutput获得CMSampleBuffer。核心处理步骤如下：

1. 帧格式识别：YUV_420_888（Android）、NV12（iOS）、BGRA（部分设备）。
2. 色彩空间转换：使用CPU内建或GPU着色器将YUV转换为RGBA。
3. 内存对齐：确保纹理宽度为4的倍数，避免上传时出现乱纹。

// Android – 使用OpenGL ES将YUV纹理转换为RGB
// 在片段着色器中定义统一的Y/U/V纹理采样器
uniform sampler2D u_texY;
uniform sampler2D u_texU;
uniform sampler2D u_texV;
varying vec2 vTexCoord;
void main() {
    float y = texture2D(u_texY, vTexCoord).r;
    float u = texture2D(u_texU, vTexCoord).r - 0.5;
    float v = texture2D(u_texV, vTexCoord).r - 0.5;
    vec3 rgb = mat3(1.0,       1.0,      1.0,
                    0.0,  -0.344,  1.772,
                    1.402, -0.714,  0.0) * vec3(y, u, v);
    gl_FragColor = vec4(rgb, 1.0);
}

3.4 OpenGL ES / Metal画布配置

渲染画布可以是主屏幕帧缓冲区或离屏FBO。离屏渲染用于特效预合成，避免直接修改显示缓冲区带来的闪烁。关键配置参数：

3.5 特效叠加坐标系对齐

AR特效要求特效元素（如面具、粒子）精确匹配人脸或世界位置，核心是坐标系对齐。涉及三个坐标系：

• 纹理坐标系：左上角(0,0)，右下角(1,1)，用于采样相机帧和特效纹理。
• 顶点坐标系：NDC（归一化设备坐标）范围[-1,1]（OpenGL）；Metal NDC范围[-1,1]但y轴向上。
• 屏幕坐标系：像素坐标，用于视口映射。

对齐策略：通过投影矩阵（Projection Matrix）将特效顶点从世界坐标变换到NDC，再通过视口变换（Viewport Transform）映射到像素。对于人脸特效，通常将人脸关键点归一化到[0,1]纹理坐标，再转换为NDC。

// 将纹理坐标转换到NDC（OpenGL ES）
// 假设特效矩形在纹理坐标中为 (u0,v0)~(u1,v1)
void texToNDC(float u, float v, float &x, float &y) {
    x = 2.0f * u - 1.0f;
    y = 2.0f * v - 1.0f;
    // 若y轴朝向相反，根据相机帧朝向调整符号
    if (cameraIsFrontFacing) y = -y;
}

3.6 调试与性能优化

常用调试工具：

• GL Error Check：每次调用后插入glGetError()，捕获错误码。
• Metal Validation：启用MTLValidationLayer，在Xcode中设置GPU Frame Capture。
• 纹理下载：使用glReadPixels或MTLTexture getBytes验证渲染结果。

性能优化要点：

3.7 常见错误与对策

• 纹理颠倒或镜像：相机预览帧在Android上可能上下颠倒。对策：在片段着色器中将v坐标取反（1.0–v）。
• 特效被裁剪：顶点坐标超出NDC范围。检查特效模型变换矩阵是否包含缩放因子。
• 性能抖帧：帧率高但偶发跳帧。原因：纹理上传同步等待。改用双缓冲纹理池解耦。
• 多平台纹理坐标差异：OpenGL ES纹理原点在左下，Metal在左上。统一约定成左上原点，在渲染时修正。

// iOS Metal – 修正Y轴朝向的顶点着色器代码片段
vertex float4 vertexShader(const device Vertex *vertices [[buffer(0)]],
                           constant Uniforms &uniforms [[buffer(1)]]) {
    float4 pos = float4(vertices[vid].position.x, -vertices[vid].position.y, 0, 1);
    return uniforms.projectionMatrix * pos;
}