Firefox + WebGPU + Metal crashes/fails when needDepthPrePass is set to true

Bugs
,
1

Hi everyone,

I’m trying to render a scene using Firefox + WebGPU on Apple Silicon (Metal).

Whenever I set needDepthPrePass = true on a material and add the mesh to the scene, it fails to render and stops working.

Note that it works completely fine under WebGL2.

Here is the minimal reproduction code on the Babylon.js Playground:

export const createScene = function () {
    var scene = new BABYLON.Scene(engine);
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
    camera.setTarget(BABYLON.Vector3.Zero());
    camera.attachControl(canvas, true);
    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
    light.intensity = 0.7;

    var plane = BABYLON.MeshBuilder.CreatePlane('plane-predepth', {
        size: 4, sideOrientation: BABYLON.Mesh.DOUBLESIDE,
    }, scene);

    var mat = new BABYLON.StandardMaterial('mat-predepth', scene);
    mat.disableLighting  = true;
    mat.backFaceCulling  = false;
    mat.emissiveColor    = new BABYLON.Color3(1.0, 0.32, 0.32);
    mat.alpha            = 1.0;     // alpha=1 to confirm alpha is NOT the cause
    mat.needDepthPrePass = true;    // ← ON — triggers shader compile error on Firefox WebGPU + Metal
    plane.material = mat;

    return scene;
};

Debug Console Output:

The browser console outputs the following WebGPU compilation errors, which seems like a variable redefinition issue (_tmp) during WGSL to MSL (Metal Shading Language) translation:

Uncaptured WebGPU error: Internal error in ShaderStages(FRAGMENT) shader: Metal: program_source:148:19: warning: unused variable 'i0_' [-Wunused-variable]
    metal::float3 i0_ = inMatrix[0];
                  ^
program_source:149:19: warning: unused variable 'i1_' [-Wunused-variable]
    metal::float3 i1_ = inMatrix[1];
                  ^
program_source:150:19: warning: unused variable 'i2_' [-Wunused-variable]
    metal::float3 i2_ = inMatrix[2];
                  ^
program_source:687:16: error: redefinition of '_tmp'
    const auto _tmp = _e161;
               ^
program_source:653:16: note: previous definition is here
    const auto _tmp = _e60;
               ^

Environment:

  • OS: macOS Tahoe 26.5.1 / Apple M3 Pro

  • Browser: Firefox 152.0.3 (aarch64)

  • Engine: Babylon.js 9.14.0 (WebGPU Engine)

Has anyone encountered this or found a workaround? It feels like an issue with Firefox’s WebGPU implementation (Naga) generating duplicate variables for Metal. Any insights would be highly appreciated!

2

Yup totally agree it seems like a Naga bug. Can you open a ticket on the mozilla bug tracker and share it here ?

3

@sebavan

I visited the Bugzilla page and noticed that Firefox Nightly was available. Thinking that the issue might have already been fixed there, I decided to install it and check.

To my surprise, the bug has indeed been fixed and it works perfectly now!

I will wait for this fix to make its way into the stable release of Firefox. Thank you so much for your help and insights!

4

Nice !!! this is really good to know