WebGPU: Normal Maps are flipped on Standard Materials

[fimbox]

Switching to WebGPU flips the normal-map in both axis's. Inside out gets outside in.

Happens on all materials I have seen until now,

Windows: Firefox and Chrome,

Playcanvas samples:
https://playcanvas.vercel.app/#/camera/fly
https://playcanvas.vercel.app/#/materials/material-refraction

[willeastcott]

Duplicate of #6984?

[fimbox]

After some back and forth including repro demos, me and Claude came to this conclusion:

It seems meshes are treated as tangent-less by default (statue.glb, and basically every model I investigated, ship no vertex tangents). These fall back to the screen-space-derivative TBN — the getTBN() TBN_DERIVATIVES branch in src/scene/shader-lib/{glsl,wgsl}/chunks/lit/frag/TBN.js, which builds the tangent frame from dFdx/dFdy (GLSL) vs dpdx/dpdy (WGSL). The Y derivative has opposite sign between the two backends (WebGL bottom-left vs WebGPU top-left framebuffer origin), so the reconstructed bitangent flips.

A simple fix would be to also factor device.isWebGPU into tbnBasis (src/scene/renderer/renderer.js ~line 409), e.g. this.tbnBasis.setValue((flipY !== this.device.isWebGPU) ? -1 : 1), so the basis is flipped for the WebGPU derivative-Y convention too.

  --- a/src/scene/renderer/renderer.js
  +++ b/src/scene/renderer/renderer.js
  @@ -406,7 +406,10 @@
  -        this.tbnBasis.setValue(flipY ? -1 : 1);
  +        // The derivative-based TBN (meshes without vertex tangents) is built from screen-space
  +        // derivatives. WebGPU's dpdy has the opposite sign of WebGL's dFdy (framebuffer Y origin
  +        // differs), so the basis must be flipped for WebGPU in addition to any render-target flipY.
  +        this.tbnBasis.setValue((flipY !== this.device.isWebGPU) ? -1 : 1);