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()
})