WebGPU[1] 三角形

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

如果本篇的代碼不能跑了，請聯系我或自己看看文檔試試修改。
發布日：2021年3月31日；更新日 2021年5月6日

入口：navigator.gpu

WebGL1 或 WebGL2 是從 canvas.getContext('webgl') 這樣獲取一個上下文對象來進行一切操作的。

而 WebGPU 則直接從瀏覽器對象中獲取一個附件一樣的東西：navigator.gpu，如果你在控制台獲取這玩意兒獲取不到，說明你沒開實驗特性或瀏覽器壓根不支持 WebGPU。

這就很像從主機里掏出一張顯卡一樣。

適配器 & 設備

代碼最開始要從這個 gpu 對象里請求一個“適配器（adapter，是 er 不是 or）”，然后從適配器里請求一個“設備（device）”。

const adapter = await navigator.gpu.requestAdapter()
const device = await adapter.requestDevice()

適配器，指的是物理顯卡。聰明的你一定能猜到，除了N卡，還有高通驍龍上面的 SoC 圖形處理器，所以這個 requestAdapter() 是可以傳遞參數的。

設備，即把物理顯卡進行邏輯對象化。當調用 requestDevice() 時，允許請求一些顯卡的擴展特性，就像 WebGL 會通過請求擴展來引入額外的功能一樣。

后續代碼中，大量的操作均以函數調用的方式，由設備發出。這個設備對象，就類似 WebGL 的 context。區別的地方，就是“設備”它是顯卡功能的集合體，更接近顯卡本身，而 context 只是與顯卡對話的中間人，是一個上下文對象。

休息一下！

交換鏈、渲染管線、WebGPU上下文、編碼器

不理解 WebGPU 的渲染流程，就沒辦法進行下一步的。
關於交換鏈的描述，這里 講得比我好。

• canvas -創建-> WebGPU上下文 -創建-> 交換鏈 -創建-> canvas像素內存視圖（視圖用於操作像素內存，輔助交換鏈的交換工作，將顯卡上渲染好的數據寫入像素內存）
• 設備 -創建-> “命令”編碼器 -創建-> “渲染通道”編碼器

渲染進行時，渲染通道編碼器 會將 “渲染通道描述對象”，通過 交換鏈 繪制到 canvas 上。

編碼器如何訪問canvas？通過 this.swapChain.getCurrentTexture().createView() 創建出來的對象來訪問 canvas 上的像素內存，把顯存里繪制好的數據寫入 canvas 上的像素內存。

const textureView = swapChain.getCurrentTexture().createView()
const renderPassDescriptor = {
  colorAttachments: [{
    attachment: textureView,
    loadValue: {
      r: 0.0, g: 0.0, b: 0.0, a: 1.0
    }
  }]
}
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor)

“命令”編碼器通過傳遞進來的參數與交換鏈上的 canvas 像素內存作綁定，返回一個 “渲染通道”編碼器，“渲染通道”編碼器則通過設置渲染管線、調用函數來完成繪制。

passEncoder.setPipeline(pipeline)
passEncoder.draw(3, 1, 0, 0)

最后，結束此渲染通道，結束指令編碼器，所有指令扔給設備。

passEncoder.endPass()
device.queue.submit([commandEncoder.finish()])

提示

若要進行代碼結構優化，不想堆屎山，恭喜你，一個未來未來的架構師正在發芽，當前進度：新建文件夾。

優化的第一步，先把以下三個對象提升生命周期：

• 適配器
• 設備
• 交換鏈

渲染一次（幀）所需的着色器、編碼器、管線和數據可能不盡一樣，但是以上仨貨基本不變。

現在頂點數據寫死在着色器中，后續會從內存中讀取並傳入，類似 WebGLBuffer。

大致結構可布局如下：

const adapter = // 請求適配器
const gtx4090ti = // 請求設備
const swapChain = // 從canvas上下文中獲取交換鏈

// 經典的 rAF
function requestNewFrame() {
  const pipeline = // 創建管線
  const cmdEncoder = // 創建命令編碼器
  const passEncoder = // 創建渲染通道編碼器
  /*
    passEncoder 設置繪制命令
  */
  // 搞定了當前幀的所有准備，提交給設備

  requestAnimationFrame(requestNewFrame)
}

requestNewFrame()

或者使用異步的寫法

async function init(/*參數*/) {
  const adapter = await ...// 請求適配器
	const gtx4090ti = await ...// 請求設備
	const swapChain = // 從canvas上下文中獲取交換鏈
  
  const requestNewFrame = () => {
    /*
     創建管線、編碼器，使用編碼器進行繪制
    */
    requestAnimationFrame(requestNewFrame)
  }
  return requestNewFrame
}

init(/*傳參*/).then(requestFn => {
  requestFn()
})