WebGPU And Cascaded Shadow Map

[MackeyK24]

I am getting a bunch of WebGPU errors when i try to use Cascade Shadow Map with PCF

@sebavan or @Deltakosh … You know of any known issues with WebGPU and CSM with PCF ?

[Evgeni_Popov]

It does work for me:

Babylon.js Playground

However, it seems the problem has to do with the number of varyings which is passed from the vertex to the fragment shader. 16 is quite low, it’s the default value guaranteed by the spec. The value supported by your GPU is the maxInterStageShaderVariables value reported by https://webgpureport.org/ (28 for me).

Do you set the setMaximumLimits option to true when you create the engine (not related, but you may also want to set enableAllFeatures to true)? This will ensure that the WebGPU engine is created with the maximum value supported by WebGPU for all limits (WebGPU).

[MackeyK24]

@Evgeni_Popov

setMaximumLimits

I am not explicitly setting any limits on the WebGPU Engine.

    window.setupBabylonEngineHostPage = () => {
        try {
            var useStencilBuffer = stencil;
            var preserveDrawBuffer = (preserve > 0);

            var gpuPerformanceProfile = window.isMobileDevice() ? "low-power" : "high-performance";
            if (profile === 1) gpuPerformanceProfile = "low-power";
            else if (profile === 2) gpuPerformanceProfile = "high-performance";

            var cpuPerformanceProfile = "default";
            if (profile === 1) cpuPerformanceProfile = "low-power";
            else if (profile === 2) cpuPerformanceProfile = "high-performance";

            if (renderengine === 1) {
                if (navigator.gpu) {
                    engine = new BABYLON.WebGPUEngine(divcvs, { powerPreference: gpuPerformanceProfile, doNotHandleContextLost: true });
                    engine.initAsync({ jsPath: "###SCRIPT###/glslang.js", wasmPath: "###SCRIPT###/glslang.wasm" }).catch((ex) => { showErrorMessage(ex.message || "Unknown WebGPU Exception"); }).then(() => {
                        BABYLON.Tools.Log("WebGPU rendering engine enabled");
                        window.prepareBabylonEngineProperties();
                    });
                } else {
                    BABYLON.Tools.Warn("WebGPU is not supported on platform. Falling back to WebGL");
                    engine = new BABYLON.Engine(divcvs, antialias, { powerPreference: cpuPerformanceProfile, preserveDrawingBuffer: preserveDrawBuffer, stencil: useStencilBuffer, premultipliedAlpha: false, doNotHandleContextLost: true }, false);
                    window.prepareBabylonEngineProperties();
                }
            } else {
                engine = new BABYLON.Engine(divcvs, antialias, { powerPreference: cpuPerformanceProfile, preserveDrawingBuffer: preserveDrawBuffer, stencil: useStencilBuffer, premultipliedAlpha: false, doNotHandleContextLost: true }, false);
                window.prepareBabylonEngineProperties();
            }
        } catch (ex3) {
            window.showErrorMessage(ex3.message || "Unknown Engine Exception");
        }
    };

[Evgeni_Popov]

So, you should set setMaximumLimits: true to the list of options when creating the engine, as the default value is not enough for your use case.

[MackeyK24]

Holy shit… That was it…

engine = new BABYLON.WebGPUEngine(divcvs, { powerPreference: gpuPerformanceProfile, enableAllFeatures:true, setMaximumLimits: true, doNotHandleContextLost: true });

Thanks @Evgeni_Popov

[MackeyK24]

Yo @Evgeni_Popov one more question. Are you supposed to be able to set antialias when using the WebGPUEngine. BABYLON.Engine has it as part of the constructor but WebGPUEngine does not. How to set the antialias option for WebGPU ?

[Evgeni_Popov]

You have an antialias property in the WebGPUEngineOptions object you can pass to the WebGPUEngine constructor.

[MackeyK24]

Shit … I totally missed that is was on the options and not a separate property for the constrcutor.

Thanks again dude

[MackeyK24]

Yo @Evgeni_Popov … When i enabled FOG on that same scene. I get errors:

If i disable fog in the inspector, it renders fine.

Is there some kind of global scene property i need to set for the WebGPU shaders to see ?

[MackeyK24]

It seems like something is out of sync with the shaders in my environment:

Error while parsing WGSL: :49:29 error: unresolved value 'scene'

Am I missing some babylonjs.xxxx.js library when using WebGPU ?

And even stranger… if i remove the skinned meshed and leave the fog on it works and does not logs any warnings…

[Evgeni_Popov]

Sorry, it’s a bug on our side. This PR will fix it:

WebGPU: fix crash when enabling fog

[MackeyK24]

Sweet… Thank you for checking on this issue. So you think fix will be in the next 7.38.1 release ?

[Evgeni_Popov]

It’s already in 7.38.0.

This PG works:

Babylon.js Playground

But not this one (7.37.2):

Babylon.js Playground

[MackeyK24]

Yo @Evgeni_Popov … Thanks so much… Appreciate it

[MackeyK24]

Hey @Evgeni_Popov … I still get the error with 7.38.0

I use the inspector to check fog setting

I then manually set to none and the underlying scene starts to render perfectly fine, without fog of course.

• Weird

[MackeyK24]

I also noted is only doing this with the Raycast Line Helpers. If i disable the raycast line helper that is showing the green raycast line it works.

So it looks like its a combination of using the FOG and the RAYCAST HELPER with WebGPU

[Evgeni_Popov]

I can’t reproduce with this PG:

Babylon.js Playground

Are you able to modify this PG to show the problem?

[MackeyK24]

Crap… I cant reproduce on playground either. Dunno whats so different about my local setup