IWebGPU: I get this error message when I try to import webgpu

Questions
1

I have a WebGPU enabled browser with which I can experience the threejs examples (firefox nightly). If I now try to integrate webGPU into my project, I get the following error message in the terminal.

VITE v4.3.9  ready in 658 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
✘ [ERROR] Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

    node_modules/three/examples/jsm/capabilities/WebGPU.js:11:17:
      11 │   const adapter = await navigator.gpu.requestAdapter();
         ╵                   ~~~~~

✘ [ERROR] Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

    node_modules/three/examples/jsm/renderers/webgpu/WebGPUBackend.js:20:18:
      20 │   _staticAdapter = await navigator.gpu.requestAdapter();
         ╵                    ~~~~~

Why do I get an error message about ancient browsers that I haven’t even installed?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" typ="text/css" href="resources/css/style.css">
    <title>Vite App</title>

    <script type="importmap">
    {
      "imports":{
        "three": "../build/threemodule.js",
        "three/addons/": "./jsm/",
        "three/nodes/": "./jsm/nodes/Nodes.js"
      }
    }
    </script>
  </head>

  <body>
    <div id="app"></div>
    <canvas id="bg"></canvas>

    <script type="module" src="./src/main.js"></script>
  </body>
</html>

And in my main:

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { CopyShader } from 'three/examples/jsm/shaders/CopyShader.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';

//without this both lines there are no problems
import WebGPU from 'three/addons/capabilities/WebGPU.js';
import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';

My threejs version: 153 in the node_modules folder

WebGPU finally offers the possibilities that I miss so much in webGL2. But to work with, I have to get it integrated first

2

Ok i think i got it. It requires a top level await plugin for vite.

npm i vite-plugin-top-level-await

and here my vite config

import { defineConfig } from 'vite';
import topLevelAwait from "vite-plugin-top-level-await";

export default defineConfig({
  plugins: [
    topLevelAwait({
      // The export name of top-level await promise for each chunk module
      promiseExportName: "__tla",
      // The function to generate import names of top-level await promise in each chunk module
      promiseImportName: i => `__tla_${i}`
    })
  ]
})
```;
4 Likes
3

thank you. it’s helpful

1 Like
4

@Attila_Schroeder just in case if you are still using Firefox Nightly, would you recall what settings you enabled to get WebGPU working?

If you could check the attached picture, it shows that WebGPU support is properly detected in the latest Firefox Nightly but it errors out when trying to create an instance of the r167 WebGPURenderer.

This can also be answered by anyone else using Firefox Nightly successfully.

Firefox Nightly
Firefox Nightly1088×775 38 KB

5

Just to add a bit more info, this is happening on a Windows based laptop and Chrome does not have issues enabling WebGPU.

6

@GitHubDragonFly I use google chrome and edge because both support WebGPU. I was never happy with firefox Nightly because it was very unstable for me. That’s why I haven’t used it since the beginning of the year. So I’m sorry that I can’t give you the answer you wish.
Chrome also works very well for me on Ubuntu with WebGPU. I’m wondering why Firefox is having a harder time with this, because I like Firefox and would like to use it with WebGPU.
I have no problems loading gltf, nearly everything works great for me with r167.1
I hope that Firefox will follow suit soon, that would be nice. Chrome seems to me to support WebGPU best so far.

7

Thank you for the reply.

I am only experimenting with these so it is not really that important. Chrome browser seems to have better support and Firefox should at least try to catch up.

Thought I would ask and if anyone else can answer it then even better.

8

Here is a bit more testing info, also related to Firefox Nightly, OOTB, but on the mac mini M2.

It does not create the error mentioned in my previous post but, after creating an instance of the r167 WebGPURenderer and loading a GLTF model, it shows a new error Shader Module Invalid related to some “fragment” shader.

EDIT: Even though I am using a customized version of the GLTF Loader just tried the official version and it also shows pretty much the same warnings/error, which look like these:

  • Uncaptured WebGPU error: Shader module creation failed: Parsing error
  • Encountered one or more errors while creating shader module “fragment”
  • Uncaptured WebGPU error: Error matching ShaderStages(FRAGMENT) shader requirements against the pipeline, caused by: Shader module is invalid
  • Uncaptured WebGPU error: In a set_pipeline command, caused by: Render pipeline Id(0,1,mtl) is invalid
  • Uncaptured WebGPU error: Command encoder is locked by a previously created render/compute pass. Before recording any new commands, the pass must be ended.

Similarily, one more warning showed up:

  • Uncaptured WebGPU error: In a set_pipeline command, caused by: Render pipeline Id(1,1,mtl) is invalid