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

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

Ok i think i got it. It requires a top level await plugin for vite. Here the link to the plugin 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}`
    })
  ]
})
```;
3 Likes

thank you. it’s helpful

1 Like