【WebGPU Unleashed】1.5 用单个缓冲区绘制彩色三角形

最新推荐文章于 2025-09-02 22:44:12 发布

原创最新推荐文章于 2025-09-02 22:44:12 发布 · 368 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #着色器 #开发语言 #webgpu

webgpu 专栏收录该内容

22 篇文章

订阅专栏

一部2024新的WebGPU教程，作者Shi Yan。内容很好，翻译过来与大家共享，内容上会有改动，加上自己的理解。更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加微信号：digital_twin123

在前面的示例中，我们使用两个单独的缓冲区和两个 location 来提供顶点的位置和颜色，但是使用多个缓冲区并不总是必要的或最佳的。在这个修改后的示例中，我们将演示如何使用单个缓冲区来提供所有顶点属性。在线示例请点击文末“阅读原文”。

让我们重点关注此示例与上一个示例之间的主要区别。请注意，着色器代码保持不变。

const positionAttribDesc = {
    shaderLocation: 0, // @location(0)
    offset: 0,
    format: 'float32x3'
};
 
const colorAttribDesc = {
    shaderLocation: 1, // @location(1)
    offset: 4 * 3,
    format: 'float32x3'
};

首先，我们修改颜色属性描述符。我们引入偏移量是因为我们要交错位置和颜色数据。偏移量表示缓冲区内第一个颜色数据的开始。由于我们将颜色放置在顶点位置之后，因此偏移量设置为 12 字节（4 字节 * 3），这代表是顶点位置向量的大小。

const positionColorBufferLayoutDesc = {
    attributes: [positionAttribDesc, colorAttribDesc],
    arrayStride: 4 * 6, // sizeof(float) * 3
    stepMode: 'vertex'
};

其次，我们现在使用名为 positionColorBuffer 的单个缓冲区，而不是为位置和颜色创建单独的缓冲区。当为此缓冲区创建描述符时，我们将这两个属性都包含在属性列表中。 arrayStride 设置为 24 字节 (4 * 6)，而不是以前的 12，因为每个顶点现在有 6 个与其关联的浮点数（3 个用于位置，3 个用于颜色）。

const positionColors = new Float32Array([
    1.0, -1.0, 0.0, // position
    1.0, 0.0, 0.0, // 🔴
    -1.0, -1.0, 0.0, 
    0.0, 1.0, 0.0, // 🟢
    0.0, 1.0, 0.0,
    0.0, 0.0, 1.0 // 🔵
]);
 
let positionColorBuffer = createGPUBuffer(device, positionColors, GPUBufferUsage.VERTEX);

当为此缓冲区创建数据时，我们提供 18 个浮点数（3 个顶点 * 每个顶点 6 个浮点数），位置和颜色交错存储。

const pipelineDesc = {
    layout,
    vertex: {
        module: shaderModule,
        entryPoint: 'vs_main',
        buffers: [positionColorBufferLayoutDesc]
    },
    fragment: {
        module: shaderModule,
        entryPoint: 'fs_main',
        targets: [colorState]
    },
    primitive: {
        topology: 'triangle-list',
        frontFace: 'cw',
        cullMode: 'back'
    }
};

…………

passEncoder = commandEncoder.beginRenderPass(renderPassDesc);
passEncoder.setViewport(0, 0, canvas.width, canvas.height, 0, 1);
passEncoder.setPipeline(pipeline);
passEncoder.setVertexBuffer(0, positionColorBuffer);
passEncoder.draw(3, 1);
passEncoder.end();

在管线描述符中，我们现在在 buffers 字段中只有一个缓冲区描述符。在对渲染命令进行编码时，我们仅在插槽 0 处设置一个缓冲区。

该程序在功能上与前一个程序相同，但它使用单个缓冲区而不是两个。在这种情况下，使用单个缓冲区效率更高，因为它可以避免创建额外的资源，并且无需将数据从 CPU 复制到 GPU 两次。将数据从 CPU 传输到 GPU 会产生延迟，因此最大限度地减少这些传输有利于提高性能。

那么我们何时使用多个缓冲区？何时使用单个缓冲区呢？这取决于属性更改的频率。在此示例中，位置和颜色在整个执行过程中保持不变，这就使得单个缓冲区更为适合。但是，如果我们需要频繁更新顶点颜色（例如在动画中），那么将属性分离到不同的缓冲区中可能会更好。这样，我们就可以只更新颜色数据，而无需将未更改的位置数据传输到 GPU。