Migrating to webGPU earlier

Questions
1

Hello! I was wondering how I can transition to using WebGPU sooner (I know it’s in a development stage). I tried following the examples from Three.js, which seemed straightforward: I imported it and changed the renderer. However, it didn’t work as expected and gave me an error saying that WebGPU wasn’t properly declared.

I want to observe its performance because with the examples I’ve seen, GPU usage was reduced by 30-40%, a significant improvement compared to my current setup. Currently, my website runs at 60fps on my GTX 960. However, it utilizes 80%+ of the VRAM on Firefox, and even more on Chrome.

https://ongezell.com/mainwebgpu

I’m currently importing it from


  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.154.0/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.154.0/examples/jsm/"
    }
  }

Thanks in advance!

2

Have you imported esShims module

1 Like
3

I tried with Shims but I was importing after importing three.js, it worked when importing before three js , however, now I’m getting thousands of shader/material errors.
I’m not using any custom shaders tho

4

this code doesn’t use…

import WebGPU from 'three/addons/capabilities/WebGPU.js';
import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';

renderer = new WebGPURenderer();

:thinking:

6

oh sorry, I was using this exact same code but I went back or else the page wouldn’t work , here is the same page with the webgpu code, you can see the errors in the console log

https://ongezell.com/mainwebgpu