Metal Alpha Blending实现平滑连续线条问题排查

我尝试实现通过大量3D点绘制平滑线条的方法，具体是在每个3D点处放置带广告牌模型视图矩阵的小四边形，并贴上圆形渐变纹理（纹理边缘透明）。

我的混合选项设置如下：

// Allow alpha blending
pipelineDescriptor.colorAttachments[0].isBlendingEnabled = true
pipelineDescriptor.colorAttachments[0].rgbBlendOperation = .add
pipelineDescriptor.colorAttachments[0].alphaBlendOperation = .add
pipelineDescriptor.colorAttachments[0].sourceRGBBlendFactor = .sourceAlpha
pipelineDescriptor.colorAttachments[0].sourceAlphaBlendFactor = .oneMinusSourceAlpha
pipelineDescriptor.colorAttachments[0].destinationRGBBlendFactor = .sourceAlpha
pipelineDescriptor.colorAttachments[0].destinationAlphaBlendFactor = .oneMinusSourceAlpha

目前alpha混合与场景其他部分正常工作，但线条自身的四边形之间混合失效，部分四边形的尖锐边角覆盖了下一个四边形。我猜测可能是Z序问题，但每个点都有唯一位置。

我的片段着色器仅采样纹理并设置颜色：

fragment float4 frag_main(VertexOut fragmentIn [[stage_in]],
                              constant FragUniforms &uniforms [[buffer(0)]],
                              texture2d<float, access::sample> baseColorTexture [[texture(0)]],
                              sampler baseColorSampler [[sampler(0)]]
{
    
    // Sample the image
    float3 baseColor = baseColorTexture.sample(baseColorSampler, fragmentIn.texCoords).rgb;

    return float4(baseColor, 1.0);
    
}

请问我哪里出错了？如何让混合正常工作，使四边形呈现为连续平滑的线条？

1. 修复片段着色器，保留纹理Alpha通道 #

你当前的片段着色器强制将alpha设为1.0，完全丢弃了纹理本身的透明渐变信息——这是四边形边缘无法混合的核心原因。修改为保留纹理的RGBA值：

fragment float4 frag_main(VertexOut fragmentIn [[stage_in]],
                          constant FragUniforms &uniforms [[buffer(0)]],
                          texture2d<float, access::sample> baseColorTexture [[texture(0)]],
                          sampler baseColorSampler [[sampler(0)]]
{
    // 完整采样纹理的RGBA通道
    float4 baseColor = baseColorTexture.sample(baseColorSampler, fragmentIn.texCoords);
    // 返回包含透明信息的颜色值
    return baseColor;
}

2. 修正混合因子配置 #

当前的混合因子逻辑错误，不符合标准alpha混合的叠加规则。调整为以下配置：

pipelineDescriptor.colorAttachments[0].isBlendingEnabled = true
pipelineDescriptor.colorAttachments[0].rgbBlendOperation = .add
pipelineDescriptor.colorAttachments[0].alphaBlendOperation = .add
// 源因子：使用自身alpha控制透明度
pipelineDescriptor.colorAttachments[0].sourceRGBBlendFactor = .sourceAlpha
pipelineDescriptor.colorAttachments[0].sourceAlphaBlendFactor = .sourceAlpha
// 目标因子：用1减去源alpha，保证背景颜色正确叠加
pipelineDescriptor.colorAttachments[0].destinationRGBBlendFactor = .oneMinusSourceAlpha
pipelineDescriptor.colorAttachments[0].destinationAlphaBlendFactor = .oneMinusSourceAlpha

3. 处理深度测试对混合的影响 #

即使每个点位置唯一，四边形仍会有重叠区域。如果开启了深度测试，先绘制的四边形会占据深度缓冲区，后绘制的重叠片段会被直接丢弃，无法参与混合。解决方法：

• 绘制线条四边形时，临时关闭深度写入（depthWriteEnabled = false），同时保持深度测试为lessOrEqual，这样重叠片段都能被绘制并混合。
• 确保四边形按照从相机远到近的顺序绘制，保证透明混合的叠加顺序正确。

4. 优化纹理采样（可选） #

为了让线条边缘更平滑，给采样器设置线性过滤：

let samplerDesc = MTLSamplerDescriptor()
samplerDesc.minFilter = .linear
samplerDesc.magFilter = .linear
samplerDesc.sAddressMode = .clampToEdge
samplerDesc.tAddressMode = .clampToEdge
let sampler = device.makeSampler(descriptor: samplerDesc)!

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