WebGPU 入门（二）

推荐使用NSDT 3DConvert进行3D模型格式转换，支持glb、obj、stp、fbx、ifc等多种3D模型格式之间进行互相转换，在转换过程中，能够很好的保留模型原有的颜色、材质等信息。

设置背景色

创建命令编码器 GPUCommandEncoder 实例，它用于编码需要提交给 GPU 的命令。

const encoder = device.createCommandEncoder();

开启一个新的渲染通道（Render Pass），这里清空颜色缓冲区时填充了一个浅蓝色背景。

和 WebGL 一样，使用 RGBA 的格式，每个分量为 0 到 1 的范围，比如 { r: 1, g: 0, b: 0, a: 1 } 表示红色，或者你可以用数组的形式 [1, 0, 0, 1]。

const pass = encoder.beginRenderPass({
  // 颜色附件，一个用于存储渲染输出颜色数据的纹理
  colorAttachments: [
    {
      // 要渲染到的目标
      view: ctx.getCurrentTexture().createView(),
      // 渲染前清空颜色缓冲区
      loadOp: 'clear',
      // 清除颜色为浅蓝色，不设置会默认使用黑色
      clearValue: { r: 0.6, g: 0.8, b: 0.9, a: 1 },
      // 渲染结果会被保留在纹理中，后序好绘制到 canvas 上
      storeOp: 'store',
    },
  ],
});

我们先不绘制三角形，看看背景的渲染效果，为此我们提前执行下面代码：

// 这里是绘制三角形的代码，之后会实现

pass.end(); // 完成指令队列的记录
const commandBuffer = encoder.finish(); // 结束编码
device.queue.submit([commandBuffer]); // 提交给 GPU 命令队列

创建缓冲区

先说说 WebGPU 的坐标系，它和 WebGL 一样，原点在画布中心，x 轴向右，y 轴向上，取值范围都是 -1 到 1。

声明顶点数据。这些顶点为组成三角形的三个坐标。

const vertices = new Float32Array([
  -0.5, -0.5,
  0.5, -0.5,
  0.5, 0.5,
]);

然后创建顶点缓冲区：

const vertexBuffer = device.createBuffer({
  // 标识，字符串随意写，报错时会通过它定位
  label: 'Triangle Vertices',
  // 缓冲区大小，这里是 24 字节。6 个 4 字节（即 32 位）的浮点数
  size: vertices.byteLength,
  // 标识缓冲区用途（1）用于顶点着色器（2）可以从 CPU 复制数据到缓冲区
  usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});

label 方便我们定位错误位置：

接着是将顶点数据复制到缓冲区：

device.queue.writeBuffer(vertexBuffer, /* bufferOffset */ 0, vertices);

参数 bufferOffset 表示缓冲区偏移多少字节数的位置写入数据。

读取方式

设置缓冲区的读取方式。

const vertexBufferLayout = {
  // 每组读 8 个字节。一个坐标为两个浮点数（2 * 4字节）
  arrayStride: 2 * 4, 
  attributes: [
    {
      // 指定数据格式，这样 WebGPU 才知道该如何解析，格式为 2 个 32位浮点数
      format: 'float32x2',
      offset: 0, // 从每组的第一个数字开始
      shaderLocation: 0, // 顶点着色器中的位置
    },
  ],
};

attributes 是一个数组，这里我们只有顶点要读，所以只有一个数组元素。如果引入了颜色值并和顶点放在一起，我们就要多声明一个数组元素，并将 offset 指定到颜色的位置。

这个对象此时还没用到，后面设置渲染流水线时会用到。

WebGPU 入门 - 索引

WebGPU 入门（一）

WebGPU 入门（二）

WebGPU 入门（三）