3D建模

WebGPU 入门（一）

WebGPU 入门知识，包括其概念、优势及与 WebGL 的关系。重点讲解了如何用 WebGPU 绘制三角形，涵盖创建相关对象、配置 canvas、设置背景色、创建缓冲区、设置读取方式、编写着色器、创建渲染流水线等步骤。

Nov 15, 2024 • 4 min read

推荐使用NSDT 3DConvert进行3D模型格式转换，支持glb、obj、stp、fbx、ifc等多种3D模型格式之间进行互相转换，在转换过程中，能够很好的保留模型原有的颜色、材质等信息。

今天我们来入门 WebGPU，来写一个图形版本的 Hello World，即绘制一个三角形。

WebGPU 是什么？

WebGPU 是一个正在开发中的潜在 Web 标准和 JavaScript API，目标是提供 “现代化的 3D 图形和计算能力”。

简单来说，WebGPU 提供一个更现代的 Web 上的图形渲染标准。

WebGPU 的出现就是为了取代 WebGL 的，因为后者的 API 实在有些过时，无法利用好现代 GPU 的一些高级特性，本身的 API 设计也较难使用。

相比 WebGL，WebGPU 有更好的性能表现，API 更底层更灵活，并支持更高级的现代特性，比如计算着色器。

毫无疑问，WebGPU 是前端图形渲染的未来，值得去学习一下。

像是以性能著称的前端图形库 PixiJS，也开始进行支持 WebGPU 的工作，并在最近发布了预览版本，声称性能将是 WebGL 的 2.5 倍。

不过目前 WebGPU 还不够成熟，仍有许多工作要做，且只有少数浏览器的最新版本直接支持或通过设置开启。

即使之后所有浏览器都支持了，旧版本浏览器还是不支持的，离大范围使用还有相当长的一段路要走。

只能说未来可期。

但生产中，我们可以做一个回退机制：如果浏览器支持 WebGPU，我们用 WebGPU 去渲染，如果不支持就回滚到 WebGL。

只要在底层渲染方案上封装一层渲染器 renderer，就像 PixiJS 现在做的事情一样，个人还是比较期待它在性能上的提升的。

OK，我们开始用 WebGPU 绘制一个三角形。

确保你的浏览器支持 WebGPU，建议用 Chrome，并更新到最新版本。

这里我们创建一个宽高各为 300 的 canvas 元素，用于绘制图形。

<canvas width="300" height="300"></canvas>

初始化 WebGPU 相关的一些对象。

创建一个适配器对象 adapter，适配器是一个 GPU 物理硬件设备的抽象。

const adapter = await navigator.gpu.requestAdapter();

requestAdapter() 方法会查看系统上所有可用的 GPU 设备，并选择其中合适的适配器。该方法可以传一些参数，去按条件匹配。比如 { powerPreference: 'low-power' } 表示优先使用低能耗的 GPU。

此外，这个方法返回的是一个 Promise，即它是 异步的，需要用 await 的方式去等待异步的结果。

然后基于 adapter，调用 requestDevice 方法拿到设备对象 device。

device 可以理解为 adapter 的一个会话。做个比喻的话 adapter 是一个公司，device 是一个具体干活的人。

const device = await adapter.requestDevice();

requestDevice() 方法也可以传入配置项，去开启一些高级特性，或是指定一些硬件限制，比如最大纹理尺寸。

类似 canvas 2d 和 webgl，我们需要通过 canvas 元素拿到上下文。

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('webgpu');

接着是调用 ctx.configure() 方法配置刚刚声明的 device 对象和像素格式。

const canvasFormat = navigator.gpu.getPreferredCanvasFormat();
// 给上下文配置 device 对象和
ctx.configure({
  device,
  format: canvasFormat,
});

navigator.gpu.getPreferredCanvasFormat() 会返回当前环境合适的像素格式的字符串标识，通常是 'bgra8unorm'，表示用 8 位无符号整数来表示蓝色、绿色、红色和透明度四个分量。

WebGPU 入门 - 索引

WebGPU 入门（一）