WebGPU入门初识

什么是 WebGPU？

WebGPU 是一种现代图形 API，旨在取代 WebGL，提供更高性能和更灵活的 GPU 加速能力。它基于 Vulkan、Metal 和 Direct3D 12，为 Web 开发者带来了类似于原生图形 API 的性能和控制力。

与 WebGL 不同，WebGPU 提供了对计算着色器和低级 GPU 操作的直接支持，使开发者能够充分利用 GPU的潜力来处理图形渲染和并行计算任务。

WebGPU 基本概念详解

在 WebGPU 开发中，理解其核心概念至关重要。以下是 WebGPU 的基本概念及相应的实例代码，帮助初学者直观理解。

1. GPU 适配器（GPUAdapter）和设备（GPUDevice）

概念：

GPUAdapter：表示浏览器访问到的可用 GPU，类似于桥梁，连接 Web 应用与底层硬件。
GPUDevice：表示具体的 GPU 设备，用于执行渲染或计算任务。

示例：

const adapter = await navigator.gpu.requestAdapter(); // 获取适配器
const device = await adapter.requestDevice();        // 请求设备
console.log("Adapter:", adapter);
console.log("Device:", device);

2. 管线（Pipeline）

概念：

渲染管线（Render Pipeline）：定义顶点着色器和片元着色器的工作流程。
计算管线（Compute Pipeline）：专用于非图形任务的 GPU 计算。

渲染管线示例：

const pipeline = device.createRenderPipeline({vertex: {module: shaderModule,entryPoint: "vertex_main",},fragment: {module: shaderModule,entryPoint: "fragment_main",targets: [{ format: "bgra8unorm" }],},primitive: {topology: "triangle-list", // 图元类型},
});
console.log("Pipeline Created:", pipeline);

3. 着色器（Shader）

概念：

着色器是运行在 GPU 上的程序，用于处理图形数据。WebGPU 使用 WGSL 编写。
常见的着色器类型：
- 顶点着色器：处理每个顶点的位置。
- 片元着色器：计算像素的颜色。

示例：

const shaderCode = `@vertexfn vertex_main(@location(0) position: vec4<f32>) -> @builtin(position) vec4<f32> {return position; // 顶点位置传递给片元着色器}@fragmentfn fragment_main() -> @location(0) vec4<f32> {return vec4(1.0, 0.0, 0.0, 1.0); // 输出红色}
`;
const shaderModule = device.createShaderModule({ code: shaderCode });
console.log("Shader Module Created:", shaderModule);

4. 命令编码器（Command Encoder）

概念：

用于生成命令缓冲区，将渲染或计算任务发送到 GPU 执行。

示例：

const commandEncoder = device.createCommandEncoder();
const passEncoder = commandEncoder.beginRenderPass({colorAttachments: [{view: context.getCurrentTexture().createView(),loadOp: "clear", // 清除屏幕clearValue: { r: 0.1, g: 0.2, b: 0.3, a: 1.0 }, // 背景色storeOp: "store",}],
});passEncoder.setPipeline(pipeline);
passEncoder.draw(3, 1, 0, 0); // 绘制三角形
passEncoder.end();
device.queue.submit([commandEncoder.finish()]);

5. 缓冲区（Buffer）

概念：

GPU 缓冲区存储顶点数据、索引数据、常量等。
数据以二进制格式存储，传递给着色器。

示例：

const vertices = new Float32Array([0.0,  0.5, // 顶点 1-0.5, -0.5, // 顶点 20.5, -0.5, // 顶点 3
]);const vertexBuffer = device.createBuffer({size: vertices.byteLength,usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(vertexBuffer, 0, vertices);
console.log("Vertex Buffer Created:", vertexBuffer);

6. 纹理（Texture）

概念：

纹理用于存储图像或多维数据，常用于渲染图片或生成复杂效果。

示例：

const texture = device.createTexture({size: [256, 256, 1],format: "rgba8unorm",usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
});
console.log("Texture Created:", texture);

WebGPU 基本示例

以下是一个简单的 WebGPU 应用示例，绘制一个彩色的三角形。

HTML 模板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebGPU 三角形</title>
</head>
<body><canvas id="gpuCanvas"></canvas><script src="app.js"></script>
</body>
</html>

JavaScript 实现（`app.js`）

(async () => {// 初始化 GPUconst adapter = await navigator.gpu.requestAdapter();const device = await adapter.requestDevice();const canvas = document.getElementById("gpuCanvas");const context = canvas.getContext("webgpu");context.configure({device: device,format: "bgra8unorm",});// 顶点数据const vertices = new Float32Array([0.0,  0.5, 1.0, 0.0, 0.0, // 顶点 1：红色-0.5, -0.5, 0.0, 1.0, 0.0, // 顶点 2：绿色0.5, -0.5, 0.0, 0.0, 1.0, // 顶点 3：蓝色]);const vertexBuffer = device.createBuffer({size: vertices.byteLength,usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,});device.queue.writeBuffer(vertexBuffer, 0, vertices);// 着色器代码const shaderCode = `@vertexfn vertex_main(@location(0) position: vec2<f32>, @location(1) color: vec3<f32>) -> @builtin(position) vec4<f32> {return vec4(position, 0.0, 1.0);}@fragmentfn fragment_main(@location(1) color: vec3<f32>) -> @location(0) vec4<f32> {return vec4(color, 1.0);}`;const shaderModule = device.createShaderModule({ code: shaderCode });// 渲染管线const pipeline = device.createRenderPipeline({vertex: {module: shaderModule,entryPoint: "vertex_main",buffers: [{arrayStride: 5 * 4, // 每个顶点占 5 个 floatattributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }, // 位置{ shaderLocation: 1, offset: 2 * 4, format: "float32x3" }, // 颜色],},],},fragment: {module: shaderModule,entryPoint: "fragment_main",targets: [{ format: "bgra8unorm" }],},primitive: { topology: "triangle-list" },});// 渲染const commandEncoder = device.createCommandEncoder();const passEncoder = commandEncoder.beginRenderPass({colorAttachments: [{view: context.getCurrentTexture().createView(),loadOp: "clear",clearValue: { r: 0.1, g: 0.1, b: 0.1, a: 1.0 },storeOp: "store",}],});passEncoder.setPipeline(pipeline);passEncoder.setVertexBuffer(0, vertexBuffer);passEncoder.draw(3, 1, 0, 0); // 绘制三角形passEncoder.end();device.queue.submit([commandEncoder.finish()]);
})();

代码解析

GPU 初始化：
- navigator.gpu.requestAdapter() 请求 GPU 适配器。
- adapter.requestDevice() 获取 GPU 设备。
Canvas 配置：
使用 getPreferredCanvasFormat() 确保兼容性。
顶点数据：
- 包含位置和颜色信息。
- 使用 Float32Array 存储。
着色器编写：
- 顶点着色器处理每个顶点的位置。
- 片元着色器确定像素的颜色。
渲染管线：
定义顶点缓冲区格式和着色器入口。
渲染流程：
- 配置 RenderPass。
- 通过命令编码器将绘图命令提交到 GPU。