WebGPU渲染着色器报错：Cannot read property 'requestDevice' of null求解

这个错误我之前调试WebGPU代码时也碰到过，核心问题是你代码里的adapter变量是null——也就是说navigator.gpu.requestAdapter()没能成功获取到GPU适配器，直接调用它的requestDevice()自然会抛出类型错误。下面一步步给你解决：

1. 先确认浏览器对WebGPU的支持 #

WebGPU目前的支持情况是：

• Chrome 113+、Edge 113+：正式支持，默认开启
• Firefox：需要在about:config中把dom.webgpu.enabled设为true
• Safari：需要打开开发者菜单，启用「WebGPU」选项
• 旧版本浏览器：直接升级到最新版，否则根本不支持navigator.gpu

2. 在代码中加入空值判断，避免崩溃 #

你原代码没有处理adapter为null的情况，这是很常见的疏漏。修改后的代码会先检查适配器是否存在，再继续执行：

(async () => {
  const [adapter, glslang] = await Promise.all([
    navigator.gpu.requestAdapter(),
    import("https://unpkg.com/@webgpu/glslang@0.0.7/web/glslang.js").then(m => m.default())
  ]);

  // 关键：先判断adapter是否存在
  if (!adapter) {
    alert("当前浏览器不支持WebGPU，请升级浏览器或启用WebGPU功能");
    return;
  }

  const device = await adapter.requestDevice();
  const canvas = document.getElementById("webgpu-canvas");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  // 后续的WebGPU渲染逻辑...
})();

3. 额外排查：确保页面环境符合要求 #

• WebGPU只能在HTTPS环境下使用（localhost和127.0.0.1除外，本地开发可以直接用），如果是HTTP页面，navigator.gpu会是undefined，也会导致类似错误
• 如果你用的是Chrome/Edge的旧版本（112及以下），需要在浏览器地址栏输入chrome://flags/#enable-unsafe-webgpu（Edge是edge://flags/#enable-unsafe-webgpu），开启WebGPU实验性选项

按照上面的步骤来，应该就能解决这个错误了。

内容的提问来源于stack exchange，提问作者Buddhika Prasadh