feat(environment): add adaptive atmospheric fog

src/world/Environment.tsx

@@ -1,3 +1,6 @@
+import { useMemo } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import * as THREE from "three";
 import {
   GAME_SCENE_FALLBACK_BACKGROUND_COLOR,
   GAME_SCENE_FALLBACK_SKY_MODEL_PATH,
@@ -6,24 +9,46 @@ import {
   GAME_SCENE_SKY_MODEL_SCALE,
   PHYSICS_SCENE_BACKGROUND_COLOR,
 } from "@/data/world/environmentConfig";
-import { FOG_CONFIG } from "@/data/world/fogConfig";
+import { FOG_CONFIG, FOG_LIGHTING_COLOR_MIX } from "@/data/world/fogConfig";
 import { useCameraMode } from "@/hooks/debug/useCameraMode";
 import { useSceneMode } from "@/hooks/debug/useSceneMode";
+import { useFogSettings } from "@/hooks/world/useFogSettings";
 import {
   isMapModelVisible,
   useMapPerformanceStore,
 } from "@/managers/stores/useMapPerformanceStore";
 import { SkyModel } from "@/components/three/world/SkyModel";
 import { useDebugStore } from "@/hooks/debug/useDebugStore";
+import { LIGHTING_STATE } from "@/world/lightingState";
+
+const tempSunFogColor = new THREE.Color();
+
+function getLightingFogColor(target: THREE.Color): THREE.Color {
+  target.set(LIGHTING_STATE.ambientColor);
+  target.multiplyScalar(FOG_LIGHTING_COLOR_MIX.ambient);
+  tempSunFogColor.set(LIGHTING_STATE.sunColor);
+  target.add(tempSunFogColor.multiplyScalar(FOG_LIGHTING_COLOR_MIX.sun));
+
+  return target;
+}
 
 export function Environment(): React.JSX.Element {
   const cameraMode = useCameraMode();
   const sceneMode = useSceneMode();
+  const fog = useFogSettings();
   const fogEnabled = useDebugStore((debug) => debug.getFogEnabled());
   const groups = useMapPerformanceStore((state) => state.groups);
   const models = useMapPerformanceStore((state) => state.models);
+  const scene = useThree((state) => state.scene);
+  const fogColor = useMemo(() => getLightingFogColor(new THREE.Color()), []);
   const showSky = isMapModelVisible("sky", { groups, models });
 
+  useFrame(() => {
+    if (!scene.fog) return;
+
+    getLightingFogColor(scene.fog.color);
+  });
+
   if (sceneMode === "physics") {
     return (
       <color attach="background" args={[PHYSICS_SCENE_BACKGROUND_COLOR]} />
@@ -35,11 +60,16 @@ export function Environment(): React.JSX.Element {
       {FOG_CONFIG.enabled &&
       fogEnabled &&
       sceneMode === "game" &&
-      cameraMode === "player" ? (
-        <fog
-          attach="fog"
-          args={[FOG_CONFIG.color, FOG_CONFIG.near, FOG_CONFIG.far]}
-        />
+      cameraMode === "player" &&
+      fog.mode === "linear" ? (
+        <fog attach="fog" args={[fogColor, fog.near, fog.far]} />
+      ) : null}
+      {FOG_CONFIG.enabled &&
+      fogEnabled &&
+      sceneMode === "game" &&
+      cameraMode === "player" &&
+      fog.mode === "exp2" ? (
+        <fogExp2 attach="fog" args={[fogColor, fog.density]} />
       ) : null}
       {showSky ? (
         <SkyModel