# WebGPU supports detecting that it cannot run on non-local devices?

**URL:** <https://discourse.threejs.org/t/webgpu-supports-detecting-that-it-cannot-run-on-non-local-devices/51719>\
**Category:** Questions\
**Tags:** renderer, color, webgl-renderer, color-space, webgpu\
**Created:** [May 18, 2023, 2:39am UTC](https://discourse.threejs.org/t/webgpu-supports-detecting-that-it-cannot-run-on-non-local-devices/51719 "2023-05-18T02:39:34Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ember\_Yee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ember_yee/32/36369_2.png) [@Ember\_Yee](https://discourse.threejs.org/u/Ember_Yee)\
**Post date:** [May 18, 2023, 2:39am UTC](https://discourse.threejs.org/t/webgpu-supports-detecting-that-it-cannot-run-on-non-local-devices/51719/1 "2023-05-18T02:39:34Z")

</div>

I’m working on a project and I want to utilize WebGPU on the newly released 113 version of Google Chrome. However, I need to ensure that this project can still run WebGL on devices or browsers that don’t support WebGPU.

Therefore, I have set up an if statement to check for WebGPU support. Here is the code, including my imports:

```javascript
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");
  }

```

It runs quite well on the local environment, and here are my results. However, there seems to be a discrepancy in the color space for `fog.fogColor` and `renderer.setClearColor` between `WebGPURenderer` and `WebGLRenderer` , as shown in the image. But this is not a major issue.

 ![截屏2023-05-18 10.29.15](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/5/e54c08a8471017f17412b79d9a3af5b090b62c76.jpeg)

When I tried to test the project on my other devices, including Windows and mobile devices (where Chrome on Windows supports WebGPU, but WebGPU is not supported on mobile devices), using Chrome v113 browser on the same local network, I encountered an error and the canvas couldn’t be rendered. The error message was: “Uncaught ReferenceError: GPUShaderStage is not defined” at line 18 in WebGPUNodeBuilder.js.

 ![截屏2023-05-18 06.22.09](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/9/79ce0afe5c9d10fba6c54cc0fe8f4c5e688bb782.png)

I tried to use dynamic imports to load the WebGPURenderer module only when WebGPU is supported. It turns out that the WebGPU Renderer cannot be loaded correctly. Here’s the code

```javascript
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");
}

```

the error is script.js:322 Uncaught TypeError: Cannot set properties of undefined (setting ‘outputColorSpace’)

I’m not sure if there is an error in my code or if something is missing, or if the mechanism of switching renderers is currently not feasible. Please provide guidance on this matter.Thanks！

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [May 18, 2023, 12:14pm UTC](https://discourse.threejs.org/t/webgpu-supports-detecting-that-it-cannot-run-on-non-local-devices/51719/2 "2023-05-18T12:14:20Z")

</div>

> [@Ember\_Yee](#):
>
> the error is script.js:322 Uncaught TypeError: Cannot set properties of undefined (setting ‘outputColorSpace’)

Based on this error, it sounds like your script might be trying to use the `renderer` variable before the promise has resolved. Because the promise is not saved anywhere, that’s likely a mistake. Try doing something like:

```javascript
let renderer;

const rendererPromise = new Promise((resolve, reject) => {
  if ( ... ) {
    resolve(
      import(' ... ').then(({default: WebGPURenderer}) => {
        return new WebGPURenderer({ ... });
      })
    );
  } else {
    resolve(new WebGLRenderer({ ... }));
  }
});

// wait for renderer to become available
rendererPromise.then(init);

function init () {
  // ... rest of your script
}

```

---

<div class="post-metadata">

**Author:** ![Ember\_Yee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ember_yee/32/36369_2.png) [@Ember\_Yee](https://discourse.threejs.org/u/Ember_Yee)\
**Post date:** [May 24, 2023, 9:59pm UTC](https://discourse.threejs.org/t/webgpu-supports-detecting-that-it-cannot-run-on-non-local-devices/51719/3 "2023-05-24T21:59:30Z")

</div>

Thank you for your guidance. I have reorganized my code, and the code is as follows:

```javascript
let renderer;

const rendererPromise = new Promise((resolve, reject) => {
  if ( navigator.gpu ) {
    resolve(
      import('three/examples/jsm/renderers/webgpu/WebGPURenderer.js')
      .then(({default: WebGPURenderer}) => {
        return new WebGPURenderer({ canvas: canvas, antialias: true });
      })
    );
  } else {
    resolve(new THREE.WebGLRenderer({ canvas: canvas, antialias: true }));
  }
});

// wait for renderer to become available
rendererPromise
  .then((resolvedRenderer) => {
    init(resolvedRenderer);
  })
  .catch((error) => {
    console.error("rendererPromise 解决失败：", error);
  });

function init (resolvedRenderer) {
    renderer = resolvedRenderer
  // ... rest of your script
    renderer.outputColorSpace = 'srgb'
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
    renderer.setClearColor('#555555')
    

```

It can work fine on different devices in the local network, but the renderer used by Chrome v113 on Windows is Webglrenderer.  
 ![1684964392472](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/a/eaa1e8846845ec4940d937b96f412de2e26ac8d7.jpeg)

Then when I tried to build it and deploy it on Vercel, an error occurred.

> NodeMaterial.js:381 Uncaught (in promise) Error: NodeMaterial: Material “MeshBasicMaterial” is not compatible.

It seems to be a compatibility issue with the WebGPURenderer itself. I only used MeshBasicMaterial in the project, and the version of Three.js is r152.

By the way, the detection mechanism can work properly on browsers that do not support webgpurenderer.

 ![截屏2023-05-25 05.55.06](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/1/61633216e40e14d72e58da7b9b5de90aaeaae009.jpeg)

Here’s my site on vercel: [wip](https://demo-ember333.vercel.app)

Thank you for your guidance! I am just a beginner and have learned a lot.

---

<div class="post-metadata">

**Author:** ![x1911](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/x1911/32/2976_2.png) [@x1911](https://discourse.threejs.org/u/x1911)\
**Post date:** [June 19, 2023, 3:10pm UTC](https://discourse.threejs.org/t/webgpu-supports-detecting-that-it-cannot-run-on-non-local-devices/51719/4 "2023-06-19T15:10:38Z")

</div>

> [@Ember\_Yee](#):
>
> site on vercel

I see that your website is running normally now.  
Can you reveal how you managed to fix it?  
Because I have encountered the same error  
“NodeMaterial: Material “MeshBasicMaterial” is not compatible.” too

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/7/a7e98d12cb968692845e124cfac7d648c4ede63f.png)

---

<div class="post-metadata">

**Author:** ![henriquehhr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/henriquehhr/32/37843_2.png) [@henriquehhr](https://discourse.threejs.org/u/henriquehhr)\
**Post date:** [July 5, 2023, 2:25pm UTC](https://discourse.threejs.org/t/webgpu-supports-detecting-that-it-cannot-run-on-non-local-devices/51719/5 "2023-07-05T14:25:56Z")

</div>

> [@Ember\_Yee](#):
>
> NodeMaterial.js:381 Uncaught (in promise) Error: NodeMaterial: Material “MeshBasicMaterial” is not compatible.

I have encountered the exact same error. Have you fixed it?

---

<div class="post-metadata">

**Author:** ![henriquehhr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/henriquehhr/32/37843_2.png) [@henriquehhr](https://discourse.threejs.org/u/henriquehhr)\
**Post date:** [July 5, 2023, 3:00pm UTC](https://discourse.threejs.org/t/webgpu-supports-detecting-that-it-cannot-run-on-non-local-devices/51719/6 "2023-07-05T15:00:36Z")

</div>

have you fixed it?

---

<div class="post-metadata">

**Author:** ![Ember\_Yee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ember_yee/32/36369_2.png) [@Ember\_Yee](https://discourse.threejs.org/u/Ember_Yee)\
**Post date:** [July 10, 2023, 10:48am UTC](https://discourse.threejs.org/t/webgpu-supports-detecting-that-it-cannot-run-on-non-local-devices/51719/8 "2023-07-10T10:48:41Z")

</div>

No, I haven’t resolved the issue with webgprenderer yet, so I continued to use webglrenderer. I’m sorry for not replying to you for a long time

---

<div class="post-metadata">

**Author:** ![Ember\_Yee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ember_yee/32/36369_2.png) [@Ember\_Yee](https://discourse.threejs.org/u/Ember_Yee)\
**Post date:** [July 10, 2023, 10:50am UTC](https://discourse.threejs.org/t/webgpu-supports-detecting-that-it-cannot-run-on-non-local-devices/51719/9 "2023-07-10T10:50:42Z")

</div>

No, I haven’t resolved the issue with webgprenderer yet, so I continued to use webglrenderer. I’m sorry for not replying to you for a long time~ also，that website should be changed to this [downto.vercel.app](https://downto.vercel.app)

---

<div class="post-metadata">

**Author:** ![Grizeliz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/grizeliz/32/53229_2.png) [@Grizeliz](https://discourse.threejs.org/u/Grizeliz)\
**Post date:** [October 31, 2024, 1:52pm UTC](https://discourse.threejs.org/t/webgpu-supports-detecting-that-it-cannot-run-on-non-local-devices/51719/10 "2024-10-31T13:52:39Z")

</div>

It has been a while but i ran into the same problem (material "meshBasicMaterial) and it was an issue with the minification ! I seems to have been adressed in the last release of three 🙂