WebGPU[1] 三角形

秋意正寒發表於2021-03-31
WebGPU

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

如果本篇的程式碼不能跑了，請聯絡我或自己看看文件試試修改。
2021年3月31日

入口：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()
})

相關文章