WebGPU[3] 多重採樣抗鋸齒

代碼見：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: {...}
    }
  ]
}

最後抗鋸齒的效果就出來了