WebGPU 着色器语言（WGSL）与 JavaScript 的绑定：缓冲区映射与命令编码器的异步同步

各位同仁，大家好！

今天，我们将深入探讨一个在现代高性能图形编程中至关重要的主题：WebGPU 着色器语言（WGSL）与 JavaScript 之间的绑定机制，特别是其核心环节——缓冲区映射与命令编码器的异步同步。WebGPU 作为一个令人兴奋的新一代 Web 图形 API，旨在提供接近原生 GPU 性能的体验，而理解其 CPU (JavaScript) 与 GPU (WGSL) 之间的通信桥梁，是掌握这一强大工具的关键。

1. WebGPU：CPU 与 GPU 的高性能交响乐

在深入细节之前，我们先快速回顾一下 WebGPU 的基本理念。WebGPU 不仅仅是一个新的图形 API，它更是一个全新的范式。它借鉴了 Vulkan、Metal 和 DirectX 12 等现代图形 API 的设计理念，提供了更底层的控制权，从而实现了更高的性能和更低的驱动开销。

WebGPU 的核心在于将渲染或计算任务分解为一系列可由 GPU 并行执行的操作。这些操作由 JavaScript API 进行调度和配置，而实际的 GPU 代码则由 WGSL (WebGPU Shading Language) 编写。WGSL 是一种专为 WebGPU 设计的着色器语言，它提供了更强的安全性、更好的可移植性和更现代的语法，同时避免了 GLSL 固有的许多复杂性。

CPU (JavaScript) 负责：

• 初始化 WebGPU 设备和适配器。
• 创建和管理 GPU 资源（缓冲区、纹理、管线等）。
• 组织渲染或计算命令。
• 将数据从 CPU 内存传输到 GPU 内存。
• 从 GPU 内存读取数据回 CPU 内存。

GPU (WGSL) 负责：

• 执行顶点着色器、片段着色器或计算着色器。
• 处理大量并行数据。
• 进行复杂的数学运算和图形渲染。

CPU 和 GPU 之间的数据传输和命令调度，是整个 WebGPU 架构中最需要关注的性能瓶颈和同步挑战。而缓冲区映射与命令编码器的异步同步，正是解决这些挑战的核心机制。

2. WebGPU 资源管理概览

在探讨绑定细节之前，我们需要对 WebGPU 的关键资源有一个初步的认识。

2.1 GPUBuffer：数据的载体

GPUBuffer 是 WebGPU 中最基本的数据存储单元。它代表了一块 GPU 可访问的内存区域，可以用于存储顶点数据、索引数据、统一缓冲区对象（UBO）、存储缓冲区对象（SSBO）以及其他任意数据。

创建 GPUBuffer 时，我们需要通过 GPUBufferDescriptor 指定其大小、用途 (usage) 以及是否可映射 (mappedAtCreation)。

const bufferSize = 1024; // 1KB
const buffer = device.createBuffer({
    size: bufferSize,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, // 示例：用作顶点数据，且可作为复制操作的目标
    mappedAtCreation: false // 初始不映射
});

usage 标志非常重要，它告诉 WebGPU 驱动程序这块内存将如何被使用，从而允许驱动程序进行优化。常见的 GPUBufferUsage 标志包括：

• VERTEX: 用作顶点缓冲区。
• INDEX: 用作索引缓冲区。
• UNIFORM: 用作统一缓冲区（着色器可读的常量数据）。
• STORAGE: 用作存储缓冲区（着色器可读写的数据）。
• COPY_SRC: 可作为复制操作的源。
• COPY_DST: 可作为复制操作的目标。
• MAP_READ: 可从 CPU 读取（映射）。
• MAP_WRITE: 可从 CPU 写入（映射）。

2.2 GPUCommandEncoder：命令的记录员

GPUCommandEncoder 是一个临时的对象，用于记录一系列 GPU 命令。这些命令包括：

• 创建渲染通道 (beginRenderPass)。
• 创建计算通道 (beginComputePass)。
• 缓冲区之间的复制 (copyBufferToBuffer)。
• 缓冲区与纹理之间的复制 (copyBufferToTexture, copyTextureToBuffer)。
• 查询定时器或遮挡信息。

所有的 GPU 操作，除了资源创建和 mapAsync 等少数操作外，都需要通过 GPUCommandEncoder 来记录。

const commandEncoder = device.createCommandEncoder();
// ... 在这里记录各种渲染或计算命令 ...
const commandBuffer = commandEncoder.finish(); // 结束记录，生成一个 GPUCommandBuffer

2.3 GPUQueue：命令的提交者

GPUQueue 代表了 GPU 上一个命令执行队列。通过 queue.submit() 方法，可以将一个或多个 GPUCommandBuffer 提交给 GPU 执行。

device.queue.submit([commandBuffer]); // 提交命令缓冲区到队列

submit 方法是异步的，它会立即返回，而 GPU 会在后台开始处理这些命令。这是 WebGPU 异步性的一个核心体现。

3. 缓冲区映射：CPU 与 GPU 的数据桥梁

缓冲区映射是 JavaScript 代码直接访问 GPU 缓冲区内存的机制。它允许我们将 CPU 内存中的数据写入 GPU 缓冲区，或者从 GPU 缓冲区读取数据到 CPU 内存。

3.1 映射的类型与用途

WebGPU 提供了两种映射类型：

• MAP_WRITE: 允许 JavaScript 向 GPU 缓冲区写入数据。通常用于上传顶点数据、索引数据、统一数据、纹理数据等。
• MAP_READ: 允许 JavaScript 从 GPU 缓冲区读取数据。通常用于读取计算着色器的结果、渲染目标的像素数据（尽管通常不推荐实时读取渲染目标）。

一个缓冲区在创建时，必须通过 GPUBufferUsage 标志明确声明其是否支持 MAP_READ 或 MAP_WRITE。

重要提示： 缓冲区在任何时刻都只能处于以下三种状态之一：

1. 未映射 (Unmapped)：GPU 可以访问。
2. 映射用于读取 (Mapped for read)：CPU 可以访问，但仅限读取。GPU 无法访问。
3. 映射用于写入 (Mapped for write)：CPU 可以访问，但仅限写入。GPU 无法访问。

这意味着，当一个缓冲区被映射时，GPU 无法对其进行任何操作（包括读写、作为渲染目标、作为纹理等）。反之，当缓冲区正在被 GPU 使用时，它不能被映射。WebGPU 会自动管理这些状态转换，并通过 Promise 来协调异步操作。

3.2 mapAsync()：异步映射的核心

mapAsync() 是 GPUBuffer 对象上的一个方法，它用于异步地请求映射一个缓冲区。由于 GPU 内存访问通常需要一些时间，mapAsync() 返回一个 Promise，该 Promise 在缓冲区准备好映射时解析。

async function mapAndWriteToBuffer(device, buffer, data) {
    // 请求映射缓冲区，用于写入
    await buffer.mapAsync(GPUBufferUsage.MAP_WRITE, 0, data.byteLength);

    // 获取映射的 ArrayBuffer
    const arrayBuffer = buffer.getMappedRange(0, data.byteLength);

    // 将数据写入 ArrayBuffer
    new Float32Array(arrayBuffer).set(data);

    // 完成写入后，取消映射。这是至关重要的一步！
    buffer.unmap();
    console.log("数据已写入并取消映射。");
}

async function mapAndReadFromBuffer(device, buffer, expectedLength) {
    // 请求映射缓冲区，用于读取
    await buffer.mapAsync(GPUBufferUsage.MAP_READ, 0, expectedLength);

    // 获取映射的 ArrayBuffer
    const arrayBuffer = buffer.getMappedRange(0, expectedLength);

    // 从 ArrayBuffer 读取数据
    const result = new Float32Array(arrayBuffer).slice(); // 复制一份数据

    // 完成读取后，取消映射
    buffer.unmap();
    console.log("数据已从缓冲区读取：", result);
    return result;
}

mapAsync(mode, offset, size) 参数：

• mode: 必须是 GPUBufferUsage.MAP_READ 或 GPUBufferUsage.MAP_WRITE。
• offset: 映射起始的字节偏移量。
• size: 映射的字节大小。

getMappedRange(offset, size) 参数：

• offset: 获取范围的字节偏移量（相对于整个缓冲区的起始）。
• size: 获取范围的字节大小。

unmap()：解除映射
unmap() 方法是强制性的。在完成对映射缓冲区的读写操作后，必须调用 unmap() 来解除映射。解除映射后，缓冲区将重新变为未映射状态，GPU 才能再次访问它。如果忘记调用 unmap()，缓冲区将永远保持在映射状态，导致 GPU 无法使用它，从而引发错误或死锁。

3.3 缓冲区映射的替代方案：queue.writeBuffer() 和 copyBufferToBuffer()

直接映射缓冲区 (mapAsync) 是一种强大的机制，但它通常伴随着性能开销，因为 GPU 需要同步其内部状态并可能执行内存拷贝，以确保 CPU 能够安全地访问内存。对于频繁的小型数据更新或一次性的大型数据上传，WebGPU 提供了更高效的替代方案。

3.3.1 device.queue.writeBuffer()：快速写入

对于将 CPU 内存中的数据直接写入 GPU 缓冲区，queue.writeBuffer() 是首选方法，因为它通常比 mapAsync(MAP_WRITE) 具有更低的开销。writeBuffer() 是一个非阻塞操作，它将数据复制任务添加到队列中，GPU 会在后台处理。

const dataToWrite = new Float32Array([1.0, 2.0, 3.0, 4.0]);
const buffer = device.createBuffer({
    size: dataToWrite.byteLength,
    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST // 必须包含 COPY_DST
});

// 使用 writeBuffer 将数据直接上传到 GPU
device.queue.writeBuffer(
    buffer,      // 目标缓冲区
    0,           // 目标缓冲区起始偏移量
    dataToWrite.buffer, // 源 ArrayBuffer
    dataToWrite.byteOffset, // 源 ArrayBufferView 的偏移量
    dataToWrite.byteLength  // 源 ArrayBufferView 的字节长度
);
console.log("数据已通过 writeBuffer 提交到队列。");

注意： 目标缓冲区必须包含 GPUBufferUsage.COPY_DST 标志，因为 writeBuffer 本质上是一个从 CPU 内存到 GPU 缓冲区的复制操作。

3.3.2 commandEncoder.copyBufferToBuffer()：GPU 内部复制

当数据已经在 GPU 内存中的某个缓冲区时，如果需要将它复制到另一个 GPU 缓冲区，copyBufferToBuffer() 是最高效的方法。这是一个纯 GPU 操作，避免了 CPU-GPU 之间的往返。

const srcBuffer = device.createBuffer({
    size: 16, // 4 floats
    usage: GPUBufferUsage.COPY_SRC,
    mappedAtCreation: true
});
new Float32Array(srcBuffer.getMappedRange()).set([10, 20, 30, 40]);
srcBuffer.unmap();

const dstBuffer = device.createBuffer({
    size: 16,
    usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ // 稍后读取
});

const commandEncoder = device.createCommandEncoder();
commandEncoder.copyBufferToBuffer(
    srcBuffer, 0, // 源缓冲区及偏移
    dstBuffer, 0, // 目标缓冲区及偏移
    16            // 复制字节数
);
device.queue.submit([commandEncoder.finish()]);

// 稍后可以映射 dstBuffer 读取结果
// await dstBuffer.mapAsync(GPUBufferUsage.MAP_READ, 0, 16);
// const result = new Float32Array(dstBuffer.getMappedRange()).slice();
// dstBuffer.unmap();
// console.log("通过 GPU 复制后的数据:", result); // [10, 20, 30, 40]

注意： 源缓冲区必须包含 GPUBufferUsage.COPY_SRC，目标缓冲区必须包含 GPUBufferUsage.COPY_DST。

3.4 缓冲区映射与复制操作的选择

下表总结了缓冲区映射和复制操作的适用场景和特点：

操作	描述	用途	GPUBufferUsage 要求	异步性	性能考量
mapAsync(MAP_WRITE)	异步请求 CPU 写入 GPU 缓冲区内存	CPU 首次上传大量数据，或不频繁更新数据	MAP_WRITE	Promise	可能涉及 CPU-GPU 同步开销，不宜频繁使用
mapAsync(MAP_READ)	异步请求 CPU 读取 GPU 缓冲区内存	从 GPU 读取计算结果、调试信息等	MAP_READ	Promise	CPU-GPU 同步开销大，可能阻塞管线，应尽量避免在实时渲染循环中使用
queue.writeBuffer()	将 CPU 内存数据直接复制到 GPU 缓冲区	频繁更新小块数据，或一次性上传大量数据	COPY_DST	非阻塞	通常比 mapAsync(MAP_WRITE) 更高效，推荐用于数据上传
copyBufferToBuffer()	在 GPU 内存中，从一个缓冲区复制数据到另一个缓冲区	GPU 内部数据整理、格式转换、结果汇总等	源: COPY_SRC, 目标: COPY_DST	非阻塞	纯 GPU 操作，效率最高，不涉及 CPU-GPU 传输
mappedAtCreation	在缓冲区创建时即映射，用于初始化数据	一次性初始化静态数据，创建后立即 unmap()	MAP_WRITE 或 MAP_READ (不推荐)	同步	方便初始化，但创建后必须 unmap() 才能被 GPU 使用

4. 命令编码器与异步同步：GPU 工作流的编排

WebGPU 的渲染和计算工作流是高度异步的。JavaScript 提交命令到队列后会立即返回，而 GPU 则在后台并行执行这些命令。理解这种异步性以及如何与之同步，是编写高性能 WebGPU 应用的关键。

4.1 命令编码器的生命周期

1. 创建编码器：device.createCommandEncoder()。
2. 记录命令：
   • beginRenderPass() / end()：记录渲染命令（绘制几何体）。
   • beginComputePass() / end()：记录计算命令（执行计算着色器）。
   • copyBufferToBuffer()、copyBufferToTexture() 等：记录数据复制命令。
3. 完成编码：commandEncoder.finish() 返回一个 GPUCommandBuffer 对象。
4. 提交到队列：device.queue.submit([commandBuffer])。

// 1. 创建编码器
const commandEncoder = device.createCommandEncoder();

// 2. 记录渲染通道
const passEncoder = commandEncoder.beginRenderPass({
    colorAttachments: [{
        view: context.getCurrentTexture().createView(),
        loadOp: 'clear',
        storeOp: 'store',
        clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
    }],
});
passEncoder.setPipeline(renderPipeline);
passEncoder.setVertexBuffer(0, vertexBuffer);
passEncoder.draw(3); // 绘制一个三角形
passEncoder.end();

// 3. 完成编码
const commandBuffer = commandEncoder.finish();

// 4. 提交到队列
device.queue.submit([commandBuffer]);

device.queue.submit() 是一个非阻塞操作。它将 commandBuffer 加入到 GPU 的命令队列中，然后立即返回。JavaScript 主线程可以继续执行后续代码，而 GPU 则在独立地处理这些命令。

4.2 异步同步的挑战与解决方案

由于 submit() 的异步性质，我们不能简单地在 JavaScript 中假设 GPU 上的操作已经完成。这就引出了同步的需求。WebGPU 提供的主要同步机制是基于 Promise 和 mapAsync()。

4.2.1 隐式同步：命令顺序与帧同步

• 命令顺序：在一个 GPUCommandBuffer 内部，命令是按照记录的顺序执行的。
• 队列提交顺序：device.queue.submit() 提交的多个 GPUCommandBuffer，通常会按照提交的顺序在 GPU 上执行。如果一个命令缓冲区依赖于前一个命令缓冲区的结果，WebGPU 驱动程序会处理这些依赖关系。
• 帧同步：对于渲染应用，通常在 requestAnimationFrame 回调中提交渲染命令。浏览器会在下一帧开始前，确保前一帧的渲染操作已经完成，或者至少是能够安全地进行下一帧的绘制。这是一种由浏览器和 WebGPU 内部机制提供的隐式同步。

4.2.2 显式同步：mapAsync() 用于结果回读

当我们需要从 GPU 获取计算结果或调试信息时，mapAsync(GPUBufferUsage.MAP_READ) 是最主要的显式同步点。

工作流程：

1. 在 GPU 上执行一个计算着色器（或渲染到缓冲区）。
2. 将结果写入一个具有 MAP_READ 标志的 GPUBuffer。
3. 提交包含计算/渲染和写入操作的 commandBuffer 到队列。
4. 在 submit() 之后，调用 resultBuffer.mapAsync(GPUBufferUsage.MAP_READ)。
5. mapAsync() 返回的 Promise 将在 GPU 完成所有相关操作，并将数据准备好供 CPU 读取时解析。此时，我们可以通过 getMappedRange() 访问结果。

示例：计算着色器结果回读

async function runComputeShaderAndReadback(device, computePipeline, inputData) {
    // 1. 创建输入缓冲区
    const inputBuffer = device.createBuffer({
        size: inputData.byteLength,
        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
        mappedAtCreation: true
    });
    new Float32Array(inputBuffer.getMappedRange()).set(inputData);
    inputBuffer.unmap();

    // 2. 创建输出缓冲区 (用于存储结果，并可被 CPU 读取)
    const outputBuffer = device.createBuffer({
        size: inputData.byteLength, // 假设输出大小与输入相同
        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.MAP_READ
    });

    // 3. 创建绑定组
    const bindGroup = device.createBindGroup({
        layout: computePipeline.getBindGroupLayout(0),
        entries: [
            { binding: 0, resource: { buffer: inputBuffer } },
            { binding: 1, resource: { buffer: outputBuffer } },
        ],
    });

    // 4. 创建命令编码器并记录命令
    const commandEncoder = device.createCommandEncoder();

    const computePass = commandEncoder.beginComputePass();
    computePass.setPipeline(computePipeline);
    computePass.setBindGroup(0, bindGroup);
    computePass.dispatchWorkgroups(inputData.length); // 假设每个元素一个工作组
    computePass.end();

    // 5. 提交命令缓冲区
    device.queue.submit([commandEncoder.finish()]);

    // 6. 异步等待 GPU 完成计算并映射输出缓冲区
    await outputBuffer.mapAsync(GPUBufferUsage.MAP_READ);

    // 7. 获取映射范围并读取结果
    const resultBuffer = outputBuffer.getMappedRange();
    const result = new Float32Array(resultBuffer).slice(); // 复制一份数据

    // 8. 解除映射
    outputBuffer.unmap();

    console.log("计算结果:", result);
    return result;
}

在这个例子中，await outputBuffer.mapAsync() 确保了 JavaScript 代码只会在 GPU 完成计算并将结果写入 outputBuffer 后才继续执行。这是 CPU 和 GPU 之间最明确的同步点。

4.3 错误处理与设备丢失

WebGPU 的异步特性也延伸到了错误处理。GPU 上的错误（例如着色器编译失败、缓冲区越界访问、API 使用不当）通常不会立即在 JavaScript 中抛出同步异常。相反，它们会通过 GPUDevice 的 uncapturederror 事件异步报告。

device.onuncapturederror = (event) => {
    console.error("WebGPU 发生错误:", event.error.message);
    // 处理错误，例如显示错误信息给用户，或尝试恢复
};

此外，GPUDevice 对象也可能因各种原因（例如驱动崩溃、硬件移除、系统资源耗尽）而丢失。device.lost Promise 会在设备丢失时解析，允许应用程序优雅地处理这种情况。

device.lost.then((info) => {
    console.error("WebGPU 设备丢失:", info.message);
    // 提示用户刷新页面或尝试重新初始化 WebGPU
});

了解这些异步错误报告机制对于构建健壮的 WebGPU 应用至关重要。

5. 综合示例：GPU 上的数据求和

为了更好地理解上述概念，我们构建一个完整的示例：使用 WebGPU 计算一个浮点数数组的总和。

5.1 WGSL 计算着色器 (compute.wgsl)

这个着色器会将输入数组的元素累加到输出数组的第一个元素。

@group(0) @binding(0) var<storage, read> input: array<f32>;
@group(0) @binding(1) var<storage, read_write> output: array<f32>;

@compute @workgroup_size(64) // 每个工作组64个线程
fn main(@builtin(global_invocation_id) global_id: vec3<u32>) {
    // 确保线程ID在输入数组范围内
    if (global_id.x >= arrayLength(&input)) {
        return;
    }

    // 将当前线程负责的元素值原子加到输出数组的第一个元素
    // 使用 atomicAdd 确保多线程写入时的正确性
    atomicAdd(&output[0], input[global_id.x]);
}

说明:

• @group(0) @binding(0): 输入存储缓冲区。
• @group(0) @binding(1): 输出存储缓冲区，可读写。
• @workgroup_size(64): 指定每个工作组有 64 个线程。
• atomicAdd(&output[0], input[global_id.x]): 原子加操作，确保在多个线程同时修改 output[0] 时不会发生竞态条件。

5.2 JavaScript 绑定代码 (main.js)

async function initWebGPUAndComputeSum() {
    // 1. 请求 WebGPU 适配器和设备
    if (!navigator.gpu) {
        alert("当前浏览器不支持 WebGPU！");
        return;
    }
    const adapter = await navigator.gpu.requestAdapter();
    if (!adapter) {
        alert("无法获取 WebGPU 适配器！");
        return;
    }
    const device = await adapter.requestDevice();

    // 错误处理
    device.onuncapturederror = (event) => {
        console.error("WebGPU 发生未捕获错误:", event.error.message);
    };
    device.lost.then((info) => {
        console.error("WebGPU 设备丢失:", info.message);
        alert("WebGPU 设备丢失，请刷新页面。");
    });

    console.log("WebGPU 设备已初始化。");

    // 2. 准备输入数据
    const inputArray = new Float32Array(Array.from({ length: 1024 }, (_, i) => i + 1)); // [1, 2, ..., 1024]
    const arrayByteLength = inputArray.byteLength;
    const arrayNumElements = inputArray.length;

    // 3. 创建 GPU 缓冲区
    // 输入缓冲区：用于存储输入数据，只读，可作为复制目标
    const inputBuffer = device.createBuffer({
        size: arrayByteLength,
        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
    });

    // 输出缓冲区：用于存储计算结果 (一个f32)，可读写，可作为复制源，并可被 CPU 映射读取
    const outputBuffer = device.createBuffer({
        size: Float32Array.BYTES_PER_ELEMENT, // 只需要一个 f32 来存储总和
        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.MAP_READ,
    });

    // 4. 上传输入数据到 GPU (使用 queue.writeBuffer 更高效)
    device.queue.writeBuffer(
        inputBuffer,
        0,
        inputArray.buffer,
        inputArray.byteOffset,
        arrayByteLength
    );
    console.log("输入数据已上传到 GPU。");

    // 5. 加载 WGSL 着色器模块
    const computeShaderCode = `
        @group(0) @binding(0) var<storage, read> input: array<f32>;
        @group(0) @binding(1) var<storage, read_write> output: array<f32>;

        @compute @workgroup_size(64)
        fn main(@builtin(global_invocation_id) global_id: vec3<u32>) {
            if (global_id.x >= arrayLength(&input)) {
                return;
            }
            atomicAdd(&output[0], input[global_id.x]);
        }
    `;
    const shaderModule = device.createShaderModule({
        code: computeShaderCode,
    });

    // 6. 创建计算管线布局和绑定组布局
    const bindGroupLayout = device.createBindGroupLayout({
        entries: [
            {
                binding: 0,
                visibility: GPUShaderStage.COMPUTE,
                buffer: { type: "read-only-storage" }, // 输入缓冲区
            },
            {
                binding: 1,
                visibility: GPUShaderStage.COMPUTE,
                buffer: { type: "storage" }, // 输出缓冲区
            },
        ],
    });

    // 7. 创建计算管线
    const computePipeline = device.createComputePipeline({
        layout: device.createPipelineLayout({
            bindGroupLayouts: [bindGroupLayout],
        }),
        compute: {
            module: shaderModule,
            entryPoint: "main",
        },
    });
    console.log("计算管线已创建。");

    // 8. 创建绑定组
    const bindGroup = device.createBindGroup({
        layout: bindGroupLayout,
        entries: [
            { binding: 0, resource: { buffer: inputBuffer } },
            { binding: 1, resource: { buffer: outputBuffer } },
        ],
    });
    console.log("绑定组已创建。");

    // 9. 创建命令编码器并记录计算命令
    const commandEncoder = device.createCommandEncoder();
    const computePass = commandEncoder.beginComputePass();
    computePass.setPipeline(computePipeline);
    computePass.setBindGroup(0, bindGroup);

    // 计算工作组数量
    const workgroupSize = 64;
    const numWorkgroups = Math.ceil(arrayNumElements / workgroupSize);
    computePass.dispatchWorkgroups(numWorkgroups);
    computePass.end();

    // 10. 提交命令缓冲区
    device.queue.submit([commandEncoder.finish()]);
    console.log("计算命令已提交到 GPU 队列。");

    // 11. 异步等待 GPU 完成计算，然后映射输出缓冲区以读取结果
    console.log("等待 GPU 完成计算并映射输出缓冲区...");
    await outputBuffer.mapAsync(GPUBufferUsage.MAP_READ, 0, Float32Array.BYTES_PER_ELEMENT);

    // 12. 获取映射范围并读取结果
    const resultBuffer = outputBuffer.getMappedRange(0, Float32Array.BYTES_PER_ELEMENT);
    const gpuSum = new Float32Array(resultBuffer)[0];

    // 13. 解除映射
    outputBuffer.unmap();
    console.log("输出缓冲区已解除映射。");

    // 14. 验证结果
    const cpuSum = inputArray.reduce((acc, val) => acc + val, 0);
    console.log("CPU 计算总和:", cpuSum);
    console.log("GPU 计算总和:", gpuSum);

    if (Math.abs(cpuSum - gpuSum) < 0.0001) {
        console.log("结果匹配成功！");
    } else {
        console.error("结果不匹配！");
    }

    // 清理资源 (虽然浏览器会自动回收，但养成好习惯)
    inputBuffer.destroy();
    outputBuffer.destroy();
    console.log("缓冲区已销毁。");
}

// 页面加载完成后启动
window.addEventListener('load', initWebGPUAndComputeSum);

运行此示例的步骤：

1. 确保你使用的是支持 WebGPU 的浏览器（如 Chrome Canary 或最新版 Chrome 开启 chrome://flags/#enable-unsafe-webgpu）。
2. 将上述 JavaScript 代码保存为 main.js 文件。
3. 创建一个简单的 index.html 文件，引用 main.js：

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>WebGPU GPU Summation</title>
   </head>
   <body>
       <h1>WebGPU GPU Summation Example</h1>
       <p>Check the browser console for output.</p>
       <script src="main.js"></script>
   </body>
   </html>

4. 使用一个本地服务器（例如 npx serve 或 VS Code 的 Live Server 插件）来运行 index.html，因为 WebGPU 通常需要安全上下文（HTTPS 或 localhost）。
5. 打开浏览器的开发者工具，查看控制台输出。

这个例子清晰地展示了：

• 如何创建不同用途的 GPU 缓冲区。
• 如何使用 device.queue.writeBuffer() 上传初始数据。
• 如何定义 WGSL 计算着色器。
• 如何创建计算管线和绑定组。
• 如何使用 GPUCommandEncoder 记录计算通道。
• 最重要的是，如何使用 await outputBuffer.mapAsync() 来等待 GPU 完成计算，并从 GPU 内存读取结果回 JavaScript。

6. 性能考量与最佳实践

理解 WebGPU 的异步特性和缓冲区映射机制，对于优化性能至关重要。以下是一些最佳实践：

1. 最小化 mapAsync() 调用： mapAsync() 是一个重要的同步点，它会引入 CPU 和 GPU 之间的等待。应尽量减少其调用次数，尤其是在渲染循环中。如果可能，将多个数据读取请求合并为一个。
2. 优先使用 queue.writeBuffer()： 对于从 CPU 到 GPU 的数据传输，queue.writeBuffer() 通常比 mapAsync(MAP_WRITE) 更高效，因为它是一个非阻塞操作，可以更好地利用 GPU 的并行性。
3. 利用 COPY_SRC 和 COPY_DST 进行 GPU 内部传输： 当数据已经在 GPU 上时，使用 commandEncoder.copyBufferToBuffer() 或 copyBufferToTexture() 进行 GPU 内部的传输，效率最高，因为它完全在 GPU 上执行，无需 CPU 参与。
4. 避免在渲染循环中读取 GPU 数据： 从 GPU 读取数据 (mapAsync(MAP_READ)) 会强制 GPU 完成所有挂起的操作并将数据同步回 CPU。这会严重阻塞渲染管线，导致帧率下降。如果必须读取，考虑使用多个帧的延迟读取（例如，读取 N 帧前的结果），或者在非关键路径上执行。
5. 使用分段缓冲区 (Staging Buffers)： 对于某些复杂场景，可以创建一个临时的、具有 COPY_SRC 和 MAP_READ 权限的“分段缓冲区”，让 GPU 将结果复制到这个缓冲区，然后 CPU 再从这个缓冲区读取。这样可以解耦计算结果缓冲区和可映射缓冲区，有时可以提供更大的灵活性。
6. 合理设置 GPUBufferUsage 标志： 准确地声明缓冲区的用途，有助于驱动程序进行优化。不要添加不必要的 usage 标志。
7. 批量提交命令： 尽可能将多个 GPU 操作（渲染、计算、复制）记录在一个 GPUCommandEncoder 中，并一次性提交到 GPUQueue。减少 submit() 调用的次数可以降低驱动程序开销。
8. 利用 mappedAtCreation 进行初始化： 对于在创建后立即需要填充一次性数据的缓冲区，mappedAtCreation: true 可以简化初始化流程，因为它在创建时就提供了映射的 ArrayBuffer。但请记住，填充完成后必须立即 unmap()。
9. 异步加载资源： WebGPU 资源的创建（如管线编译）通常是异步的。确保使用 await 等待这些异步操作完成，以避免使用未就绪的资源。

7. 结语

WebGPU 及其 WGSL 着色器语言为 Web 带来了前所未有的图形和计算能力。然而，要充分发挥其潜力，我们必须深刻理解 JavaScript 与 WGSL 之间的数据流和命令调度机制。缓冲区映射 (mapAsync) 为 CPU 提供了直接访问 GPU 内存的手段，而命令编码器 (GPUCommandEncoder) 和队列提交 (GPUQueue.submit) 则编排了 GPU 的异步工作流。

掌握这些异步同步模式，是构建高性能、响应迅速的 WebGPU 应用程序的关键。通过遵循最佳实践，最小化 CPU-GPU 间的同步点，并有效利用 WebGPU 提供的各种数据传输方法，我们可以在 Web 平台上实现接近原生应用的视觉效果和计算性能。未来的 Web 交互和体验，必将因此而变得更加丰富和强大。