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

Question

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

我有一种感觉，因为所有的图章都是一次渲染，所以渲染器没有办法 "build up" 值。然而，我对我的金属 know-how 有点不知所措，所以我希望有人能给我指出正确的方向。

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

对于单个画笔笔划，所有几何图形都存储在包含所有正方形图章（每个正方形由 2 个三角形组成）的数组 vertexArrayBrush3DMesh 中。每个顶点的坐标 z-value 为 0.0，这意味着它们都占据相同的 3d 'plane'。这可能是个问题吗？（我测试了随机放置 z-values，但我没有看到行为上的视觉差异）

下面是我的 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 提供的建议后，我的笔触看起来更有希望了。

然而，一些新的 questions/issues 也因此出现了。

我不确定 Metal 如何处理 > 1 的加法颜色值。它们会被限制在 1 吗？这是我在笔划的饱和部分看到的振铃的原因吗？
由于我实施的贝塞尔曲线采样的不规则性质，笔触的某些区域看起来有些不规则。为了使这种印章方法起作用，我必须想出一种方法将印章均匀分布在整个笔画上。

Answer 1

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

您当前的混合方程是：

c_dst′ = 1 * c_src + 0 * c_dst

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

c_dst′ = α_src * c_src + (1 - α_src) * c_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 时，它会创建一种 "accumulating" 绘画效果，但一旦累积颜色值超过 1，它也会饱和，这可能并不令人愉快。另一方面，加法混合是可交换的，这意味着您不必关心绘制笔触的顺序。

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

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

transparency issues with repeated stamping of textures on an MTKView

swift

swift3

metal

render-to-texture