WebGPU: Как отрисовать текстуры с альфа-каналом?

Question

[icosmos]

Как отрисовать две PNG-картинки друг над другом с прозрачными областями. Сейчас они непрозрачные.

var commandEncoder = device.createCommandEncoder ()
var pass = commandEncoder.beginRenderPass
({
  colorAttachments:
  [{
    view: context.getCurrentTexture ().createView (),
    clearValue: [0,0,0,0],
    loadOp: 'clear',
    storeOp: 'store'
  }]
})

pass.setPipeline (d1.pipeline)
pass.setBindGroup (0, d1.group)
pass.setVertexBuffer (0, d1.buf1)
pass.setVertexBuffer (1, d1.buf2)
pass.draw (6)

pass.setPipeline (d2.pipeline)
pass.setBindGroup (0, d2.group)
pass.setVertexBuffer (0, d2.buf1)
pass.setVertexBuffer (1, d2.buf2)
pass.draw (6)

pass.end ()
device.queue.submit ([commandEncoder.finish ()])

В WebGL можно было делать такое:

context.enable (context.BLEND)
context.blendFunc (context.SRC_ALPHA,  context.ONE_MINUS_SRC_ALPHA)

Answer 1

[icosmos]

Разобрался. Нужно, при создании пайплайна, указать свойство "blend" с обязательными полями "alpha" и "color", в разделе "fragment"

device.createRenderPipeline
({
  layout,
  vertex,
  fragment:
  {
    module: shaderModule,
    entryPoint: 'fs',
    targets:
    [{
      format,
      blend:
      {
        alpha: { dstFactor: 'one-minus-src-alpha' },
        color: { dstFactor: 'one-minus-src-alpha' }
      }
    }]
  }
})