WebGPU operating environment

[qkrxotn7287]

I need help very urgently right now…!! Is there anyone who can help me!?

1. I want to run Babylonjs with WebGPU. However, when I open the project I wrote from VsCode to OpenLive Server, WebGPU works well. However, when opened with another internal server, I don’t know why it appears as WebGL even in an environment that becomes WebGPU. There is no error.
2. What kind of work does the server need to do when implementing WebGPU?

---

This is my current code.
const webGPUSupported = await BABYLON.WebGPUEngine.IsSupportedAsync;
if (webGPUSupported) {
engine = new BABYLON.WebGPUEngine(canvas);
curWebEnvString = “WebGPU”
CurrentStatus = “Web GPU”;
console.log(“WebGPU”);
await engine.initAsync();
} else {
console.log(“GL”);
curWebEnvString = “WebGL”
CurrentStatus = “Web GL”;
console.log(“WebGL”);
engine = new BABYLON.Engine(canvas, true);
}

Not VScode Open Live Server, but an internal server.

OpenLiveServer

[Evgeni_Popov]

It seems it is your browser that does not support WebGPU in the first case. If using Chrome Canary, you must either start it with the --enable-unsafe-webgpu flag or the set flag in Canary (chrome://flags):

[qkrxotn7287]

The browser in the current picture is the same canary, and the screen that you mentioned has also been set up the flag.

[Evgeni_Popov]

The support of WebGPU is only related to the browser, not to the web server. To know if the browser supports WebGPU we:

• check that navigator.gpu is not null/undefined
• check that navigator.gpu.requestAdapter() returns a non null adapter

For eg, in Chrome Canary:

And in Chrome retail:

You can try to do the same thing and see what the browser returns for you.

[qkrxotn7287]

Oh! Thank you for what Evgeni_Popov said.
If so, shouldn’t it not be done on the OpenLive Server if it wasn’t because of the browser on the internal server as well, too?
However, WebGPU works well in OpenLive Server.
(And the same script, the same browser.)
First of all, on OpenLive Server, it comes out well like Evgeni_Popov pictures.
When you open it on the same browser with the internal server, it appears with the picture.

OpenLiveServer

Internal server.

[labris]

What is “internal server” in your case?
Do you have the same results on usual webserver?

[qkrxotn7287]

The internal server is a normal web server!Haha
I have the same symptoms as above.

[jeremy-coleman]

try going to application in devtools and deleting everything from the cache while on 192.168.0.57. also make sure your html documents are the exact same, the order of imports matters.

[Moriy]

This page is working well when running it with npm run start in visual studio code. but once I build it and then run it in ngnix, it throw not support WebGPU

[jeremy-coleman]

Does your html document change? the line number on which your importing script tag is placed? The order matters when using the webgpu engine.

You can use an async callback for DOMContentLoaded event and await the engine creation. await unwraps all nested promises so that could work.

Or you could try a recursive spin lock, something like

function createEngineSync() {
  if (!document && document.getElementById("mycanvas")) {
    return setTimeout(() => {
      createEngineSync()
    }, 16)
  }
  createEngine()  //your engine creation function
}

also adding defer to your application script tag may help

it may or may not fix it, but you can rule out async initiation problems at least

[Moriy]

webgpu engine is work well in local workspace,
I use this code to craete webgpu engine:

If I run it with “npm run start”, it work well, navigator.gpu and navigator.gpu.requestAdapter() are all not null. But when I “npm run build” to build it, move it to ngnix ,and then run it, navigator.gpu and navigator.gpu.requestAdapter() are all null.
I think this is some matter about canary, when it visit a babylon html from local workspace it can load navigator.gpu correctly, but when it visit a babylon html from remote workspace(ngnix), it can’t load navigator.gpu.

[jeremy-coleman]

I understand. Are you changing the build process though too? For example using webpack dev server vs webpack build

[Moriy]

Sorry I am not knowing enough about webpack.
I use this way to build project, it can build project with webgpuEngine correctly about 2 month ago.
I don’t know why it doesn’t work now.

[jeremy-coleman]

Webpack doesnt always bundle async code correctly, especially if you use project aliases or import a module from a parent directory.

Hmm… i assume your module field in tsconfig is set to esnext or es6? Try changing it to commonjs real quick

[Moriy]

Sorry, I have two tsconfig files, I don’t clear which is correct one you talking about.
file 1:

file 2:

[jeremy-coleman]

Try removing the top tsconfig and changing the bottom tsconfig to commonjs. Removing the top one might cause typescript a warning but thats ok. Add a .env file in the same directory as the tsconfig and package.json and add:
TSC_COMPILE_ON_ERROR = true
DISABLE_ESLINT_PLUGIN = true
SKIP_PREFLIGHT_CHECK = true

[Moriy]

@jeremy-coleman

TSC_COMPILE_ON_ERROR = true
DISABLE_ESLINT_PLUGIN = true
SKIP_PREFLIGHT_CHECK = true

I have create a .env file:

but it throw this:

[Moriy]

and then vs code change module to esnext automatically.

[Moriy]

should I change files in node_module?

[jeremy-coleman]

Oh its in node modules? In a babylon module?