fix: correct TAA temporal reprojection on WebGPU (#8517)

Fix ghosting artifacts in TAA on WebGPU caused by incorrect UV-to-NDC
reconstruction in the reproject function. The getImageEffectUV Y-flip
applied in the vertex shader was not accounted for, producing wrong
world-space positions and broken history reprojection during camera
movement.

Remove the old upside-down workaround hack from the TAA resolve shader
and the compensating UV flip from the compose shader. Clean up dead
WEBGPU ifdef blocks in the GLSL TAA resolve shader.

Fixed #8452

Made-with: Cursor

Co-authored-by: Martin Valigursky <mvaligursky@snapchat.com>

Author: mvaligursky

src/scene/shader-lib/glsl/chunks/render-pass/frag/compose/compose.js

@@ -24,13 +24,6 @@ export default /* glsl */`
 
         vec2 uv = uv0;
 
-        // TAA pass renders upside-down on WebGPU, flip it here
-        #ifdef TAA
-        #ifdef WEBGPU
-            uv.y = 1.0 - uv.y;
-        #endif
-        #endif
-
         vec4 scene = texture2DLod(sceneTexture, uv, 0.0);
         vec3 result = scene.rgb;
 

src/scene/shader-lib/glsl/chunks/render-pass/frag/taaResolve.js

@@ -14,9 +14,7 @@ export default /* glsl */`
     vec2 reproject(vec2 uv, float depth) {
 
         // fragment NDC
-        #ifndef WEBGPU
-            depth = depth * 2.0 - 1.0;
-        #endif
+        depth = depth * 2.0 - 1.0;
         vec4 ndc = vec4(uv * 2.0 - 1.0, depth, 1.0);
 
         // remove jitter from the current frame
@@ -54,18 +52,8 @@ export default /* glsl */`
 
     void main()
     {
-        vec2 uv = uv0;
-
-        #ifdef WEBGPU
-            // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-            // This hack is needed on webgpu, which makes TAA work but the resulting image is upside-down.
-            // We could flip the image in the following pass, but ideally a better solution should be found.
-            uv.y = 1.0 - uv.y;
-            // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-        #endif
-
         // current frame
-        vec4 srcColor = texture2D(sourceTexture, uv);
+        vec4 srcColor = texture2D(sourceTexture, uv0);
 
         // current depth is in linear space, convert it to non-linear space
         float linearDepth = getLinearScreenDepth(uv0);
@@ -87,7 +75,7 @@ export default /* glsl */`
         #endif
 
         // handle disocclusion by clamping the history color
-        vec4 historyColorClamped = colorClamp(uv, historyColor);
+        vec4 historyColorClamped = colorClamp(uv0, historyColor);
 
         // handle history buffer outside of the frame
         float mixFactor = (historyUv.x < 0.0 || historyUv.x > 1.0 || historyUv.y < 0.0 || historyUv.y > 1.0) ?

src/scene/shader-lib/wgsl/chunks/render-pass/frag/compose/compose.js

@@ -27,11 +27,6 @@ export default /* wgsl */`
         var output: FragmentOutput;
         var uv = uv0;
 
-        // TAA pass renders upside-down on WebGPU, flip it here
-        #ifdef TAA
-            uv.y = 1.0 - uv.y;
-        #endif
-
         let scene = textureSampleLevel(sceneTexture, sceneTextureSampler, uv, 0.0);
         var result = scene.rgb;
 

src/scene/shader-lib/wgsl/chunks/render-pass/frag/taaResolve.js

@@ -13,7 +13,11 @@ export default /* wgsl */`
 
     varying uv0: vec2f;
 
-    fn reproject(uv: vec2f, depth: f32) -> vec2f {
+    fn reproject(uv_in: vec2f, depth: f32) -> vec2f {
+
+        // uv was Y-flipped by getImageEffectUV for texture sampling,
+        // un-flip to reconstruct correct NDC (viewProj matrices use standard Y convention)
+        var uv = vec2f(uv_in.x, 1.0 - uv_in.y);
 
         var ndc = vec4f(uv * 2.0 - 1.0, depth, 1.0);
 
@@ -27,7 +31,11 @@ export default /* wgsl */`
         // world position to screen space of the previous frame
         let screenPrevious = uniform.matrix_viewProjectionPrevious * worldPosition;
 
-        return (screenPrevious.xy / screenPrevious.w) * 0.5 + 0.5;
+        // flip result back to texture sampling convention
+        var result = (screenPrevious.xy / screenPrevious.w) * 0.5 + 0.5;
+        result.y = 1.0 - result.y;
+
+        return result;
     }
 
     fn colorClamp(uv: vec2f, historyColor: vec4f) -> vec4f {
@@ -54,16 +62,8 @@ export default /* wgsl */`
     fn fragmentMain(input: FragmentInput) -> FragmentOutput {
         var output: FragmentOutput;
 
-        var uv = input.uv0;
-
-        // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-        // This hack is needed on webgpu, which makes TAA work but the resulting image is upside-down.
-        // We could flip the image in the following pass, but ideally a better solution should be found.
-        uv.y = 1.0 - uv.y;
-        // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-
         // current frame
-        let srcColor = textureSample(sourceTexture, sourceTextureSampler, uv);
+        let srcColor = textureSample(sourceTexture, sourceTextureSampler, uv0);
 
         // current depth is in linear space, convert it to non-linear space
         let linearDepth = getLinearScreenDepth(uv0);
@@ -85,7 +85,7 @@ export default /* wgsl */`
         #endif
 
         // handle disocclusion by clamping the history color
-        let historyColorClamped = colorClamp(uv, historyColor);
+        let historyColorClamped = colorClamp(uv0, historyColor);
 
         // handle history buffer outside of the frame
         let mixFactor_condition = historyUv.x < 0.0 || historyUv.x > 1.0 || historyUv.y < 0.0 || historyUv.y > 1.0;