// 逻辑设备：每个 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 标准显然是不可行的。

关注点分离。在 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: