探索 WebGPU — Web 开发的最新高性能图形接口

近年来，前端技术快速发展，从传统的 HTML/CSS/JavaScript 到现代 WebAssembly，以及用于创建深沉式体验的 WebXR。WebGPU 是最新的加入者，它是一个实验性的、充满光辉的浏览器图形 API，为 Web 应用程序提供了接近原生级别的图形和计算性能。本篇博客将介绍 WebGPU 的原理、应用场景，以及如何利用 WebGPU 构建高性能图形应用。

WebGPU 简介

WebGPU 是一个由 W3C GPU for the Web Community Group 推动的标准，旨在替代 WebGL 和 WebGL 2。它使用现代 GPU 的计算和图形能力，提供更高效的性能和更灵活的设计。

与 WebGL 的对比

WebGPU 提供了一种更近现代 GPU 的接口，使得开发者可以直接访问高级特性，如计算着色器 (Compute Shaders)、绑定组 (Bind Groups) 和更高效的资源管理。

为什么选择 WebGPU？

1. 性能

WebGPU 提供了接近原生的 GPU 性能，对于需要高帧率或复杂计算的场景（例如游戏、模拟和 AI 推理）尤其适用。

2. 更现代化的设计

得益于其现代化设计，WebGPU 在渲染流水线和数据交互方面比 WebGL 更加直观和高效。这种改进极大地简化了开发流程。

3. 丰富的计算能力

支持通用计算任务，WebGPU 可以处理图像处理、物理模拟、数据可视化等以前需要后端服务器处理的计算任务。

如何使用 WebGPU？

1. 初始化 WebGPU 环境

首先，检查浏览器是否支持 WebGPU。

if (!navigator.gpu) {
    console.error('WebGPU is not supported on this browser.');
} else {
    console.log('WebGPU is supported!');
}

获取 GPU 设备和上下文：

const adapter = await navigator.gpu.requestAdapter();
if (!adapter) {
    throw new Error('Failed to get GPU adapter.');
}
const device = await adapter.requestDevice();
const canvas = document.querySelector('canvas');
const context = canvas.getContext('webgpu');
// 配置上下文
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({
    device,
    format,
});

2. 创建着色器与管线

创建一个简单的顶点着色器和片段着色器：

const shaderCode = `
@stage(vertex)
fn vs_main(@builtin(vertex_index) VertexIndex : u32) -> @builtin(position) vec4{
    var positions = array, 3>(
        vec2(0.0, 0.5),
        vec2(-0.5, -0.5),
        vec2(0.5, -0.5)
    );
    return vec4(positions[VertexIndex], 0.0, 1.0);
}
@stage(fragment)
fn fs_main() -> @location(0) vec4{
    return vec4(1.0, 0.0, 0.0, 1.0);
}`;
const shaderModule = device.createShaderModule({ code: shaderCode });

构建渲染管线：

const pipeline = device.createRenderPipeline({
    vertex: {
        module: shaderModule,
        entryPoint: 'vs_main',
    },
    fragment: {
        module: shaderModule,
        entryPoint: 'fs_main',
        targets: [{ format }],
    },
    primitive: {
        topology: 'triangle-list',
    },
});

3. 渲染三角形

执行渲染流程：

const commandEncoder = device.createCommandEncoder();
const textureView = context.getCurrentTexture().createView();
const renderPassDescriptor = {
    colorAttachments: [{
        view: textureView,
        loadOp: 'clear',
        clearValue: { r: 0, g: 0, b: 0, a: 1 },
        storeOp: 'store',
    }],
};
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
passEncoder.setPipeline(pipeline);
passEncoder.draw(3, 1, 0, 0);
passEncoder.end();
device.queue.submit([commandEncoder.finish()]);

通过以上代码，一个简单的红色三角形将会被渲染到画布上。

4. 增强特性实现

4.1 使用顶点缓冲区绘制

为了绘制更复杂的图形，我们需要使用顶点缓冲区。以下是绘制一个带颜色四边形的示例：

const vertexData = new Float32Array([
    // 顶点位置     |     颜色
    -0.5, -0.5,   1, 0, 0,   // 左下
     0.5, -0.5,   0, 1, 0,   // 右下
    -0.5,  0.5,   0, 0, 1,   // 左上
     0.5,  0.5,   1, 1, 0,   // 右上
]);
const vertexBuffer = device.createBuffer({
    size: vertexData.byteLength,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(vertexBuffer, 0, vertexData);

修改着色器以支持顶点颜色

const vertexShaderCode = `
@stage(vertex)
struct VertexOutput {
    @builtin(position) Position : vec4,
    @location(0) color : vec3,
};
struct VertexInput {
    @location(0) position : vec2,
    @location(1) color : vec3,
};
@stage(vertex)
fn vs_main(input: VertexInput) -> VertexOutput {
    var output: VertexOutput;
    output.Position = vec4(input.position, 0.0, 1.0);
    output.color = input.color;
    return output;
}`;
const fragmentShaderCode = `
@stage(fragment)
fn fs_main(@location(0) color : vec3) -> @location(0) vec4{
    return vec4(color, 1.0);
}`;

配置渲染管线

const pipelineWithColor = device.createRenderPipeline({
    vertex: {
        module: device.createShaderModule({ code: vertexShaderCode }),
        entryPoint: 'vs_main',
        buffers: [{
            arrayStride: 5 * 4,
            attributes: [
                { shaderLocation: 0, offset: 0, format: 'float32x2' },
                { shaderLocation: 1, offset: 8, format: 'float32x3' },
            ],
        }],
    },
    fragment: {
        module: device.createShaderModule({ code: fragmentShaderCode }),
        entryPoint: 'fs_main',
        targets: [{ format }],
    },
    primitive: {
        topology: 'triangle-strip',
    },
});

完整渲染

const commandEncoder = device.createCommandEncoder();
const textureView = context.getCurrentTexture().createView();
const renderPassDescriptor = {
    colorAttachments: [{
        view: textureView,
        loadOp: 'clear',
        clearValue: { r: 0, g: 0, b: 0, a: 1 },
        storeOp: 'store',
    }],
};
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
passEncoder.setPipeline(pipelineWithColor);
passEncoder.setVertexBuffer(0, vertexBuffer);
passEncoder.draw(4, 1, 0, 0);
passEncoder.end();
device.queue.submit([commandEncoder.finish()]);

运行这段代码，一个带渐变颜色的四边形将会出现在画布上。

结束语

通过本文的介绍，我们了解了 WebGPU 的基础概念以及如何逐步使用 WebGPU 构建简单的图形应用。从简单的三角形到带颜色的四边形，WebGPU 以其强大的功能和现代化的设计，开启了 Web 开发的全新图形时代。它的潜力无疑将促使更多复杂的 Web 应用在未来变为可能。如果你有更复杂的需求，不妨试试添加计算着色器或纹理功能，为项目注入更多活力！