2、开发环境搭建：浏览器支持情况、Chrome Canary配置、WebGPU Adapter与Device的获取
好，咱们正式开始动手了。
这一章，说白了就是搭台子。台子搭不好，后面再炫酷的渲染效果也跑不起来。我见过不少同学，代码写得飞起，结果一运行——浏览器不支持，白忙活一场。所以，咱们先把环境捋清楚。
2.1 浏览器支持情况：别用错版本
WebGPU 目前还不是所有浏览器都能跑。你想想看，这技术太新了，很多浏览器还在赶工。
截至我写这章的时候，支持情况是这样的：
| 浏览器 | 支持状态 | 备注 |
|---|---|---|
| Chrome Canary | ✅ 完全支持 | 推荐首选，最稳定 |
| Chrome 113+ | ✅ 支持 | 需要开启 flag |
| Edge 113+ | ✅ 支持 | Chromium 内核，同 Chrome |
| Firefox Nightly | ⚠️ 实验性支持 | 不稳定，偶尔崩 |
| Safari | ❌ 不支持 | 别想了，等明年吧 |
我个人习惯用 Chrome Canary。为什么？因为它更新最快，WebGPU 的新特性往往最先在这里出现。而且，它和普通 Chrome 可以共存，不影响你日常使用。
2.2 Chrome Canary 配置：三步搞定
下载安装就不说了，去 Google 官网搜一下就有。装完之后，需要手动开启 WebGPU 支持。
步骤很简单：
- 在地址栏输入
chrome://flags - 搜索
WebGPU - 把
Unsafe WebGPU和WebGPU Developer Features都设为Enabled
重启浏览器，就搞定了。
怎么验证？打开 DevTools 的控制台，输入：
navigator.gpu如果返回一个对象，而不是 undefined，恭喜你，环境搭好了。
嗯，这里要注意：有时候你明明开启了 flag，但 navigator.gpu 还是 undefined。别慌，检查一下你是不是用的普通 Chrome 而不是 Canary。我曾经就犯过这种低级错误——开了两个 Chrome 窗口，搞混了。
2.3 获取 WebGPU Adapter 与 Device
好，环境有了，接下来就是写代码了。
WebGPU 的核心是两个对象：Adapter 和 Device。
- Adapter：代表物理 GPU。你可以理解为 "显卡的抽象"。
- Device：代表与 GPU 的逻辑连接。所有渲染操作都通过 Device 发起。
获取它们的代码非常简洁：
async function initWebGPU() {
// 检查浏览器是否支持
if (!navigator.gpu) {
throw new Error("WebGPU 不支持，请使用 Chrome Canary");
}
// 请求 Adapter
const adapter = await navigator.gpu.requestAdapter();
if (!adapter) {
throw new Error("找不到合适的 GPU Adapter");
}
// 请求 Device
const device = await adapter.requestDevice();
console.log("WebGPU 初始化成功！");
console.log("GPU:", adapter.name);
return { adapter, device };
}
// 调用
initWebGPU().then(({ adapter, device }) => {
// 后面所有渲染代码都基于 device
});你看，核心就三行：requestAdapter 和 requestDevice。
requestAdapter() 可以传参数，比如指定使用独立显卡还是集成显卡。但大多数情况下，不传参就行，浏览器会自动选择最优的 GPU。
我建议把这段代码封装成一个工具函数，后面每个章节都会用到它。你想想看，每次写 demo 都要重复写这三行，多烦人。
2.4 避坑指南：我踩过的几个坑
讲几个我实际项目中遇到的问题，你遇到了可以直接跳过：
- 坑一：
requestAdapter()返回null。这通常是因为浏览器版本不对，或者 flag 没开。检查一下 Chrome Canary 版本，至少 113 以上。 - 坑二：
requestDevice()报错 "Device lost"。这往往是因为 GPU 驱动问题。重启浏览器，或者更新显卡驱动试试。 - 坑三： 在 HTTPS 环境下运行。WebGPU 要求安全上下文（HTTPS 或 localhost）。如果你用 HTTP 访问，
navigator.gpu会是undefined。
file:// 协议打开 HTML 文件，结果 WebGPU 死活不工作。后来才发现，必须用 localhost 或者 127.0.0.1 启动一个简单的 HTTP 服务器。推荐用 npx serve . 或者 Python 的 http.server。
2.5 验证环境：跑一个最简单的例子
环境搭好了，代码写好了，怎么确认一切正常？
我习惯跑一个最简单的 "空渲染" 来验证：
async function testWebGPU() {
if (!navigator.gpu) {
console.error("❌ 浏览器不支持 WebGPU");
return;
}
const adapter = await navigator.gpu.requestAdapter();
if (!adapter) {
console.error("❌ 无法获取 Adapter");
return;
}
const device = await adapter.requestDevice();
console.log("✅ WebGPU 环境正常");
console.log(`GPU: ${adapter.name}`);
console.log(`支持的特性: ${adapter.features.size} 个`);
}
testWebGPU();如果控制台打印出 "✅ WebGPU 环境正常"，那恭喜你，可以进入下一章了。
如果没打印出来，别急。回头检查一下：浏览器版本、flag 设置、是否在 localhost 下运行。这三个地方最容易出问题。
好，环境搭建就到这里。下一章，咱们开始写真正的渲染代码——画一个三角形。别觉得简单，WebGPU 的三角形，和 OpenGL 的三角形，差别可大了去了。