玩转 WebGPU：打造你的第一个三角形艺术

WebGPU 入门：开启现代图形编程之旅

什么是 WebGPU？

WebGPU 是一个创新的 Web 图形 API，它为开发者提供了更底层的 GPU 访问权限。相较于 WebGL，WebGPU 拥有更先进的设计、更低的开销，以及对现代 GPU 架构的更好支持。它为我们在浏览器中创建更复杂逼真的 3D 图形铺平了道路。

准备工作

踏上 WebGPU 之旅需要以下必备工具：

• 支持 WebGPU 的浏览器（如 Chrome Canary 或 Firefox Nightly）
• 代码编辑器（如 Visual Studio Code 或 Atom）
• JavaScript 运行时环境（如 Node.js）

创建 WebGPU 项目

1. 创建项目： 使用代码编辑器创建一个新的 JavaScript 项目。
2. 安装 WebGPU 库： 使用 npm 命令安装 WebGPU 库：npm install @webgpu/core。
3. 创建 HTML 文件： 创建一个 HTML 文件，包含画布元素和脚本引用。
4. 创建 JavaScript 文件： 创建一个 JavaScript 文件，包含 WebGPU 代码。

绘制第一个三角形

我们从绘制一个简单的三角形开始。代码如下：

// 获取画布元素和 GPU
const canvas = document.getElementById('canvas');
const gpu = new GPU();

// 获取适配器和上下文
const device = await gpu.requestAdapter();
const context = canvas.getContext('webgpu');

// 创建顶点缓冲区
const vertexBuffer = gpu.createBuffer({
  size: 12, // 3 个顶点 * 4 个字节/浮点数
  usage: GPUBufferUsage.VERTEX, // 用作顶点缓冲区
});

// 定义顶点数据
const vertices = new Float32Array([
  -1, -1, 0, // 顶点 1
  1, -1, 0, // 顶点 2
  0, 1, 0, // 顶点 3
]);

// 将顶点数据写入缓冲区
gpu.writeBuffer(vertexBuffer, 0, vertices);

// 创建着色器
const vertexShader = `
  [[stage(vertex)]]
  fn main([[location(0)]] pos: vec3<f32>) -> [[builtin(position)]] vec4<f32> {
    return vec4<f32>(pos, 1.0); // 转换到齐次坐标
  }
`;

const fragmentShader = `
  [[stage(fragment)]]
  fn main() -> [[location(0)]] vec4<f32> {
    return vec4<f32>(1.0, 0.0, 0.0, 1.0); // 设置片元颜色为红色
  }
`;

// 创建渲染管线
const pipeline = gpu.createRenderPipeline({
  vertex: {
    module: gpu.createShaderModule({
      code: vertexShader,
    }),
    entryPoint: 'main',
  },
  fragment: {
    module: gpu.createShaderModule({
      code: fragmentShader,
    }),
    entryPoint: 'main',
  },
  primitive: {
    topology: 'triangle-list', // 三角形图元
  },
});

// 创建命令编码器
const commandEncoder = gpu.createCommandEncoder();

// 创建渲染目标
const renderPassDescriptor = {
  colorAttachments: [
    {
      view: context.getCurrentTexture().createView(),
      loadOp: 'clear',
      storeOp: 'store',
    },
  ],
};

// 创建渲染通道
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

// 设置渲染管线和顶点缓冲区
passEncoder.setPipeline(pipeline);
passEncoder.setVertexBuffer(0, vertexBuffer);

// 绘制三角形
passEncoder.draw(3, 1, 0, 0); // 3 个顶点，1 个实例，从顶点偏移 0 开始

// 结束渲染通道
passEncoder.end();

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

运行程序

1. 导航到项目目录。
2. 使用 npm 命令启动项目：npm start。
3. 浏览器窗口会自动打开，显示一个红色的三角形。

进阶之旅

绘制三角形只是 WebGPU 旅程的开始。你可以进一步探索以下主题：

• 创建复杂模型和场景
• 应用纹理和着色器
• 实现动画和交互
• 优化性能

常见问题解答

• 什么是 GPU？
  GPU（图形处理器）是专门用于处理图形计算的硬件组件。
• WebGPU 和 WebGL 有什么区别？
  WebGPU 是一种更现代、更底层的 API，提供了对 GPU 的更直接访问。它具有更低的开销和对现代 GPU 架构的更好支持。
• 为什么使用 WebGPU？
  WebGPU 允许开发者创建更逼真的 3D 图形，提升 Web 应用的视觉体验。
• WebGPU 支持哪些浏览器？
  目前，Chrome Canary 和 Firefox Nightly 支持 WebGPU。
• 如何学习 WebGPU？
  有许多在线资源和教程可以帮助你入门 WebGPU，例如 Mozilla 开发者网络和 WebGPU 教程。