WebGPU[3] 多重採樣抗鋸齒

代碼見:https://github.com/onsummer/my-dev-notes/tree/master/webgpu-Notes/03-msaagit

指定重採樣次數爲 4 次,測試中除了 1 和 4 其餘均不支持(多是我沒找對方法)。github

const sampleTimes = 4

修改 02 篇的代碼以支持多重採樣抗鋸齒

msaa,多重採樣抗鋸齒,根據修改的代碼看,是先繪製到一個 texture 上而後再繪製到交換鏈的 texture 上。web

首先,在建立渲染管線時增長 GPUMultiSampleStatemultisamplecanvas

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 中的 colorAttachmentscode

// 原來的
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

相關文章
相關標籤/搜索