WebGL -> WebGPU: https://developer.chrome.com/blog/from-webgl-to-webgpu/
WebGPU 入门详细介绍：https://surma.dev/things/webgpu/
// 逻辑设备：每个 WebApp 都以为自己独享的 GPU 设备，是适配器完成此目的
// 每种管道有自己的可编程阶段，如渲染管道包含顶点、和片段阶段，每个阶段由着色器和 entryPoint 指定
// 所有工作称为工作负载，包含多个工作组，每个工作组保护多个工作项，一般指定工作组大小为 64
// 管道需要的数据由 pass encoder 传递
// 在管理中定义绑定组布局，绑定组是缓存区、纹理、采样器等等集合
// 使用 stagingBuffer（GPU 内存） 复制 GPU 的输出 Buffer，然后通过来映射读取，再使用 slice 在 js 侧复制
// 输入 Buffer 到 GPU 一样需要映射到 StagingBuffer 再复制到 GPU Storage 缓存区，但可以通过 API `device.queue.writeBuffer(input, 0, inputBalls);` 来完成
// struct 会因为内存对齐存在 0 填充
// 随着图形技术的蓬勃发展，继续遵循像 OpenGL 这样的某个特定 API 标准显然是不可行的。
https://hacks.mozilla.org/2020/04/experimental-webgpu-in-firefox/
关注点分离。在 WebGL 中，单个上下文对象负责所有事情，并且它包含许多关联状态。 相比之下，WebGPU将它们分为多个不同的上下文：
- GPUDevice creates resources, such as textures and buffers.
- GPUCommandEncoder allows encoding individual commands, including render and compute passes.
- Once done, it turns into GPUCommandBuffer object, which can be submitted to a GPUQueue for execution on the GPU.
- We can present the result of rendering to the HTML canvas. Or multiple canvases. Or no canvas at all – using a purely computational workflow.
管道状态，WebGL 中初始化时创建的着色器程序可能需要重新编译造成卡顿，而 WebGPU 具有管道状态对象（即，GPURenderPipeline 和 GPUComputePipeline）的概念（即 API 更底层），pipeline state includes:
- Shaders
- Layouts of vertex buffers and attributes
- Layouts of bind groups
- Blending, depth, and stencil states
- Formats of the output render targets
绑定模型，允许更快绑定的方式布置资源
WebGPU 着色语言 WHLSL：https://webkit.org/blog/8482/web-high-level-shading-language/
WGSL：https://gpuweb.github.io/gpuweb/wgsl.html
WebGPU 的文本着色语言被设计为 SPIR-V（中间码，二进制） 的薄层
WebGPU API：https://groups.google.com/a/chromium.org/forum/?hl=sq&nomobile=true#!topic/blink-dev/dxqWTSvyhDg
