tune(environment): add cloud controls and visibility fixes

src/data/world/windConfig.ts

@@ -1,8 +1,8 @@
 export const WIND_DEFAULTS = {
-  speed: 0.3,
-  direction: Math.PI * 0.25,
-  strength: 1.0,
-  noiseScale: 0.9,
+  speed: 1.5,
+  direction: 0.5584,
+  strength: 1.5,
+  noiseScale: 0.5,
 };
 
 export const WIND_BOUNDS = {

src/hooks/debug/useEnvironmentDebug.ts

@@ -1,9 +1,10 @@
+import { CLOUD_BOUNDS } from "@/data/world/cloudConfig";
 import { WIND_BOUNDS } from "@/data/world/windConfig";
 import { useDebugFolder } from "@/hooks/debug/useDebugFolder";
 import { useWorldSettingsStore } from "@/managers/stores/useWorldSettingsStore";
 
 export function useEnvironmentDebug(): void {
-  useDebugFolder("Environment", (folder) => {
+  useDebugFolder("Dynamic Wind", (folder) => {
     const { setWind, wind } = useWorldSettingsStore.getState();
     const controls = { ...wind };
 
@@ -46,4 +47,116 @@ export function useEnvironmentDebug(): void {
       .name("Wind noise scale")
       .onChange((noiseScale: number) => setWind({ noiseScale }));
   });
+
+  useDebugFolder("Environment", (folder) => {
+    const { clouds, graphics, setClouds, setDynamicClouds } =
+      useWorldSettingsStore.getState();
+    const controls = {
+      ...clouds,
+      dynamicClouds: graphics.dynamicClouds,
+    };
+
+    folder
+      .add(controls, "dynamicClouds")
+      .name("Clouds")
+      .onChange((dynamicClouds: boolean) => setDynamicClouds(dynamicClouds));
+
+    folder
+      .add(controls, "count", CLOUD_BOUNDS.count.min, CLOUD_BOUNDS.count.max)
+      .step(CLOUD_BOUNDS.count.step)
+      .name("Cloud count")
+      .onChange((count: number) => setClouds({ count }));
+
+    folder
+      .add(controls, "minScale", CLOUD_BOUNDS.scale.min, CLOUD_BOUNDS.scale.max)
+      .step(CLOUD_BOUNDS.scale.step)
+      .name("Cloud min scale")
+      .onChange((minScale: number) => setClouds({ minScale }));
+
+    folder
+      .add(controls, "maxScale", CLOUD_BOUNDS.scale.min, CLOUD_BOUNDS.scale.max)
+      .step(CLOUD_BOUNDS.scale.step)
+      .name("Cloud max scale")
+      .onChange((maxScale: number) => setClouds({ maxScale }));
+
+    folder
+      .add(
+        controls,
+        "minRotation",
+        CLOUD_BOUNDS.rotation.min,
+        CLOUD_BOUNDS.rotation.max,
+      )
+      .step(CLOUD_BOUNDS.rotation.step)
+      .name("Cloud min rotation")
+      .onChange((minRotation: number) => setClouds({ minRotation }));
+
+    folder
+      .add(
+        controls,
+        "maxRotation",
+        CLOUD_BOUNDS.rotation.min,
+        CLOUD_BOUNDS.rotation.max,
+      )
+      .step(CLOUD_BOUNDS.rotation.step)
+      .name("Cloud max rotation")
+      .onChange((maxRotation: number) => setClouds({ maxRotation }));
+
+    folder
+      .add(
+        controls,
+        "minHeight",
+        CLOUD_BOUNDS.height.min,
+        CLOUD_BOUNDS.height.max,
+      )
+      .step(CLOUD_BOUNDS.height.step)
+      .name("Cloud min height")
+      .onChange((minHeight: number) => setClouds({ minHeight }));
+
+    folder
+      .add(
+        controls,
+        "maxHeight",
+        CLOUD_BOUNDS.height.min,
+        CLOUD_BOUNDS.height.max,
+      )
+      .step(CLOUD_BOUNDS.height.step)
+      .name("Cloud max height")
+      .onChange((maxHeight: number) => setClouds({ maxHeight }));
+
+    folder
+      .add(
+        controls,
+        "minSpeedMultiplier",
+        CLOUD_BOUNDS.speedMultiplier.min,
+        CLOUD_BOUNDS.speedMultiplier.max,
+      )
+      .step(CLOUD_BOUNDS.speedMultiplier.step)
+      .name("Cloud min speed")
+      .onChange((minSpeedMultiplier: number) =>
+        setClouds({ minSpeedMultiplier }),
+      );
+
+    folder
+      .add(
+        controls,
+        "maxSpeedMultiplier",
+        CLOUD_BOUNDS.speedMultiplier.min,
+        CLOUD_BOUNDS.speedMultiplier.max,
+      )
+      .step(CLOUD_BOUNDS.speedMultiplier.step)
+      .name("Cloud max speed")
+      .onChange((maxSpeedMultiplier: number) =>
+        setClouds({ maxSpeedMultiplier }),
+      );
+
+    folder
+      .add(controls, "castShadow")
+      .name("Cloud cast shadow")
+      .onChange((castShadow: boolean) => setClouds({ castShadow }));
+
+    folder
+      .add(controls, "receiveShadow")
+      .name("Cloud receive shadow")
+      .onChange((receiveShadow: boolean) => setClouds({ receiveShadow }));
+  });
 }

src/utils/debug/Debug.ts

@@ -18,6 +18,7 @@ interface DebugEvents {
 
 const DEBUG_FOLDER_ORDER = [
   "Lighting",
+  "Dynamic Wind",
   "Environment",
   "Game",
   "Interaction",

src/world/Lighting.tsx

@@ -22,9 +22,9 @@ import {
 import { useDebugFolder } from "@/hooks/debug/useDebugFolder";
 
 const SHADOW_MAP_SIZE = 2048;
-const SHADOW_CAMERA_SIZE = 100;
+const SHADOW_CAMERA_SIZE = 170;
 const SHADOW_CAMERA_NEAR = 0.5;
-const SHADOW_CAMERA_FAR = 200;
+const SHADOW_CAMERA_FAR = 300;
 
 type LightingState = {
   ambientColor: string;