如何使用WebGPU的mapAsync方法写入Uniform Buffer？

WebGPU的缓冲区权限规则确实限制了MAP_WRITE的使用场景——它只能和COPY_SRC共存，无法直接和UNIFORM权限搭配。要实现高效更新Uniform数据，正确的做法是使用暂存缓冲区+Uniform缓冲区的双缓冲架构，具体步骤如下：

核心思路 #

• 创建一个可被CPU映射写入的暂存缓冲区（仅用于CPU写入和作为复制源）
• 创建一个专供GPU读取的Uniform缓冲区（仅用于Uniform采样和作为复制目标）
• 每次更新数据时，先写入暂存缓冲区，再通过GPU内部的复制操作将数据同步到Uniform缓冲区，这个复制操作开销极低，几乎可以忽略。

代码实现 #

1. 初始化缓冲区 #

// 初始化数据
const temp = new Float32Array([0, 0, 0, 0, 0, 0, 0, 0]);
const bufferSize = temp.byteLength;

// 1. 创建暂存缓冲区：允许CPU映射写入 + 作为复制源
const stagingBuffer = device.createBuffer({
    size: bufferSize,
    usage: GPUBufferUsage.MAP_WRITE | GPUBufferUsage.COPY_SRC,
    mappedAtCreation: true, // 创建时直接映射，方便初始化写入
});

// 初始化暂存缓冲区数据
const stagingArray = new Float32Array(stagingBuffer.getMappedRange());
stagingArray.set(temp);
stagingBuffer.unmap();

// 2. 创建Uniform缓冲区：允许GPU作为Uniform读取 + 作为复制目标
const positionBuffer = device.createBuffer({
    size: bufferSize,
    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
});

// 初始化时把暂存区的数据复制到Uniform缓冲区
device.queue.copyBufferToBuffer(
    stagingBuffer, 0,    // 源缓冲区+偏移
    positionBuffer, 0,   // 目标缓冲区+偏移
    bufferSize           // 复制大小
);

2. 高效更新Uniform数据 #

async function updateUniformData(newData) {
    // 1. 映射暂存缓冲区，写入新数据
    await stagingBuffer.mapAsync(GPUMapMode.WRITE);
    const stagingArray = new Float32Array(stagingBuffer.getMappedRange());
    stagingArray.set(newData);
    stagingBuffer.unmap();

    // 2. 触发GPU内部复制，将暂存区数据同步到Uniform缓冲区
    device.queue.copyBufferToBuffer(
        stagingBuffer, 0,
        positionBuffer, 0,
        newData.byteLength
    );
}

// 调用示例：更新数据
updateUniformData(new Float32Array([1, 2, 3, 4, 5, 6, 7, 8]));

补充说明 #

• 这种双缓冲方式是WebGPU官方推荐的高效更新Uniform的方案，GPU内部的copyBufferToBuffer操作是硬件级别的快速传输，性能远高于早期WebGL中直接更新Uniform的方式。
• 如果需要频繁更新Uniform数据，也可以考虑创建多个暂存缓冲区做乒乓缓冲，进一步减少CPU等待映射的时间，但对于大多数场景，单个暂存缓冲区已经足够。

内容的提问来源于stack exchange，提问作者luek baja