fix: correct upside-down 404 screen and arcade boot image for WebGPU

- Not-found material: change 180° rotation to X-mirror only, since WebGPU
  render targets have Y=0 at top (no Y negation needed unlike WebGL)
- Screen material: add separate uFlipY uniform for render target Y-flip,
  restoring uFlip to game-mode-only behavior. Two sequential flips cancel
  when both active (DOOM game + RT inversion)
- Arcade screen component: set uFlipY=1 for render targets, 0 for images/video

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: ragojose

src/components/arcade-screen/index.tsx

@@ -91,6 +91,7 @@ export const ArcadeScreen = () => {
     if (!hasVisitedArcade) {
       if (isLabRoute) {
         screenUniforms.map.value = bootTexture
+        screenUniforms.uFlipY.value = 0
         screenUniforms.uRevealProgress.value = 0.0
 
         animate(0, 1, {
@@ -102,18 +103,21 @@ export const ArcadeScreen = () => {
           onComplete: () => {
             if (screenUniforms.uRevealProgress.value >= 0.99) {
               screenUniforms.map.value = renderTarget.texture
+              screenUniforms.uFlipY.value = 1
               setHasVisitedArcade(true)
               screenUniforms.uFlip.value = isInGame ? 1 : 0
             }
           }
         })
       } else {
         screenUniforms.map.value = videoTexture
+        screenUniforms.uFlipY.value = 0
         screenUniforms.uRevealProgress.value = 1.0
         screenUniforms.uFlip.value = 0
       }
     } else {
       screenUniforms.map.value = renderTarget.texture
+      screenUniforms.uFlipY.value = 1
       screenUniforms.uFlip.value = isInGame ? 1 : 0
     }
 

src/shaders/material-not-found/index.ts

@@ -52,8 +52,8 @@ export const createNotFoundMaterial = () => {
     uv2.x.assign(float(1.0).sub(uv2.x))
     uv2.subAssign(0.5)
 
-    // 180° rotation (cosR=-1, sinR=0) + re-center
-    const shiftedUv = uv2.mul(-1.0).add(0.5)
+    // Mirror X only (WebGPU render targets have Y=0 at top, so no Y negate needed)
+    const shiftedUv = vec2(uv2.x.negate(), uv2.y).add(0.5)
 
     // Texture sampling with color bleeding
     const baseColor = tDiffuse.sample(shiftedUv)

src/shaders/material-screen/index.ts

@@ -74,6 +74,7 @@ export const createScreenMaterial = () => {
   const uTime = uniform(0)
   const uRevealProgress = uniform(1.0)
   const uFlip = uniform(0)
+  const uFlipY = uniform(0.0)
   const uIsGameRunning = uniform(0.0)
 
   const material = new NodeMaterial()
@@ -109,9 +110,13 @@ export const createScreenMaterial = () => {
     // CRT curve remap
     const remappedUv = curveRemapUV(interferenceUv).toVar()
 
-    // Flip y: default flips for WebGPU convention, uFlip=1 un-flips for game mode
+    // Flip Y for render target textures (WebGPU RT has Y=0 at top vs WebGL Y=0 at bottom)
     remappedUv.y.assign(
-      mix(float(1.0).sub(remappedUv.y), remappedUv.y, uFlip)
+      mix(remappedUv.y, float(1.0).sub(remappedUv.y), uFlipY)
+    )
+    // Game mode flip (DOOM orientation correction — cancels RT flip when both active)
+    remappedUv.y.assign(
+      mix(remappedUv.y, float(1.0).sub(remappedUv.y), uFlip)
     )
 
     // Pixelation with exclusion zones (only when flipped)
@@ -211,6 +216,6 @@ export const createScreenMaterial = () => {
 
   return {
     material,
-    uniforms: { map: mapTex, uTime, uRevealProgress, uFlip, uIsGameRunning }
+    uniforms: { map: mapTex, uTime, uRevealProgress, uFlip, uFlipY, uIsGameRunning }
   }
 }