代碼見:https://github.com/onsummer/my-dev-notes/tree/master/webgpu-Notes/03-msaagit
指定重採樣次數爲 4 次,測試中除了 1 和 4 其餘均不支持(多是我沒找對方法)。github
const sampleTimes = 4
msaa,多重採樣抗鋸齒,根據修改的代碼看,是先繪製到一個 texture 上而後再繪製到交換鏈的 texture 上。web
首先,在建立渲染管線時增長 GPUMultiSampleState
項 multisample
:canvas
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
:code
// 原來的 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: {...} } ] }
最後抗鋸齒的效果就出來了orm