feat: more post processing + shadow """culling"""

package.json

@@ -14,9 +14,11 @@
     "@react-three/fiber": "^8.15.19",
     "@react-three/postprocessing": "^2.16.2",
     "@types/three": "^0.162.0",
+    "postprocessing": "^6.35.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "three": "^0.162.0"
+    "three": "^0.162.0",
+    "three-csm": "^4.2.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.56",

pnpm-lock.yaml

@@ -17,6 +17,9 @@ dependencies:
   '@types/three':
     specifier: ^0.162.0
     version: 0.162.0
+  postprocessing:
+    specifier: ^6.35.2
+    version: 6.35.2(three@0.162.0)
   react:
     specifier: ^18.2.0
     version: 18.2.0
@@ -26,6 +29,9 @@ dependencies:
   three:
     specifier: ^0.162.0
     version: 0.162.0
+  three-csm:
+    specifier: ^4.2.1
+    version: 4.2.1
 
 devDependencies:
   '@types/react':
@@ -2237,6 +2243,10 @@ packages:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
 
+  /three-csm@4.2.1:
+    resolution: {integrity: sha512-yHxKNPB2XMUBgWQTIWR0pESXzGYOdID49f2LdTbz+pNJRzBIMMVEJp5JuRSeCU6c75lmL5L4+FXRHQ1tQIgWEg==}
+    dev: false
+
   /three-mesh-bvh@0.7.3(three@0.162.0):
     resolution: {integrity: sha512-3W6KjzmupjfE89GuHPT31kxKWZ4YGZPEZJNysJpiOZfQRsBQQgmK7v/VJPpjG6syhAvTnY+5Fr77EvIkTLpGSw==}
     peerDependencies:

src/App.tsx

@@ -3,13 +3,20 @@ import "./App.css";
 import { Canvas } from "@react-three/fiber";
 import { KeyboardControls } from "@react-three/drei";
 import { MutableRefObject, useEffect, useRef, useState } from "react";
-import { Vector3 } from "three";
+import { Vector2, Vector3 } from "three";
 import { Cubes } from "./components/Cubes";
 import { Player } from "./components/Player";
-import { Bloom, EffectComposer, Vignette } from "@react-three/postprocessing";
+import {
+  Bloom,
+  ChromaticAberration,
+  EffectComposer,
+  SSAO,
+  Vignette,
+} from "@react-three/postprocessing";
+import { BlendFunction } from "postprocessing";
 
 function App() {
-  const CUBES_QT = 20;
+  const CUBES_QT = 10;
 
   const container = useRef<HTMLCanvasElement>(null);
 
@@ -38,12 +45,10 @@ function App() {
           rotation={[-Math.PI / 2, 0, 0]}
           position={[0, 0, 0]}
           receiveShadow
+          castShadow
         >
           <planeGeometry attach={"geometry"} args={[100, 100]}></planeGeometry>
-          <meshStandardMaterial
-            attach={"material"}
-            color={"green"}
-          ></meshStandardMaterial>
+          <meshLambertMaterial color={"green"}></meshLambertMaterial>
         </mesh>
 
         <KeyboardControls
@@ -64,29 +69,43 @@ function App() {
         </KeyboardControls>
 
         <ambientLight intensity={Math.PI / 2} />
-        <directionalLight
-          castShadow
-          position={[100, 100, 100]}
-          shadow-mapSize={[4096, 4096]}
-          intensity={5}
-        >
-          <orthographicCamera
-            attach="shadow-camera"
-            args={[-50, 50, 50, -50]}
-          />
-        </directionalLight>
 
         <color args={["lightblue"]} attach={"background"}></color>
         <fog attach={"fog"} args={["lightblue", 0, 100]}></fog>
-        <gridHelper args={[100, 100]}></gridHelper>
-        <axesHelper args={[100]}></axesHelper>
-        <EffectComposer>
+        {/* <gridHelper args={[100, 100]}></gridHelper> */}
+        {/* <axesHelper args={[100]}></axesHelper> */}
+        <EffectComposer enableNormalPass>
           <Bloom
-            luminanceThreshold={0.2}
-            luminanceSmoothing={0.8}
+            luminanceThreshold={0.3}
+            luminanceSmoothing={1.2}
             height={300}
           />
           <Vignette eskil={false} offset={0.2} darkness={0.8} />
+          <SSAO
+            blendFunction={BlendFunction.MULTIPLY}
+            samples={30}
+            rings={4}
+            distanceThreshold={1.0}
+            distanceFalloff={0.0}
+            rangeThreshold={0.5}
+            rangeFalloff={0.1}
+            luminanceInfluence={0.9}
+            radius={20}
+            bias={0.5}
+            worldDistanceFalloff={0.5}
+            worldDistanceThreshold={0.5}
+            worldProximityFalloff={0.5}
+            worldProximityThreshold={0.5}
+            intensity={30}
+          ></SSAO>
+          <ChromaticAberration
+            modulationOffset={0.02}
+            radialModulation={true}
+            offset={new Vector2(0.002, 0.002)}
+            blendFunction={BlendFunction.NORMAL}
+          />
+
+          {/* <SSR thickness={1} intensity={0.1}></SSR> */}
         </EffectComposer>
       </Canvas>
     </main>

src/components/Cubes.tsx

@@ -3,9 +3,9 @@ import { Vector3 } from "three";
 import { useFrame } from "@react-three/fiber";
 
 export function Cubes(props: { cubesPosition: Vector3[] }) {
-  const CUBE_SPEED = 10;
-  const CUBE_AMPLITUDE = 2;
-  const CUBE_HEIGHT = 4;
+  const CUBE_SPEED = 1;
+  const CUBE_AMPLITUDE = 3;
+  const CUBE_HEIGHT = 1;
 
   const [cubes, setCubes] = useState<Vector3[]>(
     Array.from(props.cubesPosition)
@@ -35,12 +35,10 @@ export function Cubes(props: { cubesPosition: Vector3[] }) {
         key={`${cube.x}-${cube.z}`}
         castShadow
         receiveShadow
+        scale={[1, 1, 1]}
       >
         <boxGeometry attach={"geometry"}></boxGeometry>
-        <meshStandardMaterial
-          attach={"material"}
-          color={"hotpink"}
-        ></meshStandardMaterial>
+        <meshLambertMaterial color={"hotpink"}></meshLambertMaterial>
       </mesh>
     );
   });

src/components/Player.tsx

@@ -1,7 +1,20 @@
 import { useAnimations, useGLTF, useKeyboardControls } from "@react-three/drei";
 import { useFrame, useThree } from "@react-three/fiber";
-import { MutableRefObject, useCallback, useEffect, useState } from "react";
-import { Euler, Mesh, Quaternion, Vector2, Vector3 } from "three";
+import {
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import {
+  DirectionalLight,
+  Euler,
+  Mesh,
+  Quaternion,
+  Vector2,
+  Vector3,
+} from "three";
 import { degToRad } from "three/src/math/MathUtils.js";
 
 export interface KeyPressed {
@@ -13,7 +26,8 @@ export interface KeyPressed {
   sprint: boolean;
 }
 
-const PLAYER_SPEED = 4.75; // TODO NERF
+const PLAYER_SPEED = 4.75;
+const SHADOW_DRAW_DISTANCE = 30;
 
 export function Player(props: {
   container: MutableRefObject<HTMLCanvasElement>;
@@ -33,6 +47,8 @@ export function Player(props: {
   const [player, setPlayer] = useState<Vector3>(new Vector3(0, 0, 0));
   const [mouseRef, setMouseRef] = useState(new Vector2());
 
+  const lightRef = useRef<DirectionalLight>(null);
+
   const camera = useThree((state) => state.camera);
 
   const radius = 2;
@@ -41,7 +57,10 @@ export function Player(props: {
   useEffect(() => {
     idle?.play();
     model.scene.traverse((child) => {
-      if (child instanceof Mesh) child.castShadow = true;
+      if (child instanceof Mesh) {
+        child.castShadow = true;
+        child.receiveShadow = true;
+      }
     });
   });
 
@@ -135,6 +154,24 @@ export function Player(props: {
   return (
     <>
       <primitive object={model.scene} position={player}></primitive>
+      <directionalLight
+        ref={lightRef}
+        target={model.scene}
+        castShadow
+        position={[player.x + 100, 100, player.z + 100]}
+        shadow-mapSize={[4096, 4096]}
+        intensity={6}
+      >
+        <orthographicCamera
+          attach="shadow-camera"
+          args={[
+            -SHADOW_DRAW_DISTANCE,
+            SHADOW_DRAW_DISTANCE,
+            SHADOW_DRAW_DISTANCE,
+            -SHADOW_DRAW_DISTANCE,
+          ]}
+        />
+      </directionalLight>
     </>
   );
 }