webgpu示例解析3

首先看这个frame函数在做什么

第一步 更新变换矩阵

第二步 在偏移为0和偏移=offset的地方填充了两个buffer

这代表了两个方块各自的几何变换信息

然后在绑定了pipeline之后，draw了两次，每次会先setVertex bindGroup

function frame() {
    // Sample is no longer the active page.
    if (!canvasRef.current) return;

    updateTransformationMatrix();
    device.queue.writeBuffer(
      uniformBuffer,
      0,
      modelViewProjectionMatrix1.buffer,
      modelViewProjectionMatrix1.byteOffset,
      modelViewProjectionMatrix1.byteLength
    );
    device.queue.writeBuffer(
      uniformBuffer,
      offset,
      modelViewProjectionMatrix2.buffer,
      modelViewProjectionMatrix2.byteOffset,
      modelViewProjectionMatrix2.byteLength
    );

    renderPassDescriptor.colorAttachments[0].view = context
      .getCurrentTexture()
      .createView();

    const commandEncoder = device.createCommandEncoder();
    const passEncoder = commandEncoder.beginRenderPass(rend