WebGL2 vs WebGPU: 抗锯齿的性能对比

前端

2023-12-09 20:55:33

Hello, WebGPU——多重采样抗锯齿

Hello WebGPU——绘制第一个三角形一文中，我们利用 WebGPU 绘制出了我们的第一个三角形。然而，我们发现它有一些小小的问题，如下所示：

锯齿状三角形

锯齿的本质

锯齿是一种常见的图形缺陷，出现在图像中对角线和曲线边缘时。它由图像的像素化本质引起。当我们放大图像时，我们可以看到组成图像的单个像素。当这些像素以对角线或曲线方式排列时，它们会产生锯齿状效果。

抗锯齿技术

抗锯齿是一种技术，用于减少或消除图像中的锯齿。它通过将多个采样点应用于图像的每个像素来工作。这些采样点用于计算像素的颜色，产生更平滑、更连续的外观。

WebGPU 中的多重采样抗锯齿

WebGPU 提供了多重采样抗锯齿 (MSAA) 功能，它是一种抗锯齿技术，可以在 WebGPU 应用程序中使用。MSAA 通过在单个像素覆盖的区域内渲染多个采样点来工作。这些采样点的颜色然后被平均起来以产生像素的最终颜色。

启用 MSAA

要在 WebGPU 应用程序中启用 MSAAA，我们需要执行以下步骤：

创建一个 MSAATexture 对象。这将用作渲染目标纹理，MSA 将应用于其中。
在创建渲染管线时，将 MSAATexture 作为颜色附件。
在渲染命令编码器中，将 MSAA 设置为 true。

示例代码

const msaaTexture = device.createTexture({
  size: [canvas.width, canvas.height],
  format: 'bgra8unorm',
  usage: GPUTextureUsage.RENDER_ATTACHMENT,
});

const renderPipeline = device.createRenderPipeline({
  vertex: {
    module: vsModule,
    entryPoint: 'main',
  },
  fragment: {
    module: fsModule,
    entryPoint: 'main',
  },
  colorAttachments: [{
    view: msaaTexture.createView(),
    loadOp: 'clear',
    storeOp: 'store',
  }],
});

const commandEncoder = device.createCommandEncoder();

const renderPassDescriptor = {
  colorAttachments: [{
    attachment: msaaTexture.createView(),
    resolveTarget: canvasTexture.createView(),
    loadOp: 'clear',
    storeOp: 'store',
  }],
};

const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
passEncoder.setPipeline(renderPipeline);
passEncoder.draw(vertexCount, 1, 0, 0);
passEncoder.endPass();

device.queue.submit([commandEncoder.finish()]);