WebGPURenderer with typescript

[Tyl]

Hi everyone,

I use Threejs (r167) and webGPU with typescript.
When I declare my gpu renderer variable

private renderer: THREE.WebGPURenderer;

I see in VSCode that the WebGPURenderer class is not known :

e:/Tyl/Three.js/www/WU6/node_modules/@types/three/index has no exported member named 'WebGPURenderer'. Did you mean 'WebGLRenderer'?

My threejs imports is only this one :

import * as THREE from 'three';

If now I modify node_modules@types\three\src\Three.d.ts by adding :

export * from "./Three.WebGPU.js";
export * from "./renderers/webgpu/WebGPURenderer.js";

The WebGPURenderer class is now known but at runtime I get the following error :

ERROR TypeError: THREE.WebGPURenderer is not a constructor

What am I doing wrong ?
Is there a particular import that I must do ?

[Tyl]

Seems my question is really hard

[GitHubDragonFly]

This could possibly help a little bit and is just a simplified example from my experimental GLTF WebGPU viewer:

    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.webgpu.min.js"
        }
      }
    </script>

    <script type="module">
      import * as THREE from "three";

      // THREE should have all internal components ready, including THREE.WebGPURenderer
      const renderer = new THREE.WebGPURenderer( { antialias: true, alpha: true, logarithmicDetphBuffer: true } );

      async function init() {
        await renderer.init();
      }

      init();
    </script>

Not really sure what you would need to do on your end to make it work.

[Tyl]

Thanks a lot for your answer, but I am in a npm project, using typescript.

I got to import WebGPURenderer but I juste don’t know how.

Nothing of all I tried works …
For example :
import WebGPURenderer from ‘three/examples/jsm/renderers/webgpu/WebGPURenderer.js’;
is what I often see but it does not work.

How can it be that I cannot even start a threejs project using webGPU …

[GitHubDragonFly]

WebGPU is all experimental and it does not appear to be in the official documentation either.

As a wild guess, your npm installation might just be defaulting to using three.module.js and not really observing the three.webgpu.js. I don’t really deal with npm so I wouldn’t really know.

We could ask @Attila_Schroeder if he might have had some experience with WebGPU on npm.

[Attila_Schroeder]

Hi @GitHubDragonFly,

I always install every new three.js release with npm install --save three

Then I use importmap to integrate three.js into my project.

<script type="importmap"> {
    "imports": {
        "three": "./node_modules/three/build/three.webgpu.js",
        "three/tsl": "./node_modules/three/build/three.webgpu.js",
        "three/addons/": "./node_modules/three/examples/jsm/"
    }
}
</script>

I think since r167.1 WebGPU has become an integral part of three.js, because since r167.1 there is three.webgpu.js in the build folder. The entire node system has also been migrated from examples to src, which was necessary in order to be able to build three.webgpu.js.

But I don’t work with TS at all and so unfortunately I can’t help if it’s a TS-specific problem.

[Attila_Schroeder]

@Tyl,
Since r167, which you also use, the WebGPURenderer is no longer in examples/jsm
So if you try to integrate the WebGPURenderer from there, it won’t work. r167 was a big leap. If you install three.js with npm like me and your three.js r167 is in the node_modules folder, then you need three.webgpu.js instead of three.module.js.
Then you can initialize the WebGPURenderer like GithubDragonFly showed.

const renderer = new THREE.WebGPURenderer( { antialias: true, alpha: true, logarithmicDetphBuffer: true } );

My Ocean2 repo is one with node_modules. So I used npm to install three.js for that too. I recently updated this to r167.1. Maybe this will help you for your npm project, because in your case three.js will then be in the node_modules folder

GitHub - Spiri0/Threejs-WebGPU-IFFT-Ocean-V2

The repo can be executed directly in visual studio code right after the download. Maybe this will help you.

If you need the logarithmicDetphBuffer, there are a few things to consider because WebGPU works differently than WebGL. Here a link to a codePen if you want to use the logarithmicDetphBuffer with custom shaders

[Tyl]

Thanks a lot both of you for your help
I can’t wait trying that this evening !
I’ll let you know about it

[Tyl]

Could not make it to work …

I added the following line at the end of node_modules@types\three\src\Three.d.ts :

export * from "./Three.WebGPU.js";

This makes that WebGPURenderer class is now known but at runtime I get the following error :

ERROR TypeError: THREE.WebGPURenderer is not a constructor

Something must be wrong in the types declaration of the three module but I can’t figure out what …

[dubois]

Why dont you just log what you get and ignore typescript, for now?

[Tyl]

I need typescript because I use also Angular, and I have too my former project in WebGL in which I can reuse most of my typescript code.
I assume I just have to wait that the devs fix this bug in threejs … (or tell me how to deal with it)

[seanwasere]

I can get the WebGPURenderer to work in TypeScript without any problems, but I use a much simpler approach than you.

Clone a Threejs TypeScript boilerplate.

git clone https://github.com/Sean-Bradley/Three.js-Boilerplate-TS-Vite.git

CD into folder

cd Three.js-Boilerplate-TS-Vite.git

Install dependencies,

npm install

Open VSCode

code .

Open ./src/main.ts and change line 2

- import * as THREE from 'three'
+ import * as THREE from 'three/tsl'

Change line 12

- const renderer = new THREE.WebGLRenderer()
+ const renderer = new THREE.WebGPURenderer()

Save changes.

Then execute,

npm run dev

Visit http://localhost:5173/

Three r168

And here is an importmap version, which is just easier all around to use.

SBCODE Editor Default Template (WebGPURenderer)

Note that this technique is likely to change since WebGPURenderer is still being very activily developed.

[dubois]

You can’t add //@ts-ignore above your import it doesn’t have to impact angular in any way. TS is also not related to threejs in any official way, there are volunteers maintaining types in a separate project.

[kpachinger]

r167 thanks! Some examples of WebGPU were blank last year. A fallback did not load. Now they work (with Chrome 121 Android 12). Some make my phone hot.

~ AutoSC8R “10 Increments” Tinkerman

[Tyl]

Many thanks for your help.
Your template works, and I could make mine almost work too (I still have some pb with Angular now)
I had to modify a line in tsconfig.json to make work :
"moduleResolution": "node",
became
"moduleResolution": "bundler",

[Sampson_Ji]

@GitHubDragonFly

    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.webgpu.min.js"
        }
      }
    </script>

    <script type="module">
      import * as THREE from "three";

      // THREE should have all internal components ready, including THREE.WebGPURenderer
      const renderer = new THREE.WebGPURenderer( { antialias: true, alpha: true, logarithmicDetphBuffer: true } );

      async function init() {
        await renderer.init();
      }

      init();
    </script>

I try it, it show below:

Uncaught TypeError: THREE.Scene is not a constructor