Buffer

创建方式

缓冲区由设备创建，不直接 new。最简单的方式是直接传一个类型化数组， 设备会按数组长度分配并以 VERTEX 用途初始化：

const positions = device.createBuffer(new Float32Array([
  -0.5, -0.5, 0,
   0.5, -0.5, 0,
   0.0,  0.5, 0
]));

需要索引、写入或作为 uniform 使用时，用对象形式显式声明用途：

const vertexBuffer = device.createBuffer({
  data: new Float32Array(vertexData),
  usage: Buffer.VERTEX | Buffer.COPY_DST
});

const indexBuffer = device.createBuffer({
  data: new Uint32Array([0, 1, 2]),
  usage: Buffer.INDEX,
  indexType: 'uint32'
});

const uniformBuffer = device.createBuffer({
  byteLength: 64,
  usage: Buffer.UNIFORM | Buffer.COPY_DST
});

构造参数

用途标志

WebGL2 对这些用途的约束相对宽松，但同一份代码要跑在 WebGPU 上时， 用途声明必须齐全。养成把 VERTEX | COPY_DST 写全的习惯， 迁移时能省掉一轮排查。

属性与方法

逐帧更新

// 创建时声明可写
const positions = device.createBuffer({
  data: new Float32Array(count * 3),
  usage: Buffer.VERTEX | Buffer.COPY_DST
});

function update(time) {
  const data = new Float32Array(count * 3);
  for (let i = 0; i < count; i++) {
    data[i * 3] = xAt(i);
    data[i * 3 + 1] = Math.sin(i * 0.1 + time) * 0.4;
    data[i * 3 + 2] = 0;
  }

  positions.write(data);
}

每帧新建数组会产生垃圾回收压力。点数固定时，应当复用一个 Float32Array，原地改值后再写入。

DynamicBuffer

频繁部分更新的场景，DynamicBuffer 封装了环形缓冲与分段写入， 减少整体覆盖带来的带宽浪费。如果每帧只有一个 uniform 变化， 用它比每次重写整个缓冲区更合适。

读回数据

GPU 到 CPU 的读回是同步点，代价较高。readAsync 会等待 GPU 完成当前工作， 不能在每帧调用。需要做回读校验、截图或拾取结果分析时， 放在交互结束或调试流程里。