四、WebGPU——多重采样抗锯齿

利用WebGPU绘制出了一个三角形，发现它有一些小小的问题。放大观察，可以清晰地看到三角形的边缘出现了很多锯齿。

在PSO中增加 multisample 配置项

const cellPipeline = device.createRenderPipeline({
    ...
    multisample: {
        count: 4
    }
});

创建一个纹理对象

// 创建4倍采样纹理，抗锯齿
let MSAATexture = device.createTexture({
    size, format,
    sampleCount: 4,
    usage: GPUTextureUsage.RENDER_ATTACHMENT
});
let MSAAView = MSAATexture.createView();

给RenderPass设置 view 和 resolvedTarget

const renderPassDescriptor = {
    colorAttachments: [
        {
            view: MSAAView,
            resolveTarget: context.getCurrentTexture().createView(),
            ...
        }
    ]
}
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor)