[SOLVED] WebGPU combined with frontend frameworks (Tested on Angular and VueJS) and Monaco Editor not working?

Questions
1

Hello there!

We have spent days trying to do the basic setup for WebGPU (as in changing the Engine to a WebGPUEngine) and it simply won’t work for us. The following situations have occured in an Angular environment as well as in a VueJS environment and have both been tested in Firefox Nightly / Chrome Canary, the stacktraces will be from the Angular one.

First we just tried the most basic setup, without setting any options that is, which resulted in the Engine not finding the glslang module.

image
image1913×513 17.9 KB

Stacktrace of Firefox Nightly Console

This error already seemed weird to us, as other examples did not need to do anything further than that, but our bug hunt hinted us to using the glslang and twgls sources from https://cdn.babylonjs.com/../…
Providing these resources in the index.html and also in the engine.initAsync() call by providing glslangOptions and twgslOptions as parameters resulted in a different error, which seems to be related with the twgsl.wasm file.

image
image774×66 2.41 KB

After some more intense bug hunting and trying to build the twgsl sources ourselves (which didn’t go well since neither of us has any experience with that) we found this forum post, where someone posted their own built sources as of December 2023. Now this seemed like the solution to our problems, a very recent build of exactly the sources that caused so much trouble, but even these recently created files caused a new error.

image
image929×66 2.59 KB

Only then did we try to run the project in different environments, first in VueJS, which gave us exactly the same errors. But then we also tried out a project from this forum post and after implementing the bug fixes provided in the answers, it just magically worked. Sadly we are required to use either Angular or VueJS for our purposes, but seeing as the solution above just works out of the box, without providing any sources we came to the conclusion that this must be a problem with Angular or VueJS or Frontend Frameworks in general.

We came here hoping to get some help on this matter, maybe someone had similar troubles with setting up their Angular or VueJS project with WebGPU support. We also created a sample project on Github so you can test it out yourself.

https://github.com/fschwarz/BabylonAngularWebGPUBug

Any help / advice would be much appreciated and thank you so much in advance.

2

Seems to be build related and not directly WebGPU-related. I am pulling the code now, hopefully will fine what causes the issue.

Side-note, even though we had some good experience with WebGPU on firefox, i wouldn’t trust it fully :-). Having said that, if a standard demo works, using angular with the same code should definitely work.

3

Ok, your issue is caused by two lines in your index.html. Remove the reference of glslang and twgsl and let babylon manage downloading and initializing them. After you remove them the errors are gone, just need to finish your scene.

1 Like
4

Thank you so much for the fast fix. It really worked, which surprised me, because we had multiple versions without these references. I think it has to do with us stripping the project of certain elements for this post, for example initially we had the ngstack/code-editor installed and included, which required the Project to be a Module instead of an Application. But maybe that is not the problem at all.

Just another question: We implemented the basic scene from the BabylonJS Playground and is this error normal/expected? It also occurs in the Babylon Playground after switching to WebGPU, so I am assuming that this is not an actual problem.

image

Anyways we will slowly assemble everything from our initial state into this now fixed solution and if we encounter the same bugs again, we may ask for your help again :sweat_smile:

Again thank you so much for looking into it!

5

Okay, now to add to this: We have re-implemented the ngstack/code-editor as mentioned above and I think I found out what causes the issue, but not how to solve it. To get the Editor working you are required to import it in the main module of your app with the CodeEditorModule.forRoot() method (see app/app.module.ts in the new version of the github repository). But exactly this line causes the errors depicted in the following screenshot. Removing it makes the Babylon Engine work just fine, but then the editor does not work. Oh and what makes it more interesting, it only causes problems with the WebGPU implementation, with the WebGL implementation everything works just as it should.

image
image701×598 11.6 KB

Any ideas on the Babylon side why this happens? Feel free to pull the new version from the github repository and try it out yourself.

6

i’ll check the build issue, and cc @Evgeni_Popov regarding the error in the message before last :slight_smile:

7

Do you “await” engine.initAsync in WebGPU? Are you sure you don’t access the engine before this function has finished executing?

1 Like
8

Yes, we are calling the function in an async context with the await keyword. Now I included a .then() call to make sure everything else happens afterwards, still the same errors.

9

Ok - regarding the build issue - the editor you are using (Monaco) is defining the define variable on the global namespace, because it is using AMD to load modules to the editor. The thing is, this messes up every single UMD loaded after the editor was loaded. A small hack (not sure if there is any other way using this architecture) is add this before engine.initAsync:

(globalThis as any).define.amd = undefined;

This will tell UMD modules loaded - there is no AMD support, and will still maintain the ability to use the define keywork to load modules to the editor. JS loader architecture is FUN!

3 Likes