[Fix] Fix reversed face culling when rendering shadows on WebGPU (#7407)

* [Fix] Fix reversed face culling when rendering shadows on WebGPU * more generic fix --------- Co-authored-by: Martin Valigursky <[email protected]>
playcanvas · Mar 5, 2025 · 726c0bc · 726c0bc
1 parent 84dc61c
commit 726c0bc
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/examples/src/examples/graphics/lights.example.mjs b/examples/src/examples/graphics/lights.example.mjs
@@ -16,6 +16,7 @@ function createMaterial(colors) {
 
 const assets = {
     statue: new pc.Asset('statue', 'container', { url: `${rootPath}/static/assets/models/statue.glb` }),
+    orbit: new pc.Asset('script', 'script', { url: `${rootPath}/static/scripts/camera/orbit-camera.js` }),
     heart: new pc.Asset('heart', 'texture', { url: `${rootPath}/static/assets/textures/heart.png` }),
     xmas_negx: new pc.Asset('xmas_negx', 'texture', {
         url: `${rootPath}/static/assets/cubemaps/xmas_faces/xmas_negx.png`
@@ -49,9 +50,11 @@ device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
 const createOptions = new pc.AppOptions();
 createOptions.graphicsDevice = device;
 createOptions.keyboard = new pc.Keyboard(document.body);
+createOptions.mouse = new pc.Mouse(document.body);
+createOptions.touch = new pc.TouchDevice(document.body);
 
-createOptions.componentSystems = [pc.RenderComponentSystem, pc.CameraComponentSystem, pc.LightComponentSystem];
-createOptions.resourceHandlers = [pc.TextureHandler, pc.ContainerHandler, pc.CubemapHandler];
+createOptions.componentSystems = [pc.RenderComponentSystem, pc.CameraComponentSystem, pc.LightComponentSystem, pc.ScriptComponentSystem];
+createOptions.resourceHandlers = [pc.TextureHandler, pc.ContainerHandler, pc.CubemapHandler, pc.ScriptHandler];
 
 const app = new pc.AppBase(canvas);
 app.init(createOptions);
@@ -91,6 +94,17 @@ assetListLoader.load(() => {
     camera.rotate(-14, 0, 0);
     app.root.addChild(camera);
 
+    camera.addComponent('script');
+    camera.script.create('orbitCamera', {
+        attributes: {
+            inertiaFactor: 0.2,
+            frameOnStart: false,
+            distanceMax: 500
+        }
+    });
+    camera.script.create('orbitCameraInputMouse');
+    camera.script.create('orbitCameraInputTouch');
+
     // ground material
     const material = createMaterial({
         ambient: pc.Color.GRAY,

diff --git a/src/scene/renderer/shadow-renderer.js b/src/scene/renderer/shadow-renderer.js
@@ -280,6 +280,9 @@ class ShadowRenderer {
         const shadowPass = this.getShadowPass(light);
         const cameraShaderParams = camera.shaderParams;
 
+        // reverse face culling when shadow map has flipY set to true which cases reversed winding order
+        const flipFactor = camera.renderTarget.flipY ? -1 : 1;
+
         // Render
         const count = visibleCasters.length;
         for (let i = 0; i < count; i++) {
@@ -300,7 +303,7 @@ class ShadowRenderer {
                 material.dirty = false;
             }
 
-            renderer.setupCullMode(true, 1, meshInstance);
+            renderer.setupCullMode(true, flipFactor, meshInstance);
 
             // Uniforms I (shadow): material
             material.setParameters(device);