WebGPU (@babylonjs) Unable to compile effect

Questions
,
1

I’m using es6 imports from @babylonjs. I’ve been working on WebGL for a while and everything’s awesome. I tried to switch to webGPU (chrome with the origin trial turned on and confirmed) and I got the below error.

I figured it was something I was using so I started a new project that just creates and initAsyncs the engine and get the same error. Any idea what’s going on?

Here’s the code:

  import { Engine } from '@babylonjs/core/Engines/engine';
  import { WebGPUEngine } from '@babylonjs/core/Engines/webgpuEngine';

  // some unrelated class stuff...

  private async initEngine(gameCanvas) {

    const webGPUSupported = await WebGPUEngine.IsSupportedAsync;
    console.log({webGPUSupported}); // This shows as true

    if (webGPUSupported) {
      this.engine = new WebGPUEngine(gameCanvas, {
          adaptToDeviceRatio: true,
          antialiasing: true,
        });
        await (this.engine as WebGPUEngine).initAsync();
    } else {
      this.engine = new Engine(gameCanvas, true, {}, true);
    }

  }

image
image1242×1290 118 KB

2

Welcome aboard!

It seems you hit the same problem than @mise:

I don’t know if he solved the problem (?)

3

Confirming that this makes the error go away:

import { WebGPUEngine } from '@babylonjs/core/Engines/webgpuEngine';
// Changed to
import { WebGPUEngine } from '@babylonjs/core';

Importing the entire core library makes the error go away and is good enough for now, but not a good long-term solution. I’ve been using tree-shaking and specific imports with webGL to keep my application size down. Doing this about triples the size!

Does anyone know which imports are missing for this? Maybe there’s a side effect I need to import like how the gltf loader has to be imported?

I found these, but importing doesn’t help. Think these might be legacy ones, not webgpu?

import '@babylonjs/core/Shaders/clearQuad.vertex';
import '@babylonjs/core/Shaders/clearQuad.fragment';
4

nope, we still need to narrow down this import (and make it be a compiler error in preference)

5

You are missing this:

import "@babylonjs/core/Engines/WebGPU/Extensions/engine.uniformBuffer";

@Evgeni_Popov - any objection of adding this to the WebGPU Engine init itself?

6

I need all these to get it to work for my project:

import ‘@babylonjs/core/Engines/WebGPU/Extensions/engine.uniformBuffer’;
import ‘@babylonjs/core/Engines/WebGPU/Extensions/engine.dynamicTexture’;
import ‘@babylonjs/core/Engines/WebGPU/Extensions/engine.alpha’;
import ‘@babylonjs/core/Engines/WebGPU/Extensions/engine.dynamicBuffer’;

7

Yes, probably because you are using these features :slight_smile:

We will probably need to make the engine extensions more of a plugin system than an import system. I noted this, we’ll find a solution. Hopefully soon.

1 Like
8

No objection! But as @mise found, there can be a lot of other imports to add, depending on what you are doing…

Probably:

import '@babylonjs/core/Engines/WebGPU'

would be needed for the WebGPU engine to work as a whole (?)

9

This one is needed even without using any of the other features. Create the default scene and this import is needed.

Hard call, I have to say… I’ll see how we can minimize the number of imports but still make sure it works out of the box. That’s gonna be fun :slight_smile:

11

Haha, fun indeed. Good luck and thank you all for your help!

For anyone else hitting this issue before @RaananW works their magic, here’s the solution:

If you’re using imports from @babylonjs/core for webgpu, you’ll need to manually import the uniformBuffer extension as well. It’s needed for the engine to function.

import { WebGPUEngine } from '@babylonjs/core/Engines/webgpuEngine';
import "@babylonjs/core/Engines/WebGPU/Extensions/engine.uniformBuffer";

Also be ready to include other Extensions as you add more features. These are all in Engines/WebGPU/Extensions. @mise, above, is using a few more than just the uniformBuffer and I will be as well once I get this back in to my main codebase.