feat: add psx style vertex snapping and affine distortion

src/app/fear/page.tsx

@@ -28,7 +28,7 @@ function PostProcessing() {
     }, []);
 
     return (<EffectComposer>
-        <Pixelation granularity={wasCaught ? 18 : 12} />
+        <Pixelation granularity={wasCaught ? 18 : 10} />
         <Vignette />
         <Noise opacity={wasCaught ? 0.01 : 0.005} />
         <BrightnessContrast
@@ -87,6 +87,7 @@ export default function Fear() {
             <color attach="background" args={['#050505']} />
 
             <ambientLight intensity={0.0225} />
+            {/* <ambientLight intensity={2} /> */}
             <fogExp2 attach='fog' args={[0x050505, 0.035]} />
             <PostProcessing />
 

src/app/fear/scene-components/finale-text.tsx

@@ -15,7 +15,6 @@ export default function FinaleText() {
         return () => unsubscribe();
     });
 
-
     let elementCount = (FEAR_SETTINGS.EVENT_FINALE_TEXT_COUNT / FEAR_SETTINGS.EVENT_FINALE_DURATION) * progression;
 
     let testElements: Array<JSX.Element> = [];

src/app/fear/scene-components/hallway.tsx

@@ -5,6 +5,64 @@ import { useTexture, PositionalAudio } from "@react-three/drei";
 import * as THREE from "three";
 import { useFrame } from "@react-three/fiber";
 
+function ShaderPatch(shader: { vertexShader: string, fragmentShader: string, uniforms: Object }) {
+    shader.vertexShader = `
+        varying float vDepth;
+        #ifdef USE_MAP
+            varying vec2 vAffineUv;
+        #endif
+        ${shader.vertexShader}
+    `;
+
+    shader.vertexShader = shader.vertexShader.replace(
+        `#include <project_vertex>`,
+        `
+        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+        gl_Position = projectionMatrix * mvPosition;
+        
+        float precisionModifier = 200.0;
+        gl_Position.xy /= gl_Position.w;
+        gl_Position.xy = floor(gl_Position.xy * precisionModifier) / precisionModifier;
+        gl_Position.xy *= gl_Position.w;
+
+        vDepth = gl_Position.w;
+        
+        #ifdef USE_MAP
+            vAffineUv = vMapUv * gl_Position.w; 
+        #endif
+        `
+    );
+
+    shader.fragmentShader = `
+        varying float vDepth;
+        #ifdef USE_MAP
+            varying vec2 vAffineUv;
+        #endif
+        ${shader.fragmentShader}
+    `;
+
+    shader.fragmentShader = shader.fragmentShader.replace(
+        `#include <map_fragment>`,
+        `
+        #ifdef USE_MAP
+            vec2 flatAffineUV = vAffineUv / max(vDepth, 0.001);
+            
+            vec2 warpDiff = flatAffineUV - vMapUv;
+            float warpDist = length(warpDiff);
+            
+            float maxDistortion = 0.25; 
+            
+            float falloff = maxDistortion / (maxDistortion + warpDist);
+            
+            vec2 finalUV = vMapUv + (warpDiff * falloff);
+            
+            vec4 texelColor = texture2D( map, finalUV );
+            diffuseColor *= texelColor;
+        #endif
+        `
+    );
+}
+
 interface DoorProps {
     position: [number, number, number];
     rotation: [number, number, number];
@@ -283,6 +341,7 @@ export default function Hallway() {
                                 emissive="#a8a1a1"
                                 emissiveIntensity={0.8}
                                 roughness={0.9}
+                                onBeforeCompile={ShaderPatch}
                             />
                         </mesh>
                     </group>
@@ -293,12 +352,11 @@ export default function Hallway() {
                         rotation={[-Math.PI / 2, 0, 0]}
                         position={[0, 0, -FEAR_SETTINGS.HALLWAY_LENGTH / 2]}
                     >
-                        <planeGeometry args={[FEAR_SETTINGS.HALLWAY_WIDTH, FEAR_SETTINGS.HALLWAY_LENGTH]} />
+                        <planeGeometry args={[FEAR_SETTINGS.HALLWAY_WIDTH, FEAR_SETTINGS.HALLWAY_LENGTH, 4, 10]} />
                         <meshStandardMaterial
                             ref={(el) => { if (el) floorMaterialsRef.current.push(el); }}
                             map={floorTex}
-                            roughness={0.8}
+                            onBeforeCompile={ShaderPatch}
-                            metalness={0.2}
                         />
                     </mesh>
 
@@ -308,24 +366,22 @@ export default function Hallway() {
                         rotation={[Math.PI / 2, 0, 0]}
                         position={[0, FEAR_SETTINGS.HALLWAY_HEIGHT, -FEAR_SETTINGS.HALLWAY_LENGTH / 2]}
                     >
-                        <planeGeometry args={[FEAR_SETTINGS.HALLWAY_WIDTH, FEAR_SETTINGS.HALLWAY_LENGTH]} />
+                        <planeGeometry args={[FEAR_SETTINGS.HALLWAY_WIDTH, FEAR_SETTINGS.HALLWAY_LENGTH, 4, 10]} />
                         <meshStandardMaterial
                             ref={(el) => { if (el) floorMaterialsRef.current.push(el); }}
                             map={floorTex}
-                            roughness={0.8}
+                            onBeforeCompile={ShaderPatch}
-                            metalness={0.2}
                         />
                     </mesh>
 
                     {/* left wall */}
                     <group name="left-wall-group">
                         <mesh rotation={[0, Math.PI / 2, 0]} position={[0, FEAR_SETTINGS.HALLWAY_HEIGHT / 2, -FEAR_SETTINGS.HALLWAY_LENGTH / 2]}>
-                            <planeGeometry args={[FEAR_SETTINGS.HALLWAY_LENGTH, FEAR_SETTINGS.HALLWAY_HEIGHT]} />
+                            <planeGeometry args={[FEAR_SETTINGS.HALLWAY_LENGTH, FEAR_SETTINGS.HALLWAY_HEIGHT, 10, 4]} />
                             <meshStandardMaterial
                                 ref={(el) => { if (el) wallMaterialsRef.current.push(el); }}
                                 map={wallTex}
-                                roughness={0.7}
+                                onBeforeCompile={ShaderPatch}
-                                metalness={0.1}
                             />
                         </mesh>
                         {!isRustActive && (
@@ -339,12 +395,11 @@ export default function Hallway() {
                     {/* right wall */}
                     <group name="right-wall-group">
                         <mesh rotation={[0, -Math.PI / 2, 0]} position={[0, FEAR_SETTINGS.HALLWAY_HEIGHT / 2, -FEAR_SETTINGS.HALLWAY_LENGTH / 2]}>
-                            <planeGeometry args={[FEAR_SETTINGS.HALLWAY_LENGTH, FEAR_SETTINGS.HALLWAY_HEIGHT]} />
+                            <planeGeometry args={[FEAR_SETTINGS.HALLWAY_LENGTH, FEAR_SETTINGS.HALLWAY_HEIGHT, 10, 4]} />
                             <meshStandardMaterial
                                 ref={(el) => { if (el) wallMaterialsRef.current.push(el); }}
                                 map={wallTex}
-                                roughness={0.7}
+                                onBeforeCompile={ShaderPatch}
-                                metalness={0.1}
                             />
                         </mesh>
                         {!isRustActive && (
@@ -366,6 +421,7 @@ export default function Hallway() {
                                 color="#a5aca8"
                                 roughness={0.0}
                                 metalness={0.4}
+                                onBeforeCompile={ShaderPatch}
                             />
                         </mesh>
                     ))}
@@ -385,6 +441,7 @@ export default function Hallway() {
                                         color="#a5aca8"
                                         roughness={0.0}
                                         metalness={0.4}
+                                        onBeforeCompile={ShaderPatch}
                                     />
                                 </mesh>
                             );