Strange problem with webGPU is supported check

I faced with a very strange problem. Sometimes WebGPUEngine.IsSupportedAsync returnes true sometimes false in the same browser. (in case of true webgpu engine can be successfully created and scene can be displayed) Browser version Chrome 114.0.5735.134

I have angular app and when i run it from IDE WebGPUEngine.IsSupportedAsync returns false and webgpuEngine cannot be created because of some babylon internal checks.
But when i build/compile app (with the same properties as when i run it) and then run not from IDE IsSupportedAsync becomes true / webgpu engine created and everything ok.

I don’t think it’s a babylon problem because not only that property is different. But i hope that this property can point me to the actual problem. Could you please provide what exactly babylon checks to understand that browser support webGPU?
I see that there is some navigator interface which have gpu property but i can’t find where it is set

Thanks.

engine.isWebGPU is true when the engine runs in WebGPU so you have to create a WebGPUEngine in your code instead of Engine. If the browser doesn’t support WebGPU it will fail to initialize so it will be set to false.

I don’t have engine at this step. isSupportedAsync property is used to create correct engine


and sometimes it’s true sometimes it’s not. I want to understand what babylon use to understand that browser support webGPU

This is exactly what you pasted in your question and this is used in the Playground to determine whether there is WebGPU support. Do you experience this issue in the same browser and in the Playground as well or is it just in your app?

    /**
     * Gets a Promise<boolean> indicating if the engine can be instantiated (ie. if a WebGPU context can be found)
     */
    public static get IsSupportedAsync(): Promise<boolean> {
        return !navigator.gpu
            ? Promise.resolve(false)
            : navigator.gpu
                  .requestAdapter()
                  .then(
                      (adapter: GPUAdapter | undefined) => !!adapter,
                      () => false
                  )
                  .catch(() => false);
    }

Got it thanks. It’s just browser’s property. I thought that it’s interface
image

I’m checking in the same browser. Playground is true. Built app is true. any other tab is true. (i’m checking navigator.gpu in browser’s console). App from IDE is false
image
image

1 Like

Yes, it’s a Typescript notation of an interface. You may want to have a look here:

The interface in Typescript just defines the properties of an object.

It seems your IDE is not using a WebGPU capable browser to preview/render your app.

But i’m not using internal IDE browser. I’m using chrome.

What does this then mean?

I serve application in IDE.
image
Then I open browser with provided URL from terminal when app started.


and in this browser tab navigator.gpu returns undefined

Interesting. Are you sure you are running chrome 113+?

Yes. it’s 114.0.5735.134 version.
Moreover i create new tab with google.com and navigator.gpu is object there

Again just guessing: try to navigate to localhost:4200. Maybe WebGPU is enabled only for https and when accessing localhost via http.

EDIT:
OMG :smiley:

Yes, it is.

1 Like

But your app is not in https but still have navigator.gpu
And when i start built application(not via IDE) it’s also not via https and still have gpu

If you are accessing localhost you don’t need https.

Go to localhost:4200 and you are good to go, believe me.

3 Likes

Yes. You are right. It works! Thank you so much

1 Like

You’re welcome buddy!