WebGPU是一个非常简单的系统。它所做的只是在GPU上运行3中类型的函数：Vertex Shaders, Fragment Shaders, Computed Shaders

• Vertex Shader: 一个vertex shader计算出vertices。这个shader返回顶点位置。三角形是计算机图形学中最常用的基本几何图元。通常，渲染三角形时，会将一组 3 个顶点连接起来绘制一个三角形。顶点着色器单独处理每个顶点，但 GPU 会根据你传入的顶点数据（通常是通过顶点缓冲对象传递给渲染管线）将这些顶点按顺序分成 3 个一组，绘制相应的三角形。

• Fragment Shader: 负责计算颜色，当绘制了一个三角形，每一个将要绘制的像素将会调用fragment shader来返回颜色。

• Compute Shader: 计算着色器比其他类型的着色器（如顶点着色器、片元着色器）更通用。计算着色器可以用于执行任何并行计算任务，而不仅仅是图形渲染。这使它能够用于广泛的 GPU 计算任务，比如物理模拟、图像处理、数据分析等。

  • 计算着色器的基本思想就是在 GPU 上执行一个函数 N 次，每次执行可以并行进行。你可以指定这个函数需要运行多少次（通常是通过工作组的数量和尺寸来控制）。
  • 每次执行被称为一个“线程”（也叫“工作项”），多个线程可以并行运行。这与 CPU 上的线程模型类似，只是 GPU 上的线程数量可以成千上万，而且是大规模并行的。

  因为这些函数（shaders）是在GPU上执行的，因此数据需要以buffers和textures的形式才能访问GPU，并且也只输出数据到buffers和textures上。

  所以需要在函数（shaders）里面指明函数里会向哪些bindings和locations查询数据。对于javascript，需要将持有数据的buffers和textures绑定bindings和locations。

下图是WebGPU使用vertex 和 fragment shader绘制三角形的简化配置图：

知识点：

• Pipeline：包含了GPU会执行的vertex和fragment shader。也可以包含一个compute shader
• shaders通过bind group直接引用资源（buffers, textures, samplers）
• pipeline定义了通过internal state直接引用buffers的attributes
• attributes从buffers里面拉取数据，并传递给vertex shdaer
• vertex shader也可以传递数据给fragment shader
• fragment shader通过render pass description直接向textures写入数据

执行shader

为了可以在GPU上执行shaders，需要创建所有这些resources，并且配置好这些state。resources的创建相对简单，大多数WebGPU resources创建后就不可更改（可以更改其内容，但是size usage format…不可以）。可以创建一个新的销毁旧的

一些state是在创建并执行command buffers时配置好的。**Command buffers（指令buffers），创建command encoders，command encoders会编码这些指令到command buffers里面。然后finish the encoder，它会返回其创建command buffer。然后submit 这个 command buffer，让WebGPU执行这些commands**