JavaScript内核与高级编程之：`JavaScript` 与 `WebGPU` 的渲染管线：`JS` 如何通过 `WebGPU` 控制 `GPU` 渲染。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，晚上好！我是今晚的分享嘉宾，很高兴和大家一起探索 JavaScript 如何通过 WebGPU 来控制 GPU 渲染这个话题。听起来是不是有点高大上？别怕，今天咱们就用最通俗易懂的方式，把这个看似复杂的概念给彻底扒个精光。

开场白：从“你好，世界！”说起

咱们写代码的，入门第一课永远是“Hello, World!”。但今天，咱们先不着急打印字符串，先来聊聊 GPU。你有没有想过，屏幕上那些炫酷的游戏画面、精美的网页特效，都是谁画出来的？没错，就是你的好伙伴，GPU（Graphics Processing Unit，图形处理器）。

GPU 这家伙，天生就是干图像处理的料。它拥有大量的并行处理核心，可以同时处理成千上万个像素点，速度那是杠杠的。而 WebGPU，就是 JavaScript 连接 GPU 的桥梁。有了它，咱们就能用 JS 控制 GPU，让它按照我们的想法去画画。

第一章：渲染管线是个啥？

要理解 WebGPU，首先得搞清楚“渲染管线”这个概念。可以把它想象成一个流水线工厂，原材料（顶点数据）经过一系列的工序（着色器程序），最终变成我们看到的图像。

渲染管线大致分为以下几个阶段：

阶段	作用	我们的参与度
顶点着色器	负责处理顶点数据，例如顶点坐标、颜色、法线等。可以进行顶点变换（例如旋转、缩放、平移），以及计算光照效果。	必须提供：需要我们编写顶点着色器程序，定义如何处理顶点数据。
图元装配	将顶点数据组装成图元（例如三角形、直线、点）。	一般不用管：WebGPU 自动完成，除非需要特殊的图元类型。
光栅化	将图元转换为像素片段。简单来说，就是确定哪些像素需要被绘制，以及每个像素的颜色值。	一般不用管：WebGPU 自动完成，但可以通过配置来控制光栅化的行为（例如剔除背面）。
片段着色器	负责处理像素片段，决定最终的像素颜色。可以进行纹理采样、颜色计算等操作。	必须提供：需要我们编写片段着色器程序，定义如何计算像素颜色。
输出合并	将像素片段的颜色值写入帧缓冲区（Frame Buffer），最终显示在屏幕上。	一般不用管：WebGPU 自动完成，但可以通过配置来控制输出合并的行为（例如混合、深度测试）。

简单来说，顶点着色器负责处理“形状”，片段着色器负责处理“颜色”。

第二章：WebGPU 的基本用法

有了渲染管线的基础，咱们来看看 WebGPU 的代码怎么写。

2.1 获取 WebGPU 设备

首先，我们需要获取 WebGPU 设备。这相当于告诉浏览器：“嘿，我要用你的 GPU，给我授权！”

async function getWebGPUDevice() {
  if (!navigator.gpu) {
    throw new Error("WebGPU is not supported on this browser.");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw new Error("No appropriate GPUAdapter found.");
  }

  const device = await adapter.requestDevice();
  return device;
}

// 使用示例
const device = await getWebGPUDevice();
console.log("WebGPU device:", device);

这段代码做了以下几件事：

检查浏览器是否支持 WebGPU。
请求 GPU 适配器（Adapter），相当于选择一个可用的 GPU。
请求 GPU 设备（Device），相当于获得 GPU 的控制权。

2.2 创建 Shader Module

接下来，我们需要编写着色器程序。WebGPU 使用 WGSL（WebGPU Shading Language）作为着色器语言，语法类似于 Rust。

const vertexShaderCode = `
  @vertex
  fn main(@location(0) pos: vec3f) -> @builtin(position) vec4f {
    return vec4f(pos, 1.0);
  }
`;

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

// 创建 Shader Module
const vertexShaderModule = device.createShaderModule({
  code: vertexShaderCode,
});

const fragmentShaderModule = device.createShaderModule({
  code: fragmentShaderCode,
});

这段代码定义了一个简单的顶点着色器和一个简单的片段着色器。顶点着色器直接将顶点坐标传递给片段着色器，片段着色器将所有像素都设置为红色。

2.3 创建 Render Pipeline

有了着色器程序，我们需要创建一个渲染管线（Render Pipeline），将它们组合起来。

const pipelineDescriptor = {
  layout: 'auto', // 自动推断布局
  vertex: {
    module: vertexShaderModule,
    entryPoint: "main", // 顶点着色器的入口函数
  },
  fragment: {
    module: fragmentShaderModule,
    entryPoint: "main", // 片段着色器的入口函数
    targets: [
      {
        format: navigator.gpu.getPreferredCanvasFormat(), // 渲染目标格式
      },
    ],
  },
  primitive: {
    topology: "triangle-list", // 图元类型：三角形列表
  },
};

const renderPipeline = device.createRenderPipeline(pipelineDescriptor);

这段代码定义了渲染管线的配置：

layout: 渲染管线的布局，auto 表示自动推断。
vertex: 顶点着色器的配置，指定 Shader Module 和入口函数。
fragment: 片段着色器的配置，指定 Shader Module、入口函数和渲染目标格式。
primitive: 图元类型，这里使用 triangle-list，表示将顶点数据组装成三角形。

2.4 创建 Buffer

GPU 需要数据才能画画，这些数据通常存储在 Buffer 中。

// 定义顶点数据
const vertices = new Float32Array([
  -0.5, -0.5, 0.0, // 左下角
   0.5, -0.5, 0.0, // 右下角
   0.0,  0.5, 0.0, // 顶部
]);

// 创建 Buffer
const vertexBuffer = device.createBuffer({
  size: vertices.byteLength, // Buffer 大小
  usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, // Buffer 用途
  mappedAtCreation: true, // 创建时映射到 CPU
});

// 将顶点数据写入 Buffer
new Float32Array(vertexBuffer.getMappedRange()).set(vertices);
vertexBuffer.unmap();

这段代码做了以下几件事：

定义一个三角形的顶点数据。
创建一个 Buffer，指定大小和用途。GPUBufferUsage.VERTEX 表示 Buffer 用于存储顶点数据，GPUBufferUsage.COPY_DST 表示可以从 CPU 复制数据到 Buffer。
将 Buffer 映射到 CPU，将顶点数据写入 Buffer，然后取消映射。

2.5 创建 Texture 和 View

我们需要一个地方来存储渲染结果，这就是 Texture。View 则是 Texture 的一个视图，用于指定渲染目标。

// 获取 Canvas
const canvas = document.getElementById("myCanvas");

// 配置 Canvas
canvas.width = 640;
canvas.height = 480;

const context = canvas.getContext("webgpu");
const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
context.configure({
  device: device,
  format: presentationFormat,
});

const renderTarget = context.getCurrentTexture().createView();

这段代码做了以下几件事：

获取 Canvas 元素。
配置 Canvas 的大小。
获取 WebGPU 上下文，并配置设备和渲染目标格式。
从 Canvas 获取当前 Texture，并创建一个 View。

2.6 创建 Command Encoder 和 Render Pass

Command Encoder 用于记录渲染命令，Render Pass 则定义了渲染过程。

const commandEncoder = device.createCommandEncoder();
const renderPassDescriptor = {
  colorAttachments: [
    {
      view: renderTarget, // 渲染目标 View
      clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, // 清屏颜色
      loadOp: "clear", // 加载操作：清屏
      storeOp: "store", // 存储操作：存储到 Texture
    },
  ],
};

const renderPass = commandEncoder.beginRenderPass(renderPassDescriptor);

这段代码做了以下几件事：

创建一个 Command Encoder。
定义一个 Render Pass，指定渲染目标 View、清屏颜色、加载操作和存储操作。
开始一个 Render Pass。

2.7 设置 Pipeline 和 Buffer

现在，我们需要告诉 GPU 使用哪个 Pipeline 和 Buffer 来进行渲染。

renderPass.setPipeline(renderPipeline);
renderPass.setVertexBuffer(0, vertexBuffer); // 设置顶点 Buffer
renderPass.draw(3, 1, 0, 0); // 绘制三角形

这段代码做了以下几件事：

设置渲染管线。
设置顶点 Buffer。第一个参数是 Buffer 的索引，这里只有一个 Buffer，索引为 0。
绘制三角形。draw(vertexCount, instanceCount, firstVertex, firstInstance)：
- vertexCount: 顶点数量，这里是 3。
- instanceCount: 实例数量，这里是 1。
- firstVertex: 第一个顶点的索引，这里是 0。
- firstInstance: 第一个实例的索引，这里是 0。

2.8 结束 Render Pass 和提交 Command Buffer

最后，我们需要结束 Render Pass，并将 Command Buffer 提交给 GPU。

renderPass.end();
const commandBuffer = commandEncoder.finish();
device.queue.submit([commandBuffer]);

这段代码做了以下几件事：

结束 Render Pass。
完成 Command Encoder，生成 Command Buffer。
将 Command Buffer 提交给 GPU 队列，GPU 会按照 Command Buffer 中的命令进行渲染。

第三章：进阶技巧

掌握了 WebGPU 的基本用法，咱们来看看一些进阶技巧。

3.1 Uniform Buffer

Uniform Buffer 用于存储着色器程序的全局变量。例如，我们可以使用 Uniform Buffer 来传递变换矩阵、光照参数等。

// 定义 Uniform 数据
const uniformData = new Float32Array([
  1.0, 0.0, 0.0, 0.0,
  0.0, 1.0, 0.0, 0.0,
  0.0, 0.0, 1.0, 0.0,
  0.0, 0.0, 0.0, 1.0, // 单位矩阵
]);

// 创建 Uniform Buffer
const uniformBuffer = device.createBuffer({
  size: uniformData.byteLength,
  usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
  mappedAtCreation: true,
});

new Float32Array(uniformBuffer.getMappedRange()).set(uniformData);
uniformBuffer.unmap();

// 创建 Bind Group Layout
const bindGroupLayout = device.createBindGroupLayout({
  entries: [
    {
      binding: 0,
      visibility: GPUShaderStage.VERTEX,
      buffer: {},
    },
  ],
});

// 创建 Bind Group
const bindGroup = device.createBindGroup({
  layout: bindGroupLayout,
  entries: [
    {
      binding: 0,
      resource: {
        buffer: uniformBuffer,
      },
    },
  ],
});

// 修改 Shader 代码
const vertexShaderCode = `
  struct Uniforms {
    modelViewProjectionMatrix: mat4x4f,
  };

  @group(0) @binding(0) var<uniform> uniforms: Uniforms;

  @vertex
  fn main(@location(0) pos: vec3f) -> @builtin(position) vec4f {
    return uniforms.modelViewProjectionMatrix * vec4f(pos, 1.0);
  }
`;

// 在 Render Pass 中设置 Bind Group
renderPass.setBindGroup(0, bindGroup);

这段代码做了以下几件事：

定义 Uniform 数据（例如单位矩阵）。
创建 Uniform Buffer，并将数据写入 Buffer。
创建 Bind Group Layout，定义 Uniform Buffer 的布局。
创建 Bind Group，将 Uniform Buffer 绑定到 Bind Group Layout。
修改顶点着色器代码，从 Uniform Buffer 中读取变换矩阵，并进行顶点变换。
在 Render Pass 中设置 Bind Group。

3.2 Texture Sampling

Texture Sampling 用于从纹理中采样颜色值。例如，我们可以使用 Texture Sampling 来实现纹理贴图。

// 创建 Texture
const textureDescriptor = {
  size: [256, 256],
  format: "rgba8unorm",
  usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
};

const texture = device.createTexture(textureDescriptor);

// 创建 Sampler
const sampler = device.createSampler({
  magFilter: "linear",
  minFilter: "linear",
});

// 创建 Bind Group Layout
const bindGroupLayout = device.createBindGroupLayout({
  entries: [
    {
      binding: 0,
      visibility: GPUShaderStage.FRAGMENT,
      texture: {},
    },
    {
      binding: 1,
      visibility: GPUShaderStage.FRAGMENT,
      sampler: {},
    },
  ],
});

// 创建 Bind Group
const bindGroup = device.createBindGroup({
  layout: bindGroupLayout,
  entries: [
    {
      binding: 0,
      resource: texture.createView(),
    },
    {
      binding: 1,
      resource: sampler,
    },
  ],
});

// 修改 Shader 代码
const fragmentShaderCode = `
  @group(0) @binding(0) var texture: texture_2d<f32>;
  @group(0) @binding(1) var sampler: sampler;

  @fragment
  fn main(@location(0) uv: vec2f) -> @location(0) vec4f {
    return textureSample(texture, sampler, uv);
  }
`;

// 在 Render Pass 中设置 Bind Group
renderPass.setBindGroup(0, bindGroup);

这段代码做了以下几件事：

创建一个 Texture。
创建一个 Sampler，用于控制纹理采样的行为。
创建 Bind Group Layout，定义 Texture 和 Sampler 的布局。
创建 Bind Group，将 Texture 和 Sampler 绑定到 Bind Group Layout。
修改片段着色器代码，从纹理中采样颜色值。
在 Render Pass 中设置 Bind Group。

第四章：性能优化

WebGPU 性能优化的关键在于减少 GPU 的负担。以下是一些常用的优化技巧：

减少 Draw Calls: 尽量将多个物体合并成一个 Draw Call。
使用 Instance Rendering: 对于重复的物体，可以使用 Instance Rendering 来减少 Draw Calls。
优化 Shader 代码: 避免在 Shader 中进行复杂的计算。
使用 Texture Atlas: 将多个小纹理合并成一个大纹理，减少纹理切换的次数。
使用 LOD (Level of Detail): 根据物体距离相机的距离，使用不同精度的模型。

第五章：WebGPU 的未来

WebGPU 作为下一代 Web 图形 API，具有巨大的潜力。它可以为 Web 带来更强大的图形性能，为 Web 游戏、Web 应用等领域带来更多的可能性。

随着 WebGPU 的不断发展和完善，相信它会成为 Web 开发者的必备技能。

总结：

今天咱们一起学习了 WebGPU 的基本用法和一些进阶技巧。希望通过今天的分享，大家能够对 WebGPU 有一个更深入的了解，并能够在自己的项目中应用 WebGPU，创造出更炫酷、更强大的 Web 应用。

记住，学习 WebGPU 不是一蹴而就的事情，需要不断地学习和实践。希望大家能够坚持下去，最终成为 WebGPU 的高手！

感谢大家的聆听！有问题可以随时提问，咱们一起探讨。

发表回复 取消回复

发表回复取消回复