WebGPU 编码与原理（2）：绘制立方体

一、绘制立方体

2023年4月6日，谷歌宣布在 Chrome 用户可在 113 Beta 版本中，启用全新的 WebGPU 图形 API，支持硬件图形加速。

本系列是学习记录，尚不能称之为教程（因此可能在代码的实现上、原理的阐述上等都可能存在不合适、不严谨或错误）。该系列希望通过代码撰写以及解读代码的含义，尝试阐述 WebGPU 中相关的图形学效果的实现方法、原理。如有遗漏、错误，还请指正与赐教。

一、Buffer Creation 和 GPUBufferDescriptor

GPUBufferDescriptor有以下成员:

• size: 类型为 GPUSize64

缓冲区的大小，以 byte 为单位。

• usage：类型为 GPUBufferUsageFlags

缓冲区允许的用法。

• mappedAtCreation，类型为 boolean，默认为 false

如果为 true，则在已经映射的状态下创建缓冲区，允许立即调用 getMappedRange()。即使使用中不包含 MAP_READ 或 MAP_WRITE，将 mappedAtCreation 设置为 true 也是有效的。这可以用来设置缓冲区的初始数据。

保证即使缓冲区创建最终失败，它仍然会显示为映射

  // Create a vertex buffer from the cube data.
  const verticesBuffer = device.createBuffer({
    
    
    size: cubeVertexArray.byteLength, // 指定了需要申请多大的显存，单位是 byte
    usage: GPUBufferUsage.VERTEX,
    mappedAtCreation: true // 被设置为 true，则 size 必须是 4 的倍数
  });

二、Buffer Mapping 和 getMappedRange()

应用程序可以请求映射一个 GPUBuffer，这样它们就可以通过代表 GPUBuffer 分配的部分的 arraybuffer 访问它的内容。映射一个 GPUBuffer 是通过 mapAsync() 异步请求的，这样用户代理可以确保 GPU 在应用程序访问它的内容之前完成了对 GPUBuffer 的使用。映射的 GPUBuffer 不能被 GPU 使用，必须使用 unmap() 解除映射，然后才能将使用它的工作提交到 Queue 时间轴。

一旦映射了 GPUBuffer，应用程序就可以通过 getMappedRange 同步请求访问其内容的范围

  new Float32Array(verticesBuffer.getMappedRange()).set(cubeVertexArray);
  verticesBuffer.unmap();

缓冲映射

缓冲映射，直接简单的说，映射（Mapping）后的某块显存，就能被 CPU 访问。

三大图形 API（D3D12、Vulkan、Metal）的 Buffer（指显存）映射后，CPU 就能访问它了。此时注意，GPU 仍然可以访问这块显存。这就会导致一个问题：IO冲突，这就需要程序考量这个问题了。

WebGPU 禁止了这个行为，改用传递“所有权”来表示映射后的状态。每一个时刻，CPU 和 GPU 是单边访问显存的，也就避免了竞争和冲突。

当 JavaScript 请求映射显存时，所有权并不是马上就能移交给 CPU 的，GPU 这个时候可能手头上还有别的处理显存的操作。所以，GPUBuffer 的映射方法是一个异步方法：

const someBuffer = device.createBuffer({
    
     /* ... */ }) |
await someBuffer.mapAsync(GPUMapMode.READ, 0, 4) // 从 0 开始，只映射 4 个字节 |

// 之后就可以使用 getMappedRange 方法获取其对应的 ArrayBuffer 进行缓冲操作 |

不过，解映射操作倒是一个同步操作，CPU 用完后就可以解映射：

somebuffer.unmap()

创建时映射

可以在创建缓冲时传递 mappedAtCreation: true，这样甚至都不需要声明其 usage 带有 GPUBufferUsage.MAP_WRITE

const buffer = device.createBuffer({
    
     
 usage: GPUBufferUsage.UNIFORM, 
 size: 256, 
 mappedAtCreation: true, 
}) 
// 然后马上就可以获取映射后的 ArrayBuffer 
const mappedArrayBuffer = buffer.getMappedRange() 

/* 在这里执行一些写入操作 */ 

// 解映射，还管理权给 GPU 
 buffer.unmap() 

缓冲数据的流向

1、CPU 至 GPU
JavaScript 这端会在 rAF （requestAnimationFrame）中频繁地将大量数据传递给 GPUBuffer 映射出来的 ArrayBuffer，然后随着解映射、提交指令缓冲到队列，最后传递给 GPU.

上述最常见的例子莫过于传递每一帧所需的 VertexBuffer、UniformBuffer 以及计算通道所需的 StorageBuffer 等。

使用队列对象的 writeBuffer 方法写入缓冲对象是非常高效率的，但是与用来写入的映射后的一个 GPUBuffer 相比，writeBuffer 有一个额外的拷贝操作。推测会影响性能，虽然官方推荐的例子中有很多 writeBuffer 的操作，大多数是用于 UniformBuffer 的更新。

2、 GPU 至 CPU

这样反向的传递比较少，但也不是没有。譬如屏幕截图（保存颜色附件到 ArrayBuffer）、计算通道的结果统计等，就需要从 GPU 的计算结果中获取数据。

譬如，官方给的从渲染的纹理中获取像素数据例子：

const texture = getTheRenderedTexture() 
 const readbackBuffer = device.createBuffer({
    
     
 usage: GPUBufferUsage.COPY\_DST | GPUBufferUsage.MAP\_READ, 
 size: 4 * textureWidth * textureHeight, 
})
 // 使用指令编码器将纹理拷贝到 GPUBuffer 
 const encoder = device.createCommandEncoder() 
 encoder.copyTextureToBuffer( 
 {
    
     texture }, 
 {
    
     buffer, rowPitch: textureWidth * 4 }, 
  [textureWidth, textureHeight], 
) |
device.submit([encoder.finish()]) 
// 映射，令 CPU 端的内存可以访问到数据 
await buffer.mapAsync(GPUMapMode.READ) 
// 保存屏幕截图 
saveScreenshot(buffer.getMappedRange()) 
// 解映射 
buffer.unmap() 

Accessing Mapped Buffers

一旦一个 GPUBuffer 被映射，就可以通过 JavaScript 访问它的内存，这是通过调用 GPUBuffer 来完成的。getMappedRange，它返回一个称为 “mapping” 的 ArrayBuffer。这些在 GPUBuffer 之前都可用。调用 unmap 或 GPUBuffer.destroy，此时它们被分离。这些 arraybuffer 通常不是新的分配，而是指向某种对内容进程可见的共享内存(IPC共享内存，mmapping 文件描述符等)。当将所有权转移到GPU时，可能需要从共享内存复制到底层映射缓冲区。GPUBuffer。getMappedRange 接受一个可选的要映射的缓冲区范围(其中偏移量0是缓冲区的开始)。通过这种方式，浏览器知道底层 GPUBuffer 的哪些部分已经“失效”，需要从内存映射中更新。该范围必须在 mapAsync() 中请求的范围内。

VAO、VBO、EBO、FBO、PBO、TBO、UBO

VBO 和 EBO
VBO（Vertex Buffer Object）是指顶点缓冲区对象，而 EBO（Element Buffer Object）是指图元索引缓冲区对象，VAO 和 EBO 实际上是对同一类 Buffer 按照用途的不同称呼。

OpenGL ES 2.0 编程中，用于绘制的顶点数组数据首先保存在 CPU 内存，在调用 glDrawArrays 或者 glDrawElements 等进行绘制时，需要将顶点数组数据从 CPU 内存拷贝到显存。

但是很多时候我们没必要每次绘制的时候都去进行内存拷贝，如果可以在显存中缓存这些数据，就可以在很大程度上降低内存拷贝带来的开销。

OpenGL ES 3.0 编程中， VBO 和 EBO 的出现就是为了解决这个问题。

VBO 和 EBO 的作用是在显存中提前开辟好一块内存，用于缓存顶点数据或者图元索引数据，从而避免每次绘制时的 CPU 与 GPU 之间的内存拷贝，可以改进渲染性能，降低内存带宽和功耗。

export const cubeVertexSize = 4 * 10; // Byte size of one cube vertex.
export const cubePositionOffset = 0;
export const cubeColorOffset = 4 * 4; // Byte offset of cube vertex color attribute.
export const cubeUVOffset = 4 * 8;
export const cubeVertexCount = 36;

// prettier-ignore
export const cubeVertexArray = new Float32Array([
    // float4 position, float4 color, float2 uv,
    1, -1, 1, 1,   1, 0, 1, 1,  1, 1,
    -1, -1, 1, 1,  0, 0, 1, 1,  0, 1,
    -1, -1, -1, 1, 0, 0, 0, 1,  0, 0,
    1, -1, -1, 1,  1, 0, 0, 1,  1, 0,
    1, -1, 1, 1,   1, 0, 1, 1,  1, 1,
    -1, -1, -1, 1, 0, 0, 0, 1,  0, 0,
  
    1, 1, 1, 1,    1, 1, 1, 1,  1, 1,
    1, -1, 1, 1,   1, 0, 1, 1,  0, 1,
    1, -1, -1, 1,  1, 0, 0, 1,  0, 0,
    1, 1, -1, 1,   1, 1, 0, 1,  1, 0,
    1, 1, 1, 1,    1, 1, 1, 1,  1, 1,
    1, -1, -1, 1,  1, 0, 0, 1,  0, 0,
  
    -1, 1, 1, 1,   0, 1, 1, 1,  1, 1,
    1, 1, 1, 1,    1, 1, 1, 1,  0, 1,
    1, 1, -1, 1,   1, 1, 0, 1,  0, 0,
    -1, 1, -1, 1,  0, 1, 0, 1,  1, 0,
    -1, 1, 1, 1,   0, 1, 1, 1,  1, 1,
    1, 1, -1, 1,   1, 1, 0, 1,  0, 0,
  
    -1, -1, 1, 1,  0, 0, 1, 1,  1, 1,
    -1, 1, 1, 1,   0, 1, 1, 1,  0, 1,
    -1, 1, -1, 1,  0, 1, 0, 1,  0, 0,
    -1, -1, -1, 1, 0, 0, 0, 1,  1, 0,
    -1, -1, 1, 1,  0, 0, 1, 1,  1, 1,
    -1, 1, -1, 1,  0, 1, 0, 1,  0, 0,
  
    1, 1, 1, 1,    1, 1, 1, 1,  1, 1,
    -1, 1, 1, 1,   0, 1, 1, 1,  0, 1,
    -1, -1, 1, 1,  0, 0, 1, 1,  0, 0,
    -1, -1, 1, 1,  0, 0, 1, 1,  0, 0,
    1, -1, 1, 1,   1, 0, 1, 1,  1, 0,
    1, 1, 1, 1,    1, 1, 1, 1,  1, 1,
  
    1, -1, -1, 1,  1, 0, 0, 1,  1, 1,
    -1, -1, -1, 1, 0, 0, 0, 1,  0, 1,
    -1, 1, -1, 1,  0, 1, 0, 1,  0, 0,
    1, 1, -1, 1,   1, 1, 0, 1,  1, 0,
    1, -1, -1, 1,  1, 0, 0, 1,  1, 1,
    -1, 1, -1, 1,  0, 1, 0, 1,  0, 0,
])

由于顶点位置和颜色数据、uv 数据（如上代码）在同一个数组里，一起更新到 VBO 里面，所以需要知道 3 个属性的步长和偏移量。

为获得数据队列中下一个属性值（比如位置向量的下个 4 维分量）我们必须向右移动 10 个 float ，其中 4 个是位置值，另外 4 个是颜色值，还有 2 个是 uv 值，那么步长就是 10 乘以 float 的字节数 4（= 40 字节）。

同样，也需要指定顶点位置属性和颜色属性、uv 属性在 VBO 内存中的偏移量。

对于每个顶点来说，位置顶点属性在前，所以它的偏移量是 0 。而颜色属性紧随位置数据之后，所以偏移量就是 4 * 4 ，用字节来计算就是 16 字节。

// 1、创建 VBO
  // 获取一块状态为映射了的显存，以及一个对应的 arrayBuffer 对象来写数据
  const verticesBuffer = device.createBuffer({
    
    
    size: cubeVertexArray.byteLength, // 指定了需要申请多大的显存，单位是 byte
    usage: GPUBufferUsage.VERTEX,
    mappedAtCreation: true // 被设置为 true，则 size 必须是 4 的倍数，创建时立刻映射，让 CPU 端能读写数据
  });
  // 2、复制目标/复制源类型的 GPUBuffer
  const arrayBuffer = verticesBuffer.getMappedRange()
  // 通过 TypedArray 向 ArrayBuffer 写入数据
  new Float32Array(arrayBuffer).set(cubeVertexArray);
  // 解除显存对象的映射，稍后它就能在 GPU 中进行复制操作
  verticesBuffer.unmap();

UBO
UBO，Uniform Buffer Object 顾名思义，就是一个装载 uniform 变量数据的缓冲区对象，本质上跟 OpenGL ES 的其他缓冲区对象没有区别，创建方式也大致一致，都是显存上一块用于储存特定数据的区域。

当数据加载到 UBO ，那么这些数据将存储在 UBO 上，而不再交给着色器程序，所以它们不会占用着色器程序自身的 uniform 存储空间，UBO 是一种新的从内存到显存的数据传递方式，另外 UBO 一般需要与 uniform 块配合使用。

 const uniformBufferSize = 4 * 16; // 4x4 matrix
  // 创建 UBO
  // COPY_DST 通常就意味着有数据会复制到此 GPUBuffer 上，这种 GPUBuffer 可以通过 queue.writeBuffer 方法写入数据
  const uniformBuffer = device.createBuffer({
    
    
    size: uniformBufferSize,
    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
  });

  const uniformBindGroup = device.createBindGroup({
    
    
    layout: pipeline.getBindGroupLayout(0),
    entries: [
      {
    
    
        binding: 0,
        resource: {
    
    
          buffer: uniformBuffer
        }
      }
    ]
  });

三、uniform 资源的创建与写入

创建：

  const uniformBufferSize = 4 * 16; // 4x4 matrix
  // 创建 UBO
  // COPY_DST 通常就意味着有数据会复制到此 GPUBuffer 上，这种 GPUBuffer 可以通过 queue.writeBuffer 方法写入数据
  const uniformBuffer = device.createBuffer({
    
    
    size: uniformBufferSize,
    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
  });

  const uniformBindGroup = device.createBindGroup({
    
    
    layout: pipeline.getBindGroupLayout(0),
    entries: [
      {
    
    
        binding: 0,
        resource: {
    
    
          buffer: uniformBuffer
        }
      }
    ]
  });

写入：

  const aspect = canvas.width / canvas.height;
  const projectionMatrix = mat4.create();
  mat4.perspective(projectionMatrix, (2 * Math.PI) / 5, aspect, 1, 100.0);

  function getTransformationMatrix() {
    const viewMatrix = mat4.create();
    mat4.translate(viewMatrix, viewMatrix, vec3.fromValues(0, 0, -4));
    const now = Date.now() / 1000;
    mat4.rotate(
      viewMatrix,
      viewMatrix,
      1,
      vec3.fromValues(Math.sin(now), Math.cos(now), 0)
    );

    const modelViewProjectionMatrix = mat4.create();
    mat4.multiply(modelViewProjectionMatrix, projectionMatrix, viewMatrix);

    return modelViewProjectionMatrix as Float32Array;
  }
  
  
  
  // 写入
    const transformationMatrix = getTransformationMatrix();
    device.queue.writeBuffer(
      uniformBuffer, //传给谁
      0,
      transformationMatrix.buffer, // 传递 ArrayBuffer
      transformationMatrix.byteOffset, // 从哪里开始
      transformationMatrix.byteLength // 取多长
    );

WebGPU使用uniform buffer object来传递uniform变量。uniform buffer是一个全局的buffer，我们只需要设置一次值，然后在每次draw之前，设置使用的数据范围（通过offset, size来设置），从而复用相同的数据。如果uniform值有变化，则只需要修改uniform buffer对应的数据。

在WebGPU中，我们可以把所有gameObject的model矩阵设为一个ubo，所有相机的view和projection矩阵设为一个ubo，每一种material（如phong material，pbr material等）的数据（如diffuse color，specular color等）设为一个ubo，每一种light（如direction light、point light等）的数据（如light color、light position等）设为一个ubo，这样可以有效减少uniform变量的传输开销。

另外，我们需要注意ubo的内存布局：
默认的布局为std140，我们可以粗略地理解为，它约定了每一列都有4个元素。
我们来举例说明：
下面的ubo对应的uniform block，定义布局为std140：

layout (std140) uniform ExampleBlock
{
    
    
    float value;
    vec3  vector;
    mat4  matrix;
    float values[3];
    bool  boolean;
    int   integer;
};

它在内存中的实际布局为：

layout (std140) uniform ExampleBlock
{
    
    
                     // base alignment  // aligned offset
    float value;     // 4               // 0 
    vec3 vector;     // 16              // 16  (must be multiple of 16 so 4->16)
    mat4 matrix;     // 16              // 32  (column 0)
                     // 16              // 48  (column 1)
                     // 16              // 64  (column 2)
                     // 16              // 80  (column 3)
    float values[3]; // 16              // 96  (values[0])
                     // 16              // 112 (values[1])
                     // 16              // 128 (values[2])
    bool boolean;    // 4               // 144
    int integer;     // 4               // 148
};

也就是说，这个ubo的第一个元素为value，第2-4个元素为0（为了对齐）；
第5-7个元素为vector的x、y、z的值，第8个元素为0；
第9-24个元素为matrix的值（列优先）；
第25-27个元素为values数组的值，第28个元素为0；
第29个元素为boolean转为float的值，第30-32个元素为0；
第33个元素为integer转为float的值，第34-36个元素为0。

上图中的 position 和 uv 的 shaderLocation 分别代表 wgsl 的 main 函数的两个传参。

上图中的 passEncoder.setBindGroup(0,uniformBindGroup) 中的 “0”对应vertex shader中uniform block的“@group(0)”

上图中的 binding: 0，binding对应vertex shader中uniform block的binding，意思是bindings数组的第一个元素的对应binding为0的uniform block

在显存里创建多个Buffer和Texture这些资源，通过BinderGroup的形式将不同的Buffer进行组合，再通过setBindGroup()【API】，将一个group绑定到对应管线当中，然后可以在Shader里面通过@group @bingding的形式获取对应的buffer信息。跟之前的VertexBuffer不同的是，这种group的组合形式相当于是全局变量。一个group可以在同一个Vertex Shader和fragment shader之间共享数据，也可以绑定到别的管线中，在不同的管线之间共享数据。所以方便动态地更改shader数据，所以更灵活。

四、WGSL 的一些知识

入口点

WGSL 没有强制使用固定的 main() 函数作为入口点（Entry Point），它通过 @vertex、@fragment、@compute 三个着色器阶段（Shader State）标记提供了足够的灵活性让开发人员能更好的组织着色器代码。你可以给入口点取任意函数名，只要不重名，还能将所有阶段（甚至是不同着色器的同一个阶段）的代码组织同一个文件中：

// 顶点着色器入口点
@vertex
fn vs_main() {
    
    }

// 片无着色器入口点
@fragment
fn fs_main() -> @location(X) vec4<f32>{
    
    }

// 计算着色器入口点
@compute 
fn cs_main() {
    
    }

Group 与 Binding 属性

WGSL 中每个资源都使用了 @group(X) 和 @binding(X) 属性标记，例如 @group(0) @binding(0) var<uniform> params: Uniforms。

params 它表示的是 Uniform buffer 对应于哪个绑定组中的哪个绑定槽。这与 GLSL 中的 layout(set = X, binding = X) 布局标记类似。WGSL 的属性非常明晰，描述了着色器阶段到结构的精确二进制布局的所有内容。

完整代码即注释：

/*
 * @Description:
 * @Author: tianyw
 * @Date: 2023-04-08 20:03:35
 * @LastEditTime: 2023-04-11 22:07:04
 * @LastEditors: tianyw
 */
import {
    
     mat4, vec3 } from "gl-matrix";
import {
    
    
  cubeVertexArray,
  cubeVertexSize,
  cubeUVOffset,
  cubePositionOffset,
  cubeVertexCount
} from "./utils/cube";
export type SampleInit = (params: {
    
    
  canvas: HTMLCanvasElement;
}) => void | Promise<void>;

import basicVertWGSL from "./shaders/basic.vert.wgsl?raw";
import vertexPositionColorWGSL from "./shaders/vertexPositionColor.frag.wgsl?raw";
const init: SampleInit = async ({
    
     canvas }) => {
    
    
  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) return;
  const device = await adapter.requestDevice();

  const context = canvas.getContext("webgpu");
  if (!context) return;
  const devicePixelRatio = window.devicePixelRatio || 1;
  canvas.width = canvas.clientWidth * devicePixelRatio;
  canvas.height = canvas.clientHeight * devicePixelRatio;
  const presentationFormat = navigator.gpu.getPreferredCanvasFormat();

  context.configure({
    
    
    device,
    format: presentationFormat,
    alphaMode: "premultiplied"
  });
  console.log("bytelength等于：4 * 10 * 6 * 6=", cubeVertexArray.byteLength);
  // Create a vertex buffer from the cube data.
  // 1、创建 VBO
  // 获取一块状态为映射了的显存，以及一个对应的 arrayBuffer 对象来写数据
  // 建立顶点缓冲区
  // 它就是一块存储空间，先让 js 把顶点数据放进去，然后再让着色器从里面读取
  // 至于为什么 js 不通过一个简单的方法直接把顶点数据传递给着色器，这是因为 js 和 着色器用的是两种不一样的语言
  // 它们无法直接对话，因此需要一个缓冲地带，也就是缓冲区对象
  const verticesBuffer = device.createBuffer({
    
    
    size: cubeVertexArray.byteLength, // 指定了需要申请多大的显存，单位是 byte
    usage: GPUBufferUsage.VERTEX, // 表示与顶点相关的变量
    mappedAtCreation: true // 被设置为 true，则 size 必须是 4 的倍数，创建时立刻映射，让 CPU 端能读写数据
  });
  // 2、复制目标/复制源类型的 GPUBuffer
  const arrayBuffer = verticesBuffer.getMappedRange();
  // 通过 TypedArray 向 ArrayBuffer 写入数据（从 CPU 到 GPU）
  // 将顶点数据写入到上面建立的缓冲区对象
  new Float32Array(arrayBuffer).set(cubeVertexArray);
  // 解除显存对象的映射，稍后它就能在 GPU 中进行复制操作
  verticesBuffer.unmap();
  // 管线组装
  const pipeline = device.createRenderPipeline({
    
    
    layout: "auto", // 渲染管线的布局
    vertex: {
    
    
      module: device.createShaderModule({
    
    
        code: basicVertWGSL
      }),
      entryPoint: "main",
      buffers: [ // 这里的 buffers 属性就是缓冲区集合，其中一个元素对应一个缓冲对象
        {
    
    
          arrayStride: cubeVertexSize, // 顶点长度 以字节为单位
          attributes: [
            {
    
    
              // position
              shaderLocation: 0, // 遍历索引，这里的索引值就对应的是着色器语言中 @location(0) 的数字
              offset: cubePositionOffset, // 偏移
              format: "float32x4" // 参数格式
            },
            {
    
    
              // uv
              shaderLocation: 1, // 这里的索引值就对应的是着色器语言中 @location(1) 的数字
              offset: cubeUVOffset,
              format: "float32x2"
            }
          ]
        }
      ]
    },
    fragment: {
    
    
      module: device.createShaderModule({
    
    
        code: vertexPositionColorWGSL
      }),
      entryPoint: "main",
      targets: [
        {
    
    
          format: presentationFormat
        }
      ]
    },
    primitive: {
    
    
      // topology: "line-list"
      // topology: "line-strip"
      //  topology: "point-list"
      topology: "triangle-list",
      // topology: "triangle-strip"
      // Backface culling since the cube is solid piece of geometry.
      // Faces pointing away from the camera will be occluded by faces
      // pointing toward the camera.
      // 相关定义为：
      //   enum GPUFrontFace {
    
    
      //     "ccw",
      //     "cw"
      // };
      // enum GPUCullMode {
    
    
      //     "none",
      //     "front",
      //     "back"
      // };
      // ...

      // dictionary GPURasterizationStateDescriptor {
    
    
      //     GPUFrontFace frontFace = "ccw";
      //     GPUCullMode cullMode = "none";
      //     ...
      // };
      // 开启面剔除
      //       其中ccw表示逆时针，cw表示顺时针；frontFace用来设置哪个方向是“front”（正面）；cullMode用来设置将哪一面剔除掉。

      // 因为本示例没有设置frontFace，因此frontFace为默认的ccw，即将顶点连接的逆时针方向设置为正面；
      // 又因为本示例设置了cullMode为back，那么反面的顶点（即顺时针连接的顶点）会被剔除掉。
      cullMode: "back"
    },
    // Enable depth testing so that the fragment closest to the camera
    // is rendered in front.
    depthStencil: {
    
    
      // 开启深度测试
      depthWriteEnabled: true,
      // 设置比较函数为 less
      depthCompare: "less",
      // 设置depth为24bit
      format: "depth24plus"
    }
  });

  const depthTexture = device.createTexture({
    
    
    size: [canvas.width, canvas.height],
    format: "depth24plus",
    usage: GPUTextureUsage.RENDER_ATTACHMENT
  });

  const uniformBufferSize = 4 * 16; // 4x4 matrix
  // 创建 UBO        GPU
  // COPY_DST 通常就意味着有数据会复制到此 GPUBuffer 上，这种 GPUBuffer 可以通过 queue.writeBuffer 方法写入数据
  // 片元着色器传递数据：如 const color = new Float32Array([1, 0, 0, 1]) 表示一个颜色
  // 为颜色 创建缓冲区对象，设置其尺寸和用途，使其作用于片元着色器，并可写
  const uniformBuffer = device.createBuffer({
    
    
    size: uniformBufferSize,
    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
  });
  // 通过打组，可以很方便地将某种条件下的一组 uniform 资源分别传入着色器进行 WebGPU 渲染编程。
  // GPUBindGroup 的最大作用，就是隔离不相关的 uniform，把相关的资源摆在一块。
  const uniformBindGroup = device.createBindGroup({
    
    
    layout: pipeline.getBindGroupLayout(0), // 指定绑定组的布局对象，渲染管线的布局
    entries: [
      {
    
    
        binding: 0,
        resource: {
    
    
          buffer: uniformBuffer // 传入 UBO
        }
      }
    ]
  });

  const renderPassDescriptor: GPURenderPassDescriptor = {
    
    
    colorAttachments: [
      {
    
    
        view: undefined, // Assigned later

        clearValue: {
    
     r: 0.5, g: 0.5, b: 0.5, a: 1.0 },
        // loadOp和storeOp决定渲染前和渲染后怎样处理attachment中的数据。
        loadOp: "clear", // load 的意思是渲染前保留attachment中的数据,clear 意思是渲染前清除
        storeOp: "store" // 如果为“store”，意思是渲染后保存被渲染的内容到内存中，后面可以被读取；如果为“clear”，意思是渲染后清空内容。
      }
    ],
    depthStencilAttachment: {
    
    
      view: depthTexture.createView(),
      // 在深度测试时，gpu会将fragment的z值（范围为[0.0-1.0]）与这里设置的depthClearValue值（这里为1.0）比较。其中使用depthCompare定义的函数（这里为less，意思是所有z值大于等于1.0的fragment会被剔除）进行比较。
      depthClearValue: 1.0,
      depthLoadOp: "clear",
      depthStoreOp: "store"
    }
  };
  // 因为是固定相机 所以只需要计算一次 projection 矩阵
  const aspect = canvas.width / canvas.height;
  const projectionMatrix = mat4.create();
  mat4.perspective(projectionMatrix, (2 * Math.PI) / 5, aspect, 1, 100.0);

  // 计算 mvp 矩阵
  function getTransformationMatrix() {
    
    
    const viewMatrix = mat4.create();
    mat4.translate(viewMatrix, viewMatrix, vec3.fromValues(0, 0, -4));
    const now = Date.now() / 1000;
    mat4.rotate(
      viewMatrix,
      viewMatrix,
      1,
      vec3.fromValues(Math.sin(now), Math.cos(now), 0)
    );

    const modelViewProjectionMatrix = mat4.create();
    mat4.multiply(modelViewProjectionMatrix, projectionMatrix, viewMatrix);

    return modelViewProjectionMatrix as Float32Array;
  }

  function frame() {
    
    
    if (!context) return;
    const transformationMatrix = getTransformationMatrix();
    // 写入：从 CPU 到  GPU
    // 将颜色数据/旋转数据 写入到缓冲区对象
    device.queue.writeBuffer(
      uniformBuffer, // 传给谁
      0,
      transformationMatrix.buffer, // 传递 ArrayBuffer
      transformationMatrix.byteOffset, // 从哪里开始
      transformationMatrix.byteLength // 取多长
    );
    renderPassDescriptor.colorAttachments[0].view = context
      .getCurrentTexture()
      .createView();
    // 创建一个i名为 commandEncoder 的指令编码器，用来复制显存
    // 我们不能直接操作command buffer，需要创建command encoder，使用它将多个commands（如render pass的draw）设置到一个command buffer中，然后执行submit，把command buffer提交到gpu driver的队列中。
    //     command buffer有
    // creation, recording,ready,executing,done五种状态。

    // 根据该文档，结合代码来分析command buffer的操作流程：
    // const commandEncoder = device.createCommandEncoder()这个语句：创建command encoder时，应该是创建了command buffer，它的状态为creation；
    // const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor)这个语句：开始render pass（webgpu还支持compute pass，不过这里没用到），command buffer的状态变为recording；
    // passEncoder.setPipeline(pipeline) 这个语句：将“设置pipeline”、“绘制”的commands设置到command buffer中；
    // passEncoder.end() 这个语句：(可以设置下一个pass，如compute pass，不过这里只用了一个pass）；
    // commandEncoder.finish() 这个语句：将command buffer的状态变为ready；
    // device.queue.submit 这个语句：command buffer状态变为executing，被提交到gpu driver的队列中，不能再在cpu端被操作；
    // 如果提交成功，gpu会决定在某个时间处理它。
    const commandEncoder = device.createCommandEncoder();
    // 建立渲染通道，类似图层
    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
    // 传入渲染管线
    passEncoder.setPipeline(pipeline);
    // draw 之前设置 bind group
    passEncoder.setBindGroup(0, uniformBindGroup);
    // VBO 要通过 passEncoder 的 setVertexBuffer 方法写入数据
    // 有时还要配合 GPUBufferUsage.INDEX 即 索引缓存 来使用
    // 通道编码器中指定坐标缓存、颜色缓存
    // 写入顶点缓冲区
    passEncoder.setVertexBuffer(0, verticesBuffer);
    // 绘图：指定绘制的顶点个数
    passEncoder.draw(cubeVertexCount, 1, 0, 0);
    passEncoder.end();
    // 提交写好的复制功能的命令
    // commandEncoder.finish(): 结束指令编写，并返回 GPU 指令缓冲区
    // device.queue.submit：向 GPU 提交绘图指令，所有指令将在提交后执行
    device.queue.submit([commandEncoder.finish()]);

    requestAnimationFrame(frame);
  }

  requestAnimationFrame(frame);
};

const canvas = document.getElementById("gpucanvas") as HTMLCanvasElement;
init({
    
     canvas: canvas });

代码仓库地址：TianWebGPU

五、参考

关于gpu:WebGPU-规范篇-03-缓存对象

WebGPU 中的缓冲映射机制

WebGPU 规范篇 03 缓存对象

WebGPU[2] 颜色与缓存

canvas-output-multiple-adapters

WebGPU 规范篇 06 资源及其打组绑定

WebGPU 补充篇之 Uniform

OpenGL ES VAO、VBO、EBO、FBO、PBO、TBO、UBO

WebGPU 补充篇之 Uniform

WebGPU学习（六）：学习“rotatingCube”示例

WebGPU学习（二）: 学习“绘制一个三角形”示例

WebGPU-js向着色器传参

学习笔记 | Orillusion-WebGPU小白入门（三）