Metal中加载带Alpha通道纹理后，如何正确绘制半透明像素？

我正将老旧的Mac万花筒应用ScopeWorks（基于OpenGL和Objective-C开发）迁移为SwiftUI+Metal的跨平台应用。我使用MetalKit的MTKView类，通过NSViewRepresentable或UIViewRepresentable封装适配SwiftUI，并实现MTKViewDelegate提供绘制方法。该方法会获取当前渲染通道描述符、创建命令缓冲区、设置渲染管线并执行绘制。

我的渲染器makePipeline方法如下：

func makePipeline() {
    let library = device.makeDefaultLibrary()
    let pipelineDesc = MTLRenderPipelineDescriptor()
    pipelineDesc.vertexFunction = library?.makeFunction(name: "vertex_main")
    pipelineDesc.fragmentFunction = library?.makeFunction(name: "fragment_main")
    pipelineDesc.colorAttachments[0].pixelFormat = .bgra8Unorm
    pipeline = try! device.makeRenderPipelineState(descriptor: pipelineDesc)
}

着色器代码如下：

struct VertexOut {
    float4 position [[position]];
    float2 texCoord;
};

vertex VertexOut vertex_main(const device float2* position [[buffer(0)]],
                             uint vid [[vertex_id]]) {
    VertexOut out;
    float2 pos = position[vid];
    out.position = float4(pos, 0, 1);
    out.texCoord = pos * 0.5 + 0.5; // basic mapping
    return out;
}

fragment float4 fragment_main(VertexOut in [[stage_in]],
                              texture2d<float> tex [[texture(0)]],
                              constant float4& color [[buffer(1)]]) {
    constexpr sampler s(address::repeat, filter::linear);
    //    float4 texColor = tex.sample(s, in.texCoord);
    //    return texColor * color;
    float4 textureColor = {1, 2, 3, 4};
    if (all(color == textureColor)) {
        return tex.sample(s, in.texCoord);
    } else {
        return color;
    }

    // Sample the texture directly — no color tint applied
    return tex.sample(s, in.texCoord);
}

MTKViewDelegate的draw方法部分代码如下：

func draw(in view: MTKView) {
    guard let drawable = view.currentDrawable,
          let descriptor = view.currentRenderPassDescriptor,
          let pipeline = pipeline,
          let texture = texture else { return }

    let commandBuffer = commandQueue.makeCommandBuffer()!
    let encoder = commandBuffer.makeRenderCommandEncoder(descriptor: descriptor)!
    encoder.setRenderPipelineState(pipeline)
    encoder.setFragmentTexture(texture, index: 0)
    descriptor.colorAttachments[0].clearColor = MTLClearColor(red: 0.0, green: 0, blue: 0, alpha: 1.0)

    // Draw six equilateral triangles forming the hexagon
    let radius: Float = 0.6
    for i in 0..<6 {
        let angle = Float(i) * (.pi / 3)
        let cosA = cos(angle)
        let sinA = sin(angle)
        let nextA = Float(i+1) * (.pi / 3)
        let cosB = cos(nextA)
        let sinB = sin(nextA)
        let verts: [simd_float2] = [
            simd_float2(0, 0),
            simd_float2(radius * cosA, radius * sinA),
            simd_float2(radius * cosB, radius * sinB)
        ]
        encoder.setVertexBytes(verts, length: MemoryLayout<simd_float2>.stride * 3, index: 0)
        
        // Tell the fragment shader to use the texture color.
        var textureColor: simd_float4 = simd_float4(1, 2, 3, 4)
        encoder.setFragmentBytes(&textureColor, length: MemoryLayout<SIMD4<Float>>.stride, index: 1)

        encoder.drawPrimitives(type: .triangle, vertexStart: 0, vertexCount: 3)
}

原应用支持加载带Alpha通道的PNG或TIFF图片，并将图片的部分区域翻转后叠加，形成万花筒中的莫尔条纹效果。目前我正在测试单张示例图片，将其加载为Metal纹理并渲染为六边形，同时绘制组成六边形的三角形线条（当前使用顶点坐标作为纹理坐标，后续会调整）。在iOS和macOS端，我都在draw方法开头将清除颜色设置为黑色。

源图片大部分区域透明，且包含大量半透明像素（在Photoshop中可通过棋盘格看到透明区域）：

（已裁剪原图以展示六边形渲染的大致区域，仅供对比参考）

在iOS端Metal视图中渲染六边形时，像素被强制为完全透明或完全不透明：

而在macOS端，所有像素都被强制为完全不透明：

请问我缺少了哪些渲染模式设置，才能让Metal根据像素的透明度（包括半透明）正确绘制图像？

要让Metal正确处理半透明像素，需要调整以下关键设置：

1. 启用混合模式 #

Metal默认不开启混合，需在渲染管线描述符中为颜色附件配置混合参数，让Alpha值参与合成：

func makePipeline() {
    let library = device.makeDefaultLibrary()
    let pipelineDesc = MTLRenderPipelineDescriptor()
    pipelineDesc.vertexFunction = library?.makeFunction(name: "vertex_main")
    pipelineDesc.fragmentFunction = library?.makeFunction(name: "fragment_main")
    
    let colorAttachment = pipelineDesc.colorAttachments[0]
    colorAttachment.pixelFormat = .bgra8Unorm
    // 开启混合
    colorAttachment.isBlendingEnabled = true
    // 配置RGB混合规则：源颜色*源Alpha + 目标颜色*(1-源Alpha)
    colorAttachment.rgbBlendOperation = .add
    colorAttachment.sourceRGBBlendFactor = .sourceAlpha
    colorAttachment.destinationRGBBlendFactor = .oneMinusSourceAlpha
    // 配置Alpha混合规则（与RGB保持一致）
    colorAttachment.alphaBlendOperation = .add
    colorAttachment.sourceAlphaBlendFactor = .sourceAlpha
    colorAttachment.destinationAlphaBlendFactor = .oneMinusSourceAlpha
    
    pipeline = try! device.makeRenderPipelineState(descriptor: pipelineDesc)
}

2. 确保纹理格式包含Alpha通道 #

检查纹理加载代码，确保生成的Metal纹理使用支持Alpha的格式（如.bgra8Unorm或.rgba8Unorm），避免因格式错误丢失半透明信息。

3. 修正视图透明度配置 #

• macOS端：确保MTKView的wantsLayer = true，且layer?.isOpaque = false，避免视图强制不透明覆盖Alpha效果。
• iOS端：确保UIViewRepresentable封装的MTKViewisOpaque = false，同时SwiftUI父视图不要设置不透明背景。

4. 验证着色器Alpha读取 #

可临时修改着色器输出，确认Alpha通道是否正确读取：

fragment float4 fragment_main(VertexOut in [[stage_in]],
                              texture2d<float> tex [[texture(0)]],
                              constant float4& color [[buffer(1)]]) {
    constexpr sampler s(address::repeat, filter::linear);
    float4 sampledColor = tex.sample(s, in.texCoord);
    // 测试半透明红色，验证混合是否生效
    // return float4(1, 0, 0, 0.5);
    return sampledColor;
}

5. 检查渲染通道存储模式 #

确保渲染通道描述符的颜色附件存储模式为.shared或.private，避免使用.memoryless这类不保留Alpha的模式。

内容的提问来源于stack exchange，提问作者Duncan C