WebGPU：图形渲染实例解析-优快云博客

本文链接：https://blog.youkuaiyun.com/WEEKEND_WOW/article/details/127474467

本文详细解析了WebGPU的frame函数，重点探讨了如何更新变换矩阵以及填充buffer来表示几何变换信息。通过绑定pipeline并进行两次draw操作，设置顶点bindGroup，结合创建的UBO bindgroup，实现与shader中UBO布局的对应，从而完成图形渲染过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先看这个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(renderPassDescriptor);
    passEncoder.setPipeline(pipeline);
    passEncoder.setVertexBuffer(0, verticesBuffer);

    // Bind the bind group (with the transformation matrix) for
    // each cube, and draw.
    passEncoder.setBindGroup(0, uniformBindGroup1);
    passEncoder.draw(cubeVertexCount, 1, 0, 0);

    passEncoder.setBindGroup(0, uniformBindGroup2);
    passEncoder.draw(cubeVertexCount, 1, 0, 0);

    passEncoder.end();
    device.queue.submit([commandEncoder.finish()]);

    requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);
};

然后

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

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

创建了ubobindgroup，binding=0，这是告诉shader UBO的布局，才能和前面js构造的UBO对应上