WebGPU是否支持检测无法在非本地设备上运行？

Question

我正在做一个项目，我想在新发布的 113 版本的谷歌浏览器上使用 WebGPU。但是，我需要确保这个项目仍然可以在不支持 WebGPU 的设备或浏览器上运行 WebGL。

因此，我设置了一个 if 语句来检查 WebGPU 支持。这是代码，包括我的导入：

import WebGPURenderer from 'three/examples/jsm/renderers/webgpu/WebGPURenderer.js'

console.log(navigator.gpu);
var renderer;
if (navigator.gpu) {  
    renderer = new WebGPURenderer({ canvas: canvas,antialias: true } );
} else if (window.WebGLRenderingContext) {
  renderer = new THREE.WebGLRenderer({ canvas: canvas,antialias: true} );
}else {
    throw new Error("Your browser does not support WebGL or WebGPU");
  }

在本地环境下运行的很好，下面是我的结果。然而，

fog.fogColor

和

renderer.setClearColor

在

WebGPURenderer

和

WebGLRenderer

之间的颜色空间似乎存在差异，如图所示。但这不是主要问题。

当我尝试在我的其他设备上测试该项目时，包括 Windows 和移动设备（Windows 上的 Chrome 支持 WebGPU，但移动设备上不支持 WebGPU），在同一本地网络上使用 Chrome v113 浏览器，我遇到了错误并且无法渲染画布。错误消息是：WebGPUNodeBuilder.js 中第 18 行的“Uncaught ReferenceError: GPUShaderStage is not defined”。

即使我在 Windows 上构建项目，在 macOS 上查看时它看起来仍然一样。

我不确定我的代码是否有错误或缺少某些内容，或者切换渲染器的机制目前不可行。请各位大神指点一下，谢谢！

我尝试仅在支持 WebGPU 时使用动态导入来加载 WebGPURenderer 模块。原来是无法正确加载WebGPU Renderer。这是代码

var renderer;
if (typeof navigator.gpu !== 'undefined' && navigator.gpu.requestAdapter) {
  import('three/examples/jsm/renderers/webgpu/WebGPURenderer.js')
    .then(({ default: WebGPURenderer }) => {
      renderer = new WebGPURenderer({ canvas: canvas, antialias: true });
      // Initialize your scene with the WebGPURenderer here
    })
    .catch((error) => {
      console.error('Failed to load WebGPURenderer:', error);
      // Fallback to WebGLRenderer if you wish or show an error message
      
    });
} else if (window.WebGLRenderingContext) {
  renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
  // Initialize your scene with the WebGLRenderer here
} else {
  throw new Error("Your browser does not support WebGL or WebGPU");
}

错误是 script.js:322 Uncaught TypeError: Cannot set properties of undefined (setting 'outputColorSpace')

Answer 1

您遇到的动态导入错误与outputColorSpace属性有关

WebGPURenderer模块似乎没有正确导出这个属性，导致设置它的值时出错。

要解决此问题，您可以在创建 WebGPURenderer 实例后手动设置 outputColorSpace 属性。这是您的代码的更新版本：

var renderer;
if (typeof navigator.gpu !== 'undefined' && navigator.gpu.requestAdapter) {
  import('three/examples/jsm/renderers/webgpu/WebGPURenderer.js')
    .then(({ default: WebGPURenderer }) => {
      renderer = new WebGPURenderer({ canvas: canvas, antialias: true });
      renderer.outputColorSpace = 'srgb'; // Set the outputColorSpace property
      // Initialize your scene with the WebGPURenderer here
    })
    .catch((error) => {
      console.error('Failed to load WebGPURenderer:', error);
      // Fallback to WebGLRenderer if you wish or show an error message
    });
} else if (window.WebGLRenderingContext) {
  renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
  // Initialize your scene with the WebGLRenderer here
} else {
  throw new Error("Your browser does not support WebGL or WebGPU");
}

通过将 outputColorSpace 属性设置为“srgb”，您可以确保颜色空间与 WebGLRenderer 一致，从而减少您在问题中提到的任何差异。

注意：确保您的项目的构建配置和依赖项设置正确以支持动态导入。