swift - 在 MTKView 上重复冲压纹理的透明度问题

Question

我正在尝试实现一个 Metal 支持的绘图应用程序，其中通过沿路径重复冲压纹理正方形在 MTKView 上绘制笔触。我遇到的问题是，虽然每个画笔图章都正确显示了纹理的不透明度，但重叠的方 block 不会产生值(value)，而是会相互覆盖。在下面的标题中，每个图章都是一个带有 alpha 分量的纹理圆圈

我有一种感觉，因为所有的图章都是一次渲染的，所以渲染器没有办法“建立”值。然而，我对我的 Metal 知识有点不了解，所以我希望有人能给我指出正确的方向。

以下是进一步的相关信息:

对于单个笔刷笔划，所有几何体都存储在一个数组 vertexArrayBrush3DMesh 中，该数组包含所有正方形图章(每个正方形由 2 个三角形组成)。每个顶点的坐标的 z 值为 0.0，这意味着它们都占据相同的 3d“平面”。这可能是个问题吗？ (我测试了放置随机 z 值，但我没有看到行为的视觉差异)

下面是我的 renderPipeline 设置。请注意，“.isBlendingEnabled = true”和“.alphaBlendingOperation = .add”都被注释掉了，因为它们对解决我的问题没有影响

// 5a. Define render pipeline settings
    let renderPipelineDescriptor = MTLRenderPipelineDescriptor()
    renderPipelineDescriptor.vertexFunction = vertexProgram
    renderPipelineDescriptor.sampleCount = self.sampleCount
    renderPipelineDescriptor.colorAttachments[0].pixelFormat = self.colorPixelFormat
    //renderPipelineDescriptor.colorAttachments[0].isBlendingEnabled = true
    //renderPipelineDescriptor.colorAttachments[0].alphaBlendOperation = .add
    renderPipelineDescriptor.fragmentFunction = fragmentProgram

请注意，将以下属性添加到 renderPassDescriptor 确实对设置整个 Canvas 的透明度有影响

// ensure canvas is transparent
        renderPassDescriptor?.colorAttachments[0].loadAction = .clear
        renderPassDescriptor?.colorAttachments[0].clearColor = MTLClearColorMake(0, 0, 0, 0)

下面是我执行渲染的代码部分。

func metalRenderColoredMesh(){
// the key to this routine is that it operates on a prepopulated array of points stored in vertexArrayBrush3DMesh
// whenever we want to render the current mesh, this routine gets called from draw()
if vertexArrayBrush3DMesh.count > 1 { // we must have more than 2 points to be able to draw a line
  // 6. Set buffer size of objects to be drawn
  let dataSize = vertexArrayBrush3DMesh.count * MemoryLayout<Vertex3DColor>.stride // apple recommendation size of the vertex data in bytes
  let vertexBuffer: MTLBuffer = device!.makeBuffer(bytes: vertexArrayBrush3DMesh, length: dataSize, options: [])! // create a new buffer on the GPU
  let renderPassDescriptor: MTLRenderPassDescriptor? = self.currentRenderPassDescriptor
  let samplerState: MTLSamplerState? = defaultSampler(device: self.device!)
  let texture = MetalTexture(resourceName: "opaqueRound", ext: "png", mipmaped: true)

  texture.loadTexture(device: device!, commandQ: commandQueue, flip: true)
  // If the renderPassDescriptor is valid, begin the commands to render into its drawable
  if renderPassDescriptor != nil {
    // ensure canvas is transparent
    renderPassDescriptor?.colorAttachments[0].loadAction = .clear
    renderPassDescriptor?.colorAttachments[0].clearColor = MTLClearColorMake(0, 0, 0, 0)

    // Create a new command buffer for each tessellation pass
    let commandBuffer: MTLCommandBuffer? = commandQueue.makeCommandBuffer()
    // 7a. Create a renderCommandEncoder four our renderPipeline
    let renderCommandEncoder: MTLRenderCommandEncoder? = commandBuffer?.makeRenderCommandEncoder(descriptor: renderPassDescriptor!)
    renderCommandEncoder?.label = "Render Command Encoder"      
    renderCommandEncoder?.setRenderPipelineState(renderPipeline!)
    renderCommandEncoder?.setVertexBuffer(vertexBuffer, offset: 0, index: 0)
    renderCommandEncoder?.setFragmentTexture(texture.texture, index: 0)
    renderCommandEncoder?.setFragmentSamplerState(samplerState, index: 0)

    // most important below: we tell the GPU to draw a set of triangles, based on the vertex buffer. Each triangle consists of three vertices, starting at index 0 inside the vertex buffer, and there are vertexCount/3 triangles total
    renderCommandEncoder?.drawPrimitives(type: .triangle, vertexStart: 0, vertexCount: vertexArrayBrush3DMesh.count)

    ///////////renderCommandEncoder?.popDebugGroup()
    renderCommandEncoder?.endEncoding() // finalize renderEncoder set up

    commandBuffer?.present(self.currentDrawable!) // needed to make sure the new texture is presented as soon as the drawing completes

    // 7b. Render to pipeline
    commandBuffer?.commit() // commit and send task to gpu

  } // end of if renderPassDescriptor

} // end of if vertexArrayBrush3DMesh.count > 1   }// end of func metalRenderColoredMesh()

2017/01/17更新

在实现@warrenm 提供的建议后，我的笔触看起来更有希望了。

但是，结果出现了一些新的问题/问题。

1. 我不确定 Metal 如何处理 > 1 的加法颜色值。它们是否会限制在 1？这是我在笔画的饱和部分看到的振铃的原因吗？

2. 由于我实现的贝塞尔曲线采样的不规则性质，笔触的某些区域看起来有些不规则。为了让这种印记方法发挥作用，我必须想出一种方法将印记均匀地分布在整个笔画上。

Answer 1

您的混合因素需要一些改进。默认情况下，即使启用了混合，片段着色器的输出也会替换颜色缓冲区的当前内容(请注意，我在这里忽略了深度缓冲区，因为这可能无关紧要)。

您当前拥有的混合方程式是:

c_dst′ = 1 * c_src + 0 * c_dst

对于经典的 source-over 合成，你想要的更像是:

c_dst′ = α_src * c_src + (1 - α_src) * c< sub>dst

renderPipelineDescriptor.colorAttachments[0].sourceRGBBlendFactor = .sourceAlpha
renderPipelineDescriptor.colorAttachments[0].destinationRGBBlendFactor = .oneMinusSourceAlpha
renderPipelineDescriptor.colorAttachments[0].sourceAlphaBlendFactor = .sourceAlpha    
renderPipelineDescriptor.colorAttachments[0].destinationAlphaBlendFactor = .oneMinusSourceAlpha

对于您的特定用例，您可能想要使用加法混合，其中新的片段值只是添加到已经存在的片段中:

c_dst′ = 1 * c_src + 1 * c_dst

renderPipelineDescriptor.colorAttachments[0].sourceRGBBlendFactor = .one
renderPipelineDescriptor.colorAttachments[0].destinationRGBBlendFactor = .one
renderPipelineDescriptor.colorAttachments[0].sourceAlphaBlendFactor = .one  
renderPipelineDescriptor.colorAttachments[0].destinationAlphaBlendFactor = .one

您是否真的需要添加混合取决于您所追求的确切效果。当值小于 1 时，它会产生一种“累积”的绘画效果，但一旦累积颜色值超过 1，它也会饱和，这可能并不令人愉快。另一方面，加法混合是可交换的，这意味着您不必关心绘制笔触的顺序。

(在前面的讨论中，我忽略了预乘 alpha，在绘制非不透明图像时绝对必须考虑到这一点。您可以阅读所有关于粗糙细节的信息 here。)