wip mission 2 refine

docs/technical/map-lod.md

@@ -25,7 +25,7 @@ Current behavior:
 | -------- | ------------------: | --- | ------------------------------------- |
 | `low`    |                 10m | On  | Always use `*-LOD` models             |
 | `medium` |                 20m | On  | Always use `*-LOD` models             |
-| `high`   |                 35m | Off | Regular model up to 10m, then `*-LOD` |
+| `high`   | Current default 50m | Off | Regular model up to 10m, then `*-LOD` |
 | `ultra`  |                 50m | Off | Regular model up to 20m, then `*-LOD` |
 
 The unload distance stays slightly larger than the load distance to avoid rapid mount/unmount flickering when the player stands near a boundary.

docs/technical/map-performance.md

@@ -158,11 +158,9 @@ Current runtime values:
 
 ```txt
 chunkSize: 35
-low load/unload radius: 10m / 18m
-medium load/unload radius: 20m / 30m
-high load/unload radius: 35m / 45m
-ultra load/unload radius: 50m / 65m
-updateInterval: 250ms
+loadRadius: 45
+unloadRadius: 45
+updateInterval: 350ms
 fog near: 30
 fog far: 45
 ```

docs/technical/scene-runtime.md

@@ -74,32 +74,22 @@ It tracks:
 - `gameMapLoaded`: map data and visible map nodes settled
 - `gameStageLoaded`: Rapier gameplay stage mounted
 - `showGameStage`: true when the map is ready enough to mount gameplay content
-- `gameplayReady`: true when map, stage, and octree are all ready
+- `shadowsReady`: renderer, shadow lights, and scene matrices have been forced once after the scene is mounted
+- `gameplayReady`: true when map, stage, octree, and the shadow warmup are all ready
 
-The game-scene readiness condition is:
+The base game-scene readiness condition before the shadow warmup is:
 
 ```ts
 showGameStage && gameStageLoaded && octree !== null;
 ```
 
-Shadows are configured once when `Lighting` mounts (renderer `shadowMap.enabled`, sun
-`shadow.autoUpdate = true`, bias and frustum from `SHADOW_CONFIG` in
-`src/data/world/lightingConfig.ts`). The shadow map then refreshes every frame and
-follows the player camera through the sun's `target`. The earlier `SceneShadowWarmup`
-step has been removed — the visible loading overlay no longer waits for a forced
-shadow refresh because `autoUpdate` covers steady-state rendering.
+After that condition is met, `SceneShadowWarmup` runs one final loading step:
 
-### Avoiding global scene remounts
+```txt
+Activation des ombres -> Ombres prêtes -> Gameplay prêt
+```
 
-Heavy stage components (`GameStageContent`, `Player`, dialogues) load assets via
-`useGLTF`/`useTexture` without preload (e.g. `EbikeSpeedometer` calls `useTexture`
-when the bike mounts). To prevent any late suspension from bubbling up to the
-root `<Suspense>` boundary in `src/pages/page.tsx` and unmounting the entire
-world (which would trigger a redundant octree rebuild and shadow re-config), the
-game stage block and the spawn-player block are wrapped in their own
-`<Suspense fallback={null}>` boundaries inside `src/world/World.tsx`. Any new
-sibling that suspends late should be added inside one of these boundaries or get
-its own.
+This keeps the loading overlay visible until the renderer shadow map, shadow-casting light, and mounted scene graph have all been explicitly refreshed.
 
 The debug physics scene is ready when:
 

docs/technical/three-debugging.md

@@ -20,63 +20,3 @@ If DevTools still opens a bundled file, stop the dev server, clear Vite's cached
 rm -rf node_modules/.vite
 npm run dev:three-debug
 ```
-
-## Visual debug toggles
-
-The `Debug` folder of the runtime debug GUI exposes inspection toggles backed by
-`src/managers/stores/useDebugVisualsStore.ts`:
-
-- **Show Player Model** — renders the main character GLTF in front of the
-  current camera (`src/components/debug/DebugPlayerModel.tsx`). The model is
-  positioned in camera-local space so it stays visible regardless of pitch.
-- **Show Octree** — overlays the collision octree as colored line segments,
-  one wireframe per spatial cell (`src/components/debug/DebugOctreeVisualization.tsx`).
-  Cells are colored by depth. Use it to inspect collision precision around
-  doorways or passages.
-- **Octree Max Depth** — caps how deep the octree visualization recurses
-  (default 6). Increase to see leaf-level subdivisions; decrease to keep the
-  scene readable when the tree is large.
-
-The octree visualization reads the live `Octree` instance from `World`. The
-mesh uses `depthTest: false` and a high `renderOrder`, so cells stay visible
-through opaque geometry.
-
-## Shadow rendering intermittence
-
-Shadows occasionally failed to render on initial load and could disappear
-mid-session even though the `Lighting` configuration ran to completion. The
-fix has two layers:
-
-### Per-frame refresh (steady state)
-
-The sun follows the camera, so its world matrix is dirty every frame. With
-`shadow.autoUpdate` alone, three.js can skip the shadow map re-render on a
-frame where the matrix update has happened but the renderer's internal dirty
-tracking does not pick it up. To prevent that, `Lighting.useFrame` sets
-`sun.shadow.needsUpdate = true` after the per-frame matrix updates. Shadow
-config is centralized in `src/data/world/lightingConfig.ts` (`bias=0`,
-`normalBias=0`, `cameraSize=95`).
-
-### Mount-time shadow map reallocation (`useShadowMapWarmup`)
-
-The merged static map and other GLTFs mount imperatively after `Lighting`,
-so the shadow render target ends up linked to a renderer state that pre-dates
-the final scene. Materials compiled at that point bake a "no shadow map"
-permutation into their shader program and silently fail to render shadows
-until a WebGL context-restore cycle (the kind triggered by Chrome DevTools
-in `?debug` runs) reallocates everything.
-
-`src/hooks/three/useShadowMapWarmup.ts` replays that cycle programmatically
-without the cost of a full context loss. It runs a `useFrame` watchdog that
-samples the scene mesh count every 6 frames; once the count has been stable
-for ~1 s (or after a 5 s safety cap), it:
-
-1. Disposes the directional light shadow map and nulls it. three.js
-   reallocates the render target on the next render at the configured
-   `mapSize`.
-2. Marks every material's `needsUpdate = true`, forcing a shader recompile
-   that rebinds every program to the freshly created shadow sampler.
-3. Forces a single shadow pass and invalidates the renderer.
-
-The watchdog runs once per mount and adds a single traversal every 6 frames
-during the warmup window, after which it self-terminates.

src/App.tsx

@@ -1,15 +1,7 @@
 import { RouterProvider } from "@tanstack/react-router";
-import { SiteMobileBlocker } from "@/components/site/SiteMobileBlocker";
-import { useIsMobile } from "@/hooks/ui/useIsMobile";
 import { router } from "@/router";
 
 function App(): React.JSX.Element {
-  const isMobile = useIsMobile();
-
-  if (isMobile) {
-    return <SiteMobileBlocker />;
-  }
-
   return <RouterProvider router={router} />;
 }
 

src/components/debug/DebugOctreeVisualization.tsx

@@ -1,173 +0,0 @@
-import { useMemo } from "react";
-import { Box3, BufferAttribute, BufferGeometry } from "three";
-import type { Octree } from "three-stdlib";
-import {
-  LA_FABRIK_CENTER,
-  isInsideLaFabrikFootprint,
-} from "@/data/world/laFabrikConfig";
-import { useDebugVisualsStore } from "@/managers/stores/useDebugVisualsStore";
-
-interface DebugOctreeVisualizationProps {
-  octree: Octree | null;
-}
-
-interface OctreeNodeBox {
-  box: Box3;
-  depth: number;
-  triangleCount: number;
-  isLeaf: boolean;
-}
-
-interface CollectOptions {
-  minDepth: number;
-  maxDepth: number;
-  leavesOnly: boolean;
-  fabrikOnly: boolean;
-}
-
-const FABRIK_FILTER_PADDING = 1.5;
-const FABRIK_FILTER_VERTICAL = 8;
-
-const BOX_VERTEX_INDEX_PAIRS: ReadonlyArray<readonly [number, number]> = [
-  [0, 1],
-  [1, 3],
-  [3, 2],
-  [2, 0],
-  [4, 5],
-  [5, 7],
-  [7, 6],
-  [6, 4],
-  [0, 4],
-  [1, 5],
-  [2, 6],
-  [3, 7],
-];
-
-function boxIntersectsFabrik(box: Box3): boolean {
-  if (box.max.y < LA_FABRIK_CENTER[1] - FABRIK_FILTER_VERTICAL) return false;
-  if (box.min.y > LA_FABRIK_CENTER[1] + FABRIK_FILTER_VERTICAL) return false;
-
-  // Sample box corners + center on XZ plane against the rotated fabrik footprint.
-  const samples: ReadonlyArray<readonly [number, number]> = [
-    [box.min.x, box.min.z],
-    [box.min.x, box.max.z],
-    [box.max.x, box.min.z],
-    [box.max.x, box.max.z],
-    [(box.min.x + box.max.x) * 0.5, (box.min.z + box.max.z) * 0.5],
-  ];
-  for (const [x, z] of samples) {
-    if (isInsideLaFabrikFootprint(x, z, FABRIK_FILTER_PADDING)) return true;
-  }
-  return false;
-}
-
-function collectOctreeBoxes(
-  node: Octree,
-  options: CollectOptions,
-  depth = 0,
-  acc: OctreeNodeBox[] = [],
-): OctreeNodeBox[] {
-  if (depth > options.maxDepth) return acc;
-
-  const isLeaf = node.subTrees.length === 0;
-  const passesDepth = depth >= options.minDepth;
-  const passesLeafFilter = !options.leavesOnly || isLeaf;
-  const hasTriangles = node.triangles.length > 0;
-  const passesFabrikFilter =
-    !options.fabrikOnly || boxIntersectsFabrik(node.box);
-
-  if (passesDepth && passesLeafFilter && hasTriangles && passesFabrikFilter) {
-    acc.push({
-      box: node.box,
-      depth,
-      triangleCount: node.triangles.length,
-      isLeaf,
-    });
-  }
-
-  for (const sub of node.subTrees) {
-    collectOctreeBoxes(sub, options, depth + 1, acc);
-  }
-
-  return acc;
-}
-
-function buildOctreeLineGeometry(
-  nodes: readonly OctreeNodeBox[],
-): BufferGeometry {
-  const positionsBuffer = new Float32Array(
-    nodes.length * BOX_VERTEX_INDEX_PAIRS.length * 2 * 3,
-  );
-
-  const corners: [number, number, number][] = Array.from({ length: 8 }, () => [
-    0, 0, 0,
-  ]);
-
-  let positionsOffset = 0;
-
-  for (const node of nodes) {
-    const { min, max } = node.box;
-
-    corners[0] = [min.x, min.y, min.z];
-    corners[1] = [max.x, min.y, min.z];
-    corners[2] = [min.x, max.y, min.z];
-    corners[3] = [max.x, max.y, min.z];
-    corners[4] = [min.x, min.y, max.z];
-    corners[5] = [max.x, min.y, max.z];
-    corners[6] = [min.x, max.y, max.z];
-    corners[7] = [max.x, max.y, max.z];
-
-    for (const [a, b] of BOX_VERTEX_INDEX_PAIRS) {
-      const ca = corners[a]!;
-      const cb = corners[b]!;
-      positionsBuffer[positionsOffset++] = ca[0];
-      positionsBuffer[positionsOffset++] = ca[1];
-      positionsBuffer[positionsOffset++] = ca[2];
-      positionsBuffer[positionsOffset++] = cb[0];
-      positionsBuffer[positionsOffset++] = cb[1];
-      positionsBuffer[positionsOffset++] = cb[2];
-    }
-  }
-
-  const geometry = new BufferGeometry();
-  geometry.setAttribute("position", new BufferAttribute(positionsBuffer, 3));
-  return geometry;
-}
-
-export function DebugOctreeVisualization({
-  octree,
-}: DebugOctreeVisualizationProps): React.JSX.Element | null {
-  const showOctree = useDebugVisualsStore((state) => state.showOctree);
-  const minDepth = useDebugVisualsStore((state) => state.octreeMinDepth);
-  const maxDepth = useDebugVisualsStore((state) => state.octreeMaxDepth);
-  const leavesOnly = useDebugVisualsStore((state) => state.octreeLeavesOnly);
-  const opacity = useDebugVisualsStore((state) => state.octreeOpacity);
-  const fabrikOnly = useDebugVisualsStore((state) => state.octreeFabrikOnly);
-
-  const geometry = useMemo(() => {
-    if (!octree || !showOctree) return null;
-    const boxes = collectOctreeBoxes(octree, {
-      minDepth,
-      maxDepth,
-      leavesOnly,
-      fabrikOnly,
-    });
-    if (boxes.length === 0) return null;
-    return buildOctreeLineGeometry(boxes);
-  }, [fabrikOnly, leavesOnly, maxDepth, minDepth, octree, showOctree]);
-
-  if (!geometry) return null;
-
-  return (
-    <lineSegments frustumCulled={false} renderOrder={999}>
-      <primitive object={geometry} attach="geometry" />
-      <lineBasicMaterial
-        color="#22d3ee"
-        depthTest={false}
-        depthWrite={false}
-        transparent
-        opacity={opacity}
-      />
-    </lineSegments>
-  );
-}

src/components/debug/DebugPlayerModel.tsx

@@ -1,58 +0,0 @@
-import { useEffect, useMemo, useRef } from "react";
-import * as THREE from "three";
-import { useFrame } from "@react-three/fiber";
-import { useGLTF } from "@react-three/drei";
-
-const MODEL_PATH = "/models/persoprincipal/model.gltf";
-// Offset expressed in the camera's local space:
-// - x: horizontal (0 = centered)
-// - y: vertical relative to camera eye (negative = below)
-// - z: forward (negative = in front of the camera)
-const LOCAL_OFFSET = new THREE.Vector3(0, -1, -2.5);
-
-const eulerHelper = new THREE.Euler();
-
-export function DebugPlayerModel(): React.JSX.Element {
-  const groupRef = useRef<THREE.Group>(null);
-  const { scene } = useGLTF(MODEL_PATH);
-
-  const model = useMemo(() => {
-    const cloned = scene.clone(true);
-    cloned.traverse((child) => {
-      if (child instanceof THREE.Mesh) {
-        child.castShadow = true;
-        child.receiveShadow = true;
-        child.frustumCulled = false;
-      }
-    });
-    return cloned;
-  }, [scene]);
-
-  useEffect(
-    () => () => {
-      model.clear();
-    },
-    [model],
-  );
-
-  useFrame(({ camera }) => {
-    const group = groupRef.current;
-    if (!group) return;
-
-    // Place the model in front of the camera using its local space so it stays
-    // visible regardless of the camera pitch (top-down ebike view, etc.).
-    group.position.copy(LOCAL_OFFSET).applyMatrix4(camera.matrixWorld);
-
-    // Keep the model upright and aligned with the camera yaw only.
-    eulerHelper.setFromQuaternion(camera.quaternion, "YXZ");
-    group.rotation.set(0, eulerHelper.y, 0);
-  });
-
-  return (
-    <group ref={groupRef} frustumCulled={false}>
-      <primitive object={model} />
-    </group>
-  );
-}
-
-useGLTF.preload(MODEL_PATH);

src/components/ebike/Ebike.tsx

@@ -2,22 +2,17 @@ import { useEffect, useRef, useState, useMemo, useCallback } from "react";
 import * as THREE from "three";
 import { useFrame, useThree } from "@react-three/fiber";
 import { EbikeGPSMap } from "@/components/ebike/EbikeGPSMap";
-import { EbikeSpeedometer } from "@/components/ebike/EbikeSpeedometer";
 import { InteractableObject } from "@/components/three/interaction/InteractableObject";
 import { useLoggedGLTF } from "@/hooks/three/useLoggedGLTF";
 import { useClonedObject } from "@/hooks/three/useClonedObject";
 import { useDebugFolder } from "@/hooks/debug/useDebugFolder";
 import { useEbikeSounds } from "@/hooks/ebike/useEbikeSounds";
-import {
-  getObjectBottomOffset,
-  useTerrainHeightSampler,
-} from "@/hooks/three/useTerrainHeight";
 import { animateCameraTransformTransition } from "@/world/GameCinematics";
 import { useGameStore } from "@/managers/stores/useGameStore";
+import { PLAYER_EYE_HEIGHT } from "@/data/player/playerConfig";
 import {
   EBIKE_CAMERA_TRANSFORM,
   EBIKE_DROP_PLAYER_TRANSFORM,
-  EBIKE_WORLD_SCALE,
   EBIKE_WORLD_ROTATION_Y,
 } from "@/data/ebike/ebikeConfig";
 import type { Vector3Tuple } from "@/types/three/three";
@@ -36,29 +31,12 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
     position: position,
   });
   const model = useClonedObject(scene);
-  const terrainHeight = useTerrainHeightSampler();
-  const parkedPosition = useMemo<Vector3Tuple>(() => {
-    const [x, y, z] = position;
-    const height = terrainHeight.getHeight(x, z) ?? y;
-    const bottomOffset = getObjectBottomOffset(model, [
-      EBIKE_WORLD_SCALE,
-      EBIKE_WORLD_SCALE,
-      EBIKE_WORLD_SCALE,
-    ]);
-
-    return [x, height + bottomOffset, z];
-  }, [model, position, terrainHeight]);
   const movementMode = useGameStore((state) => state.player.movementMode);
   const mainState = useGameStore((state) => state.mainState);
   const ebikeStep = useGameStore((state) => state.ebike.currentStep);
   const setMissionStep = useGameStore((state) => state.setMissionStep);
   const camera = useThree((state) => state.camera);
   const updateEbikeSounds = useEbikeSounds();
-  const repairGameOwnsEbikeModel =
-    mainState === "ebike" &&
-    ebikeStep !== "locked" &&
-    ebikeStep !== "waiting" &&
-    ebikeStep !== "inspected";
 
   // Map active mainState to target repair zone coordinate
   const destPos = useMemo(() => {
@@ -80,19 +58,19 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
     y: number;
     z: number;
   }>({
-    x: parkedPosition[0],
-    y: parkedPosition[1],
-    z: parkedPosition[2],
+    x: position[0],
+    y: position[1],
+    z: position[2],
   });
   const lastGpsUpdatePos = useRef<THREE.Vector3>(
-    new THREE.Vector3(...parkedPosition),
+    new THREE.Vector3(...position),
   );
 
   // Use ref for internal state, and state for debug visualization (to avoid ref access during render)
   const restingPositionRef = useRef<Vector3Tuple>([
-    parkedPosition[0],
-    parkedPosition[1],
-    parkedPosition[2],
+    position[0],
+    position[1] - PLAYER_EYE_HEIGHT,
+    position[2],
   ]);
   const restingRotationRef = useRef<number>(EBIKE_WORLD_ROTATION_Y);
   const forkRef = useRef<THREE.Object3D | null>(null);
@@ -101,27 +79,11 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
   const [showCameraPoints, setShowCameraPoints] = useState(true);
   const [debugRestingPosition, setDebugRestingPosition] =
     useState<Vector3Tuple>([
-      parkedPosition[0],
-      parkedPosition[1],
-      parkedPosition[2],
+      position[0],
+      position[1] - PLAYER_EYE_HEIGHT,
+      position[2],
     ]);
 
-  useEffect(() => {
-    if (movementMode === "ebike") return;
-
-    restingPositionRef.current = parkedPosition;
-    restingRotationRef.current = EBIKE_WORLD_ROTATION_Y;
-    lastGpsUpdatePos.current.set(...parkedPosition);
-
-    if (groupRef.current) {
-      groupRef.current.position.set(...parkedPosition);
-      groupRef.current.rotation.set(0, EBIKE_WORLD_ROTATION_Y, 0);
-    }
-
-    window.ebikeParkedPosition = parkedPosition;
-    window.ebikeParkedRotation = EBIKE_WORLD_ROTATION_Y;
-  }, [movementMode, parkedPosition]);
-
   useEffect(() => {
     if (model) {
       const fork = model.getObjectByName("fourche");
@@ -131,17 +93,6 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
     }
   }, [model]);
 
-  useEffect(() => {
-    if (!model) return;
-
-    model.traverse((child) => {
-      if (child instanceof THREE.Mesh) {
-        child.castShadow = true;
-        child.receiveShadow = true;
-      }
-    });
-  }, [model]);
-
   useEffect(() => {
     window.ebikeVisualGroup = groupRef;
     window.ebikeParkedPosition = restingPositionRef.current;
@@ -218,30 +169,16 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
     debugRestingPosition[1] + EBIKE_DROP_PLAYER_TRANSFORM.position[1],
     debugRestingPosition[2] + EBIKE_DROP_PLAYER_TRANSFORM.position[2],
   ];
-  const interactionLabel =
-    mainState === "ebike"
-      ? "Réparer l'e-bike"
-      : movementMode === "walk"
-        ? "Monter sur le bike"
-        : "Descendre du bike";
 
   const handleInteract = useCallback((): void => {
     if (window.ebikeBreakdownActive === true) return;
 
     if (movementMode === "walk") {
-      if (
-        mainState === "ebike" &&
-        (ebikeStep === "locked" || ebikeStep === "waiting")
-      ) {
+      if (mainState === "ebike" && ebikeStep === "waiting") {
         setMissionStep("ebike", "inspected");
         return;
       }
 
-      if (mainState === "ebike" && ebikeStep === "inspected") {
-        setMissionStep("ebike", "fragmented");
-        return;
-      }
-
       const cameraOffset = new THREE.Vector3(
         ...EBIKE_CAMERA_TRANSFORM.position,
       );
@@ -321,51 +258,51 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
 
   return (
     <>
-      {!repairGameOwnsEbikeModel ? (
-        <group
-          ref={groupRef}
-          position={parkedPosition}
-          rotation={[0, EBIKE_WORLD_ROTATION_Y, 0]}
-          scale={EBIKE_WORLD_SCALE}
+      <group
+        ref={groupRef}
+        position={position}
+        rotation={[0, EBIKE_WORLD_ROTATION_Y, 0]}
+      >
+        <primitive object={model} />
+        <InteractableObject
+          kind="trigger"
+          label={
+            mainState === "ebike" && ebikeStep === "waiting"
+              ? "Inspecter l'e-bike"
+              : movementMode === "walk"
+                ? "Monter sur le bike"
+                : "Descendre du bike"
+          }
+          position={position}
+          radius={15}
+          onPress={handleInteract}
         >
-          <primitive object={model} />
-          <InteractableObject
-            kind="trigger"
-            label={interactionLabel}
-            position={parkedPosition}
-            radius={5}
-            onPress={handleInteract}
-          >
-            <mesh>
-              <boxGeometry args={[8, 9, 2]} />
-              <meshBasicMaterial colorWrite={false} depthWrite={false} />
-            </mesh>
-          </InteractableObject>
+          <mesh>
+            <boxGeometry args={[10, 13, 2]} />
+            <meshBasicMaterial colorWrite={false} depthWrite={false} />
+          </mesh>
+        </InteractableObject>
 
-          {/* Dynamic 3D GPS Dashboard Screen */}
-          <group position={[0, 7, 0]} rotation={[0, 90, 0]}>
-            <EbikeGPSMap
-              width={0.8}
-              height={0.8}
-              startPos={gpsStartPos}
-              destPos={destPos}
-              mapImageUrl="/assets/world/gps/map_background.png"
-              worldBounds={{
-                minX: -166,
-                maxX: 163,
-                minZ: -142,
-                maxZ: 138,
-              }}
-              zoom={4}
-            />
-          </group>
-          <group position={[0, 6.35, 0]} rotation={[0, 90, 0]}>
-            <EbikeSpeedometer />
-          </group>
+        {/* Dynamic 3D GPS Dashboard Screen */}
+        <group position={[0, 7, 0]} rotation={[0, 90, 0]}>
+          <EbikeGPSMap
+            width={0.8}
+            height={0.8}
+            startPos={gpsStartPos}
+            destPos={destPos}
+            mapImageUrl="/assets/world/gps/map_background.png"
+            worldBounds={{
+              minX: -166,
+              maxX: 163,
+              minZ: -142,
+              maxZ: 138,
+            }}
+            zoom={4}
+          />
         </group>
-      ) : null}
+      </group>
 
-      {showCameraPoints && !repairGameOwnsEbikeModel && (
+      {showCameraPoints && (
         <>
           <mesh position={camPointPos}>
             <sphereGeometry args={[0.3, 16, 16]} />

src/components/ebike/EbikeGPSMap.tsx

@@ -89,8 +89,6 @@ export interface EbikeGPSMapProps {
    * Default: 1
    */
   zoom?: number;
-
-  renderOrder?: number;
 }
 
 /**
@@ -109,7 +107,6 @@ export const EbikeGPSMap: React.FC<EbikeGPSMapProps> = ({
   position = [0, 0, 0],
   canvasSize = 1024,
   zoom = 1,
-  renderOrder = 10_000,
 }) => {
   const [waypoints, setWaypoints] = useState<Waypoint[]>([]);
   const [mapImage, setMapImage] = useState<
@@ -509,13 +506,12 @@ export const EbikeGPSMap: React.FC<EbikeGPSMapProps> = ({
   }, [draw]);
 
   return (
-    <mesh position={position} renderOrder={renderOrder}>
+    <mesh castShadow receiveShadow position={position}>
       <planeGeometry args={[width, height]} />
       <meshBasicMaterial
         toneMapped={false}
         transparent={true}
         opacity={1}
-        depthTest={false}
         depthWrite={false}
         side={THREE.DoubleSide}
       >

src/components/ebike/EbikeSpeedometer.tsx

@@ -1,90 +0,0 @@
-import { useEffect, useRef } from "react";
-import { useFrame } from "@react-three/fiber";
-import { useTexture } from "@react-three/drei";
-import * as THREE from "three";
-
-const SPEEDOMETER_DIAL_TEXTURE = "/assets/world/gps/cadran.png";
-const SPEEDOMETER_NEEDLE_TEXTURE = "/assets/world/gps/fleche.png";
-const SPEEDOMETER_MIN_ANGLE = Math.PI / 2;
-const SPEEDOMETER_MAX_ANGLE = -Math.PI / 2;
-const SPEEDOMETER_RENDER_ORDER = 10_000;
-
-interface EbikeSpeedometerProps {
-  width?: number;
-  height?: number;
-}
-
-export function EbikeSpeedometer({
-  width = 0.9,
-  height = 0.5,
-}: EbikeSpeedometerProps): React.JSX.Element {
-  const needleGroupRef = useRef<THREE.Group>(null);
-  const speedFactorRef = useRef(0);
-  const [dialTexture, needleTexture] = useTexture([
-    SPEEDOMETER_DIAL_TEXTURE,
-    SPEEDOMETER_NEEDLE_TEXTURE,
-  ]) as [THREE.Texture, THREE.Texture];
-  const needleWidth = width * 0.68;
-  const needleHeight = needleWidth / 2;
-
-  useEffect(() => {
-    [dialTexture, needleTexture].forEach((texture) => {
-      texture.colorSpace = THREE.SRGBColorSpace;
-      texture.needsUpdate = true;
-    });
-  }, [dialTexture, needleTexture]);
-
-  useFrame((_, delta) => {
-    const targetSpeedFactor = THREE.MathUtils.clamp(
-      window.ebikeSpeedFactor ?? 0,
-      0,
-      1,
-    );
-    speedFactorRef.current = THREE.MathUtils.lerp(
-      speedFactorRef.current,
-      targetSpeedFactor,
-      Math.min(1, delta * 10),
-    );
-
-    if (needleGroupRef.current) {
-      needleGroupRef.current.rotation.z = THREE.MathUtils.lerp(
-        SPEEDOMETER_MIN_ANGLE,
-        SPEEDOMETER_MAX_ANGLE,
-        speedFactorRef.current,
-      );
-    }
-  });
-
-  return (
-    <group renderOrder={SPEEDOMETER_RENDER_ORDER}>
-      <mesh renderOrder={SPEEDOMETER_RENDER_ORDER}>
-        <planeGeometry args={[width, height]} />
-        <meshBasicMaterial
-          map={dialTexture}
-          transparent
-          depthTest={false}
-          depthWrite={false}
-          toneMapped={false}
-          side={THREE.DoubleSide}
-        />
-      </mesh>
-
-      <group ref={needleGroupRef} position={[0, -height * 0.38, 0.002]}>
-        <mesh
-          position={[0, needleHeight / 2, 0]}
-          renderOrder={SPEEDOMETER_RENDER_ORDER + 1}
-        >
-          <planeGeometry args={[needleWidth, needleHeight]} />
-          <meshBasicMaterial
-            map={needleTexture}
-            transparent
-            depthTest={false}
-            depthWrite={false}
-            toneMapped={false}
-            side={THREE.DoubleSide}
-          />
-        </mesh>
-      </group>
-    </group>
-  );
-}

src/components/game/EbikeIntroSequence.tsx

@@ -1,13 +1,11 @@
 import { useEffect, useRef, useState } from "react";
-import * as THREE from "three";
 import { MissionNotification } from "@/components/ui/MissionNotification";
 import {
   EBIKE_BREAKDOWN_DIALOGUE_DELAY_MS,
   EBIKE_BREAKDOWN_DIALOGUE_ID,
-  EBIKE_INTRO_BREAKDOWN_DISTANCE,
+  EBIKE_INTRO_RIDE_DURATION_MS,
   EBIKE_SOUNDS,
 } from "@/data/ebike/ebikeConfig";
-import { INTRO_MISSION_NOTIFICATION_IMAGE_PATH } from "@/data/gameplay/missionNotifications";
 import { AudioManager } from "@/managers/AudioManager";
 import { useGameStore } from "@/managers/stores/useGameStore";
 import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
@@ -20,9 +18,6 @@ export function EbikeIntroSequence(): React.JSX.Element | null {
   const completeIntro = useGameStore((state) => state.completeIntro);
   const [breakdownDialogueDone, setBreakdownDialogueDone] = useState(false);
   const hasStartedBreakdown = useRef(false);
-  const rideDistance = useRef(0);
-  const lastRidePosition = useRef<THREE.Vector3 | null>(null);
-  const currentRidePosition = useRef(new THREE.Vector3());
 
   useEffect(() => {
     if (introStep !== "await-ebike-mount" || movementMode !== "ebike") return;
@@ -31,45 +26,16 @@ export function EbikeIntroSequence(): React.JSX.Element | null {
   }, [introStep, movementMode, setIntroStep]);
 
   useEffect(() => {
-    if (introStep !== "ebike-intro-ride") return;
+    if (introStep !== "ebike-intro-ride") return undefined;
 
-    rideDistance.current = 0;
-    lastRidePosition.current = null;
-  }, [introStep]);
+    const timeoutId = window.setTimeout(() => {
+      setIntroStep("ebike-breakdown");
+    }, EBIKE_INTRO_RIDE_DURATION_MS);
 
-  useEffect(() => {
-    if (introStep !== "ebike-intro-ride" || movementMode !== "ebike") {
-      return undefined;
-    }
-
-    let animationFrameId = 0;
-    const tick = () => {
-      const parkedPosition = window.ebikeParkedPosition;
-      if (parkedPosition) {
-        currentRidePosition.current.set(...parkedPosition);
-        if (!lastRidePosition.current) {
-          lastRidePosition.current = currentRidePosition.current.clone();
-        } else {
-          rideDistance.current += currentRidePosition.current.distanceTo(
-            lastRidePosition.current,
-          );
-          lastRidePosition.current.copy(currentRidePosition.current);
-        }
-
-        if (rideDistance.current >= EBIKE_INTRO_BREAKDOWN_DISTANCE) {
-          setIntroStep("ebike-breakdown");
-          return;
-        }
-      }
-
-      animationFrameId = window.requestAnimationFrame(tick);
-    };
-
-    animationFrameId = window.requestAnimationFrame(tick);
     return () => {
-      window.cancelAnimationFrame(animationFrameId);
+      window.clearTimeout(timeoutId);
     };
-  }, [introStep, movementMode, setIntroStep]);
+  }, [introStep, setIntroStep]);
 
   useEffect(() => {
     if (introStep !== "ebike-breakdown" || hasStartedBreakdown.current) {
@@ -134,27 +100,14 @@ export function EbikeIntroSequence(): React.JSX.Element | null {
     }
   }, [introStep]);
 
-  if (
-    introStep !== "reveal" &&
-    introStep !== "await-ebike-mount" &&
-    introStep !== "ebike-intro-ride" &&
-    introStep !== "ebike-breakdown"
-  ) {
+  if (introStep !== "await-ebike-mount" && introStep !== "ebike-intro-ride") {
     return null;
   }
 
-  if (introStep === "ebike-breakdown") {
-    return <MissionNotification mission="ebike" />;
-  }
-
   return (
     <MissionNotification
-      imagePath={INTRO_MISSION_NOTIFICATION_IMAGE_PATH}
-      visible={
-        introStep === "reveal" ||
-        introStep === "await-ebike-mount" ||
-        introStep === "ebike-intro-ride"
-      }
+      mission="ebike"
+      visible={introStep === "await-ebike-mount"}
     />
   );
 }

src/components/gameplay/pylon/PylonDownedPylon.tsx

@@ -0,0 +1,127 @@
+import { useRef, useState } from "react";
+import { useFrame } from "@react-three/fiber";
+import { useGLTF } from "@react-three/drei";
+import * as THREE from "three";
+import { InteractableObject } from "@/components/three/interaction/InteractableObject";
+import { useGameStore } from "@/managers/stores/useGameStore";
+import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
+import { playDialogueById } from "@/utils/dialogues/playDialogue";
+import {
+  PYLON_DOWNED_ROTATION,
+  PYLON_NARRATIVE_INTERACT_RADIUS,
+  PYLON_NARRATIVE_DIALOGUES,
+  PYLON_STRAIGHTEN_ANIMATION_DURATION_MS,
+  PYLON_UPRIGHT_ROTATION,
+  PYLON_WORLD_POSITION,
+} from "@/data/gameplay/pylonConfig";
+
+const PYLON_MODEL_PATH = "/models/pylone/model.gltf";
+
+export function PylonDownedPylon(): React.JSX.Element | null {
+  const mainState = useGameStore((state) => state.mainState);
+  const step = useGameStore((state) => state.pylon.currentStep);
+  const setMissionStep = useGameStore((state) => state.setMissionStep);
+  const setCanMove = useGameStore((state) => state.setCanMove);
+  const [isStraightening, setIsStraightening] = useState(false);
+  const groupRef = useRef<THREE.Group>(null);
+  const straightenStartRef = useRef<number | null>(null);
+
+  const { scene } = useGLTF(PYLON_MODEL_PATH);
+
+  useFrame(() => {
+    const group = groupRef.current;
+    if (!group) return;
+
+    if (!isStraightening || straightenStartRef.current === null) {
+      const targetRotation =
+        step === "narrator-outro"
+          ? PYLON_UPRIGHT_ROTATION
+          : PYLON_DOWNED_ROTATION;
+      group.rotation.set(...targetRotation);
+      return;
+    }
+
+    const elapsed = performance.now() - straightenStartRef.current;
+    const t = Math.min(elapsed / PYLON_STRAIGHTEN_ANIMATION_DURATION_MS, 1);
+    const eased = 1 - Math.pow(1 - t, 3);
+    const startEuler = new THREE.Euler(...PYLON_DOWNED_ROTATION);
+
+    group.rotation.set(
+      THREE.MathUtils.lerp(startEuler.x, 0, eased),
+      startEuler.y,
+      THREE.MathUtils.lerp(startEuler.z, 0, eased),
+    );
+  });
+
+  if (mainState !== "pylon") return null;
+
+  if (
+    step === "approaching" ||
+    step === "waiting" ||
+    step === "inspected" ||
+    step === "fragmented" ||
+    step === "scanning" ||
+    step === "repairing" ||
+    step === "reassembling" ||
+    step === "done"
+  ) {
+    return null;
+  }
+
+  const isPylonInteractive = step === "arrived" || step === "npc-return";
+
+  const beginStraighten = (): void => {
+    setIsStraightening(true);
+    straightenStartRef.current = performance.now();
+    setCanMove(false);
+    if (groupRef.current) {
+      groupRef.current.rotation.set(...PYLON_DOWNED_ROTATION);
+    }
+    window.setTimeout(() => {
+      setIsStraightening(false);
+      setCanMove(true);
+      setMissionStep("pylon", "waiting");
+    }, PYLON_STRAIGHTEN_ANIMATION_DURATION_MS);
+  };
+
+  return (
+    <group
+      ref={groupRef}
+      position={PYLON_WORLD_POSITION}
+      rotation={PYLON_DOWNED_ROTATION}
+    >
+      <primitive object={scene.clone(true)} />
+      {isPylonInteractive ? (
+        <InteractableObject
+          kind="trigger"
+          label={
+            step === "arrived" ? "Inspecter le pylône" : "Redresser le pylône"
+          }
+          position={PYLON_WORLD_POSITION}
+          radius={PYLON_NARRATIVE_INTERACT_RADIUS}
+          onPress={() => {
+            if (step === "arrived") {
+              void (async () => {
+                const manifest = await loadDialogueManifest();
+                if (!manifest) return;
+                await playDialogueById(
+                  manifest,
+                  PYLON_NARRATIVE_DIALOGUES.brokenPylon,
+                );
+              })();
+            } else if (step === "npc-return" && !isStraightening) {
+              beginStraighten();
+            }
+          }}
+        >
+          <mesh>
+            <sphereGeometry args={[1, 8, 8]} />
+            <meshBasicMaterial transparent opacity={0} depthWrite={false} />
+          </mesh>
+        </InteractableObject>
+      ) : null}
+    </group>
+  );
+}
+
+useGLTF.preload(PYLON_MODEL_PATH);

src/components/gameplay/pylon/PylonFarmerNPC.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useRef } from "react";
+import * as THREE from "three";
+import { useFrame } from "@react-three/fiber";
+import { InteractableObject } from "@/components/three/interaction/InteractableObject";
+import { useGameStore } from "@/managers/stores/useGameStore";
+import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
+import { playDialogueById } from "@/utils/dialogues/playDialogue";
+import {
+  PYLON_FARMER_NPC_AFTER_POSITION,
+  PYLON_FARMER_NPC_POSITION,
+  PYLON_NARRATIVE_DIALOGUES,
+  PYLON_NARRATIVE_INTERACT_RADIUS,
+} from "@/data/gameplay/pylonConfig";
+
+export function PylonFarmerNPC(): React.JSX.Element | null {
+  const mainState = useGameStore((state) => state.mainState);
+  const step = useGameStore((state) => state.pylon.currentStep);
+  const setMissionStep = useGameStore((state) => state.setMissionStep);
+  const setCanMove = useGameStore((state) => state.setCanMove);
+  const groupRef = useRef<THREE.Group>(null);
+
+  useEffect(() => {
+    if (mainState !== "pylon" || step !== "arrived") return;
+
+    if (!groupRef.current) return;
+    (groupRef.current.userData as Record<string, unknown>).startTime =
+      undefined;
+  }, [mainState, step]);
+
+  useFrame(() => {
+    const group = groupRef.current;
+    if (!group) return;
+
+    if (
+      step === "npc-return" ||
+      step === "waiting" ||
+      step === "narrator-outro"
+    ) {
+      const startTime = (group.userData as Record<string, unknown>)
+        .startTime as number | undefined;
+      if (startTime === undefined) {
+        (group.userData as Record<string, unknown>).startTime =
+          performance.now();
+        group.position.set(...PYLON_FARMER_NPC_AFTER_POSITION);
+        return;
+      }
+      group.position.set(...PYLON_FARMER_NPC_AFTER_POSITION);
+    } else {
+      group.position.set(...PYLON_FARMER_NPC_POSITION);
+    }
+  });
+
+  if (mainState !== "pylon") return null;
+  if (step !== "arrived") return null;
+
+  return (
+    <group ref={groupRef} position={PYLON_FARMER_NPC_POSITION}>
+      <mesh position={[0, 1, 0]}>
+        <capsuleGeometry args={[0.4, 1.2, 6, 12]} />
+        <meshStandardMaterial color="#a16207" />
+      </mesh>
+      <mesh position={[0, 1.95, 0]}>
+        <sphereGeometry args={[0.28, 12, 12]} />
+        <meshStandardMaterial color="#fde68a" />
+      </mesh>
+      <InteractableObject
+        kind="trigger"
+        label="Parler au fermier"
+        position={PYLON_FARMER_NPC_POSITION}
+        radius={PYLON_NARRATIVE_INTERACT_RADIUS}
+        onPress={() => {
+          setCanMove(false);
+          void (async () => {
+            const manifest = await loadDialogueManifest();
+            if (!manifest) {
+              setCanMove(true);
+              setMissionStep("pylon", "npc-return");
+              return;
+            }
+            const audio = await playDialogueById(
+              manifest,
+              PYLON_NARRATIVE_DIALOGUES.farmerHelp,
+            );
+            if (!audio) {
+              setCanMove(true);
+              setMissionStep("pylon", "npc-return");
+              return;
+            }
+            audio.addEventListener(
+              "ended",
+              () => {
+                setCanMove(true);
+                setMissionStep("pylon", "npc-return");
+              },
+              { once: true },
+            );
+          })();
+        }}
+      >
+        <mesh>
+          <sphereGeometry args={[1, 8, 8]} />
+          <meshBasicMaterial transparent opacity={0} depthWrite={false} />
+        </mesh>
+      </InteractableObject>
+    </group>
+  );
+}

src/components/gameplay/pylon/PylonNarrativeFlow.tsx

@@ -0,0 +1,61 @@
+import { useGameStore } from "@/managers/stores/useGameStore";
+import { useDialoguePlayback } from "@/hooks/gameplay/useDialoguePlayback";
+import { ZoneDetection } from "@/components/zone/ZoneDetection";
+import { PylonDownedPylon } from "@/components/gameplay/pylon/PylonDownedPylon";
+import { PylonFarmerNPC } from "@/components/gameplay/pylon/PylonFarmerNPC";
+import { PylonNarratorOutro } from "@/components/gameplay/pylon/PylonNarratorOutro";
+import { PYLON_ARRIVED_ZONE } from "@/data/gameplay/zones";
+import { PYLON_NARRATIVE_DIALOGUES } from "@/data/gameplay/pylonConfig";
+
+export function PylonNarrativeFlow(): React.JSX.Element | null {
+  const mainState = useGameStore((state) => state.mainState);
+  const step = useGameStore((state) => state.pylon.currentStep);
+  const setMissionStep = useGameStore((state) => state.setMissionStep);
+  const completeMission = useGameStore((state) => state.completeMission);
+
+  useDialoguePlayback({
+    enabled: mainState === "pylon" && step === "approaching",
+    dialogueId: PYLON_NARRATIVE_DIALOGUES.electricOutage,
+  });
+
+  useDialoguePlayback({
+    enabled: mainState === "pylon" && step === "arrived",
+    dialogueId: PYLON_NARRATIVE_DIALOGUES.searchCentral,
+  });
+
+  useDialoguePlayback({
+    enabled: mainState === "pylon" && step === "narrator-outro",
+    dialogueId: PYLON_NARRATIVE_DIALOGUES.powerRestored,
+    onComplete: () => completeMission("pylon"),
+  });
+
+  if (mainState !== "pylon") return null;
+
+  if (step === "approaching") {
+    return (
+      <ZoneDetection
+        zone={PYLON_ARRIVED_ZONE}
+        onEnter={() => setMissionStep("pylon", "arrived")}
+      />
+    );
+  }
+
+  if (step === "arrived") {
+    return (
+      <>
+        <PylonDownedPylon />
+        <PylonFarmerNPC />
+      </>
+    );
+  }
+
+  if (step === "npc-return") {
+    return <PylonDownedPylon />;
+  }
+
+  if (step === "narrator-outro") {
+    return <PylonNarratorOutro />;
+  }
+
+  return null;
+}

src/components/gameplay/pylon/PylonNarratorOutro.tsx

@@ -0,0 +1,11 @@
+import { useGameStore } from "@/managers/stores/useGameStore";
+
+export function PylonNarratorOutro(): React.JSX.Element | null {
+  const mainState = useGameStore((state) => state.mainState);
+  const step = useGameStore((state) => state.pylon.currentStep);
+
+  if (mainState !== "pylon") return null;
+  if (step !== "narrator-outro") return null;
+
+  return null;
+}

src/components/site/SiteMobileBlocker.tsx

@@ -20,7 +20,7 @@ export function SiteMobileBlocker(): React.JSX.Element {
       }}
     >
       <img
-        src="/assets/logo.png"
+        src="/assets/logo/logo.jpg"
         alt="Logo Altera"
         style={{ width: 120, height: "auto" }}
       />

src/components/ui/GameUI.tsx

@@ -5,7 +5,6 @@ import { HandTrackingVisualizer } from "@/components/ui/HandTrackingVisualizer";
 import { InteractPrompt } from "@/components/ui/InteractPrompt";
 import { RepairMovementLockIndicator } from "@/components/ui/RepairMovementLockIndicator";
 import { Subtitles } from "@/components/ui/Subtitles";
-import { TalkieDialogueOverlay } from "@/components/ui/TalkieDialogueOverlay";
 
 export function GameUI(): React.JSX.Element {
   return (
@@ -16,7 +15,6 @@ export function GameUI(): React.JSX.Element {
       <InteractPrompt />
       <HandTrackingVisualizer />
       <Subtitles />
-      <TalkieDialogueOverlay />
       <GameSettingsMenu />
     </>
   );

src/components/ui/MissionNotification.tsx

@@ -2,19 +2,14 @@ import { MISSION_NOTIFICATION_IMAGE_PATHS } from "@/data/gameplay/missionNotific
 import type { RepairMissionId } from "@/types/gameplay/repairMission";
 
 interface MissionNotificationProps {
-  mission?: RepairMissionId;
-  imagePath?: string;
+  mission: RepairMissionId;
   visible?: boolean;
 }
 
 export function MissionNotification({
   mission,
-  imagePath,
   visible = true,
 }: MissionNotificationProps): React.JSX.Element {
-  const src =
-    imagePath ?? (mission ? MISSION_NOTIFICATION_IMAGE_PATHS[mission] : "");
-
   return (
     <div
       className={`mission-notification${visible ? "" : " mission-notification--hidden"}`}
@@ -24,7 +19,7 @@ export function MissionNotification({
       <span className="mission-notification__image-wrap">
         <img
           className="mission-notification__image"
-          src={src}
+          src={MISSION_NOTIFICATION_IMAGE_PATHS[mission]}
           alt="Nouvel objectif de mission"
         />
       </span>

src/components/ui/SceneLoadingOverlay.tsx

@@ -1,18 +1,10 @@
-import { useEffect, useState } from "react";
 import { AppLoadingIndicator } from "@/components/ui/AppLoadingIndicator";
 import type { SceneLoadingState } from "@/types/world/sceneLoading";
 
-const LOADING_BACKGROUND_PATH = "/assets/bg-site.webp";
-const LOADING_FRAME_RATE = 12;
-const LOADING_FRAME_INTERVAL_MS = 1000 / LOADING_FRAME_RATE;
-const LOADING_LOGO_FRAMES = [
-  "/assets/loader/Loader-1.png",
-  "/assets/loader/Loader-2.png",
-  "/assets/loader/Loader-3.png",
-  "/assets/loader/Loader-4.png",
-] as const;
+const LOADING_BACKGROUND_PATH = "/assets/bg-site.png";
+const LOADING_LOGO_PATH = "/assets/logo/logo.jpg";
 
-for (const path of [LOADING_BACKGROUND_PATH, ...LOADING_LOGO_FRAMES]) {
+for (const path of [LOADING_BACKGROUND_PATH, LOADING_LOGO_PATH]) {
   const image = new Image();
   image.src = path;
 }
@@ -24,25 +16,8 @@ interface SceneLoadingOverlayProps {
 export function SceneLoadingOverlay({
   state,
 }: SceneLoadingOverlayProps): React.JSX.Element | null {
-  const [logoFrameIndex, setLogoFrameIndex] = useState(0);
   const isReady = state.status === "ready";
   const progress = Math.round(Math.max(0, Math.min(1, state.progress)) * 100);
-  const logoFramePath =
-    LOADING_LOGO_FRAMES[logoFrameIndex] ?? LOADING_LOGO_FRAMES[0];
-
-  useEffect(() => {
-    if (isReady) return undefined;
-
-    const intervalId = window.setInterval(() => {
-      setLogoFrameIndex(
-        (currentIndex) => (currentIndex + 1) % LOADING_LOGO_FRAMES.length,
-      );
-    }, LOADING_FRAME_INTERVAL_MS);
-
-    return () => {
-      window.clearInterval(intervalId);
-    };
-  }, [isReady]);
 
   return (
     <div
@@ -58,7 +33,7 @@ export function SceneLoadingOverlay({
       <img
         alt="La Fabrik Durable"
         className="scene-loading-overlay__logo"
-        src={logoFramePath}
+        src={LOADING_LOGO_PATH}
       />
       <div className="scene-loading-overlay__footer">
         <div className="scene-loading-overlay__meta">

src/components/ui/TalkieDialogueOverlay.tsx

@@ -1,35 +0,0 @@
-import { Suspense } from "react";
-import { Canvas } from "@react-three/fiber";
-import { TalkieModel } from "@/components/ui/talkie/TalkieModel";
-import { TalkieSignalLines } from "@/components/ui/talkie/TalkieSignalLines";
-import { useTalkieDialogueOverlayState } from "@/hooks/ui/useTalkieDialogueOverlayState";
-
-export function TalkieDialogueOverlay(): React.JSX.Element | null {
-  const { isNarratorDialogue, isVisible } = useTalkieDialogueOverlayState();
-
-  if (!isVisible) return null;
-
-  return (
-    <aside
-      className={`talkie-dialogue-overlay${isNarratorDialogue ? " talkie-dialogue-overlay--active" : ""}`}
-      aria-hidden="true"
-    >
-      {isNarratorDialogue ? <TalkieSignalLines side="left" /> : null}
-      {isNarratorDialogue ? <TalkieSignalLines side="right" /> : null}
-      <div className="talkie-dialogue-overlay__model-frame">
-        <Canvas
-          camera={{ position: [0, 0, 4.2], zoom: 56 }}
-          dpr={[1, 1.5]}
-          gl={{ alpha: true, antialias: true }}
-          orthographic
-        >
-          <ambientLight intensity={2.5} />
-          <directionalLight position={[2, 3, 4]} intensity={2.8} />
-          <Suspense fallback={null}>
-            <TalkieModel active={isNarratorDialogue} />
-          </Suspense>
-        </Canvas>
-      </div>
-    </aside>
-  );
-}

src/components/ui/talkie/TalkieModel.tsx

@@ -1,82 +0,0 @@
-import { useEffect, useMemo, useRef } from "react";
-import { useFrame } from "@react-three/fiber";
-import { useGLTF } from "@react-three/drei";
-import * as THREE from "three";
-import gsap from "gsap";
-import type { Vector3Tuple } from "@/types/three/three";
-
-const TALKIE_MODEL_PATH = "/models/talkie/model.gltf";
-const TALKIE_REST_Y = -1.55;
-const TALKIE_ACTIVE_Y = -0.38;
-const TALKIE_BASE_ROTATION: Vector3Tuple = [0.08, -0.52, -0.04];
-const TALKIE_FLOAT_ROTATION_AMPLITUDE = THREE.MathUtils.degToRad(2.2);
-const TALKIE_FLOAT_Y_AMPLITUDE = 0.055;
-
-interface TalkieModelProps {
-  active: boolean;
-}
-
-export function TalkieModel({ active }: TalkieModelProps): React.JSX.Element {
-  const { scene } = useGLTF(TALKIE_MODEL_PATH);
-  const model = useMemo(() => scene.clone(true), [scene]);
-  const groupRef = useRef<THREE.Group>(null);
-  const floatRef = useRef<THREE.Group>(null);
-
-  useEffect(() => {
-    model.traverse((child) => {
-      if (child instanceof THREE.Mesh) {
-        child.castShadow = false;
-        child.receiveShadow = false;
-        child.frustumCulled = false;
-      }
-    });
-  }, [model]);
-
-  useEffect(() => {
-    const group = groupRef.current;
-    if (!group) return;
-
-    gsap.killTweensOf(group.position);
-    gsap.to(group.position, {
-      y: active ? TALKIE_ACTIVE_Y : TALKIE_REST_Y,
-      duration: active ? 0.72 : 0.5,
-      ease: active ? "power3.out" : "power2.out",
-    });
-
-    return () => {
-      gsap.killTweensOf(group.position);
-    };
-  }, [active]);
-
-  useFrame(({ clock }) => {
-    if (!floatRef.current) return;
-
-    const t = clock.getElapsedTime();
-    floatRef.current.position.y = Math.sin(t * 1.2) * TALKIE_FLOAT_Y_AMPLITUDE;
-
-    floatRef.current.rotation.x =
-      TALKIE_BASE_ROTATION[0] +
-      Math.sin(t * 0.7) * TALKIE_FLOAT_ROTATION_AMPLITUDE;
-    floatRef.current.rotation.y =
-      TALKIE_BASE_ROTATION[1] +
-      Math.sin(t * 0.55) * TALKIE_FLOAT_ROTATION_AMPLITUDE;
-    floatRef.current.rotation.z =
-      TALKIE_BASE_ROTATION[2] +
-      Math.sin(t * 0.8) * TALKIE_FLOAT_ROTATION_AMPLITUDE;
-  });
-
-  return (
-    <group ref={groupRef} position={[0, TALKIE_REST_Y, 0]}>
-      <group ref={floatRef} rotation={TALKIE_BASE_ROTATION}>
-        <primitive
-          object={model}
-          position={[0, -2.45, 0]}
-          rotation={[0, -1, 0]}
-          scale={1.2}
-        />
-      </group>
-    </group>
-  );
-}
-
-useGLTF.preload(TALKIE_MODEL_PATH);

src/components/ui/talkie/TalkieSignalLines.tsx

@@ -1,19 +0,0 @@
-interface TalkieSignalLinesProps {
-  side: "left" | "right";
-}
-
-export function TalkieSignalLines({
-  side,
-}: TalkieSignalLinesProps): React.JSX.Element {
-  return (
-    <svg
-      className={`talkie-dialogue-overlay__signals talkie-dialogue-overlay__signals--${side}`}
-      viewBox="0 0 90 120"
-      aria-hidden="true"
-    >
-      <path d="M18 48 C30 58 30 72 18 82" />
-      <path d="M34 34 C56 52 56 78 34 96" />
-      <path d="M52 20 C84 46 84 84 52 110" />
-    </svg>
-  );
-}

src/components/zone/ZoneDetection.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useRef, useState } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import * as THREE from "three";
+import { isDebugEnabled } from "@/utils/debug/isDebugEnabled";
+import type { ZoneConfig } from "@/types/gameplay/zone";
+
+interface ZoneDetectionProps {
+  zone: ZoneConfig;
+  onEnter: () => void;
+  height?: number;
+}
+
+const _cameraPos = new THREE.Vector3();
+
+function ZoneDebugVisual({
+  zone,
+  active,
+}: {
+  zone: ZoneConfig;
+  active: boolean;
+}): React.JSX.Element | null {
+  if (!isDebugEnabled()) return null;
+  return (
+    <group position={zone.position}>
+      <mesh rotation={[-Math.PI / 2, 0, 0]}>
+        <ringGeometry args={[zone.radius - 0.2, zone.radius, 32]} />
+        <meshBasicMaterial
+          color={active ? "#22c55e" : "#fbbf24"}
+          transparent
+          opacity={0.6}
+          side={THREE.DoubleSide}
+        />
+      </mesh>
+      <mesh>
+        <cylinderGeometry
+          args={[zone.radius, zone.radius, zone.height, 16, 1, true]}
+        />
+        <meshBasicMaterial
+          color={active ? "#22c55e" : "#fbbf24"}
+          transparent
+          opacity={0.08}
+          side={THREE.DoubleSide}
+        />
+      </mesh>
+    </group>
+  );
+}
+
+export function ZoneDetection({
+  zone,
+  onEnter,
+  height,
+}: ZoneDetectionProps): React.JSX.Element {
+  const camera = useThree((state) => state.camera);
+  const hasTriggeredRef = useRef(false);
+  const onEnterRef = useRef(onEnter);
+  const [isActive, setIsActive] = useState(false);
+
+  useEffect(() => {
+    onEnterRef.current = onEnter;
+  }, [onEnter]);
+
+  useFrame(() => {
+    if (hasTriggeredRef.current) return;
+
+    camera.getWorldPosition(_cameraPos);
+    const dx = _cameraPos.x - zone.position[0];
+    const dz = _cameraPos.z - zone.position[2];
+    const horizontalDist = Math.sqrt(dx * dx + dz * dz);
+
+    if (horizontalDist > zone.radius) return;
+
+    const zoneHeight = height ?? zone.height;
+    if (_cameraPos.y < zone.position[1] - zoneHeight / 2) return;
+    if (_cameraPos.y > zone.position[1] + zoneHeight / 2) return;
+
+    hasTriggeredRef.current = true;
+    setIsActive(true);
+    onEnterRef.current();
+  });
+
+  return <ZoneDebugVisual zone={zone} active={isActive} />;
+}

src/data/ebike/ebikeConfig.ts

@@ -6,20 +6,19 @@ export interface CameraTransform {
 }
 
 export const EBIKE_CAMERA_TRANSFORM: CameraTransform = {
-  position: [-2.6, 4.5, 0],
+  position: [-3.5, 6, 0],
   rotation: [-10, -90, 0],
 };
 
 export const EBIKE_DROP_PLAYER_TRANSFORM: CameraTransform = {
-  position: [0, 1.3, -2.25],
+  position: [0, 1.5, -3],
   rotation: [0, 0, 0],
 };
 
-export const EBIKE_WORLD_POSITION: Vector3Tuple = [65, 0.8, 72];
-export const EBIKE_WORLD_ROTATION_Y = -2.5;
-export const EBIKE_WORLD_SCALE = 0.35;
+export const EBIKE_WORLD_POSITION: Vector3Tuple = [61.5, 10, 62.4];
+export const EBIKE_WORLD_ROTATION_Y = 2.4107;
 
-export const EBIKE_INTRO_BREAKDOWN_DISTANCE = 15;
+export const EBIKE_INTRO_RIDE_DURATION_MS = 5000;
 export const EBIKE_BREAKDOWN_DIALOGUE_DELAY_MS = 250;
 
 export const EBIKE_MAX_SPEED = 3;

src/data/gameplay/missionNotifications.ts

@@ -1,8 +1,5 @@
 import type { RepairMissionId } from "@/types/gameplay/repairMission";
 
-export const INTRO_MISSION_NOTIFICATION_IMAGE_PATH =
-  "/assets/world/UI/intro-mission-notification.png";
-
 export const MISSION_NOTIFICATION_IMAGE_PATHS: Record<RepairMissionId, string> =
   {
     ebike: "/assets/world/UI/ebike-mission-notification.png",

src/data/gameplay/pylonConfig.ts

@@ -0,0 +1,31 @@
+import type { Vector3Tuple } from "@/types/three/three";
+
+export const PYLON_WORLD_POSITION: Vector3Tuple = [43, 5, 45];
+
+export const PYLON_DOWNED_ROTATION: Vector3Tuple = [0, 0, -1.4];
+
+export const PYLON_UPRIGHT_ROTATION: Vector3Tuple = [0, 0, 0];
+
+export const PYLON_FARMER_NPC_POSITION: Vector3Tuple = [
+  PYLON_WORLD_POSITION[0] - 6,
+  PYLON_WORLD_POSITION[1],
+  PYLON_WORLD_POSITION[2] + 4,
+];
+
+export const PYLON_FARMER_NPC_AFTER_POSITION: Vector3Tuple = [
+  PYLON_WORLD_POSITION[0] + 1,
+  PYLON_WORLD_POSITION[1],
+  PYLON_WORLD_POSITION[2] - 2,
+];
+
+export const PYLON_NARRATIVE_INTERACT_RADIUS = 3.5;
+
+export const PYLON_STRAIGHTEN_ANIMATION_DURATION_MS = 2200;
+
+export const PYLON_NARRATIVE_DIALOGUES = {
+  electricOutage: "narrateur_coupureelec",
+  searchCentral: "narrateur_fouillelecentre",
+  brokenPylon: "narrateur_poteaueleccasse",
+  farmerHelp: "fermier_coupdemain",
+  powerRestored: "narrateur_courantrepare",
+} as const;

src/data/gameplay/repairMissionState.ts

@@ -10,6 +10,9 @@ const REPAIR_MISSION_ID_VALUES: ReadonlySet<string> = new Set(
 
 export const MISSION_STEPS = [
   "locked",
+  "approaching",
+  "arrived",
+  "npc-return",
   "waiting",
   "inspected",
   "fragmented",
@@ -17,6 +20,7 @@ export const MISSION_STEPS = [
   "repairing",
   "reassembling",
   "done",
+  "narrator-outro",
 ] as const satisfies readonly MissionStep[];
 const MISSION_STEP_VALUES: ReadonlySet<string> = new Set(MISSION_STEPS);
 
@@ -28,9 +32,18 @@ export function isMissionStep(value: string): value is MissionStep {
   return MISSION_STEP_VALUES.has(value);
 }
 
-export function getNextMissionStep(step: MissionStep): MissionStep {
+export function getNextMissionStep(
+  step: MissionStep,
+  mission?: RepairMissionId,
+): MissionStep {
   switch (step) {
     case "locked":
+      return mission === "pylon" ? "approaching" : "waiting";
+    case "approaching":
+      return "arrived";
+    case "arrived":
+      return "npc-return";
+    case "npc-return":
       return "waiting";
     case "waiting":
       return "inspected";
@@ -43,16 +56,29 @@ export function getNextMissionStep(step: MissionStep): MissionStep {
     case "repairing":
       return "reassembling";
     case "reassembling":
-    case "done":
       return "done";
+    case "done":
+      return mission === "pylon" ? "narrator-outro" : "done";
+    case "narrator-outro":
+      return "narrator-outro";
   }
 }
 
-export function getPreviousMissionStep(step: MissionStep): MissionStep {
+export function getPreviousMissionStep(
+  step: MissionStep,
+  mission?: RepairMissionId,
+): MissionStep {
   switch (step) {
     case "locked":
-    case "waiting":
       return "locked";
+    case "approaching":
+      return "locked";
+    case "arrived":
+      return "approaching";
+    case "npc-return":
+      return "arrived";
+    case "waiting":
+      return mission === "pylon" ? "npc-return" : "locked";
     case "inspected":
       return "waiting";
     case "fragmented":
@@ -65,5 +91,7 @@ export function getPreviousMissionStep(step: MissionStep): MissionStep {
       return "repairing";
     case "done":
       return "reassembling";
+    case "narrator-outro":
+      return "done";
   }
 }

src/data/gameplay/zones.ts

@@ -0,0 +1,26 @@
+import type { ZoneConfig } from "@/types/gameplay/zone";
+import { PYLON_WORLD_POSITION } from "@/data/gameplay/pylonConfig";
+
+export const PYLON_APPROACH_ZONE: ZoneConfig = {
+  id: "pylon-approach",
+  position: [
+    PYLON_WORLD_POSITION[0] - 20,
+    PYLON_WORLD_POSITION[1],
+    PYLON_WORLD_POSITION[2] - 5,
+  ],
+  radius: 12,
+  height: 18,
+  oneShot: true,
+};
+
+export const PYLON_ARRIVED_ZONE: ZoneConfig = {
+  id: "pylon-arrived",
+  position: [
+    PYLON_WORLD_POSITION[0] - 3,
+    PYLON_WORLD_POSITION[1],
+    PYLON_WORLD_POSITION[2] + 2,
+  ],
+  radius: 8,
+  height: 15,
+  oneShot: true,
+};

src/data/player/playerConfig.ts

@@ -1,11 +1,10 @@
 import type { Vector3Tuple } from "@/types/three/three";
-import { LA_FABRIK_PLAYER_SPAWN } from "@/data/world/laFabrikConfig";
 
 export const PLAYER_EYE_HEIGHT = 1.75;
 export const PLAYER_CAPSULE_RADIUS = 0.35;
 
 export const PLAYER_WALK_SPEED = 5;
-export const PLAYER_EBIKE_SPEED = 30;
+export const PLAYER_EBIKE_SPEED = 20;
 export const PLAYER_AIR_CONTROL_FACTOR = 0.35;
 export const PLAYER_JUMP_SPEED = 9;
 export const PLAYER_GRAVITY = 30;
@@ -15,9 +14,5 @@ export const PLAYER_XZ_DAMPING_FACTOR = 8;
 export const PLAYER_FALL_RESPAWN_Y = -20;
 export const PLAYER_FALL_RESPAWN_DELAY = 3;
 
-export const PLAYER_SPAWN_POSITION_GAME: Vector3Tuple = [
-  LA_FABRIK_PLAYER_SPAWN[0] + 1,
-  LA_FABRIK_PLAYER_SPAWN[1],
-  LA_FABRIK_PLAYER_SPAWN[2] - 1,
-];
+export const PLAYER_SPAWN_POSITION_GAME: Vector3Tuple = [59.5, 10, 64.64];
 export const PLAYER_SPAWN_POSITION_PHYSICS: Vector3Tuple = [0, 3, 0];

src/data/site/siteConfig.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "react";
 
-const BACKGROUND_IMAGE = "/assets/bg-site.webp";
+const BACKGROUND_IMAGE = "/assets/bg-site.png";
 
 export const SITE_CONFIG = {
   backgroundImage: BACKGROUND_IMAGE,

src/data/world/cloudConfig.ts

@@ -19,7 +19,7 @@ export const CLOUD_DEFAULTS = {
   maxRotation: Math.PI * 2,
   minSpeedMultiplier: 0.4,
   maxSpeedMultiplier: 1,
-  castShadow: true,
+  castShadow: false,
   receiveShadow: false,
 };
 

src/data/world/graphicsConfig.ts

@@ -1,3 +1,5 @@
+import { CHUNK_CONFIG } from "@/data/world/chunkStreamingConfig";
+
 export const GRAPHICS_PRESET_KEYS = ["low", "medium", "high", "ultra"] as const;
 
 export type GraphicsPreset = (typeof GRAPHICS_PRESET_KEYS)[number];
@@ -30,8 +32,8 @@ export const GRAPHICS_PRESETS = {
   },
   high: {
     label: "High",
-    chunkLoadRadius: 35,
-    chunkUnloadRadius: 45,
+    chunkLoadRadius: CHUNK_CONFIG.loadRadius,
+    chunkUnloadRadius: CHUNK_CONFIG.unloadRadius,
     fogEnabled: false,
     forceLodModels: false,
     lodHighDetailDistance: 10,

src/data/world/laFabrikConfig.ts

@@ -1,29 +0,0 @@
-import type { Vector3Tuple } from "@/types/three/three";
-
-export const LA_FABRIK_CENTER: Vector3Tuple = [59.4973, 6.2746, 64.6354];
-export const LA_FABRIK_ROTATION_Y = 2.4107;
-export const LA_FABRIK_HALF_EXTENTS = {
-  x: 8.5,
-  z: 7.5,
-} as const;
-export const LA_FABRIK_PLAYER_SPAWN: Vector3Tuple = [59.5, 6.3, 64.64];
-export const LA_FABRIK_INITIAL_LOOK_AT: Vector3Tuple = [58, 7.3, 62.5];
-export const LA_FABRIK_INTERIOR_LIGHT_POSITION: Vector3Tuple = [59.5, 9, 64.64];
-
-export function isInsideLaFabrikFootprint(
-  x: number,
-  z: number,
-  padding = 0,
-): boolean {
-  const dx = x - LA_FABRIK_CENTER[0];
-  const dz = z - LA_FABRIK_CENTER[2];
-  const cos = Math.cos(-LA_FABRIK_ROTATION_Y);
-  const sin = Math.sin(-LA_FABRIK_ROTATION_Y);
-  const localX = dx * cos - dz * sin;
-  const localZ = dx * sin + dz * cos;
-
-  return (
-    Math.abs(localX) <= LA_FABRIK_HALF_EXTENTS.x + padding &&
-    Math.abs(localZ) <= LA_FABRIK_HALF_EXTENTS.z + padding
-  );
-}

src/data/world/lightingConfig.ts

@@ -30,12 +30,3 @@ export const SUN_Y_STEP = 1;
 export const SUN_Z_MIN = -100;
 export const SUN_Z_MAX = 100;
 export const SUN_Z_STEP = 1;
-
-export const SHADOW_CONFIG = {
-  mapSize: 2048,
-  cameraSize: 95,
-  cameraNear: 0.5,
-  cameraFar: 300,
-  bias: 0,
-  normalBias: 0,
-} as const;

src/data/world/octreeCollisionConfig.ts

@@ -1,61 +0,0 @@
-import type { Vector3Tuple } from "@/types/three/three";
-
-export interface OctreeCollisionBox {
-  center: Vector3Tuple;
-  size: Vector3Tuple;
-}
-
-export interface MapOctreeCollisionBox extends OctreeCollisionBox {
-  bottomY: number;
-}
-
-export const MAP_OCTREE_COLLISION_BOXES = {
-  immeuble1: {
-    center: [-0.0308, 5.8389, 0],
-    size: [17.2522, 11.6098, 9.2668],
-    bottomY: 0.034,
-  },
-  maison1: {
-    center: [0, 1.3638, 0.0536],
-    size: [2.7813, 3.022, 2.8609],
-    bottomY: -0.1472,
-  },
-} as const satisfies Record<string, MapOctreeCollisionBox>;
-
-export const LA_FABRIK_INTERIOR_COLLISION_BOXES = [
-  // NOTE: removed — this thin wall (size [0.2, 1.94, 3.71]) sat at x≈-6.93 and
-  // sealed the doorway despite the geometry having a hole there. The fabrik
-  // mesh octree already provides the surrounding wall collision, so this
-  // proxy was both redundant and bug-causing.
-  // {
-  //   center: [-6.9351, 2.278, -0.0001],
-  //   size: [0.2, 1.94, 3.711],
-  // },
-  {
-    center: [0.8026, 0.719, -3.639],
-    size: [4.346, 1.108, 1.181],
-  },
-  {
-    center: [-5.8519, 0.9362, 2.5742],
-    size: [1.67, 1.551, 2.566],
-  },
-  {
-    center: [-2.0627, 1.4875, -1.2243],
-    size: [0.691, 0.723, 0.687],
-  },
-  {
-    center: [-3.5502, 1.4378, -1.2485],
-    size: [1.055, 0.657, 0.563],
-  },
-] as const satisfies readonly OctreeCollisionBox[];
-
-export const CHARACTER_OCTREE_COLLISION_BOX = {
-  center: [0, 0.875, 0],
-  size: [0.62, 1.75, 0.62],
-} as const satisfies OctreeCollisionBox;
-
-export function hasMapOctreeCollisionBox(
-  name: string,
-): name is keyof typeof MAP_OCTREE_COLLISION_BOXES {
-  return name in MAP_OCTREE_COLLISION_BOXES;
-}

src/hooks/debug/useDebugVisualsDebug.ts

@@ -1,66 +0,0 @@
-import { useDebugFolder } from "@/hooks/debug/useDebugFolder";
-import { useDebugVisualsStore } from "@/managers/stores/useDebugVisualsStore";
-
-export function useDebugVisualsDebug(): void {
-  useDebugFolder("Debug", (folder) => {
-    const state = useDebugVisualsStore.getState();
-    const controls = {
-      showPlayerModel: state.showPlayerModel,
-      showOctree: state.showOctree,
-      octreeMinDepth: state.octreeMinDepth,
-      octreeMaxDepth: state.octreeMaxDepth,
-      octreeLeavesOnly: state.octreeLeavesOnly,
-      octreeOpacity: state.octreeOpacity,
-      octreeFabrikOnly: state.octreeFabrikOnly,
-    };
-
-    folder
-      .add(controls, "showPlayerModel")
-      .name("Show Player Model")
-      .onChange((value: boolean) => {
-        useDebugVisualsStore.getState().setShowPlayerModel(value);
-      });
-
-    folder
-      .add(controls, "showOctree")
-      .name("Show Octree")
-      .onChange((value: boolean) => {
-        useDebugVisualsStore.getState().setShowOctree(value);
-      });
-
-    folder
-      .add(controls, "octreeLeavesOnly")
-      .name("Octree Leaves Only")
-      .onChange((value: boolean) => {
-        useDebugVisualsStore.getState().setOctreeLeavesOnly(value);
-      });
-
-    folder
-      .add(controls, "octreeMinDepth", 0, 10, 1)
-      .name("Octree Min Depth")
-      .onChange((value: number) => {
-        useDebugVisualsStore.getState().setOctreeMinDepth(value);
-      });
-
-    folder
-      .add(controls, "octreeMaxDepth", 0, 10, 1)
-      .name("Octree Max Depth")
-      .onChange((value: number) => {
-        useDebugVisualsStore.getState().setOctreeMaxDepth(value);
-      });
-
-    folder
-      .add(controls, "octreeOpacity", 0.05, 1, 0.05)
-      .name("Octree Opacity")
-      .onChange((value: number) => {
-        useDebugVisualsStore.getState().setOctreeOpacity(value);
-      });
-
-    folder
-      .add(controls, "octreeFabrikOnly")
-      .name("Octree Fabrik Only")
-      .onChange((value: boolean) => {
-        useDebugVisualsStore.getState().setOctreeFabrikOnly(value);
-      });
-  });
-}

src/hooks/debug/usePlayerPositionDebug.ts

@@ -0,0 +1,29 @@
+import { useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import type GUI from "lil-gui";
+import { useDebugFolder } from "@/hooks/debug/useDebugFolder";
+
+export function usePlayerPositionDebug(): void {
+  const pos = useRef({ x: 0, y: 0, z: 0 });
+  const controllers = useRef<{ updateDisplay: () => void }[]>([]);
+
+  useDebugFolder("Game", (folder: GUI) => {
+    const sub = folder.addFolder("Player Position");
+    sub.open();
+
+    controllers.current = [
+      sub.add(pos.current, "x").name("X").decimals(2).disable(),
+      sub.add(pos.current, "y").name("Y").decimals(2).disable(),
+      sub.add(pos.current, "z").name("Z").decimals(2).disable(),
+    ];
+  });
+
+  useFrame(() => {
+    const p = window.playerPos;
+    if (!p) return;
+    pos.current.x = p[0];
+    pos.current.y = p[1];
+    pos.current.z = p[2];
+    for (const c of controllers.current) c.updateDisplay();
+  });
+}

src/hooks/gameplay/useDialoguePlayback.ts

@@ -0,0 +1,53 @@
+import { useEffect } from "react";
+import { useGameStore } from "@/managers/stores/useGameStore";
+import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
+import { playDialogueById } from "@/utils/dialogues/playDialogue";
+
+interface UseDialoguePlaybackOptions {
+  enabled: boolean;
+  dialogueId: string | null;
+  onComplete?: () => void;
+}
+
+export function useDialoguePlayback({
+  enabled,
+  dialogueId,
+  onComplete,
+}: UseDialoguePlaybackOptions): void {
+  const setCanMove = useGameStore((state) => state.setCanMove);
+
+  useEffect(() => {
+    if (!enabled || !dialogueId) return undefined;
+
+    let isCancelled = false;
+    setCanMove(false);
+
+    void (async () => {
+      const manifest = await loadDialogueManifest();
+      if (isCancelled || !manifest) {
+        setCanMove(true);
+        return;
+      }
+
+      const audio = await playDialogueById(manifest, dialogueId);
+      if (isCancelled || !audio) {
+        setCanMove(true);
+        return;
+      }
+
+      audio.addEventListener(
+        "ended",
+        () => {
+          setCanMove(true);
+          onComplete?.();
+        },
+        { once: true },
+      );
+    })();
+
+    return () => {
+      isCancelled = true;
+      setCanMove(true);
+    };
+  }, [enabled, dialogueId, onComplete, setCanMove]);
+}

src/hooks/three/useOctreeGraphNode.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 import type { RefObject } from "react";
-import { type Object3D } from "three";
+import type { Object3D } from "three";
 import { Octree } from "three-stdlib";
 import type { OctreeReadyHandler } from "@/types/three/three";
 
@@ -27,7 +27,6 @@ export function useOctreeGraphNode(
 
     const octree = new Octree();
     octree.fromGraphNode(graphNode);
-
     onOctreeReady(octree);
   }, [enabled, graphNodeRef, onOctreeReady, rebuildKey]);
 }

src/hooks/three/useShadowMapWarmup.ts

@@ -1,105 +0,0 @@
-import { useRef } from "react";
-import { useFrame } from "@react-three/fiber";
-import {
-  Material,
-  Mesh,
-  type DirectionalLight,
-  type Scene,
-  type WebGLRenderer,
-} from "three";
-
-interface UseShadowMapWarmupOptions {
-  /** Light whose shadow map should be reallocated once the scene stabilizes. */
-  light: React.RefObject<DirectionalLight | null>;
-  scene: Scene;
-  gl: WebGLRenderer;
-  invalidate: () => void;
-  /** Frames the mesh count must remain unchanged to consider the scene stable. */
-  stableFramesThreshold?: number;
-  /** Hard cap on how long we keep watching, in frames (~5s @60fps). */
-  safetyCapFrames?: number;
-  /** Sample mesh count every N frames to keep the traversal cost negligible. */
-  sampleEveryFrames?: number;
-}
-
-export function useShadowMapWarmup({
-  light,
-  scene,
-  gl,
-  invalidate,
-  stableFramesThreshold = 60,
-  safetyCapFrames = 300,
-  sampleEveryFrames = 6,
-}: UseShadowMapWarmupOptions): void {
-  const meshCountRef = useRef(0);
-  const stableFramesRef = useRef(0);
-  const watchFramesRef = useRef(0);
-  const doneRef = useRef(false);
-
-  useFrame(() => {
-    if (doneRef.current || !light.current) return;
-
-    watchFramesRef.current += 1;
-
-    if (watchFramesRef.current % sampleEveryFrames === 0) {
-      let meshCount = 0;
-      scene.traverse((object) => {
-        if (object instanceof Mesh) meshCount += 1;
-      });
-
-      if (meshCount !== meshCountRef.current) {
-        meshCountRef.current = meshCount;
-        stableFramesRef.current = 0;
-      } else {
-        stableFramesRef.current += sampleEveryFrames;
-      }
-    }
-
-    const stableEnough = stableFramesRef.current >= stableFramesThreshold;
-    const safetyCapReached = watchFramesRef.current >= safetyCapFrames;
-    if (!stableEnough && !safetyCapReached) return;
-
-    doneRef.current = true;
-    reallocateShadowMap(light.current);
-    invalidateAllMaterials(scene);
-    forceShadowPass(gl, scene, light.current);
-    invalidate();
-  });
-}
-
-function reallocateShadowMap(light: DirectionalLight): void {
-  const shadowMap = light.shadow.map;
-  if (!shadowMap) return;
-
-  shadowMap.dispose();
-  light.shadow.map = null;
-}
-
-function invalidateAllMaterials(scene: Scene): void {
-  const seen = new Set<Material>();
-  scene.traverse((object) => {
-    if (!(object instanceof Mesh)) return;
-    const materials = Array.isArray(object.material)
-      ? object.material
-      : [object.material];
-    for (const material of materials) {
-      if (!material || seen.has(material)) continue;
-      seen.add(material);
-      material.needsUpdate = true;
-    }
-  });
-}
-
-function forceShadowPass(
-  gl: WebGLRenderer,
-  scene: Scene,
-  light: DirectionalLight,
-): void {
-  scene.updateMatrixWorld(true);
-  light.target.updateMatrixWorld(true);
-  light.updateMatrixWorld(true);
-  light.shadow.camera.updateMatrixWorld(true);
-  light.shadow.camera.updateProjectionMatrix();
-  light.shadow.needsUpdate = true;
-  gl.shadowMap.needsUpdate = true;
-}

src/hooks/ui/useTalkieDialogueOverlayState.ts

@@ -1,27 +0,0 @@
-import { GAME_STEPS } from "@/data/game/gameStateConfig";
-import { useGameStore } from "@/managers/stores/useGameStore";
-import { useSubtitleStore } from "@/managers/stores/useSubtitleStore";
-
-const TALKIE_FIRST_VISIBLE_STEP = "reveal";
-const TALKIE_FIRST_VISIBLE_STEP_INDEX = GAME_STEPS.indexOf(
-  TALKIE_FIRST_VISIBLE_STEP,
-);
-
-interface TalkieDialogueOverlayState {
-  isNarratorDialogue: boolean;
-  isVisible: boolean;
-}
-
-export function useTalkieDialogueOverlayState(): TalkieDialogueOverlayState {
-  const activeSubtitle = useSubtitleStore((state) => state.activeSubtitle);
-  const mainState = useGameStore((state) => state.mainState);
-  const introStep = useGameStore((state) => state.intro.currentStep);
-  const introStepIndex = GAME_STEPS.indexOf(introStep);
-
-  return {
-    isNarratorDialogue: activeSubtitle?.speaker === "Narrateur",
-    isVisible:
-      mainState !== "intro" ||
-      introStepIndex >= TALKIE_FIRST_VISIBLE_STEP_INDEX,
-  };
-}

src/hooks/world/useWorldSceneLoading.ts

@@ -11,10 +11,13 @@ interface UseWorldSceneLoadingOptions {
 interface UseWorldSceneLoadingResult {
   octree: Octree | null;
   gameplayReady: boolean;
+  shouldWarmUpShadows: boolean;
   showGameStage: boolean;
   handleGameStageLoaded: () => void;
   handleGameMapLoaded: () => void;
   handleOctreeReady: (octree: Octree) => void;
+  handleShadowWarmupReady: () => void;
+  handleShadowWarmupStarted: () => void;
 }
 
 export function useWorldSceneLoading({
@@ -24,13 +27,19 @@ export function useWorldSceneLoading({
   const [octree, setOctree] = useState<Octree | null>(null);
   const [gameMapLoaded, setGameMapLoaded] = useState(false);
   const [gameStageLoaded, setGameStageLoaded] = useState(false);
+  const [shadowsReady, setShadowsReady] = useState(false);
   const showGameStage = sceneMode === "game" && gameMapLoaded;
-  const gameplayReady = showGameStage && gameStageLoaded && octree !== null;
+  const gameSceneReadyForShadows =
+    showGameStage && gameStageLoaded && octree !== null;
+  const shadowWarmupReady = sceneMode === "game" && gameSceneReadyForShadows;
+  const shouldWarmUpShadows = shadowWarmupReady && !shadowsReady;
+  const gameplayReady = gameSceneReadyForShadows && shadowsReady;
   const sceneReady =
     (sceneMode === "game" && gameplayReady) ||
     (sceneMode === "physics" && octree !== null);
 
   const handleGameMapLoaded = useCallback(() => {
+    setShadowsReady(false);
     setGameMapLoaded(true);
   }, []);
 
@@ -45,6 +54,7 @@ export function useWorldSceneLoading({
 
   const handleOctreeReady = useCallback(
     (nextOctree: Octree) => {
+      setShadowsReady(false);
       setOctree(nextOctree);
       onLoadingStateChange?.({
         currentStep: "Collision prête",
@@ -55,6 +65,23 @@ export function useWorldSceneLoading({
     [onLoadingStateChange],
   );
 
+  const handleShadowWarmupStarted = useCallback(() => {
+    onLoadingStateChange?.({
+      currentStep: "Activation des ombres",
+      progress: 0.97,
+      status: "loading",
+    });
+  }, [onLoadingStateChange]);
+
+  const handleShadowWarmupReady = useCallback(() => {
+    setShadowsReady(true);
+    onLoadingStateChange?.({
+      currentStep: "Ombres prêtes",
+      progress: 0.99,
+      status: "loading",
+    });
+  }, [onLoadingStateChange]);
+
   useEffect(() => {
     onLoadingStateChange?.({
       currentStep: "Initialisation du jeu",
@@ -88,9 +115,12 @@ export function useWorldSceneLoading({
   return {
     octree,
     gameplayReady,
+    shouldWarmUpShadows,
     showGameStage,
     handleGameStageLoaded,
     handleGameMapLoaded,
     handleOctreeReady,
+    handleShadowWarmupReady,
+    handleShadowWarmupStarted,
   };
 }

src/index.css

@@ -942,11 +942,11 @@ canvas {
 .scene-loading-overlay__logo {
   position: relative;
   z-index: 1;
-  display: block;
   width: clamp(180px, 28vw, 320px);
   max-height: min(38vh, 320px);
-  height: auto;
-  object-fit: contain;
+  border-radius: 16px;
+  object-fit: cover;
+  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
 }
 
 .scene-loading-overlay__footer {
@@ -1237,114 +1237,6 @@ canvas {
   color: #f9a8d4;
 }
 
-/* Dialogue talkie */
-.talkie-dialogue-overlay {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  z-index: 16;
-  width: clamp(190px, 18vw, 300px);
-  aspect-ratio: 1;
-  pointer-events: none;
-}
-
-.talkie-dialogue-overlay__model-frame {
-  position: absolute;
-  inset: 0;
-  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.55));
-}
-
-.talkie-dialogue-overlay--active .talkie-dialogue-overlay__model-frame {
-  animation: talkie-radio-shake 1s ease-in-out infinite;
-}
-
-.talkie-dialogue-overlay__model-frame canvas {
-  width: 100% !important;
-  height: 100% !important;
-}
-
-.talkie-dialogue-overlay__signals {
-  position: absolute;
-  top: 52%;
-  z-index: 2;
-  width: 38%;
-  height: 52%;
-  overflow: visible;
-  opacity: 0.8;
-  animation: talkie-signal-pulse 1s ease-in-out infinite;
-}
-
-.talkie-dialogue-overlay__signals--left {
-  right: 62%;
-  transform: translateY(-50%) scaleX(-1);
-}
-
-.talkie-dialogue-overlay__signals--right {
-  left: 62%;
-  transform: translateY(-50%);
-}
-
-.talkie-dialogue-overlay__signals path {
-  fill: none;
-  stroke: rgba(235, 244, 255, 0.9);
-  stroke-linecap: round;
-  stroke-width: 5;
-  filter: drop-shadow(0 0 7px rgba(125, 211, 252, 0.72));
-}
-
-.talkie-dialogue-overlay__signals path:nth-child(2) {
-  animation-delay: 90ms;
-  opacity: 0.75;
-}
-
-.talkie-dialogue-overlay__signals path:nth-child(3) {
-  animation-delay: 180ms;
-  opacity: 0.55;
-}
-
-@keyframes talkie-radio-shake {
-  0%,
-  11%,
-  23%,
-  100% {
-    transform: translate3d(0, 0, 0) rotate(0deg);
-  }
-
-  3%,
-  15%,
-  27% {
-    transform: translate3d(-2px, 1px, 0) rotate(-1.7deg);
-  }
-
-  6%,
-  18%,
-  30% {
-    transform: translate3d(2px, -1px, 0) rotate(1.7deg);
-  }
-
-  9%,
-  21%,
-  33% {
-    transform: translate3d(-1px, 0, 0) rotate(-0.8deg);
-  }
-}
-
-@keyframes talkie-signal-pulse {
-  0%,
-  100% {
-    opacity: 0.28;
-  }
-
-  18%,
-  38% {
-    opacity: 0.95;
-  }
-
-  60% {
-    opacity: 0.45;
-  }
-}
-
 /* In-game settings menu */
 .game-settings-menu {
   position: fixed;

src/managers/stores/useDebugVisualsStore.ts

@@ -1,35 +0,0 @@
-import { create } from "zustand";
-
-interface DebugVisualsStore {
-  showPlayerModel: boolean;
-  setShowPlayerModel: (value: boolean) => void;
-  showOctree: boolean;
-  setShowOctree: (value: boolean) => void;
-  octreeMaxDepth: number;
-  setOctreeMaxDepth: (value: number) => void;
-  octreeMinDepth: number;
-  setOctreeMinDepth: (value: number) => void;
-  octreeLeavesOnly: boolean;
-  setOctreeLeavesOnly: (value: boolean) => void;
-  octreeOpacity: number;
-  setOctreeOpacity: (value: number) => void;
-  octreeFabrikOnly: boolean;
-  setOctreeFabrikOnly: (value: boolean) => void;
-}
-
-export const useDebugVisualsStore = create<DebugVisualsStore>((set) => ({
-  showPlayerModel: false,
-  setShowPlayerModel: (showPlayerModel) => set({ showPlayerModel }),
-  showOctree: false,
-  setShowOctree: (showOctree) => set({ showOctree }),
-  octreeMaxDepth: 8,
-  setOctreeMaxDepth: (octreeMaxDepth) => set({ octreeMaxDepth }),
-  octreeMinDepth: 4,
-  setOctreeMinDepth: (octreeMinDepth) => set({ octreeMinDepth }),
-  octreeLeavesOnly: true,
-  setOctreeLeavesOnly: (octreeLeavesOnly) => set({ octreeLeavesOnly }),
-  octreeOpacity: 0.35,
-  setOctreeOpacity: (octreeOpacity) => set({ octreeOpacity }),
-  octreeFabrikOnly: false,
-  setOctreeFabrikOnly: (octreeFabrikOnly) => set({ octreeFabrikOnly }),
-}));

src/managers/stores/useGameStore.ts

@@ -146,7 +146,7 @@ function completeEbikeState(state: GameState): GameStateUpdate {
     },
     pylon: {
       ...state.pylon,
-      currentStep: "waiting",
+      currentStep: "approaching",
     },
   };
 }
@@ -212,7 +212,7 @@ function advanceRepairMissionState(
   state: GameState,
   mission: RepairMissionId,
 ): GameStateUpdate {
-  const nextStep = getNextMissionStep(state[mission].currentStep);
+  const nextStep = getNextMissionStep(state[mission].currentStep, mission);
   if (nextStep === "done") {
     return completeMissionState(state, mission);
   }
@@ -227,7 +227,7 @@ function rewindRepairMissionState(
   return setMissionStepState(
     state,
     mission,
-    getPreviousMissionStep(state[mission].currentStep),
+    getPreviousMissionStep(state[mission].currentStep, mission),
   );
 }
 

src/managers/stores/useSettingsStore.ts

@@ -1,5 +1,4 @@
 import { create } from "zustand";
-import { createJSONStorage, persist } from "zustand/middleware";
 import { AudioManager } from "@/managers/AudioManager";
 import type { AudioCategory } from "@/managers/AudioManager";
 import type { SubtitleLanguage } from "@/types/settings/settings";
@@ -34,8 +33,6 @@ const DEFAULT_SETTINGS: SettingsState = {
   subtitleLanguage: "fr",
 };
 
-const SETTINGS_STORAGE_KEY = "la-fabrik-settings";
-
 function clampVolume(volume: number): number {
   return Math.max(0, Math.min(1, volume));
 }
@@ -49,50 +46,36 @@ function setAudioCategoryVolume(
   return nextVolume;
 }
 
-function applyAudioSettings(
-  settings: Pick<SettingsState, "musicVolume" | "sfxVolume" | "dialogueVolume">,
-): void {
-  AudioManager.getInstance().setCategoryVolume("music", settings.musicVolume);
-  AudioManager.getInstance().setCategoryVolume("sfx", settings.sfxVolume);
+function applyDefaultAudioSettings(): void {
+  AudioManager.getInstance().setCategoryVolume(
+    "music",
+    DEFAULT_SETTINGS.musicVolume,
+  );
+  AudioManager.getInstance().setCategoryVolume(
+    "sfx",
+    DEFAULT_SETTINGS.sfxVolume,
+  );
   AudioManager.getInstance().setCategoryVolume(
     "dialogue",
-    settings.dialogueVolume,
+    DEFAULT_SETTINGS.dialogueVolume,
   );
 }
 
-applyAudioSettings(DEFAULT_SETTINGS);
+applyDefaultAudioSettings();
 
-export const useSettingsStore = create<SettingsStore>()(
-  persist(
-    (set) => ({
-      ...DEFAULT_SETTINGS,
-      setSettingsMenuOpen: (isSettingsMenuOpen) => set({ isSettingsMenuOpen }),
-      setMusicVolume: (volume) =>
-        set({ musicVolume: setAudioCategoryVolume("music", volume) }),
-      setSfxVolume: (volume) =>
-        set({ sfxVolume: setAudioCategoryVolume("sfx", volume) }),
-      setDialogueVolume: (volume) =>
-        set({ dialogueVolume: setAudioCategoryVolume("dialogue", volume) }),
-      setSubtitlesEnabled: (subtitlesEnabled) => set({ subtitlesEnabled }),
-      setSubtitleLanguage: (subtitleLanguage) => set({ subtitleLanguage }),
-      resetSettings: () => {
-        applyAudioSettings(DEFAULT_SETTINGS);
-        set(DEFAULT_SETTINGS);
-      },
-    }),
-    {
-      name: SETTINGS_STORAGE_KEY,
-      storage: createJSONStorage(() => window.localStorage),
-      partialize: (state) => ({
-        dialogueVolume: state.dialogueVolume,
-        musicVolume: state.musicVolume,
-        sfxVolume: state.sfxVolume,
-        subtitleLanguage: state.subtitleLanguage,
-        subtitlesEnabled: state.subtitlesEnabled,
-      }),
-      onRehydrateStorage: () => (state) => {
-        if (state) applyAudioSettings(state);
-      },
-    },
-  ),
-);
+export const useSettingsStore = create<SettingsStore>()((set) => ({
+  ...DEFAULT_SETTINGS,
+  setSettingsMenuOpen: (isSettingsMenuOpen) => set({ isSettingsMenuOpen }),
+  setMusicVolume: (volume) =>
+    set({ musicVolume: setAudioCategoryVolume("music", volume) }),
+  setSfxVolume: (volume) =>
+    set({ sfxVolume: setAudioCategoryVolume("sfx", volume) }),
+  setDialogueVolume: (volume) =>
+    set({ dialogueVolume: setAudioCategoryVolume("dialogue", volume) }),
+  setSubtitlesEnabled: (subtitlesEnabled) => set({ subtitlesEnabled }),
+  setSubtitleLanguage: (subtitleLanguage) => set({ subtitleLanguage }),
+  resetSettings: () => {
+    applyDefaultAudioSettings();
+    set(DEFAULT_SETTINGS);
+  },
+}));

src/managers/stores/useWorldSettingsStore.ts

@@ -1,5 +1,4 @@
 import { create } from "zustand";
-import { createJSONStorage, persist } from "zustand/middleware";
 import { CLOUD_DEFAULTS, type CloudState } from "@/data/world/cloudConfig";
 import { FOG_CONFIG, type FogState } from "@/data/world/fogConfig";
 import { WIND_DEFAULTS, type WindState } from "@/data/world/windConfig";
@@ -47,89 +46,73 @@ const DEFAULT_STATE: WorldSettingsState = {
   graphics: { ...GRAPHICS_DEFAULTS },
 };
 
-const WORLD_SETTINGS_STORAGE_KEY = "la-fabrik-world-settings";
+export const useWorldSettingsStore = create<WorldSettingsStore>()((set) => ({
+  ...DEFAULT_STATE,
 
-export const useWorldSettingsStore = create<WorldSettingsStore>()(
-  persist(
-    (set) => ({
-      ...DEFAULT_STATE,
+  setClouds: (cloudsUpdate) =>
+    set((state) => ({
+      clouds: { ...state.clouds, ...cloudsUpdate },
+    })),
 
-      setClouds: (cloudsUpdate) =>
-        set((state) => ({
-          clouds: { ...state.clouds, ...cloudsUpdate },
-        })),
+  setFog: (fogUpdate) =>
+    set((state) => ({
+      fog: { ...state.fog, ...fogUpdate },
+    })),
 
-      setFog: (fogUpdate) =>
-        set((state) => ({
-          fog: { ...state.fog, ...fogUpdate },
-        })),
+  setWind: (windUpdate) =>
+    set((state) => ({
+      wind: { ...state.wind, ...windUpdate },
+    })),
 
-      setWind: (windUpdate) =>
-        set((state) => ({
-          wind: { ...state.wind, ...windUpdate },
-        })),
+  setWindSpeed: (speed) =>
+    set((state) => ({
+      wind: { ...state.wind, speed },
+    })),
 
-      setWindSpeed: (speed) =>
-        set((state) => ({
-          wind: { ...state.wind, speed },
-        })),
+  setWindDirection: (direction) =>
+    set((state) => ({
+      wind: { ...state.wind, direction },
+    })),
 
-      setWindDirection: (direction) =>
-        set((state) => ({
-          wind: { ...state.wind, direction },
-        })),
+  setWindStrength: (strength) =>
+    set((state) => ({
+      wind: { ...state.wind, strength },
+    })),
 
-      setWindStrength: (strength) =>
-        set((state) => ({
-          wind: { ...state.wind, strength },
-        })),
+  setGraphics: (graphicsUpdate) =>
+    set((state) => ({
+      graphics: { ...state.graphics, ...graphicsUpdate },
+    })),
 
-      setGraphics: (graphicsUpdate) =>
-        set((state) => ({
-          graphics: { ...state.graphics, ...graphicsUpdate },
-        })),
+  setGraphicsPreset: (preset) =>
+    set((state) => ({
+      graphics: { ...state.graphics, preset },
+    })),
 
-      setGraphicsPreset: (preset) =>
-        set((state) => ({
-          graphics: { ...state.graphics, preset },
-        })),
+  setDynamicGrass: (dynamicGrass) =>
+    set((state) => ({
+      graphics: { ...state.graphics, dynamicGrass },
+    })),
 
-      setDynamicGrass: (dynamicGrass) =>
-        set((state) => ({
-          graphics: { ...state.graphics, dynamicGrass },
-        })),
+  setDynamicTrees: (dynamicTrees) =>
+    set((state) => ({
+      graphics: { ...state.graphics, dynamicTrees },
+    })),
 
-      setDynamicTrees: (dynamicTrees) =>
-        set((state) => ({
-          graphics: { ...state.graphics, dynamicTrees },
-        })),
+  setDynamicClouds: (dynamicClouds) =>
+    set((state) => ({
+      graphics: { ...state.graphics, dynamicClouds },
+    })),
 
-      setDynamicClouds: (dynamicClouds) =>
-        set((state) => ({
-          graphics: { ...state.graphics, dynamicClouds },
-        })),
+  setShadowsEnabled: (shadowsEnabled) =>
+    set((state) => ({
+      graphics: { ...state.graphics, shadowsEnabled },
+    })),
 
-      setShadowsEnabled: (shadowsEnabled) =>
-        set((state) => ({
-          graphics: { ...state.graphics, shadowsEnabled },
-        })),
+  setGrassDensity: (grassDensity) =>
+    set((state) => ({
+      graphics: { ...state.graphics, grassDensity },
+    })),
 
-      setGrassDensity: (grassDensity) =>
-        set((state) => ({
-          graphics: { ...state.graphics, grassDensity },
-        })),
-
-      resetToDefaults: () => set(DEFAULT_STATE),
-    }),
-    {
-      name: WORLD_SETTINGS_STORAGE_KEY,
-      storage: createJSONStorage(() => window.localStorage),
-      partialize: (state) => ({
-        clouds: state.clouds,
-        fog: state.fog,
-        graphics: state.graphics,
-        wind: state.wind,
-      }),
-    },
-  ),
-);
+  resetToDefaults: () => set(DEFAULT_STATE),
+}));

src/pages/page.tsx

@@ -131,7 +131,6 @@ export function HomePage(): React.JSX.Element | null {
       gl.shadowMap.enabled = true;
       gl.shadowMap.type = THREE.PCFShadowMap;
       gl.shadowMap.autoUpdate = true;
-      gl.shadowMap.needsUpdate = true;
 
       // The browser hands us a WEBGL_lose_context extension we can use to
       // ask the GPU to restore the context after a loss. Without this the
@@ -149,7 +148,6 @@ export function HomePage(): React.JSX.Element | null {
         gl.shadowMap.enabled = true;
         gl.shadowMap.type = THREE.PCFShadowMap;
         gl.shadowMap.autoUpdate = true;
-        gl.shadowMap.needsUpdate = true;
         logger.info("WebGL", "Context restored");
       };
 

src/pages/site/page.tsx

@@ -4,10 +4,17 @@ import { SiteWelcomeScreen } from "@/components/site/SiteWelcomeScreen";
 import { SiteSituationScreen } from "@/components/site/SiteSituationScreen";
 import { SiteNamingScreen } from "@/components/site/SiteNamingScreen";
 import { SiteTransitionOverlay } from "@/components/site/SiteTransitionOverlay";
+import { SiteMobileBlocker } from "@/components/site/SiteMobileBlocker";
 import { SiteLayout } from "@/components/site/SiteLayout";
+import { useIsMobile } from "@/hooks/ui/useIsMobile";
 
 export function SitePage(): React.JSX.Element {
   const currentStep = useSiteStore((state) => state.currentStep);
+  const isMobile = useIsMobile();
+
+  if (isMobile) {
+    return <SiteMobileBlocker />;
+  }
 
   if (currentStep === "disclaimer") {
     return <SiteDisclaimerScreen />;

src/types/gameplay/repairMission.ts

@@ -54,10 +54,39 @@ export interface RepairMissionConfig {
 
 export type MissionStep =
   | "locked"
+  | "approaching"
+  | "arrived"
+  | "npc-return"
   | "waiting"
   | "inspected"
   | "fragmented"
   | "scanning"
   | "repairing"
   | "reassembling"
-  | "done";
+  | "done"
+  | "narrator-outro";
+
+export const PYLON_NARRATIVE_STEPS = [
+  "approaching",
+  "arrived",
+  "npc-return",
+  "narrator-outro",
+] as const;
+
+export const REPAIR_GAME_STEPS = [
+  "waiting",
+  "inspected",
+  "fragmented",
+  "scanning",
+  "repairing",
+  "reassembling",
+  "done",
+] as const;
+
+export function isPylonNarrativeStep(step: MissionStep): boolean {
+  return (PYLON_NARRATIVE_STEPS as readonly MissionStep[]).includes(step);
+}
+
+export function isRepairGameStep(step: MissionStep): boolean {
+  return (REPAIR_GAME_STEPS as readonly MissionStep[]).includes(step);
+}

src/types/gameplay/zone.ts

@@ -0,0 +1,9 @@
+import type { Vector3Tuple } from "@/types/three/three";
+
+export interface ZoneConfig {
+  id: string;
+  position: Vector3Tuple;
+  radius: number;
+  height: number;
+  oneShot: boolean;
+}

src/utils/debug/Debug.ts

@@ -9,7 +9,6 @@ const DEBUG_CONTROLS_STORAGE_KEY = "la-fabrik-debug-controls";
 
 interface StoredDebugControls {
   cameraMode: CameraMode;
-  handTrackingSource: HandTrackingSource;
   sceneMode: SceneMode;
 }
 
@@ -26,7 +25,6 @@ const DEBUG_FOLDER_ORDER = [
   "Hand Tracking",
   "Map",
   "Personnages",
-  "Debug",
 ] as const;
 
 function isRecord(value: unknown): value is Record<string, unknown> {
@@ -41,10 +39,6 @@ function isSceneMode(value: unknown): value is SceneMode {
   return value === "game" || value === "physics";
 }
 
-function isHandTrackingSource(value: unknown): value is HandTrackingSource {
-  return value === "browser" || value === "backend";
-}
-
 function getStoredDebugControls(): Partial<StoredDebugControls> {
   try {
     const rawValue = window.localStorage.getItem(DEBUG_CONTROLS_STORAGE_KEY);
@@ -57,9 +51,6 @@ function getStoredDebugControls(): Partial<StoredDebugControls> {
       ...(isCameraMode(parsedValue.cameraMode)
         ? { cameraMode: parsedValue.cameraMode }
         : {}),
-      ...(isHandTrackingSource(parsedValue.handTrackingSource)
-        ? { handTrackingSource: parsedValue.handTrackingSource }
-        : {}),
       ...(isSceneMode(parsedValue.sceneMode)
         ? { sceneMode: parsedValue.sceneMode }
         : {}),
@@ -103,7 +94,7 @@ export class Debug {
     this.controls = {
       cameraMode: storedControls.cameraMode ?? "player",
       fogEnabled: FOG_CONFIG.enabled,
-      handTrackingSource: storedControls.handTrackingSource ?? "browser",
+      handTrackingSource: "browser",
       showDebugOverlay: true,
       showHandTrackingSvg: false,
       showInteractionSpheres: false,
@@ -168,7 +159,7 @@ export class Debug {
         .name("Source")
         .onChange((value: HandTrackingSource) => {
           this.controls.handTrackingSource = value;
-          this.saveAndEmit();
+          this.emit();
         });
     }
   }
@@ -255,7 +246,7 @@ export class Debug {
 
   setHandTrackingSource(value: HandTrackingSource): void {
     this.controls.handTrackingSource = value;
-    this.saveAndEmit();
+    this.emit();
   }
 
   getFogEnabled(): boolean {
@@ -294,7 +285,6 @@ export class Debug {
         DEBUG_CONTROLS_STORAGE_KEY,
         JSON.stringify({
           cameraMode: this.controls.cameraMode,
-          handTrackingSource: this.controls.handTrackingSource,
           sceneMode: this.controls.sceneMode,
         }),
       );

src/world/Environment.tsx

@@ -15,11 +15,24 @@ import { SkyModel } from "@/components/three/world/SkyModel";
 import { CloudSystem } from "@/world/clouds/CloudSystem";
 import { FogSystem } from "@/world/fog/FogSystem";
 import { GrassSystem } from "@/world/grass/GrassSystem";
+import { SceneShadowWarmup } from "@/world/SceneShadowWarmup";
 import { VegetationSystem } from "@/world/vegetation/VegetationSystem";
 import { WaterSystem } from "@/world/water/WaterSystem";
 import { WorldPlane } from "@/world/WorldPlane";
 
-export function Environment(): React.JSX.Element {
+interface ShadowWarmupConfig {
+  active: boolean;
+  onReady: () => void;
+  onStarted: () => void;
+}
+
+interface EnvironmentProps {
+  shadowWarmup?: ShadowWarmupConfig;
+}
+
+export function Environment({
+  shadowWarmup,
+}: EnvironmentProps): React.JSX.Element {
   const sceneMode = useSceneMode();
   const groups = useMapPerformanceStore((state) => state.groups);
   const models = useMapPerformanceStore((state) => state.models);
@@ -34,6 +47,13 @@ export function Environment(): React.JSX.Element {
   return (
     <>
       <FogSystem />
+      {shadowWarmup ? (
+        <SceneShadowWarmup
+          active={shadowWarmup.active}
+          onReady={shadowWarmup.onReady}
+          onStarted={shadowWarmup.onStarted}
+        />
+      ) : null}
       {showSky ? (
         <SkyModel
           fallbackColor={GAME_SCENE_FALLBACK_BACKGROUND_COLOR}

src/world/GameMap.tsx

@@ -27,7 +27,6 @@ import { useMapLodModelPath } from "@/hooks/world/useMapLodModelPath";
 import { GameMapCollision } from "@/world/GameMapCollision";
 import { GeneratedMapNodeInstance } from "@/world/map-generated/GeneratedMapNodeInstance";
 import { isGeneratedMapModelName } from "@/data/world/generatedMapModelConfig";
-import { hasMapOctreeCollisionBox } from "@/data/world/octreeCollisionConfig";
 import { getMapSingleModelScaleMultiplier } from "@/data/world/mapInstancingConfig";
 import { MapInstancingSystem } from "@/world/map-instancing/MapInstancingSystem";
 import type { SceneLoadingChangeHandler } from "@/types/world/sceneLoading";
@@ -116,9 +115,6 @@ export function GameMap({
   const [collisionMapNodes, setCollisionMapNodes] = useState<LoadedMapNode[]>(
     [],
   );
-  const [proxyCollisionMapNodes, setProxyCollisionMapNodes] = useState<
-    MapNode[]
-  >([]);
   const [terrainNode, setTerrainNode] = useState<MapNode | null>(null);
   const [mapLoaded, setMapLoaded] = useState(false);
   const [settledMapNodeCount, setSettledMapNodeCount] = useState(0);
@@ -138,7 +134,6 @@ export function GameMap({
     (currentStep: string) => {
       setRenderMapNodes([]);
       setCollisionMapNodes([]);
-      setProxyCollisionMapNodes([]);
       setTerrainNode(null);
       setMapLoaded(true);
       settledMapNodesRef.current.clear();
@@ -196,10 +191,6 @@ export function GameMap({
             const modelUrl = sceneData.models.get(node.name);
             return { node, modelUrl: modelUrl ?? null };
           });
-        const loadedProxyCollisionNodes = sceneData.mapNodes.filter(
-          (node) =>
-            node.type === "Object3D" && hasMapOctreeCollisionBox(node.name),
-        );
         const loadedTerrainNode = getTerrainMapNode(sceneData.mapNodes);
         const repairMissionAnchors = getRepairMissionMapAnchors(
           sceneData.mapNodes,
@@ -220,7 +211,6 @@ export function GameMap({
 
         setRenderMapNodes(loadedMapNodes);
         setCollisionMapNodes(loadedCollisionNodes);
-        setProxyCollisionMapNodes(loadedProxyCollisionNodes);
         setTerrainNode(loadedTerrainNode);
         setRepairMissionAnchors(repairMissionAnchors);
         setMapLoaded(true);
@@ -295,7 +285,6 @@ export function GameMap({
         buildOctree={buildOctree}
         mapReady={mapReady}
         nodes={collisionMapNodes}
-        proxyNodes={proxyCollisionMapNodes}
         onLoaded={onLoaded}
         onLoadingStateChange={onLoadingStateChange}
         onOctreeReady={onOctreeReady}

src/world/GameMapCollision.tsx

@@ -17,24 +17,9 @@ import {
   normalizeMapScale,
   useTerrainHeightSampler,
 } from "@/hooks/three/useTerrainHeight";
-import {
-  CHARACTER_CONFIGS,
-  CHARACTER_IDS,
-  type CharacterId,
-} from "@/data/world/characters/characterConfig";
-import {
-  CHARACTER_OCTREE_COLLISION_BOX,
-  LA_FABRIK_INTERIOR_COLLISION_BOXES,
-  MAP_OCTREE_COLLISION_BOXES,
-  hasMapOctreeCollisionBox,
-  type OctreeCollisionBox,
-} from "@/data/world/octreeCollisionConfig";
-import { getMapModelScaleMultiplier } from "@/data/world/mapInstancingConfig";
-import { useCharacterDebugStore } from "@/managers/stores/useCharacterDebugStore";
-import { useGameStore } from "@/managers/stores/useGameStore";
 import { WorldBoundsCollision } from "@/world/collision/WorldBoundsCollision";
 import type { MapNode } from "@/types/map/mapScene";
-import type { OctreeReadyHandler, Vector3Tuple } from "@/types/three/three";
+import type { OctreeReadyHandler } from "@/types/three/three";
 import type { SceneLoadingChangeHandler } from "@/types/world/sceneLoading";
 import { logModelLoadError } from "@/utils/three/modelLoadLogger";
 
@@ -54,7 +39,6 @@ interface GameMapCollisionProps {
   buildOctree?: boolean;
   mapReady: boolean;
   nodes: readonly GameMapCollisionNode[];
-  proxyNodes: readonly MapNode[];
   onLoaded?: (() => void) | undefined;
   onLoadingStateChange?: SceneLoadingChangeHandler | undefined;
   onOctreeReady: OctreeReadyHandler;
@@ -117,7 +101,6 @@ export function GameMapCollision({
   buildOctree = true,
   mapReady,
   nodes,
-  proxyNodes,
   onLoaded,
   onLoadingStateChange,
   onOctreeReady,
@@ -126,28 +109,10 @@ export function GameMapCollision({
   const settledCollisionNodesRef = useRef(new Set<number>());
   const loadedNotifiedRef = useRef(false);
   const [settledCollisionNodeCount, setSettledCollisionNodeCount] = useState(0);
-  const mainState = useGameStore((state) => state.mainState);
   const terrainHeight = useTerrainHeightSampler();
   const collisionNodes = nodes.filter(isCollisionNode);
-  const includeCharacterCollisions = mainState !== "ebike";
-  const characterCollisionCount = includeCharacterCollisions
-    ? CHARACTER_IDS.length
-    : 0;
-  const collisionSourceCount =
-    collisionNodes.length + proxyNodes.length + characterCollisionCount;
   const collisionReady =
     mapReady && settledCollisionNodeCount >= collisionNodes.length;
-  const characterCollisionSignature = useCharacterDebugStore((state) =>
-    includeCharacterCollisions
-      ? CHARACTER_IDS.map((id) => {
-          const character = state.characters[id];
-          return [...character.position, ...character.rotation].join(",");
-        }).join("|")
-      : "characters-hidden",
-  );
-  const collisionRebuildKey = collisionReady
-    ? `${collisionNodes.length}:${collisionSourceCount}:${characterCollisionSignature}`
-    : "pending";
 
   const notifyLoaded = useCallback(() => {
     if (loadedNotifiedRef.current) return;
@@ -179,14 +144,14 @@ export function GameMapCollision({
   useOctreeGraphNode(
     groupRef,
     handleOctreeReady,
-    collisionRebuildKey,
-    buildOctree && collisionReady && collisionSourceCount > 0,
+    collisionReady ? collisionNodes.length : 0,
+    buildOctree && collisionReady && collisionNodes.length > 0,
   );
 
   useEffect(() => {
     if (!mapReady) return;
 
-    if (collisionSourceCount === 0) {
+    if (collisionNodes.length === 0) {
       notifyLoaded();
       return;
     }
@@ -206,7 +171,6 @@ export function GameMapCollision({
   }, [
     buildOctree,
     collisionNodes.length,
-    collisionSourceCount,
     collisionReady,
     mapReady,
     notifyLoaded,
@@ -216,18 +180,6 @@ export function GameMapCollision({
   return (
     <group ref={groupRef} visible={false}>
       {mapReady ? <WorldBoundsCollision /> : null}
-      {mapReady
-        ? proxyNodes.map((node, index) => (
-            <MapCollisionBoxProxy
-              key={`proxy-collision-${index}`}
-              node={node}
-              terrainHeight={terrainHeight}
-            />
-          ))
-        : null}
-      {mapReady && includeCharacterCollisions ? (
-        <CharacterCollisionProxies terrainHeight={terrainHeight} />
-      ) : null}
       {mapReady
         ? collisionNodes.map((mapNode, index) => (
             <CollisionErrorBoundary
@@ -271,24 +223,6 @@ function CollisionModelInstance({
     scale: normalizedScale,
   });
   const sceneInstance = useClonedObject(scene);
-  useEffect(() => {
-    if (node.name !== "lafabrik") return;
-
-    const isDoorSlab = (name: string): boolean =>
-      name === "porte" || /^porte[._]\d+$/i.test(name);
-    const isDoorFrameThickenChild = (child: THREE.Object3D): boolean =>
-      child.parent?.name === "Thicken";
-
-    const doorMeshes: THREE.Object3D[] = [];
-    sceneInstance.traverse((child) => {
-      if (isDoorSlab(child.name) || isDoorFrameThickenChild(child)) {
-        doorMeshes.push(child);
-      }
-    });
-    for (const child of doorMeshes) {
-      child.removeFromParent();
-    }
-  }, [node.name, sceneInstance]);
   const collisionPosition = useMemo(() => {
     if (node.name === "terrain") return position;
 
@@ -303,131 +237,11 @@ function CollisionModelInstance({
   }, [onLoaded]);
 
   return (
-    <>
-      <primitive
-        object={sceneInstance}
-        position={collisionPosition}
-        rotation={rotation}
-        scale={normalizedScale}
-      />
-      {node.name === "lafabrik" ? (
-        <group
-          name="lafabrik-interior-collision-proxies"
-          position={collisionPosition}
-          rotation={rotation}
-          scale={normalizedScale}
-        >
-          {LA_FABRIK_INTERIOR_COLLISION_BOXES.map((box, index) => (
-            <CollisionBox key={`lafabrik-interior-${index}`} box={box} />
-          ))}
-        </group>
-      ) : null}
-    </>
-  );
-}
-
-function CollisionBox({ box }: { box: OctreeCollisionBox }): React.JSX.Element {
-  return (
-    <group position={box.center}>
-      <mesh>
-        <boxGeometry args={box.size} />
-        <meshBasicMaterial />
-      </mesh>
-      <mesh rotation={[0, Math.PI, 0]}>
-        <boxGeometry args={box.size} />
-        <meshBasicMaterial />
-      </mesh>
-    </group>
-  );
-}
-
-function createScaledMapNodeScale(node: MapNode): Vector3Tuple {
-  const baseScale = normalizeMapScale(node.scale);
-  const scaleMultiplier = getMapModelScaleMultiplier(node.name);
-
-  return [
-    baseScale[0] * scaleMultiplier,
-    baseScale[1] * scaleMultiplier,
-    baseScale[2] * scaleMultiplier,
-  ];
-}
-
-function MapCollisionBoxProxy({
-  node,
-  terrainHeight,
-}: {
-  node: MapNode;
-  terrainHeight: TerrainHeightSampler;
-}): React.JSX.Element | null {
-  const collisionBox = hasMapOctreeCollisionBox(node.name)
-    ? MAP_OCTREE_COLLISION_BOXES[node.name]
-    : null;
-  const normalizedScale = useMemo(() => createScaledMapNodeScale(node), [node]);
-  const position = useMemo(() => {
-    const [x, y, z] = node.position;
-    if (!collisionBox) return [x, y, z] satisfies Vector3Tuple;
-
-    const height = terrainHeight.getHeight(x, z);
-    const bottomOffset = -collisionBox.bottomY * normalizedScale[1];
-
-    return [x, (height ?? y) + bottomOffset, z] satisfies Vector3Tuple;
-  }, [collisionBox, node.position, normalizedScale, terrainHeight]);
-
-  if (!collisionBox) return null;
-
-  return (
-    <group
-      name={`${node.name}-octree-collision-proxy`}
-      position={position}
-      rotation={node.rotation}
+    <primitive
+      object={sceneInstance}
+      position={collisionPosition}
+      rotation={rotation}
       scale={normalizedScale}
-    >
-      <CollisionBox box={collisionBox} />
-    </group>
-  );
-}
-
-function CharacterCollisionProxies({
-  terrainHeight,
-}: {
-  terrainHeight: TerrainHeightSampler;
-}): React.JSX.Element {
-  return (
-    <>
-      {CHARACTER_IDS.map((id) => (
-        <CharacterCollisionProxy
-          key={`character-collision-${id}`}
-          id={id}
-          terrainHeight={terrainHeight}
-        />
-      ))}
-    </>
-  );
-}
-
-function CharacterCollisionProxy({
-  id,
-  terrainHeight,
-}: {
-  id: CharacterId;
-  terrainHeight: TerrainHeightSampler;
-}): React.JSX.Element {
-  const config = CHARACTER_CONFIGS[id];
-  const state = useCharacterDebugStore((store) => store.characters[id]);
-  const position = useMemo(() => {
-    const [x, y, z] = state.position;
-    const height = terrainHeight.getHeight(x, z);
-
-    return [x, height ?? y, z] satisfies Vector3Tuple;
-  }, [state.position, terrainHeight]);
-
-  return (
-    <group
-      name={`${config.id}-octree-collision-proxy`}
-      position={position}
-      rotation={state.rotation}
-    >
-      <CollisionBox box={CHARACTER_OCTREE_COLLISION_BOX} />
-    </group>
+    />
   );
 }

src/world/GameStageContent.tsx

@@ -1,6 +1,7 @@
 import { Ebike } from "@/components/ebike/Ebike";
 import { InteractableObject } from "@/components/three/interaction/InteractableObject";
 import { RepairGame } from "@/components/three/gameplay/RepairGame";
+import { PylonNarrativeFlow } from "@/components/gameplay/pylon/PylonNarrativeFlow";
 import {
   REPAIR_MISSION_POSITION_ENTRIES,
   REPAIR_MISSION_TRIGGERS,
@@ -11,16 +12,11 @@ import {
 } from "@/data/gameplay/gameStageAnchors";
 import { useGameStore } from "@/managers/stores/useGameStore";
 import { useRepairMissionAnchorStore } from "@/managers/stores/useRepairMissionAnchorStore";
+import { isPylonNarrativeStep } from "@/types/gameplay/repairMission";
 import type { RepairMissionTriggerConfig } from "@/types/gameplay/repairMission";
 import type { Vector3Tuple } from "@/types/three/three";
 import { getRepairMissionPosition } from "@/utils/gameplay/repairMissionPosition";
-import {
-  EBIKE_WORLD_POSITION,
-  EBIKE_WORLD_ROTATION_Y,
-  EBIKE_WORLD_SCALE,
-} from "@/data/ebike/ebikeConfig";
-
-const EBIKE_CONFIG_KEY = `${EBIKE_WORLD_POSITION.join(",")}:${EBIKE_WORLD_ROTATION_Y}:${EBIKE_WORLD_SCALE}`;
+import { EBIKE_WORLD_POSITION } from "@/data/ebike/ebikeConfig";
 
 interface StageAnchorProps {
   color: string;
@@ -83,15 +79,21 @@ function RepairMissionTrigger({
 
 export function GameStageContent(): React.JSX.Element {
   const mainState = useGameStore((state) => state.mainState);
+  const pylonStep = useGameStore((state) => state.pylon.currentStep);
   const anchors = useRepairMissionAnchorStore((state) => state.anchors);
 
+  const pylonInNarrative =
+    mainState === "pylon" && isPylonNarrativeStep(pylonStep);
+
   return (
     <>
       {mainState === "intro" ? <StageAnchor {...INTRO_STAGE_ANCHOR} /> : null}
-      <Ebike key={EBIKE_CONFIG_KEY} position={EBIKE_WORLD_POSITION} />
+      <Ebike position={EBIKE_WORLD_POSITION} />
+      {mainState === "pylon" ? <PylonNarrativeFlow /> : null}
       {REPAIR_MISSION_POSITION_ENTRIES.map(({ mission }) => {
         const position = getRepairMissionPosition(mission, anchors);
         if (!position) return null;
+        if (mission === "pylon" && pylonInNarrative) return null;
         return (
           <RepairGame key={mission} mission={mission} position={position} />
         );

src/world/Lighting.tsx

@@ -1,17 +1,10 @@
 import { useEffect, useRef } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
-import {
-  PCFShadowMap,
-  type AmbientLight,
-  type DirectionalLight,
-  type Object3D,
-  type WebGLRenderer,
-} from "three";
+import type { AmbientLight, DirectionalLight, Object3D } from "three";
 import {
   AMBIENT_INTENSITY_MAX,
   AMBIENT_INTENSITY_MIN,
   AMBIENT_INTENSITY_STEP,
-  SHADOW_CONFIG,
   SUN_INTENSITY_MAX,
   SUN_INTENSITY_MIN,
   SUN_INTENSITY_STEP,
@@ -25,51 +18,16 @@ import {
   SUN_Z_MIN,
   SUN_Z_STEP,
 } from "@/data/world/lightingConfig";
-import { LA_FABRIK_INTERIOR_LIGHT_POSITION } from "@/data/world/laFabrikConfig";
 import { useDebugFolder } from "@/hooks/debug/useDebugFolder";
-import { useShadowMapWarmup } from "@/hooks/three/useShadowMapWarmup";
 import { LIGHTING_STATE } from "@/world/lightingState";
 
-function configureRendererShadows(gl: WebGLRenderer): void {
-  gl.shadowMap.enabled = true;
-  gl.shadowMap.type = PCFShadowMap;
-  gl.shadowMap.autoUpdate = true;
-}
-
-function configureSunShadow(sun: DirectionalLight, sunTarget: Object3D): void {
-  sun.target = sunTarget;
-  sun.shadow.autoUpdate = true;
-  sun.shadow.bias = SHADOW_CONFIG.bias;
-  sun.shadow.normalBias = SHADOW_CONFIG.normalBias;
-  sun.shadow.mapSize.width = SHADOW_CONFIG.mapSize;
-  sun.shadow.mapSize.height = SHADOW_CONFIG.mapSize;
-  sun.shadow.camera.left = -SHADOW_CONFIG.cameraSize;
-  sun.shadow.camera.right = SHADOW_CONFIG.cameraSize;
-  sun.shadow.camera.top = SHADOW_CONFIG.cameraSize;
-  sun.shadow.camera.bottom = -SHADOW_CONFIG.cameraSize;
-  sun.shadow.camera.near = SHADOW_CONFIG.cameraNear;
-  sun.shadow.camera.far = SHADOW_CONFIG.cameraFar;
-  sun.shadow.camera.updateProjectionMatrix();
-}
-
-function placeSunRelativeToCamera(
-  sun: DirectionalLight,
-  sunTarget: Object3D,
-  cameraPosition: { x: number; z: number },
-): void {
-  sunTarget.position.set(cameraPosition.x, 0, cameraPosition.z);
-  sun.position.set(
-    cameraPosition.x + LIGHTING_STATE.sunX,
-    LIGHTING_STATE.sunY,
-    cameraPosition.z + LIGHTING_STATE.sunZ,
-  );
-}
+const SHADOW_MAP_SIZE = 2048;
+const SHADOW_CAMERA_SIZE = 95;
+const SHADOW_CAMERA_NEAR = 0.5;
+const SHADOW_CAMERA_FAR = 300;
 
 export function Lighting(): React.JSX.Element {
   const camera = useThree((state) => state.camera);
-  const gl = useThree((state) => state.gl);
-  const scene = useThree((state) => state.scene);
-  const invalidate = useThree((state) => state.invalidate);
   const ambient = useRef<AmbientLight>(null);
   const sun = useRef<DirectionalLight>(null);
   const sunTarget = useRef<Object3D>(null);
@@ -77,16 +35,19 @@ export function Lighting(): React.JSX.Element {
   useEffect(() => {
     if (!sun.current || !sunTarget.current) return;
 
-    configureRendererShadows(gl);
-    configureSunShadow(sun.current, sunTarget.current);
-    // Prime the sun + target onto the camera before the first shadow pass so
-    // the initial shadow frustum already covers the visible scene; without
-    // this, the first frame is rendered with the default (origin-centered)
-    // frustum and shadows can appear absent until the player moves.
-    placeSunRelativeToCamera(sun.current, sunTarget.current, camera.position);
-  }, [camera, gl]);
-
-  useShadowMapWarmup({ light: sun, scene, gl, invalidate });
+    sun.current.target = sunTarget.current;
+    sun.current.shadow.autoUpdate = true;
+    sun.current.shadow.needsUpdate = true;
+    sun.current.shadow.mapSize.width = SHADOW_MAP_SIZE;
+    sun.current.shadow.mapSize.height = SHADOW_MAP_SIZE;
+    sun.current.shadow.camera.left = -SHADOW_CAMERA_SIZE;
+    sun.current.shadow.camera.right = SHADOW_CAMERA_SIZE;
+    sun.current.shadow.camera.top = SHADOW_CAMERA_SIZE;
+    sun.current.shadow.camera.bottom = -SHADOW_CAMERA_SIZE;
+    sun.current.shadow.camera.near = SHADOW_CAMERA_NEAR;
+    sun.current.shadow.camera.far = SHADOW_CAMERA_FAR;
+    sun.current.shadow.camera.updateProjectionMatrix();
+  }, []);
 
   useDebugFolder("Lighting", (folder) => {
     folder.addColor(LIGHTING_STATE, "ambientColor").name("Ambient Color");
@@ -126,14 +87,19 @@ export function Lighting(): React.JSX.Element {
       ambient.current.intensity = LIGHTING_STATE.ambientIntensity;
     }
 
-    if (!sun.current || !sunTarget.current) return;
-
-    placeSunRelativeToCamera(sun.current, sunTarget.current, camera.position);
-    sunTarget.current.updateMatrixWorld();
-    sun.current.color.set(LIGHTING_STATE.sunColor);
-    sun.current.intensity = LIGHTING_STATE.sunIntensity;
-    sun.current.updateMatrixWorld();
-    sun.current.shadow.needsUpdate = true;
+    if (sun.current && sunTarget.current) {
+      sunTarget.current.position.set(camera.position.x, 0, camera.position.z);
+      sunTarget.current.updateMatrixWorld();
+      sun.current.position.set(
+        camera.position.x + LIGHTING_STATE.sunX,
+        LIGHTING_STATE.sunY,
+        camera.position.z + LIGHTING_STATE.sunZ,
+      );
+      sun.current.color.set(LIGHTING_STATE.sunColor);
+      sun.current.intensity = LIGHTING_STATE.sunIntensity;
+      sun.current.updateMatrixWorld();
+      sun.current.shadow.needsUpdate = true;
+    }
   });
 
   return (
@@ -155,13 +121,6 @@ export function Lighting(): React.JSX.Element {
         castShadow
       />
       <object3D ref={sunTarget} />
-      <pointLight
-        position={LA_FABRIK_INTERIOR_LIGHT_POSITION}
-        color="#dbeafe"
-        intensity={1.2}
-        distance={14}
-        decay={1.6}
-      />
     </>
   );
 }

src/world/SceneShadowWarmup.tsx

@@ -0,0 +1,92 @@
+import { useEffect, useRef } from "react";
+import { useThree } from "@react-three/fiber";
+import * as THREE from "three";
+
+interface SceneShadowWarmupProps {
+  active: boolean;
+  onReady: () => void;
+  onStarted: () => void;
+}
+
+function markShadowLightForUpdate(object: THREE.Object3D): void {
+  if (
+    !(
+      object instanceof THREE.DirectionalLight ||
+      object instanceof THREE.PointLight ||
+      object instanceof THREE.SpotLight
+    )
+  ) {
+    return;
+  }
+
+  if (!object.castShadow) return;
+
+  object.updateMatrixWorld(true);
+  object.shadow.camera.updateProjectionMatrix();
+  object.shadow.needsUpdate = true;
+}
+
+function forceSceneShadowPass(
+  gl: THREE.WebGLRenderer,
+  scene: THREE.Scene,
+): void {
+  gl.shadowMap.enabled = true;
+  gl.shadowMap.type = THREE.PCFShadowMap;
+  gl.shadowMap.autoUpdate = true;
+  gl.shadowMap.needsUpdate = true;
+
+  scene.updateMatrixWorld(true);
+  scene.traverse((object) => {
+    if (object instanceof THREE.Mesh) {
+      object.updateMatrixWorld(true);
+    }
+
+    markShadowLightForUpdate(object);
+  });
+}
+
+export function SceneShadowWarmup({
+  active,
+  onReady,
+  onStarted,
+}: SceneShadowWarmupProps): null {
+  const gl = useThree((state) => state.gl);
+  const scene = useThree((state) => state.scene);
+  const invalidate = useThree((state) => state.invalidate);
+  const isRunningRef = useRef(false);
+
+  useEffect(() => {
+    if (!active) {
+      isRunningRef.current = false;
+      return undefined;
+    }
+
+    if (isRunningRef.current) return undefined;
+
+    isRunningRef.current = true;
+    onStarted();
+    forceSceneShadowPass(gl, scene);
+    invalidate();
+
+    let firstFrame = 0;
+    let secondFrame = 0;
+
+    firstFrame = window.requestAnimationFrame(() => {
+      forceSceneShadowPass(gl, scene);
+      invalidate();
+
+      secondFrame = window.requestAnimationFrame(() => {
+        forceSceneShadowPass(gl, scene);
+        invalidate();
+        onReady();
+      });
+    });
+
+    return () => {
+      window.cancelAnimationFrame(firstFrame);
+      window.cancelAnimationFrame(secondFrame);
+    };
+  }, [active, gl, invalidate, onReady, onStarted, scene]);
+
+  return null;
+}

src/world/World.tsx

@@ -4,21 +4,17 @@ import {
   PLAYER_SPAWN_POSITION_GAME,
   PLAYER_SPAWN_POSITION_PHYSICS,
 } from "@/data/player/playerConfig";
-import { LA_FABRIK_INITIAL_LOOK_AT } from "@/data/world/laFabrikConfig";
 import { useCameraMode } from "@/hooks/debug/useCameraMode";
 import { useEnvironmentDebug } from "@/hooks/debug/useEnvironmentDebug";
 import { useMapPerformanceDebug } from "@/hooks/debug/useMapPerformanceDebug";
 import { useCharacterDebug } from "@/hooks/debug/useCharacterDebug";
-import { useDebugVisualsDebug } from "@/hooks/debug/useDebugVisualsDebug";
+import { usePlayerPositionDebug } from "@/hooks/debug/usePlayerPositionDebug";
 import { useSceneMode } from "@/hooks/debug/useSceneMode";
 import { useHandTrackingSnapshot } from "@/hooks/handTracking/useHandTrackingSnapshot";
 import { useWorldSceneLoading } from "@/hooks/world/useWorldSceneLoading";
 import { useGameStore } from "@/managers/stores/useGameStore";
-import { useDebugVisualsStore } from "@/managers/stores/useDebugVisualsStore";
 import { DebugCameraControls } from "@/components/debug/scene/DebugCameraControls";
 import { DebugHelpers } from "@/components/debug/scene/DebugHelpers";
-import { DebugOctreeVisualization } from "@/components/debug/DebugOctreeVisualization";
-import { DebugPlayerModel } from "@/components/debug/DebugPlayerModel";
 import { HandTrackingGlove } from "@/components/three/handTracking/HandTrackingGlove";
 import { Environment } from "@/world/Environment";
 import { GameCinematics } from "@/world/GameCinematics";
@@ -40,15 +36,11 @@ export function World({ onLoadingStateChange }: WorldProps): React.JSX.Element {
   useEnvironmentDebug();
   useMapPerformanceDebug();
   useCharacterDebug();
-  useDebugVisualsDebug();
+  usePlayerPositionDebug();
 
   const cameraMode = useCameraMode();
   const sceneMode = useSceneMode();
   const mainState = useGameStore((state) => state.mainState);
-  const showDebugPlayerModel = useDebugVisualsStore(
-    (state) => state.showPlayerModel,
-  );
-  const showDebugOctree = useDebugVisualsStore((state) => state.showOctree);
   const { status, usageStatus } = useHandTrackingSnapshot();
   const {
     octree,
@@ -57,6 +49,9 @@ export function World({ onLoadingStateChange }: WorldProps): React.JSX.Element {
     handleGameStageLoaded,
     handleGameMapLoaded,
     handleOctreeReady,
+    handleShadowWarmupReady,
+    handleShadowWarmupStarted,
+    shouldWarmUpShadows,
   } = useWorldSceneLoading({ sceneMode, onLoadingStateChange });
   const playerSpawnPosition =
     sceneMode === "game"
@@ -71,15 +66,15 @@ export function World({ onLoadingStateChange }: WorldProps): React.JSX.Element {
 
   return (
     <>
-      <Environment />
+      <Environment
+        shadowWarmup={{
+          active: shouldWarmUpShadows,
+          onReady: handleShadowWarmupReady,
+          onStarted: handleShadowWarmupStarted,
+        }}
+      />
       <Lighting />
       <DebugHelpers />
-      {showDebugOctree ? <DebugOctreeVisualization octree={octree} /> : null}
-      {showDebugPlayerModel ? (
-        <Suspense fallback={null}>
-          <DebugPlayerModel />
-        </Suspense>
-      ) : null}
       {showHandTrackingGloves ? (
         <Suspense fallback={null}>
           <HandTrackingGlove handedness="left" />
@@ -98,22 +93,16 @@ export function World({ onLoadingStateChange }: WorldProps): React.JSX.Element {
           {showGameStage ? (
             <Physics>
               <GameStageLoaded onLoaded={handleGameStageLoaded} />
-              <Suspense fallback={null}>
-                <GameStageContent />
-              </Suspense>
+              <GameStageContent />
             </Physics>
           ) : null}
           {spawnPlayer ? (
-            <Suspense fallback={null}>
+            <>
               <GameMusic />
               {mainState === "outro" ? <GameCinematics /> : null}
               {mainState !== "intro" ? <GameDialogues /> : null}
-              <Player
-                initialLookAt={LA_FABRIK_INITIAL_LOOK_AT}
-                octree={octree}
-                spawnPosition={playerSpawnPosition}
-              />
-            </Suspense>
+              <Player octree={octree} spawnPosition={playerSpawnPosition} />
+            </>
           ) : null}
         </>
       ) : (

src/world/grass/GrassPatch.tsx

@@ -8,11 +8,6 @@ import {
   GRASS_COLORS,
   GRASS_CONFIG,
 } from "@/data/world/grassConfig";
-import {
-  LA_FABRIK_CENTER,
-  LA_FABRIK_HALF_EXTENTS,
-  LA_FABRIK_ROTATION_Y,
-} from "@/data/world/laFabrikConfig";
 import {
   grassFragmentShader,
   grassVertexShader,
@@ -174,17 +169,6 @@ function createGrassMaterial(
       uMaxBladeHeight: { value: GRASS_CONFIG.maxBladeHeight },
       uRandomHeightAmount: { value: GRASS_CONFIG.randomHeightAmount },
       uSurfaceOffset: { value: GRASS_CONFIG.surfaceOffset },
-      uLaFabrikCenter: {
-        value: new THREE.Vector2(LA_FABRIK_CENTER[0], LA_FABRIK_CENTER[2]),
-      },
-      uLaFabrikHalfExtents: {
-        value: new THREE.Vector2(
-          LA_FABRIK_HALF_EXTENTS.x,
-          LA_FABRIK_HALF_EXTENTS.z,
-        ),
-      },
-      uLaFabrikRotation: { value: LA_FABRIK_ROTATION_Y },
-      uLaFabrikNoGrassFeather: { value: 1.4 },
     },
   });
 }

src/world/grass/grassShaders.ts

@@ -43,10 +43,6 @@ export const grassVertexShader = /* glsl */ `
   uniform float uMaxBladeHeight;
   uniform float uRandomHeightAmount;
   uniform float uSurfaceOffset;
-  uniform vec2 uLaFabrikCenter;
-  uniform vec2 uLaFabrikHalfExtents;
-  uniform float uLaFabrikRotation;
-  uniform float uLaFabrikNoGrassFeather;
 
   float random(vec2 st) {
     return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
@@ -136,18 +132,6 @@ export const grassVertexShader = /* glsl */ `
       smoothstep(uBoundingBoxMax.z, uBoundingBoxMax.z - 2.0, worldPos.z);
     heightModifier *= edgeFade * mix(0.45, 1.0, clumpMask);
 
-    vec2 laFabrikDelta = worldPos.xz - uLaFabrikCenter;
-    float laFabrikCos = cos(-uLaFabrikRotation);
-    float laFabrikSin = sin(-uLaFabrikRotation);
-    vec2 laFabrikLocal = vec2(
-      laFabrikDelta.x * laFabrikCos - laFabrikDelta.y * laFabrikSin,
-      laFabrikDelta.x * laFabrikSin + laFabrikDelta.y * laFabrikCos
-    );
-    vec2 laFabrikDistance = abs(laFabrikLocal) - uLaFabrikHalfExtents;
-    float laFabrikOutsideDistance = max(laFabrikDistance.x, laFabrikDistance.y);
-    float laFabrikGrassMask = smoothstep(0.0, uLaFabrikNoGrassFeather, laFabrikOutsideDistance);
-    heightModifier *= laFabrikGrassMask;
-
     float sideFactor = (color.r == 0.1) ? 1.0 : (color.b == 0.1) ? -1.0 : 0.0;
     float tipFactor = color.g;
     float width = smoothstep(0.02, uMaxBladeHeight * 0.85, heightModifier) * uBladeWidth * bladeVisibility;

src/world/player/Player.tsx

@@ -7,12 +7,10 @@ import { PlayerController } from "@/world/player/PlayerController";
 
 interface PlayerProps {
   octree: Octree | null;
-  initialLookAt?: Vector3Tuple | undefined;
   spawnPosition: Vector3Tuple;
 }
 
 export function Player({
-  initialLookAt,
   spawnPosition,
   octree,
 }: PlayerProps): React.JSX.Element {
@@ -20,17 +18,12 @@ export function Player({
 
   useLayoutEffect(() => {
     camera.position.set(...spawnPosition);
-    if (initialLookAt) camera.lookAt(...initialLookAt);
-  }, [camera, initialLookAt, spawnPosition]);
+  }, [camera, spawnPosition]);
 
   return (
     <>
       <PlayerCamera />
-      <PlayerController
-        initialLookAt={initialLookAt}
-        octree={octree}
-        spawnPosition={spawnPosition}
-      />
+      <PlayerController octree={octree} spawnPosition={spawnPosition} />
     </>
   );
 }

src/world/player/PlayerController.tsx

@@ -75,7 +75,6 @@ const PLAYER_FLOOR_NORMAL_MIN = 0.15;
 const PLAYER_GROUND_SNAP_DISTANCE = 0.22;
 
 interface PlayerControllerProps {
-  initialLookAt?: Vector3Tuple | undefined;
   octree: Octree | null;
   spawnPosition: Vector3Tuple;
 }
@@ -90,7 +89,6 @@ const _collisionCorrection = new THREE.Vector3();
 function resetPlayerCapsule(
   capsule: Capsule,
   spawnPosition: Vector3Tuple,
-  initialLookAt: Vector3Tuple | undefined,
   camera: THREE.Camera,
   velocity: THREE.Vector3,
 ): void {
@@ -102,7 +100,6 @@ function resetPlayerCapsule(
   capsule.end.set(...spawnPosition);
   velocity.set(0, 0, 0);
   camera.position.copy(capsule.end);
-  if (initialLookAt) camera.lookAt(...initialLookAt);
 }
 
 function createSpawnCapsule(spawnPosition: Vector3Tuple): Capsule {
@@ -148,7 +145,6 @@ function getCapsuleFootY(capsule: Capsule): number {
 }
 
 export function PlayerController({
-  initialLookAt,
   octree,
   spawnPosition,
 }: PlayerControllerProps): null {
@@ -238,7 +234,6 @@ export function PlayerController({
     resetPlayerCapsule(
       capsule.current,
       spawnPosition,
-      initialLookAt,
       camera,
       velocity.current,
     );
@@ -246,7 +241,7 @@ export function PlayerController({
     onFloor.current = false;
     wantsJump.current = false;
     initializedRef.current = true;
-  }, [camera, initialLookAt, spawnPosition]);
+  }, [camera, spawnPosition]);
 
   useEffect(() => {
     movementLockedRef.current = movementLocked;
@@ -344,7 +339,6 @@ export function PlayerController({
         resetPlayerCapsule(
           capsule.current,
           spawnPosition,
-          initialLookAt,
           camera,
           velocity.current,
         );

src/world/vegetation/VegetationSystem.tsx

@@ -16,7 +16,6 @@ import {
   VEGETATION_TYPES,
   type VegetationType,
 } from "@/data/world/vegetationConfig";
-import { isInsideLaFabrikFootprint } from "@/data/world/laFabrikConfig";
 import { createWorldInstanceChunks } from "@/utils/world/chunkInstances";
 
 interface VegetationSystemProps {
@@ -61,15 +60,6 @@ function createVegetationChunks(
   });
 }
 
-function removeLaFabrikVegetation(
-  instances: VegetationInstance[],
-): VegetationInstance[] {
-  return instances.filter((instance) => {
-    const [x, , z] = instance.position;
-    return !isInsideLaFabrikFootprint(x, z, 1.2);
-  });
-}
-
 export function VegetationSystem({
   onlyMapName = null,
   streaming = true,
@@ -100,10 +90,7 @@ export function VegetationSystem({
       const entry = data.get(config.mapName);
       if (!entry || entry.instances.length === 0) return [];
 
-      const instances = removeLaFabrikVegetation(entry.instances);
-      if (instances.length === 0) return [];
-
-      return createVegetationChunks(type, instances);
+      return createVegetationChunks(type, entry.instances);
     });
   }, [data, groups, models, onlyMapName]);