代碼見：https://github.com/onsummer/my-dev-notes/tree/master/webgpu-Notes/03-msaa
指定重采樣次數為 4 次，測驗中除了 1 和 4 其他均不支持（可能是我沒找對方法），
const sampleTimes = 4
修改 02 篇的代碼以支持多重采樣抗鋸齒
msaa，多重采樣抗鋸齒，根據修改的代碼看，是先繪制到一個 texture 上然后再繪制到交換鏈的 texture 上，
首先，在創建渲染管線時增加 GPUMultiSampleState 項 multisample：
const pipeline = device.createRenderPipeline({
vertex: // ... ,
fragment: // ... ,
primitive: // ... ,
multisample: {
count: sampleTimes
}
})
然后，使用 device.createTexture() 方法創建一個紋理，并獲取其訪問視圖
const texture = device.createTexture({
size: {
width: canvas.width,
height: canvas.height,
},
sampleCount: sampleTimes,
format: swapChainFormat,
usage: GPUTextureUsage.RENDER_ATTACHMENT,
})
const msaa_textureView = texture.createView()
將 renderPassDescriptor 中 colorAttachments 中的 attachment 設為此 texture 的 view
將 renderPassDescriptor 中 colorAttachments 中的 resolveTarget 設為交換鏈的 texture 的 view
修改 renderPassDescriptor 中的 colorAttachments：
// 原來的
const textureView = swapChain.getCurrentTexture().createView()
const renderPassDescriptor = {
colorAttachments: [
{
attachment: textureView,
loadValue: {...}
}
]
}
// 修改后的
const textureView = swapChain.getCurrentTexture().createView()
const renderPassDescriptor = {
colorAttachments: [
{
attachment: msaa_textureView, // 注意此處變化
resolveTarget: textureView, // 原來交換鏈的 textureView 被移到了 resolveTarget 項
loadValue: {...}
}
]
}
最后抗鋸齒的效果就出來了
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/271445.html
標籤：其他
下一篇：QT學習筆記