JS WebGPU：下一代图形 API 与 GPU 计算 - 智猿学院-IT界的百科全书

各位观众老爷们，大家好！今天咱们来聊聊 WebGPU，这玩意儿可不是什么新鲜出炉的小点心，而是一道未来大餐的主菜！ WebGPU 的威力，简单来说，就是让你的浏览器也能像游戏引擎一样，直接跟显卡“勾搭”上，玩转各种炫酷的图形效果和高性能计算。准备好了吗？Let’s dive in!

一、WebGPU 是个啥？为啥我们需要它？

先说说 WebGL，这货也算是个老前辈了，它让 Web 能够渲染 3D 图形，但它基于 OpenGL ES，这货毕竟是为嵌入式设备设计的，有些地方就显得力不从心了，比如：

性能瓶颈： OpenGL 的 API 比较底层，浏览器需要做很多额外的转换和校验，效率不高。
API 过时： 有些 OpenGL 的特性已经过时，不能充分利用现代 GPU 的能力。
缺乏现代特性： 比如计算着色器，这玩意儿在 GPU 上做通用计算（GPGPU）可是个神器，WebGL 支持得不太好。

WebGPU 就是为了解决这些问题而生的。它是一个新的、现代的图形 API，主要目标是：

更高的性能： 接近原生应用的性能，能更好地利用 GPU 的并行计算能力。
更现代的 API： 借鉴了 Vulkan、Metal 和 DirectX 12 等现代图形 API 的设计理念。
GPU 计算： 强大的计算着色器支持，让 Web 也能轻松进行图像处理、机器学习等高性能计算任务。

简单来说，WebGPU 就是 WebGL 的升级版，性能更好，功能更强，能让 Web 应用在图形和计算方面更上一层楼。

二、WebGPU 的基本概念：有点像搭积木

WebGPU 的 API 比较底层，但它的核心概念其实挺好理解的，就像搭积木一样，一块一块地拼起来。

Instance (实例)： 这是 WebGPU 的入口，你可以把它看作是整个 WebGPU 系统的“大脑”。
```
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
```
这段代码首先请求一个 GPUAdapter，它代表一个物理 GPU（或者模拟的 GPU）。然后，我们从 adapter 请求一个 GPUDevice，它代表一个逻辑 GPU，是所有 WebGPU 操作的上下文。
Shader (着色器)： 这是 WebGPU 的灵魂，是用 WGSL（WebGPU Shading Language）编写的小程序，运行在 GPU 上，负责处理顶点和像素。
```
@vertex
fn vertexMain(@location(0) pos: vec3f) -> @builtin(position) vec4f {
    return vec4f(pos, 1.0);
}

@fragment
fn fragmentMain() -> @location(0) vec4f {
    return vec4f(1.0, 0.0, 0.0, 1.0); // 红色
}
```
这段 WGSL 代码定义了一个简单的顶点着色器和一个片段着色器。顶点着色器接收顶点位置作为输入，并将其转换为裁剪空间坐标。片段着色器则将所有像素都设置为红色。

Buffer (缓冲区)： 这是 WebGPU 的数据仓库，用于存储顶点数据、索引数据、 uniform 数据等。

const vertexBuffer = device.createBuffer({
    size: vertexData.byteLength,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
    mappedAtCreation: true, // 创建时映射，方便写入数据
});
new Float32Array(vertexBuffer.getMappedRange()).set(vertexData);
vertexBuffer.unmap(); // 解除映射

这段代码创建了一个顶点缓冲区，并将其映射到 JavaScript 内存中，然后将顶点数据写入缓冲区。

Texture (纹理)： 这是 WebGPU 的画布，用于存储图像数据，可以作为着色器的输入，也可以作为渲染的目标。
```
const texture = device.createTexture({
    size: [width, height],
    format: 'rgba8unorm',
    usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
});
```
这段代码创建了一个纹理，指定了纹理的大小、格式和用途。

Pipeline (管线)： 这是 WebGPU 的渲染流程，定义了如何处理顶点和像素，包括顶点着色器、片段着色器、光栅化设置、深度测试等。

const renderPipeline = device.createRenderPipeline({
    vertex: {
        module: shaderModule,
        entryPoint: 'vertexMain',
        buffers: [
            {
                arrayStride: 3 * 4, // 每个顶点 3 个 float，每个 float 4 字节
                attributes: [
                    {
                        shaderLocation: 0,
                        offset: 0,
                        format: 'float32x3',
                    },
                ],
            },
        ],
    },
    fragment: {
        module: shaderModule,
        entryPoint: 'fragmentMain',
        targets: [
            {
                format: presentationFormat,
            },
        ],
    },
    primitive: {
        topology: 'triangle-list', // 三角形列表
    },
    layout: 'auto', // 自动布局
});

这段代码创建了一个渲染管线，指定了顶点着色器、片段着色器、顶点缓冲区的布局、图元拓扑结构等。

Bind Group (绑定组)： 这是 WebGPU 的数据连接器，用于将 Buffer 和 Texture 等资源绑定到 Shader 上，让 Shader 能够访问这些数据。
```
const bindGroup = device.createBindGroup({
    layout: renderPipeline.getBindGroupLayout(0),
    entries: [
        {
            binding: 0,
            resource: {
                buffer: uniformBuffer,
            },
        },
    ],
});
```
这段代码创建了一个绑定组，将一个 uniform 缓冲区绑定到渲染管线的第一个绑定槽上。

Command Encoder (命令编码器)： 这是 WebGPU 的指令记录器，用于记录所有 WebGPU 操作，比如创建缓冲区、写入数据、渲染等。

const commandEncoder = device.createCommandEncoder();
const renderPass = commandEncoder.beginRenderPass({
    colorAttachments: [
        {
            view: context.getCurrentTexture().createView(),
            loadOp: 'clear',
            storeOp: 'store',
            clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
        },
    ],
});
renderPass.setPipeline(renderPipeline);
renderPass.setVertexBuffer(0, vertexBuffer);
renderPass.setBindGroup(0, bindGroup);
renderPass.draw(3); // 绘制 3 个顶点
renderPass.end();
const commandBuffer = commandEncoder.finish();
device.queue.submit([commandBuffer]);

这段代码使用命令编码器记录了一系列渲染操作，包括开始渲染过程、设置渲染管线、设置顶点缓冲区、设置绑定组、绘制三角形等。最后，将命令缓冲区提交到设备队列中执行。

三、WebGPU 的核心特性：高性能的秘密

WebGPU 能够实现高性能，主要得益于以下几个核心特性：

Explicit Control (显式控制)： WebGPU 允许开发者对 GPU 资源进行更精细的控制，比如内存管理、同步等，避免了隐式的开销。
Asynchronous API (异步 API)： WebGPU 的 API 都是异步的，不会阻塞主线程，提高了应用的响应速度。
Pipeline State Objects (管线状态对象)： WebGPU 将渲染状态封装到管线对象中，避免了频繁的状态切换，提高了渲染效率。
Compute Shaders (计算着色器)： WebGPU 提供了强大的计算着色器支持，让开发者能够利用 GPU 的并行计算能力进行通用计算。
WGSL (WebGPU Shading Language)： WebGPU 使用 WGSL 作为着色器语言，它是一种现代的、类型安全的语言，更易于编写和维护。

四、WebGPU 的应用场景：无限可能

WebGPU 的应用场景非常广泛，只要涉及到图形和计算的地方，都可以用它来大显身手。

游戏开发： WebGPU 可以用于开发高性能的 Web 游戏，提供更逼真的图形效果和更流畅的体验。
数据可视化： WebGPU 可以用于创建复杂的、交互式的数据可视化应用，比如 3D 地图、科学数据可视化等。
图像处理： WebGPU 可以用于进行图像处理、视频编辑等任务，比如滤镜、特效、图像识别等。
机器学习： WebGPU 可以用于加速机器学习模型的训练和推理，比如图像分类、目标检测等。
科学计算： WebGPU 可以用于进行科学计算，比如物理模拟、流体动力学等。

| 应用场景 | 优势 | 示例 |
| ——– | ————————————————————————————————————— | ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————–00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

发表回复 取消回复

发表回复取消回复