在Metal中处理不同尺寸的多个渲染目标的技术实现疑问

嘿，这个需求在视频编码、色彩空间转换这类场景里太常见了！我之前也踩过类似的坑，核心问题其实是Metal默认的视口裁剪逻辑在作祟，咱们一步步拆解解决：

首先，你遇到的「渲染区域只对应小纹理」的问题，是因为Metal会自动把视口设置为所有绑定的渲染目标中尺寸最小的那个，这样一来，你的全尺寸Y纹理自然只能被填充一小部分。要解决这个，第一步就是手动强制设置视口为Y纹理的完整尺寸，打破Metal的自动裁剪。

但这里有个新问题：当视口是全尺寸时，片段着色器会处理Y纹理的每一个像素，但CbCr纹理尺寸只有一半，直接输出的话，大部分片段的坐标会超出CbCr纹理的范围——这时候就需要在着色器里手动做坐标映射，让每个Y像素对应到正确的CbCr像素位置。

接下来给你具体的实现步骤和代码示例：

1. 渲染管线与纹理准备 #

首先要确保两个纹理的格式匹配需求：

• Y纹理用单通道格式，比如MTLPixelFormatR8Unorm，尺寸和输入RGB纹理一致；
• CbCr纹理用双通道格式，比如MTLPixelFormatRG8Unorm，宽高是Y纹理的1/2（对应4:2:0子采样）。

创建渲染管线状态时，要明确指定两个颜色附件的像素格式，和你创建的纹理格式一一对应。

2. 片段着色器的坐标映射与色彩转换 #

在片段着色器里，我们需要完成两个核心工作：RGB转YCbCr的色彩计算，以及CbCr输出的坐标映射。

示例代码：

// 定义MRT输出结构体，对应两个颜色附件
struct FragmentOutput {
    float4 Y [[color(0)]];   // 输出到Y纹理（附件0）
    float2 CbCr [[color(1)]];// 输出到CbCr纹理（附件1）
};

// 顶点输出结构体，包含屏幕坐标和归一化纹理坐标
struct VertexOut {
    float4 position [[position]];
    float2 texCoord;
};

fragment FragmentOutput ycbcrConversion(VertexOut in [[stage_in]],
                                        texture2d<float, access::read> inputRGB [[texture(0)]],
                                        sampler textureSampler [[sampler(0)]]) {
    FragmentOutput out;
    
    // 采样输入RGB纹理
    float4 rgb = inputRGB.sample(textureSampler, in.texCoord);
    
    // 用BT.709标准完成RGB到YCbCr的转换
    float Y = 0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b;
    float Cb = (rgb.b - Y) * 0.564 + 0.5;
    float Cr = (rgb.r - Y) * 0.713 + 0.5;
    
    // Y通道直接输出，每个片段对应Y纹理的一个像素
    out.Y = float4(Y, 0.0, 0.0, 1.0);
    
    // 计算CbCr纹理的归一化坐标：将Y纹理的坐标缩放1/2
    // 因为4个Y像素对应1个CbCr像素，所以直接除以2即可
    float2 cbcrTexCoord = in.texCoord / 2.0;
    // 同一个CbCr像素对应的4个Y像素，计算出的CbCr值是一致的，直接输出即可
    out.CbCr = float2(Cb, Cr);
    
    return out;
}

3. 渲染命令的关键设置 #

在构建渲染命令时，重点要手动设置视口，并正确绑定两个纹理：

示例Swift代码：

// 假设已经创建好Y纹理(yTexture)、CbCr纹理(cbcrTexture)、输入RGB纹理(inputRGBTexture)
let renderPassDesc = MTLRenderPassDescriptor()

// 配置Y纹理为颜色附件0
renderPassDesc.colorAttachments[0].texture = yTexture
renderPassDesc.colorAttachments[0].loadAction = .clear
renderPassDesc.colorAttachments[0].clearColor = MTLClearColor(red: 0, green: 0, blue: 0, alpha: 1)
renderPassDesc.colorAttachments[0].storeAction = .store

// 配置CbCr纹理为颜色附件1
renderPassDesc.colorAttachments[1].texture = cbcrTexture
renderPassDesc.colorAttachments[1].loadAction = .clear
renderPassDesc.colorAttachments[1].clearColor = MTLClearColor(red: 0.5, green: 0.5, blue: 0, alpha: 1)
renderPassDesc.colorAttachments[1].storeAction = .store

// 创建渲染命令编码器
guard let encoder = commandBuffer.makeRenderCommandEncoder(descriptor: renderPassDesc) else {
    fatalError("Failed to create render encoder")
}

// 关键：手动设置视口为Y纹理的全尺寸，覆盖Metal的自动裁剪
let viewport = MTLViewport(
    originX: 0,
    originY: 0,
    width: Double(yTexture.width),
    height: Double(yTexture.height),
    znear: 0,
    zfar: 1
)
encoder.setViewport(viewport)

// 设置渲染管线、顶点缓冲区、纹理等资源
encoder.setRenderPipelineState(ycbcrPSO)
encoder.setVertexBuffer(fullScreenQuadBuffer, offset: 0, index: 0)
encoder.setFragmentTexture(inputRGBTexture, index: 0)
encoder.setFragmentSamplerState(defaultSampler, index: 0)

// 绘制全屏四边形，覆盖Y纹理的所有像素
encoder.drawPrimitives(type: .triangleStrip, vertexStart: 0, vertexCount: 4)

encoder.endEncoding()

几个关键注意点 #

• 混合模式设置：因为同一个CbCr像素会被4个Y像素对应的片段写入，要确保最终写入的是正确值。可以给CbCr的颜色附件设置混合模式为「覆盖」：

  renderPassDesc.colorAttachments[1].blendingEnabled = true
  renderPassDesc.colorAttachments[1].sourceRGBBlendFactor = .one
  renderPassDesc.colorAttachments[1].destinationRGBBlendFactor = .zero
  renderPassDesc.colorAttachments[1].rgbBlendOperation = .add
  

  这样每个片段都会直接覆盖之前的写入，而因为4个片段计算的CbCr值一致，结果是正确的。
• 纹理原点：Metal的纹理原点在左下角，如果你用的是UIKit坐标系（原点在右上角），需要注意坐标转换，避免图像翻转。
• 性能优化：如果觉得每个CbCr像素被写入4次有点浪费，也可以只绘制CbCr尺寸的网格，然后在着色器中一次计算4个Y像素的值写入Y纹理，但这种方式会增加着色器的复杂度，通常前者的性能已经足够。

备注：内容来源于stack exchange，提问作者tenuki