feat: improved render distance system + camera culling

src/App.tsx

@@ -31,7 +31,12 @@ function App() {
       className="container"
       onClick={() => container.current?.requestPointerLock()}
     >
-      <Canvas className="canvas" ref={container} shadows camera={{ fov: 50 }}>
+      <Canvas
+        className="canvas"
+        ref={container}
+        shadows
+        camera={{ fov: 50, frustumCulled: true, near: 0.1, far: 100 }}
+      >
         <Cubes cubesPosition={cubes}></Cubes>
 
         <mesh
@@ -63,7 +68,6 @@ function App() {
         <ambientLight intensity={Math.PI / 2} />
 
         <color args={["lightblue"]} attach={"background"}></color>
-        <fog attach={"fog"} args={["lightblue", 0, 100]}></fog>
         {/* <gridHelper args={[100, 100]}></gridHelper> */}
         {/* <axesHelper args={[100]}></axesHelper> */}
         <EffectComposer enableNormalPass>

src/components/Player.tsx

@@ -20,14 +20,17 @@ export interface KeyPressed {
   sprint: boolean;
 }
 
-const PLAYER_SPEED = 4.75;
-const SHADOW_DRAW_DISTANCE = 30;
+const PLAYER_SPEED = 4.75 * 10;
+const DRAW_DISTANCE = 50;
+const SHADOW_RESOLUTION = 2048;
 const MOUSE_X_SENSITIVITY = 0.002;
 const MOUSE_Y_SENSITIVITY = 0.001;
 const ANIM_SPEED = 0.2;
 const CAMERA_RADIUS = 2;
 const CAMERA_HEIGHT = 1.5;
 
+const SHADOW_DRAW_DISTANCE = DRAW_DISTANCE * 1.2;
+
 export function Player(): JSX.Element {
   const model = useGLTF("/Adventurer.glb");
   const anims = useAnimations(model.animations, model.scene);
@@ -206,7 +209,7 @@ export function Player(): JSX.Element {
           100,
           model.scene.position.z + 100,
         ]}
-        shadow-mapSize={[2048, 2048]}
+        shadow-mapSize={[SHADOW_RESOLUTION, SHADOW_RESOLUTION]}
         intensity={6}
       >
         <orthographicCamera
@@ -219,6 +222,10 @@ export function Player(): JSX.Element {
           ]}
         />
       </directionalLight>
+      <fog
+        attach={"fog"}
+        args={["lightblue", DRAW_DISTANCE * 0.8, DRAW_DISTANCE]}
+      ></fog>
     </>
   );
 }