WebGPU编程：高性能图形和计算着色器

WebGPU是用于Web的下一代图形和计算API，旨在提供现代功能并提高性能，与它的前身WebGL相比。它允许开发人员利用GPU的强大功能进行图形渲染和通用计算，从而为Web应用程序开辟新的可能性。

什么是WebGPU？

WebGPU不仅仅是一个图形API；它是浏览器中高性能计算的门户。它提供了几个关键优势：

现代API：旨在与现代GPU架构保持一致，并利用其功能。
性能：提供对GPU的较低级别访问，从而实现优化的渲染和计算操作。
跨平台：可在不同的操作系统和浏览器上运行，提供一致的开发体验。
计算着色器：支持GPU上的通用计算，从而加速图像处理、物理模拟和机器学习等任务。
WGSL（WebGPU着色语言）：一种专为WebGPU设计的新型着色语言，与GLSL相比，它提供了更高的安全性和表达性。

WebGPU vs. WebGL

虽然WebGL多年来一直是Web图形的标准，但它基于较旧的OpenGL ES规范，并且在性能和功能方面受到限制。WebGPU通过以下方式解决了这些限制：

显式控制：使开发人员能够更直接地控制GPU资源和内存管理。
异步操作：允许并行执行并减少CPU开销。
现代功能：支持现代渲染技术，如计算着色器、光线追踪（通过扩展）和高级纹理格式。
降低驱动程序开销：旨在最大限度地减少驱动程序开销并提高整体性能。

WebGPU入门

要开始使用WebGPU进行编程，您需要一个支持该API的浏览器。Chrome、Firefox和Safari（技术预览版）具有部分或完整的实现。以下是所涉及步骤的基本概述：

请求适配器：适配器代表物理GPU或软件实现。
请求设备：设备是GPU的逻辑表示，用于创建资源和执行命令。
创建着色器：着色器是在GPU上运行并执行渲染或计算操作的程序。它们是用WGSL编写的。
创建缓冲区和纹理：缓冲区存储顶点数据、统一数据和着色器使用的其他数据。纹理存储图像数据。
创建渲染管线或计算管线：管线定义了渲染或计算中涉及的步骤，包括要使用的着色器、输入和输出数据的格式以及其他参数。
创建命令编码器：命令编码器记录要由GPU执行的命令。
提交命令：将命令提交到设备以供执行。

示例：基本三角形渲染

以下是如何使用WebGPU渲染三角形的简化示例（为简洁起见，使用伪代码）：


// 1. 请求适配器和设备
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

// 2. 创建着色器 (WGSL)
const vertexShaderSource = `
  @vertex
  fn main(@location(0) pos: vec2f) -> @builtin(position) vec4f {
    return vec4f(pos, 0.0, 1.0);
  }
`;

const fragmentShaderSource = `
  @fragment
  fn main() -> @location(0) vec4f {
    return vec4f(1.0, 0.0, 0.0, 1.0); // 红色
  }
`;

const vertexShaderModule = device.createShaderModule({ code: vertexShaderSource });
const fragmentShaderModule = device.createShaderModule({ code: fragmentShaderSource });

// 3. 创建顶点缓冲区
const vertices = new Float32Array([
  0.0, 0.5,   // 顶部
  -0.5, -0.5, // 左下
  0.5, -0.5   // 右下
]);

const vertexBuffer = device.createBuffer({ 
  size: vertices.byteLength,
  usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
  mappedAtCreation: true // 在创建时映射以进行立即写入
});
new Float32Array(vertexBuffer.getMappedRange()).set(vertices);
vertexBuffer.unmap();

// 4. 创建渲染管线
const renderPipeline = device.createRenderPipeline({
  vertex: {
    module: vertexShaderModule,
    entryPoint: "main",
    buffers: [{
      arrayStride: 8, // 2 * 4 字节 (float32)
      attributes: [{
        shaderLocation: 0, // @location(0)
        offset: 0,
        format: GPUVertexFormat.float32x2
      }]
    }]
  },
  fragment: {
    module: fragmentShaderModule,
    entryPoint: "main",
    targets: [{
      format: 'bgra8unorm' // 示例格式，取决于画布
    }]
  },
  primitive: {
    topology: 'triangle-list' // 绘制三角形
  },
  layout: 'auto' // 自动生成布局
});

// 5. 获取画布上下文
const canvas = document.getElementById('webgpu-canvas');
const context = canvas.getContext('webgpu');
context.configure({ device: device, format: 'bgra8unorm' }); // 示例格式

// 6. 渲染通道
const render = () => {
  const commandEncoder = device.createCommandEncoder();
  const textureView = context.getCurrentTexture().createView();
  const renderPassDescriptor = {
    colorAttachments: [{
      view: textureView,
      clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, // 清除为黑色
      loadOp: 'clear',
      storeOp: 'store'
    }]
  };

  const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
  passEncoder.setPipeline(renderPipeline);
  passEncoder.setVertexBuffer(0, vertexBuffer);
  passEncoder.draw(3, 1, 0, 0); // 3 个顶点，1 个实例
  passEncoder.end();

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

  requestAnimationFrame(render);
};

render();

此示例演示了渲染简单三角形所涉及的基本步骤。实际应用将涉及更复杂的着色器、数据结构和渲染技术。示例中的`bgra8unorm`格式是一种常见格式，但必须确保它与画布格式匹配才能正确渲染。您可能需要根据您的特定环境进行调整。

WebGPU中的计算着色器

WebGPU最强大的功能之一是它对计算着色器的支持。计算着色器允许您在GPU上执行通用计算，这可以显着加速非常适合并行处理的任务。

计算着色器的用例

图像处理：应用滤镜、执行颜色调整和生成纹理。
物理模拟：计算粒子运动、模拟流体动力学和求解方程。
机器学习：训练神经网络、执行推理和处理数据。
数据处理：排序、过滤和转换大型数据集。

示例：简单计算着色器（添加两个数组）

此示例演示了一个简单的计算着色器，该着色器将两个数组相加。假设我们传递两个Float32Array缓冲区作为输入，第三个缓冲区用于存储结果。


// WGSL 着色器
const computeShaderSource = `
  @group(0) @binding(0) var a: array;
  @group(0) @binding(1) var b: array;
  @group(0) @binding(2) var output: array;

  @compute @workgroup_size(64) // 工作组大小：对性能至关重要
  fn main(@builtin(global_invocation_id) global_id: vec3u) {
    let i = global_id.x;
    output[i] = a[i] + b[i];
  }
`;

// JavaScript 代码
const arrayLength = 256; // 为简单起见，必须是工作组大小的倍数

// 创建输入缓冲区
const array1 = new Float32Array(arrayLength);
const array2 = new Float32Array(arrayLength);
const result = new Float32Array(arrayLength);

for (let i = 0; i < arrayLength; i++) {
  array1[i] = Math.random();
  array2[i] = Math.random();
}

const gpuBuffer1 = device.createBuffer({
  size: array1.byteLength,
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
  mappedAtCreation: true
});
new Float32Array(gpuBuffer1.getMappedRange()).set(array1);
gpuBuffer1.unmap();

const gpuBuffer2 = device.createBuffer({
  size: array2.byteLength,
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
  mappedAtCreation: true
});
new Float32Array(gpuBuffer2.getMappedRange()).set(array2);
gpuBuffer2.unmap();

const gpuBufferResult = device.createBuffer({
  size: result.byteLength,
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,
  mappedAtCreation: false
});


const computeShaderModule = device.createShaderModule({ code: computeShaderSource });

const computePipeline = device.createComputePipeline({
  layout: 'auto',
  compute: {
    module: computeShaderModule,
    entryPoint: "main"
  }
});

// 创建绑定组布局和绑定组（对于将数据传递到着色器非常重要）
const bindGroup = device.createBindGroup({
  layout: computePipeline.getBindGroupLayout(0), // 重要：使用来自管道的布局
  entries: [
    { binding: 0, resource: { buffer: gpuBuffer1 } },
    { binding: 1, resource: { buffer: gpuBuffer2 } },
    { binding: 2, resource: { buffer: gpuBufferResult } }
  ]
});

// 调度计算通道
const commandEncoder = device.createCommandEncoder();
const passEncoder = commandEncoder.beginComputePass();
passEncoder.setPipeline(computePipeline);
passEncoder.setBindGroup(0, bindGroup);
passEncoder.dispatchWorkgroups(arrayLength / 64); // 调度工作
passEncoder.end();

// 将结果复制到可读缓冲区
const readBuffer = device.createBuffer({
  size: result.byteLength,
  usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
});

commandEncoder.copyBufferToBuffer(gpuBufferResult, 0, readBuffer, 0, result.byteLength);

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

// 读取结果
await readBuffer.mapAsync(GPUMapMode.READ);
const resultArray = new Float32Array(readBuffer.getMappedRange());

console.log("Result: ", resultArray);

readBuffer.unmap();

在这个例子中：

我们定义了一个 WGSL 计算着色器，它将两个输入数组的元素相加并将结果存储在输出数组中。
我们在 GPU 上创建了三个存储缓冲区：两个用于输入数组，一个用于输出数组。
我们创建了一个计算管道，它指定了计算着色器及其入口点。
我们创建一个绑定组，将缓冲区与着色器的输入和输出变量相关联。
我们调度计算着色器，指定要执行的工作组的数量。着色器中的 `workgroup_size` 和 `dispatchWorkgroups` 参数必须对齐才能正确执行。如果 `arrayLength` 不是 `workgroup_size`（在本例中为 64）的倍数，则需要在着色器中处理边缘情况。
该示例将结果缓冲区从 GPU 复制到 CPU 以进行检查。

WGSL（WebGPU 着色语言）

WGSL 是为 WebGPU 设计的着色语言。它是一种现代、安全且富有表现力的语言，与 GLSL（WebGL 使用的着色语言）相比，它具有多个优势：

安全性：WGSL 旨在保证内存安全并防止常见的着色器错误。
表现力：WGSL 支持广泛的数据类型和操作，从而允许复杂的着色器逻辑。
可移植性：WGSL 旨在跨不同的 GPU 架构进行移植。
集成：WGSL 与 WebGPU API 紧密集成，提供无缝的开发体验。

WGSL 的主要功能

强类型：WGSL 是一种强类型语言，有助于防止错误。
显式内存管理：WGSL 需要显式内存管理，这使开发人员可以更好地控制 GPU 资源。
内置函数：WGSL 提供了一组丰富的内置函数，用于执行常见的图形和计算操作。
自定义数据结构：WGSL 允许开发人员定义自定义数据结构来存储和操作数据。

示例：WGSL 函数


// WGSL 函数
fn lerp(a: f32, b: f32, t: f32) -> f32 {
  return a + t * (b - a);
}

性能注意事项

WebGPU 与 WebGL 相比提供了显着的性能改进，但优化您的代码以充分利用其功能非常重要。以下是一些关键的性能注意事项：

最小化 CPU-GPU 通信：减少 CPU 和 GPU 之间传输的数据量。使用缓冲区和纹理将数据存储在 GPU 上，并避免频繁更新。
优化着色器：编写高效的着色器，最大限度地减少指令数和内存访问。使用分析工具来识别瓶颈。
使用实例化：使用实例化以不同的转换渲染同一对象的多个副本。这可以显着减少绘制调用的数量。
批量绘制调用：将多个绘制调用批量处理在一起，以减少将命令提交到 GPU 的开销。
选择适当的数据格式：选择 GPU 可以高效处理的数据格式。例如，尽可能使用半精度浮点数 (f16)。
工作组大小优化：正确的工作组大小选择对计算着色器性能有很大影响。选择与目标 GPU 架构对齐的大小。

跨平台开发

WebGPU 旨在实现跨平台，但不同的浏览器和操作系统之间存在一些差异。以下是一些跨平台开发的技巧：

在多个浏览器上进行测试：在不同的浏览器上测试您的应用程序，以确保它能够正常工作。
使用功能检测：使用功能检测来检查特定功能的可用性并相应地调整您的代码。
处理设备限制：注意不同 GPU 和浏览器施加的设备限制。例如，最大纹理大小可能会有所不同。
使用跨平台框架：考虑使用跨平台框架，如 Babylon.js、Three.js 或 PixiJS，它们可以帮助抽象不同平台之间的差异。

调试 WebGPU 应用程序

调试 WebGPU 应用程序可能具有挑战性，但有几种工具和技术可以提供帮助：

浏览器开发人员工具：使用浏览器的开发人员工具来检查 WebGPU 资源，如缓冲区、纹理和着色器。
WebGPU 验证层：启用 WebGPU 验证层以捕获常见错误，如越界内存访问和无效的着色器语法。
图形调试器：使用图形调试器（如 RenderDoc 或 NSight Graphics）来单步执行您的代码、检查 GPU 状态和分析性能。这些工具通常提供对着色器执行和内存使用的详细见解。
日志记录：将日志记录语句添加到您的代码中以跟踪执行流程和变量的值。但是，过多的日志记录会影响性能，尤其是在着色器中。

高级技术

一旦您对 WebGPU 的基础知识有了很好的了解，您就可以探索更高级的技术来创建更复杂的应用程序。

计算着色器与渲染的互操作：将计算着色器用于预处理数据或生成纹理与传统的渲染管线用于可视化相结合。
光线追踪（通过扩展）：使用光线追踪来创建逼真的照明和反射。 WebGPU 的光线追踪功能通常通过浏览器扩展公开。
几何着色器：使用几何着色器在 GPU 上生成新的几何体。
细分着色器：使用细分着色器来细分表面并创建更详细的几何体。

WebGPU 的实际应用

WebGPU 已经用于各种实际应用中，包括：

游戏：创建在浏览器中运行的高性能 3D 游戏。
数据可视化：在交互式 3D 环境中可视化大型数据集。
科学模拟：模拟复杂的物理现象，如流体动力学和气候模型。
机器学习：在浏览器中训练和部署机器学习模型。
CAD/CAM：开发计算机辅助设计和制造应用程序。

例如，考虑一个地理信息系统 (GIS) 应用程序。通过使用 WebGPU，GIS 可以渲染具有高分辨率的复杂 3D 地形模型，并结合来自各种来源的实时数据更新。这在城市规划、灾难管理和环境监测中特别有用，允许全球专家协作处理数据丰富的可视化，而不管其硬件功能如何。

WebGPU 的未来

WebGPU 仍然是一项相对较新的技术，但它有可能彻底改变 Web 图形和计算。随着 API 的成熟以及更多浏览器采用它，我们可以期望看到更多创新应用程序的出现。

WebGPU 未来的发展可能包括：

改进的性能：对 API 和底层实现的持续优化将进一步提高性能。
新功能：新功能，如光线追踪和网格着色器，将被添加到 API 中。
更广泛的采用：浏览器和开发人员更广泛地采用 WebGPU 将导致更大的工具和资源生态系统。
标准化：持续的标准化工作将确保 WebGPU 仍然是一个一致且可移植的 API。

结论

WebGPU 是一个强大的新 API，它释放了 GPU 在 Web 应用程序中的全部潜力。通过提供现代功能、改进的性能以及对计算着色器的支持，WebGPU 使开发人员能够创建令人惊叹的图形并加速各种计算密集型任务。无论您是构建游戏、数据可视化还是科学模拟，WebGPU 都是您绝对应该探索的技术。

此介绍应帮助您入门，但持续学习和实验是掌握 WebGPU 的关键。及时了解最新的规范、示例和社区讨论，以充分利用这项激动人心的技术的强大功能。 WebGPU 标准正在快速发展，因此请准备好在引入新功能和出现最佳实践时调整您的代码。