@directivegames/genesys.js 3.1.24

package/games/deprecated/lightmapping-demo.ts

@@ -0,0 +1,1515 @@
+/**
+ * Lightmapping System Demo
+ *
+ * This is the main demo showcasing the complete lightmapping system including:
+ * - Loading existing Genesys scene files with automatic lightmap loading
+ * - Interactive lightmap baking with automatic light detection
+ * - Export/import lightmap data to/from files
+ * - Various visualization modes for debugging and testing
+ * - Integration with the core engine's automatic lightmap system
+ */
+
+import * as ENGINE from 'genesys.js';
+import * as THREE from 'three';
+import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
+import { Pane } from 'tweakpane';
+
+
+export class LightmappingDemo extends ENGINE.BaseGameLoop {
+  private lightmapManager!: ENGINE.LightmapManager;
+  private pane!: Pane;
+
+  // Store reference to directional light actor and transform controls
+  private directionalLightActor: ENGINE.Actor | null = null;
+
+  // Track current scene path for filename generation
+  private currentScenePath: ENGINE.AssetPath | null = null;
+  private transformControls: TransformControls | null = null;
+
+  // Tweakpane controls and parameters
+  private lightmapParams = {
+    // Basic settings
+    resolution: 512,
+    casts: 32,
+    progressiveSamples: 128,
+    lightSize: 0.5,
+
+    // Lighting toggles
+    directLightEnabled: true,
+    indirectLightEnabled: false,
+    ambientLightEnabled: false,
+
+    // Advanced settings
+    ambientDistance: 10.0,
+    filterMode: 'Linear' as 'Linear' | 'Nearest',
+
+    // Atlas options (matching LightmapAtlasOptions interface)
+    padding: 2,
+    dilate: true,
+
+    // Manager options
+    progressiveBaking: true,
+    autoApply: true,
+
+    // Export options (only includeSceneHash is actually used)
+    includeSceneHash: true,
+
+    // Render mode for visualization
+    renderMode: 'standard' as 'standard' | 'positions' | 'normals' | 'uv' | 'lightmap' | 'beauty'
+  };
+
+  // Store original material maps for restoration
+  private originalMaterialMaps = new Map<THREE.Material, THREE.Texture | null>();
+
+  // File input for scene loading
+  private fileInput: HTMLInputElement | null = null;
+
+  protected override async preStart(): Promise<void> {
+    // Load default scene
+    await this.loadDefaultScene();
+  }
+
+  protected override postStart(): void {
+    // Get the lightmap manager from the world (it's created automatically by the engine)
+    this.lightmapManager = this.world.getLightmapManager()!;
+    this.createTweakPane();
+    this.createFileInput();
+
+    // Set up transform controls after the world is fully initialized
+    this.setupTransformControls();
+  }
+
+  private async loadDefaultScene(): Promise<void> {
+    this.clearExistingScene();
+    await this.createDefaultScene();
+    this.updateStatus('✓ Default scene created');
+    return;
+  }
+
+  /**
+   * Clears all existing actors and debug objects from the scene
+   */
+  private clearExistingScene(): void {
+    // Clean up transform controls and light helpers FIRST
+    this.cleanupTransformControlsAndHelpers();
+
+    // Clear debug textures
+    this.clearDebugTextures();
+
+    // Clear original material maps
+    this.originalMaterialMaps.clear();
+
+    // Remove all existing actors
+    const existingActors = this.world.getActors();
+    this.world.removeActors(...existingActors);
+
+    // Clear current scene path
+    this.currentScenePath = null;
+
+    // Reset directional light actor reference since scene is cleared
+    this.directionalLightActor = null;
+
+    // Reset light helper visibility state for new scene
+    // This property is no longer needed as we use userData on the light component
+  }
+
+  /**
+   * Cleans up transform controls and light helpers before scene changes
+   */
+  private cleanupTransformControlsAndHelpers(): void {
+    // Disable and dispose of transform controls first
+    if (this.transformControls) {
+      console.log('Cleaning up transform controls...');
+
+      // Disable the controls to prevent any ongoing interactions
+      this.transformControls.enabled = false;
+
+      // Detach from any object
+      this.transformControls.detach();
+
+      // Remove event listeners by disposing
+      this.transformControls.dispose();
+
+      // Remove the helper from the scene
+      const helper = this.transformControls.getHelper();
+      if (helper && helper.parent) {
+        helper.parent.remove(helper);
+      }
+
+      // Clear the reference
+      this.transformControls = null;
+      console.log('Transform controls cleaned up');
+    }
+
+    // Hide all light helpers in the current scene before clearing
+    const lightActors = this.world.getActorsByPredicate(actor =>
+      actor.getComponents(ENGINE.DirectionalLightComponent).length > 0 ||
+      actor.getComponents(ENGINE.PointLightComponent).length > 0 ||
+      actor.getComponents(ENGINE.SpotLightComponent).length > 0
+    );
+
+    for (const actor of lightActors) {
+      // Handle DirectionalLightComponent
+      const directionalLights = actor.getComponents(ENGINE.DirectionalLightComponent);
+      for (const light of directionalLights) {
+        if (light.userData.helperVisible === true) {
+          try {
+            console.log('Hiding directional light helper before scene clear');
+            light.showHelper(false);
+            delete light.userData.helperVisible;
+          } catch (error) {
+            console.warn('Error hiding directional light helper:', error);
+          }
+        }
+      }
+
+      // Handle PointLightComponent
+      const pointLights = actor.getComponents(ENGINE.PointLightComponent);
+      for (const light of pointLights) {
+        if (light.userData.helperVisible === true) {
+          try {
+            console.log('Hiding point light helper before scene clear');
+            light.showHelper(false);
+            delete light.userData.helperVisible;
+          } catch (error) {
+            console.warn('Error hiding point light helper:', error);
+          }
+        }
+      }
+
+      // Handle SpotLightComponent
+      const spotLights = actor.getComponents(ENGINE.SpotLightComponent);
+      for (const light of spotLights) {
+        if (light.userData.helperVisible === true) {
+          try {
+            console.log('Hiding spot light helper before scene clear');
+            light.showHelper(false);
+            delete light.userData.helperVisible;
+          } catch (error) {
+            console.warn('Error hiding spot light helper:', error);
+          }
+        }
+      }
+    }
+
+    // Clear the directional light actor reference
+    this.directionalLightActor = null;
+    console.log('Light helpers cleaned up and references cleared');
+  }
+
+  /**
+   * Creates a simple fallback scene if no scene file is available
+   */
+  private async createDefaultScene(): Promise<void> {
+    const { pawn } = ENGINE.GameBuilder.createDefaultPawn(this.world, new THREE.Vector3(0, 8, 5));
+    pawn.getCamera()?.lookAt(0, 0, 0);
+
+    // Create ground plane (STATIC - will be included in lightmapping)
+    const ground = new ENGINE.Actor({
+      position: new THREE.Vector3(0, 0, 0),
+      rootComponent: new ENGINE.MeshComponent({
+        geometry: new THREE.PlaneGeometry(20, 20),
+        material: new THREE.MeshStandardMaterial({
+          color: 0xffffff,
+          roughness: 0.8,
+          metalness: 0.1
+        }),
+        physicsOptions: {
+          enabled: true,
+          motionType: ENGINE.PhysicsMotionType.Static, // STATIC: Included in lightmaps
+          collisionProfile: 'WorldStatic'
+        }
+      })
+    });
+    ground.rootComponent.rotation.x = -Math.PI / 2;
+    // Enable shadows for ground
+    const groundMeshComp = ground.rootComponent as ENGINE.MeshComponent;
+    groundMeshComp.receiveShadow = true;
+    ground.addActorTag('ground');
+    this.world.addActors(ground);
+
+    // Create static cubes to cast shadows (STATIC - will be included in lightmapping)
+    const staticCubePositions = [
+      { x: -2, z: -1 },
+      { x: 2, z: 3 },
+      { x: -1, z: 4 },
+      {x: 0, z: 0},
+      {x: 4, z: -2}
+    ];
+    const staticCubeGeometries = [
+      { width: 1, height: 2, depth: 1 },
+      { width: 1, height: 2, depth: 2 },
+      { width: 2, height: 2, depth: 1 },
+      { width: 2, height: 2, depth: 2 },
+      { width: 1, height: 1, depth: 1 },
+    ];
+
+    const staticCubeColor = 0x0000ff; // blue
+
+    for (let i = 0; i < staticCubePositions.length; i++) {
+      const staticCube = new ENGINE.Actor({
+        position: new THREE.Vector3(
+          staticCubePositions[i].x,
+          1,
+          staticCubePositions[i].z
+        ),
+        rootComponent: new ENGINE.MeshComponent({
+          geometry: new THREE.BoxGeometry(
+            staticCubeGeometries[i].width,
+            staticCubeGeometries[i].height,
+            staticCubeGeometries[i].depth
+          ),
+          material: new THREE.MeshStandardMaterial({
+            color: new THREE.Color(staticCubeColor),
+            roughness: 0.6,
+            metalness: 0.2
+          }),
+          physicsOptions: {
+            enabled: true,
+            motionType: ENGINE.PhysicsMotionType.Static, // STATIC: Included in lightmaps
+            collisionProfile: 'WorldStatic'
+          }
+        })
+      });
+      staticCube.addActorTag('staticCube_' + i);
+      // Enable shadows
+      const staticMeshComp = staticCube.rootComponent as ENGINE.MeshComponent;
+      staticMeshComp.castShadow = true;
+      staticMeshComp.receiveShadow = true;
+      this.world.addActors(staticCube);
+    }
+
+    // Create dynamic cubes (DYNAMIC - will be EXCLUDED from lightmapping)
+    const dynamicCubePositions = [
+      { x: 3, z: -3 },
+      { x: -2, z: 1 }
+    ];
+    const dynamicCubeColors = [
+      0xf9ca24, // Yellow
+      0x6c5ce7  // Purple
+    ];
+
+    for (let i = 0; i < 2; i++) {
+      const dynamicCube = new ENGINE.Actor({
+        position: new THREE.Vector3(
+          dynamicCubePositions[i].x,
+          1,
+          dynamicCubePositions[i].z
+        ),
+        rootComponent: new ENGINE.MeshComponent({
+          geometry: new THREE.BoxGeometry(1, 2, 1),
+          material: new THREE.MeshStandardMaterial({
+            color: new THREE.Color(dynamicCubeColors[i]),
+            roughness: 0.6,
+            metalness: 0.2,
+            emissive: new THREE.Color(dynamicCubeColors[i]).multiplyScalar(0.1) // Slight glow to indicate they're dynamic
+          }),
+          physicsOptions: {
+            enabled: true,
+            motionType: ENGINE.PhysicsMotionType.Dynamic, // DYNAMIC: Excluded from lightmaps
+            collisionProfile: 'WorldDynamic'
+          }
+        })
+      });
+      // Enable shadows
+      const dynamicMeshComp = dynamicCube.rootComponent as ENGINE.MeshComponent;
+      dynamicMeshComp.castShadow = true;
+      dynamicMeshComp.receiveShadow = true;
+      dynamicCube.addActorTag('dynamicCube_' + i);
+      this.world.addActors(dynamicCube);
+    }
+
+    // Create a kinematic moving platform (KINEMATIC - will be EXCLUDED from lightmapping)
+    const movingPlatform = new ENGINE.Actor({
+      position: new THREE.Vector3(0, 0.5, -8),
+      rootComponent: new ENGINE.MeshComponent({
+        geometry: new THREE.BoxGeometry(3, 0.5, 2),
+        material: new THREE.MeshStandardMaterial({
+          color: 0x00ff88,
+          roughness: 0.4,
+          metalness: 0.8,
+          emissive: new THREE.Color(0x00ff88).multiplyScalar(0.05) // Slight glow to indicate it's kinematic
+        }),
+        physicsOptions: {
+          enabled: true,
+          motionType: ENGINE.PhysicsMotionType.KinematicPositionBased, // KINEMATIC: Excluded from lightmaps
+          collisionProfile: 'WorldStatic'
+        }
+      })
+    });
+    // Enable shadows
+    const platformMeshComp = movingPlatform.rootComponent as ENGINE.MeshComponent;
+    platformMeshComp.castShadow = true;
+    platformMeshComp.receiveShadow = true;
+    movingPlatform.addActorTag('movingPlatform');
+    this.world.addActors(movingPlatform);
+
+    // Add a directional light (sun) - white, high intensity, from above at angle
+    this.directionalLightActor = new ENGINE.Actor({
+      position: new THREE.Vector3(8, 12, 3),
+      rootComponent: new ENGINE.DirectionalLightComponent({
+        color: 0xffffff,
+        intensity: 50.0,
+        castShadow: true
+      })
+    });
+    const directionalLight = this.directionalLightActor.rootComponent as ENGINE.DirectionalLightComponent;
+    directionalLight.lookAt(0, 0, 0);
+    this.directionalLightActor.addActorTag('directionalLight');
+    this.world.addActors(this.directionalLightActor);
+
+    // Add ambient light for overall illumination
+    const ambientLightActor = new ENGINE.Actor({
+      rootComponent: new ENGINE.AmbientLightComponent({
+        color: 0xffffff,
+        intensity: 5
+      })
+    });
+    ambientLightActor.addActorTag('ambientLight');
+    this.world.addActors(ambientLightActor);
+
+    // Add a yellow point light to shine on the last static cube
+    const pointLightActor = new ENGINE.Actor({
+      position: new THREE.Vector3(4, 3, -2), // Above the last static cube at (4, -2)
+      rootComponent: new ENGINE.PointLightComponent({
+        color: 0xffff55, // Slightly yellow
+        intensity: 100,
+        distance: 15,
+        decay: 2,
+        castShadow: true
+      })
+    });
+    pointLightActor.addActorTag('pointLight');
+    this.world.addActors(pointLightActor);
+
+    console.log('📍 Default scene created with static/dynamic mesh examples:');
+    console.log('  🔹 Static meshes (included in lightmaps): blue cubes');
+    console.log('  🔸 Dynamic meshes (excluded from lightmaps): yellow and purple cubes');
+    console.log('  🔷 Kinematic meshes (excluded from lightmaps): Moving platform (green)');
+  }
+
+  /**
+   * Sets up transform controls for the directional light
+   */
+  private setupTransformControls(): void {
+    // Use the reattach method which handles finding the light and setting up controls
+    this.reattachTransformControls();
+  }
+
+  /**
+   * Handles interaction state changes for transform controls
+   */
+  private handleTransformControlsInteraction(isDragging: boolean): void {
+    // Get the player controller to disable input when dragging
+    const playerController = this.world.getFirstActor(ENGINE.PlayerController);
+    if (playerController) {
+      // When dragging, we want to prevent player camera movement
+      // This is handled automatically by the transform controls blocking pointer events
+      // The engine's input system will respect this
+    }
+  }
+
+  /**
+   * Updates the directional light's direction to point towards the origin
+   */
+  private updateDirectionalLightDirection(): void {
+    if (!this.directionalLightActor) return;
+
+    try {
+      const directionalLightComponents = this.directionalLightActor.getComponents(ENGINE.DirectionalLightComponent);
+      if (directionalLightComponents.length > 0) {
+        const directionalLight = directionalLightComponents[0];
+
+        // Get the current world position of the light
+        const lightPosition = this.directionalLightActor.getWorldPosition();
+
+        // Make the light look at the origin (0, 0, 0)
+        directionalLight.lookAt(0, 0, 0);
+
+        // Update the light's target for shadow mapping using the public API
+        directionalLight.setTarget(new THREE.Vector3(0, 0, 0));
+
+        // Log the new position for debugging
+        console.log(`🔆 Directional light moved to: (${lightPosition.x.toFixed(2)}, ${lightPosition.y.toFixed(2)}, ${lightPosition.z.toFixed(2)}) - Bake lightmaps to see changes!`);
+      }
+    } catch (error) {
+      console.warn('Failed to update directional light direction:', error);
+    }
+  }
+
+  /**
+   * Creates a hidden file input for scene loading
+   */
+  private createFileInput(): void {
+    this.fileInput = document.createElement('input');
+    this.fileInput.type = 'file';
+    this.fileInput.accept = '.genesys-scene,.json';
+    this.fileInput.style.display = 'none';
+    document.body.appendChild(this.fileInput);
+
+    this.fileInput.addEventListener('change', async (event) => {
+      const file = (event.target as HTMLInputElement).files?.[0];
+      if (file) {
+        await this.loadSceneFromFile(file);
+      }
+    });
+  }
+
+  /**
+   * Loads a scene from a selected file
+   */
+  private async loadSceneFromFile(file: File): Promise<void> {
+    try {
+      this.updateStatus('Loading scene file...');
+
+      const text = await file.text();
+      const sceneData = JSON.parse(text);
+
+      // Clear existing scene completely
+      this.clearExistingScene();
+
+      // Load the new scene data using proper method
+      await this.loadWorldData(sceneData);
+
+      // Update current scene path
+      this.currentScenePath = ENGINE.AssetPath.fromString(`/scenes/${file.name}`);
+
+      // Create camera controller if none exists
+      if (!this.world.getFirstActor(ENGINE.PlayerController)) {
+        ENGINE.GameBuilder.createDefaultPawn(this.world, new THREE.Vector3(0, 1, 0));
+      }
+
+      // Reattach transform controls to the new scene's directional light
+      this.reattachTransformControls();
+
+      // For user-uploaded files, attempt to auto-load lightmaps
+      await this.tryLoadLightmapsForUserFile(file.name);
+
+    } catch (error) {
+      this.updateStatus(`✗ Failed to load scene: ${error}`);
+      console.error('Failed to load scene file:', error);
+    }
+  }
+
+  /**
+   * Attempts to load lightmaps for a user-uploaded file
+   */
+  private async tryLoadLightmapsForUserFile(sceneName: string): Promise<void> {
+    // Extract base name without extension
+    const baseName = sceneName.replace(/\.[^.]+$/, '');
+
+    // For user files, we can't automatically find the lightmap files
+    // since they're not in a known file system location
+    // Just report that the scene was loaded without lightmaps
+    this.updateStatus(`✓ Loaded scene: ${sceneName} (use Import Lightmaps button to load lightmaps manually)`);
+  }
+
+  /**
+   * Checks and reports lightmap loading status after scene loading
+   */
+  private checkLightmapStatus(sceneName: string): void {
+    const lightmapManager = this.world.getLightmapManager();
+    if (lightmapManager && lightmapManager.hasLightmapData()) {
+      this.updateStatus(`✓ Loaded scene: ${sceneName} (lightmaps automatically applied)`);
+    } else {
+      this.updateStatus(`✓ Loaded scene: ${sceneName} (no lightmaps found)`);
+    }
+  }
+
+  /**
+   * Reattaches transform controls to the directional light in the current scene
+   */
+  private reattachTransformControls(): void {
+    // Clean up existing transform controls first using the dedicated cleanup method
+    this.cleanupTransformControlsAndHelpers();
+
+    // Find the directional light in the current scene
+    const foundActor = this.world.getActorsByPredicate(actor =>
+      actor.getComponents(ENGINE.DirectionalLightComponent).length > 0
+    )[0];
+
+    if (!foundActor) {
+      console.log('No directional light found in scene to attach transform controls.');
+      return;
+    }
+
+    // Update our reference to the new directional light
+    this.directionalLightActor = foundActor;
+
+    // Get the camera from the world for the transform controls
+    const camera = this.world.getActiveCamera();
+    if (!camera) {
+      console.log('No camera found for transform controls');
+      return;
+    }
+
+    // Create transform controls
+    this.transformControls = new TransformControls(camera, this.renderer.renderer.domElement);
+
+    // Attach to the directional light's root component
+    this.transformControls.attach(this.directionalLightActor.rootComponent);
+
+    // Add to the scene (cast to Object3D)
+    this.world.scene.add(this.transformControls.getHelper());
+
+    // Set initial mode to translate
+    this.transformControls.setMode('translate');
+
+    // Make the controls visible and slightly larger
+    this.transformControls.setSize(1.5);
+
+    // Show the directional light helper for better visualization with error handling
+    try {
+      const directionalLightComponents = this.directionalLightActor.getComponents(ENGINE.DirectionalLightComponent);
+      if (directionalLightComponents.length > 0) {
+        const directionalLight = directionalLightComponents[0];
+
+        directionalLight.showHelper(true);
+        // Mark helper as visible in userData for toggle button
+        directionalLight.userData.helperVisible = true;
+        console.log('Directional light helper shown');
+      } else {
+        console.warn('No DirectionalLightComponent found in the actor');
+      }
+    } catch (error) {
+      console.error('Error showing directional light helper:', error);
+    }
+
+    // Add event listeners
+    this.transformControls.addEventListener('dragging-changed', (event) => {
+      // Disable camera controls when dragging the transform control
+      const isDragging = event.value as boolean;
+      this.handleTransformControlsInteraction(isDragging);
+
+      // Update light direction when dragging ends
+      if (!isDragging) {
+        this.updateDirectionalLightDirection();
+      }
+    });
+
+    this.transformControls.addEventListener('change', () => {
+      // Update the light's direction in real-time during dragging
+      this.updateDirectionalLightDirection();
+    });
+
+    this.transformControls.addEventListener('objectChange', () => {
+      // Additional update when the object transformation changes
+      this.updateDirectionalLightDirection();
+    });
+
+    console.log('Transform controls reattached to new directional light successfully');
+  }
+
+  private createTweakPane(): void {
+    this.pane = new Pane({title: 'Lightmapping Demo'});
+
+    // Scene controls
+    const sceneFolder = this.pane.addFolder({title: 'Scene', expanded: true});
+
+    const loadSceneButton = sceneFolder.addButton({title: 'Load Default Scene File'});
+    loadSceneButton.on('click', async () => {
+      // Load the default fps-new.genesys-scene file directly
+      try {
+        const defaultScenePath = ENGINE.AssetPath.fromString('@engine/assets/dev/fps-new.genesys-scene');
+        this.clearExistingScene();
+        this.currentScenePath = defaultScenePath;
+        await this.loadWorldDataFromPath(defaultScenePath);
+
+        if (!this.world.getFirstActor(ENGINE.PlayerController)) {
+          ENGINE.GameBuilder.createDefaultPawn(this.world, new THREE.Vector3(0, 2, 0));
+        }
+
+        this.reattachTransformControls();
+        this.checkLightmapStatus('fps-new.genesys-scene');
+      } catch (error) {
+        console.error('Failed to load scene file:', error);
+        this.updateStatus('❌ Failed to load scene file');
+      }
+    });
+
+    const loadCustomSceneButton = sceneFolder.addButton({title: 'Load Custom Scene File'});
+    loadCustomSceneButton.on('click', () => {
+      this.fileInput?.click();
+    });
+
+    const reloadButton = sceneFolder.addButton({title: 'Reload Default Scene'});
+    reloadButton.on('click', () => {
+      this.loadDefaultScene();
+    });
+
+    // Basic lightmap settings
+    const basicFolder = this.pane.addFolder({title: 'Basic Settings', expanded: true});
+    basicFolder.addBinding(this.lightmapParams, 'resolution', {
+      min: 128,
+      max: 2048,
+      step: 128,
+      label: 'Resolution'
+    });
+    basicFolder.addBinding(this.lightmapParams, 'casts', {
+      min: 1,
+      max: 128,
+      step: 1,
+      label: 'Ray Casts'
+    });
+    basicFolder.addBinding(this.lightmapParams, 'progressiveSamples', {
+      min: 1,
+      max: 1000,
+      label: 'Samples'
+    });
+    basicFolder.addBinding(this.lightmapParams, 'lightSize', {
+      min: 0.1,
+      max: 2.0,
+      step: 0.1,
+      label: 'Light Size'
+    });
+
+    // Render mode control
+    const renderModeControl = basicFolder.addBinding(this.lightmapParams, 'renderMode', {
+      options: {
+        'Standard': 'standard',
+        'Positions': 'positions',
+        'Normals': 'normals',
+        'UV Debug': 'uv',
+        'Lightmap Only': 'lightmap',
+        'Beauty (Lightmap + Textures)': 'beauty'
+      },
+      label: 'Render Mode'
+    });
+    renderModeControl.on('change', () => {
+      this.onRenderModeChange();
+    });
+
+    // Lighting options
+    const lightingFolder = this.pane.addFolder({title: 'Lighting Options', expanded: true});
+    lightingFolder.addBinding(this.lightmapParams, 'directLightEnabled', {
+      label: 'Direct Light'
+    });
+    lightingFolder.addBinding(this.lightmapParams, 'indirectLightEnabled', {
+      label: 'Indirect Light'
+    });
+    lightingFolder.addBinding(this.lightmapParams, 'ambientLightEnabled', {
+      label: 'Ambient/AO'
+    });
+    lightingFolder.addBinding(this.lightmapParams, 'ambientDistance', {
+      min: 1.0,
+      max: 50.0,
+      step: 0.5,
+      label: 'AO Distance'
+    });
+
+    // Advanced settings
+    const advancedFolder = this.pane.addFolder({title: 'Advanced Settings', expanded: false});
+    advancedFolder.addBinding(this.lightmapParams, 'filterMode', {
+      options: {
+        Linear: 'Linear',
+        Nearest: 'Nearest'
+      },
+      label: 'Filter Mode'
+    });
+    advancedFolder.addBinding(this.lightmapParams, 'padding', {
+      min: 0,
+      max: 10,
+      step: 1,
+      label: 'Atlas Padding'
+    });
+    advancedFolder.addBinding(this.lightmapParams, 'dilate', {
+      label: 'Atlas Dilation'
+    });
+
+    // Manager options
+    const managerFolder = this.pane.addFolder({title: 'Baking Options', expanded: false});
+    managerFolder.addBinding(this.lightmapParams, 'progressiveBaking', {
+      label: 'Progressive Baking'
+    });
+    managerFolder.addBinding(this.lightmapParams, 'autoApply', {
+      label: 'Auto Apply'
+    });
+
+    // Action buttons
+    const actionsFolder = this.pane.addFolder({title: 'Actions', expanded: true});
+    const bakeButton = actionsFolder.addButton({title: 'Bake Lightmaps'});
+    bakeButton.on('click', () => {
+      this.bakeLightmaps();
+    });
+
+    const removeButton = actionsFolder.addButton({title: 'Remove Lightmaps'});
+    removeButton.on('click', () => {
+      this.removeLightmaps();
+    });
+
+    // Export/Import controls
+    const exportImportFolder = this.pane.addFolder({title: 'Export/Import', expanded: true});
+
+    exportImportFolder.addBinding(this.lightmapParams, 'includeSceneHash', {
+      label: 'Include Scene Hash'
+    });
+
+    const exportButton = exportImportFolder.addButton({title: 'Export Lightmaps (Files)'});
+    exportButton.on('click', () => {
+      this.exportLightmaps();
+    });
+
+    const exportDataButton = exportImportFolder.addButton({title: 'Export Data (Custom)'});
+    exportDataButton.on('click', () => {
+      this.exportLightmapData();
+    });
+
+    const importButton = exportImportFolder.addButton({title: 'Import Lightmaps'});
+    importButton.on('click', () => {
+      this.openImportDialog();
+    });
+
+    // Transform controls
+    const transformFolder = this.pane.addFolder({title: 'Transform Controls', expanded: true});
+
+    const translateButton = transformFolder.addButton({title: 'Translate Mode'});
+    translateButton.on('click', () => {
+      if (this.transformControls && this.transformControls.enabled) {
+        this.transformControls.setMode('translate');
+      } else {
+        console.log('Transform controls not available. Try refreshing controls first.');
+      }
+    });
+
+    const rotateButton = transformFolder.addButton({title: 'Rotate Mode'});
+    rotateButton.on('click', () => {
+      if (this.transformControls && this.transformControls.enabled) {
+        this.transformControls.setMode('rotate');
+      } else {
+        console.log('Transform controls not available. Try refreshing controls first.');
+      }
+    });
+
+    const scaleButton = transformFolder.addButton({title: 'Scale Mode'});
+    scaleButton.on('click', () => {
+      if (this.transformControls && this.transformControls.enabled) {
+        this.transformControls.setMode('scale');
+      } else {
+        console.log('Transform controls not available. Try refreshing controls first.');
+      }
+    });
+
+    const toggleControlsButton = transformFolder.addButton({title: 'Toggle Controls'});
+    toggleControlsButton.on('click', () => {
+      if (this.transformControls) {
+        this.transformControls.enabled = !this.transformControls.enabled;
+        console.log(`Transform controls ${this.transformControls.enabled ? 'enabled' : 'disabled'}`);
+      } else {
+        console.log('Transform controls not available. Try refreshing controls first.');
+      }
+    });
+
+    const refreshControlsButton = transformFolder.addButton({title: 'Refresh Controls'});
+    refreshControlsButton.on('click', () => {
+      this.reattachTransformControls();
+    });
+
+    const toggleLightHelperButton = transformFolder.addButton({title: 'Toggle Light Helper'});
+    toggleLightHelperButton.on('click', () => {
+      // Find the current directional light in the scene dynamically
+      const foundActor = this.world.getActorsByPredicate(actor =>
+        actor.getComponents(ENGINE.DirectionalLightComponent).length > 0
+      )[0];
+
+      if (foundActor) {
+        try {
+          const directionalLightComponents = foundActor.getComponents(ENGINE.DirectionalLightComponent);
+          if (directionalLightComponents.length > 0) {
+            const directionalLight = directionalLightComponents[0];
+
+            // Use userData to track toggle state per light component
+            const isHelperVisible = directionalLight.userData.helperVisible === true;
+
+            if (isHelperVisible) {
+              directionalLight.showHelper(false);
+              directionalLight.userData.helperVisible = false;
+              console.log('Light helper hidden');
+            } else {
+              directionalLight.showHelper(true);
+              directionalLight.userData.helperVisible = true;
+              console.log('Light helper shown');
+            }
+          } else {
+            console.warn('No DirectionalLightComponent found in the actor');
+          }
+        } catch (error) {
+          console.error('Error toggling light helper:', error);
+        }
+      } else {
+        console.log('No directional light found to toggle helper');
+      }
+    });
+
+    // Status display
+    this.pane.addBlade({ view: 'separator' });
+    const statusElement = document.createElement('div');
+    statusElement.style.padding = '8px';
+    statusElement.style.fontSize = '12px';
+    statusElement.style.color = '#888';
+    statusElement.style.backgroundColor = '#1a1a1a';
+    statusElement.style.borderRadius = '4px';
+    statusElement.innerHTML = 'Status: Ready<br/>💡 Move the directional light using transform controls, then bake to see the lighting changes!<br/>📍 The light position is captured at the moment baking starts.<br/>🔸 Static meshes (blue/red/teal cubes) will be included in lightmaps<br/>🔹 Dynamic meshes (yellow/purple cubes) will be excluded from lightmaps<br/>🔷 Kinematic meshes (green platform) will be excluded from lightmaps<br/>📦 Use "Export Data (Custom)" to see custom handling examples!';
+    exportImportFolder.element.appendChild(statusElement);
+
+    // Store reference for updates
+    (this as any).statusElement = statusElement;
+  }
+
+  /**
+   * Bakes lightmaps for the scene using the current settings
+   */
+  private async bakeLightmaps(): Promise<void> {
+    try {
+      this.updateStatus('Baking lightmaps...');
+
+      await this.lightmapManager.bakeLightmaps(
+        {
+          resolution: this.lightmapParams.resolution,
+          casts: this.lightmapParams.casts,
+          progressiveSamples: this.lightmapParams.progressiveSamples,
+
+          directLightEnabled: this.lightmapParams.directLightEnabled,
+          indirectLightEnabled: this.lightmapParams.indirectLightEnabled,
+          ambientLightEnabled: this.lightmapParams.ambientLightEnabled,
+          ambientDistance: this.lightmapParams.ambientDistance,
+          filterMode: this.lightmapParams.filterMode === 'Linear' ? THREE.LinearFilter : THREE.NearestFilter,
+          atlasOptions: {
+            resolution: this.lightmapParams.resolution,
+            padding: this.lightmapParams.padding,
+            dilate: this.lightmapParams.dilate
+          }
+        },
+        (stage, progress, message) => {
+          this.updateStatus(`${stage}: ${progress.toFixed(1)}% - ${message ?? ''}`);
+        }
+      );
+
+      this.updateStatus('✓ Lightmaps baked successfully! Ready to export.');
+    } catch (error) {
+      this.updateStatus(`✗ Lightmap baking failed: ${error}`);
+      console.error('Lightmap baking failed:', error);
+    }
+  }
+
+  private removeLightmaps(): void {
+    this.lightmapManager.removeLightmaps();
+    // Light management is now handled automatically by LightmapManager.removeLightmaps()
+    this.updateStatus('Lightmaps removed. Dynamic lighting restored.');
+  }
+
+  /**
+   * Exports the current lightmaps to files
+   */
+  private async exportLightmaps(): Promise<void> {
+    try {
+      if (!this.lightmapManager.hasLightmapData()) {
+        this.updateStatus('No lightmap data to export. Bake lightmaps first.');
+        return;
+      }
+
+      this.updateStatus('Exporting lightmaps...');
+
+      // Get base filename from current scene path or use default
+      const baseFileName = this.currentScenePath ?
+        this.currentScenePath.initialPath.replace(/\.[^/.]+$/, '').replace(/^\/+/, '') :
+        'lightmap-demo';
+
+      // Get the lightmap data using the pure manager API
+      const result = await this.lightmapManager.exportLightmapData(baseFileName, {
+        includeSceneHash: this.lightmapParams.includeSceneHash,
+      });
+
+      // Handle file downloads in the demo
+      this.downloadBlob(result.textureBlob, result.textureFileName);
+
+      const metadataBlob = new Blob([result.metadataJson], { type: 'application/json' });
+      this.downloadBlob(metadataBlob, result.metadataFileName);
+
+      this.updateStatus(`✓ Lightmaps exported: ${result.metadataFileName} and ${result.textureFileName}`);
+    } catch (error) {
+      this.updateStatus(`✗ Export failed: ${error}`);
+      console.error('Failed to export lightmaps:', error);
+    }
+  }
+
+  /**
+   * Exports lightmap data for custom handling (demonstrates the new exportLightmapData API)
+   */
+  private async exportLightmapData(): Promise<void> {
+    try {
+      if (!this.lightmapManager.hasLightmapData()) {
+        this.updateStatus('No lightmap data to export. Bake lightmaps first.');
+        return;
+      }
+
+      this.updateStatus('Exporting lightmap data for custom handling...');
+
+      // Get base filename from current scene path or use default
+      const baseFileName = this.currentScenePath ?
+        this.currentScenePath.initialPath.replace(/\.[^/.]+$/, '').replace(/^\/+/, '') :
+        'lightmap-demo';
+
+      // Use the new exportLightmapData method to get data instead of directly creating files
+      const result = await this.lightmapManager.exportLightmapData(baseFileName, {
+        includeSceneHash: this.lightmapParams.includeSceneHash,
+      });
+
+      // Demonstrate different ways to handle the data:
+      console.log('📦 Lightmap data exported for custom handling:');
+      console.log(`  Metadata size: ${(result.metadataJson.length / 1024).toFixed(2)} KB`);
+      console.log(`  Texture size: ${(result.textureBlob.size / 1024 / 1024).toFixed(2)} MB`);
+      console.log(`  Suggested filenames: ${result.metadataFileName}, ${result.textureFileName}`);
+
+      // Example 1: Save to browser's IndexedDB for offline use
+      await this.saveToIndexedDB(result);
+
+      // Example 2: Create downloadable files manually (same result as exportLightmap)
+      this.downloadLightmapData(result);
+
+      // Example 3: Send to a server (simulated)
+      await this.simulateServerUpload(result);
+
+      this.updateStatus('✓ Lightmap data exported with custom handling examples (check console for details)');
+    } catch (error) {
+      this.updateStatus(`✗ Export data failed: ${error}`);
+      console.error('Failed to export lightmap data:', error);
+    }
+  }
+
+  /**
+   * Example: Save lightmap data to IndexedDB for offline use
+   */
+  private async saveToIndexedDB(lightmapData: any): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open('LightmapStorage', 1);
+
+      request.onerror = () => reject(request.error);
+
+      request.onsuccess = () => {
+        const db = request.result;
+        const transaction = db.transaction(['lightmaps'], 'readwrite');
+        const store = transaction.objectStore('lightmaps');
+
+        const lightmapRecord = {
+          id: Date.now(),
+          metadata: lightmapData.metadataJson,
+          texture: lightmapData.textureBlob,
+          metadataFileName: lightmapData.metadataFileName,
+          textureFileName: lightmapData.textureFileName,
+          timestamp: new Date().toISOString()
+        };
+
+        store.add(lightmapRecord);
+        transaction.oncomplete = () => {
+          console.log('💾 Lightmap data saved to IndexedDB for offline use');
+          resolve();
+        };
+        transaction.onerror = () => reject(transaction.error);
+      };
+
+      request.onupgradeneeded = () => {
+        const db = request.result;
+        if (!db.objectStoreNames.contains('lightmaps')) {
+          db.createObjectStore('lightmaps', { keyPath: 'id' });
+        }
+      };
+    });
+  }
+
+  /**
+   * Example: Manually create downloadable files from the data
+   */
+  private downloadLightmapData(lightmapData: any): void {
+    // Create metadata blob and download
+    const metadataBlob = new Blob([lightmapData.metadataJson], { type: 'application/json' });
+    this.downloadBlob(metadataBlob, lightmapData.metadataFileName);
+
+    // Download texture blob
+    this.downloadBlob(lightmapData.textureBlob, lightmapData.textureFileName);
+
+    console.log('📁 Lightmap files downloaded manually from data');
+  }
+
+  /**
+   * Helper method to download a blob as a file
+   */
+  private downloadBlob(blob: Blob, filename: string): void {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.style.display = 'none';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+
+  /**
+   * Example: Simulate sending lightmap data to a server
+   */
+  private async simulateServerUpload(lightmapData: any): Promise<void> {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        console.log('🌐 Simulated server upload:');
+        console.log(`  Would POST metadata (${(lightmapData.metadataJson.length / 1024).toFixed(2)} KB) to /api/lightmaps/metadata`);
+        console.log(`  Would POST texture (${(lightmapData.textureBlob.size / 1024 / 1024).toFixed(2)} MB) to /api/lightmaps/texture`);
+        console.log('  Server could store these in cloud storage, database, etc.');
+        resolve();
+      }, 500); // Simulate network delay
+    });
+  }
+
+  /**
+   * Opens a file dialog to select lightmap files to import
+   */
+  private openImportDialog(): void {
+    // Create file input element for lightmap files
+    const fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.accept = '.lightmap.json';
+    fileInput.multiple = false;
+    fileInput.style.display = 'none';
+
+    // Handle file selection
+    fileInput.addEventListener('change', (event) => {
+      const target = event.target as HTMLInputElement;
+      const file = target.files?.[0];
+
+      if (file) {
+        this.importLightmapsFromFile(file);
+      }
+
+      // Clean up
+      document.body.removeChild(fileInput);
+    });
+
+    // Add to DOM and trigger click
+    document.body.appendChild(fileInput);
+    fileInput.click();
+  }
+
+  /**
+   * Imports lightmaps from a selected file
+   */
+  private async importLightmapsFromFile(file: File): Promise<void> {
+    try {
+      this.updateStatus('📂 Loading lightmap file...');
+
+      // Read the lightmap JSON file
+      const lightmapText = await file.text();
+      const lightmapData = JSON.parse(lightmapText);
+
+      // Extract the binary filename from the lightmap data
+      const binaryFileName = lightmapData.lightmap?.textureFile;
+      if (!binaryFileName) {
+        throw new Error('Lightmap file does not contain texture file reference');
+      }
+
+      // Prompt user to select the binary file
+      this.updateStatus('📂 Please select the corresponding binary texture file...');
+
+      const binaryFile = await this.selectBinaryFile(binaryFileName);
+      if (!binaryFile) {
+        this.updateStatus('❌ Binary file selection cancelled');
+        return;
+      }
+
+      // Read binary file as ArrayBuffer
+      const textureData = await binaryFile.arrayBuffer();
+
+      // Import using the new API
+      await this.lightmapManager.importLightmap(lightmapData, textureData);
+
+      this.updateStatus('✓ Lightmaps imported successfully! (full precision preserved)');
+
+    } catch (error) {
+      this.updateStatus(`✗ Import failed: ${error}`);
+      console.error('Failed to import lightmaps:', error);
+    }
+  }
+
+  /**
+   * Prompts user to select the binary texture file
+   */
+  private async selectBinaryFile(expectedFileName: string): Promise<File | null> {
+    return new Promise((resolve) => {
+      const fileInput = document.createElement('input');
+      fileInput.type = 'file';
+      fileInput.accept = '.lightmap';
+      fileInput.style.display = 'none';
+
+      // Add instruction text
+      const instruction = document.createElement('div');
+      instruction.textContent = `Please select: ${expectedFileName}`;
+      instruction.style.cssText = 'position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border: 2px solid #ccc; border-radius: 8px; z-index: 10000; font-family: Arial; box-shadow: 0 4px 8px rgba(0,0,0,0.2);';
+
+      fileInput.addEventListener('change', (event) => {
+        const target = event.target as HTMLInputElement;
+        const file = target.files?.[0] ?? null;
+
+        // Clean up - remove event listener first
+        document.removeEventListener('click', handleCancel);
+
+        // Remove elements if they still exist
+        if (document.body.contains(fileInput)) {
+          document.body.removeChild(fileInput);
+        }
+        if (document.body.contains(instruction)) {
+          document.body.removeChild(instruction);
+        }
+
+        resolve(file);
+      });
+
+      // Cancel if user clicks outside
+      const handleCancel = (event: Event) => {
+        if (event.target === instruction) return;
+        document.removeEventListener('click', handleCancel);
+
+        // Remove elements if they still exist
+        if (document.body.contains(fileInput)) {
+          document.body.removeChild(fileInput);
+        }
+        if (document.body.contains(instruction)) {
+          document.body.removeChild(instruction);
+        }
+        resolve(null);
+      };
+
+      setTimeout(() => {
+        document.addEventListener('click', handleCancel);
+      }, 100);
+
+      // Add to DOM and trigger click
+      document.body.appendChild(instruction);
+      document.body.appendChild(fileInput);
+      fileInput.click();
+    });
+  }
+
+  /**
+   * Updates the status display in the UI
+   */
+  private updateStatus(message: string): void {
+    const statusElement = (this as any).statusElement;
+    if (statusElement) {
+      statusElement.innerHTML = `Status: ${message}`;
+    }
+
+  }
+
+  private debugTextureActors: ENGINE.Actor<any>[] = [];
+
+  private createDebugTextures(): void {
+    // Clear existing debug textures
+    this.clearDebugTextures();
+
+    if (!this.lightmapManager || !this.lightmapManager.hasLightmapData()) {
+      return;
+    }
+
+    // Get the baked lightmap texture
+    const lightmapTexture = this.lightmapManager.getLastBakedTexture();
+    if (lightmapTexture) {
+      this.createDebugTexture(lightmapTexture, new THREE.Vector3(-30, 10, 0), 'Final Lightmap');
+    }
+
+    // Try to get atlas textures from the baker if possible
+    const baker = this.lightmapManager.getBaker();
+    if (baker) {
+      const atlasResult = baker.getAtlasResult();
+
+      if (atlasResult?.positionTexture) {
+        this.createDebugTexture(atlasResult.positionTexture, new THREE.Vector3(-30, 30, 0), 'Position Atlas');
+      }
+
+      if (atlasResult?.normalTexture) {
+        this.createDebugTexture(atlasResult.normalTexture, new THREE.Vector3(-30, 50, 0), 'Normal Atlas');
+      }
+    }
+  }
+
+  private createDebugTexture(texture: THREE.Texture, position: THREE.Vector3, label: string): void {
+    // Check if this is an HDR texture (FloatType) and needs special handling
+    const isHDR = texture.type === THREE.FloatType;
+
+    let material: THREE.Material;
+
+    if (isHDR) {
+      // Use a custom shader material for HDR textures with tone mapping
+      material = new THREE.ShaderMaterial({
+        uniforms: {
+          tDiffuse: { value: texture },
+          exposure: { value: 1.0 }
+        },
+        vertexShader: `
+          varying vec2 vUv;
+          void main() {
+            vUv = uv;
+            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+          }
+        `,
+        fragmentShader: `
+          uniform sampler2D tDiffuse;
+          uniform float exposure;
+          varying vec2 vUv;
+          
+          // Simple tone mapping function
+          vec3 toneMap(vec3 color, float exposure) {
+            color *= exposure;
+            return color / (color + 1.0); // Reinhard tone mapping
+          }
+          
+          void main() {
+            vec4 texel = texture2D(tDiffuse, vUv);
+            vec3 color = toneMap(texel.rgb, exposure);
+            gl_FragColor = vec4(color, texel.a);
+          }
+        `,
+        side: THREE.DoubleSide
+      });
+    } else {
+      material = new THREE.MeshBasicMaterial({
+        map: texture,
+        side: THREE.DoubleSide
+      });
+    }
+
+    const debugTexture = new THREE.Mesh(
+      new THREE.PlaneGeometry(20, 20),
+      material
+    );
+
+    const debugActor = new ENGINE.Actor({
+      rootComponent: new ENGINE.MeshComponent({
+        mesh: debugTexture
+      })
+    });
+
+    debugActor.setWorldPosition(position);
+
+    this.world.addActors(debugActor);
+    this.debugTextureActors.push(debugActor);
+  }
+
+  private clearDebugTextures(): void {
+    this.world.removeActors(...this.debugTextureActors);
+    this.debugTextureActors = [];
+  }
+
+  /**
+   * Stores original material maps before applying debug textures
+   */
+  private storeOriginalMaterials(): void {
+    const actors = this.world.getActors();
+    for (const actor of actors) {
+      const meshes = this.getMeshesFromActor(actor);
+      for (const mesh of meshes) {
+        if (mesh.material) {
+          const material = Array.isArray(mesh.material) ? mesh.material[0] : mesh.material;
+          if (material instanceof THREE.MeshStandardMaterial || material instanceof THREE.MeshLambertMaterial) {
+            if (!this.originalMaterialMaps.has(material)) {
+              this.originalMaterialMaps.set(material, material.map);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Creates a UV debug texture for visualization
+   */
+  private createUVDebugTexture(): THREE.Texture {
+    const size = 512;
+    const canvas = document.createElement('canvas');
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext('2d')!;
+
+    // Create a UV grid pattern
+    ctx.fillStyle = '#000000';
+    ctx.fillRect(0, 0, size, size);
+
+    // Draw grid lines
+    ctx.strokeStyle = '#ffffff';
+    ctx.lineWidth = 2;
+    const gridSize = size / 8;
+
+    for (let i = 0; i <= 8; i++) {
+      const pos = i * gridSize;
+      // Vertical lines
+      ctx.beginPath();
+      ctx.moveTo(pos, 0);
+      ctx.lineTo(pos, size);
+      ctx.stroke();
+
+      // Horizontal lines
+      ctx.beginPath();
+      ctx.moveTo(0, pos);
+      ctx.lineTo(size, pos);
+      ctx.stroke();
+    }
+
+    // Add corner colors for UV orientation
+    ctx.fillStyle = '#ff0000'; // Red = (1,1)
+    ctx.fillRect(size - gridSize/2, 0, gridSize/2, gridSize/2);
+
+    ctx.fillStyle = '#00ff00'; // Green = (0,1)
+    ctx.fillRect(0, 0, gridSize/2, gridSize/2);
+
+    ctx.fillStyle = '#0000ff'; // Blue = (0,0)
+    ctx.fillRect(0, size - gridSize/2, gridSize/2, gridSize/2);
+
+    ctx.fillStyle = '#ffff00'; // Yellow = (1,0)
+    ctx.fillRect(size - gridSize/2, size - gridSize/2, gridSize/2, gridSize/2);
+
+    const texture = new THREE.CanvasTexture(canvas);
+    texture.flipY = false;
+    texture.wrapS = THREE.RepeatWrapping;
+    texture.wrapT = THREE.RepeatWrapping;
+    return texture;
+  }
+
+  /**
+   * Handles render mode changes to switch between different visualizations
+   */
+  private onRenderModeChange(): void {
+    // Store original materials if not already done
+    this.storeOriginalMaterials();
+
+    const actors = this.world.getActors();
+
+    for (const actor of actors) {
+      const meshes = this.getMeshesFromActor(actor);
+      for (const mesh of meshes) {
+        if (mesh.material) {
+          const material = Array.isArray(mesh.material) ? mesh.material[0] : mesh.material;
+          if (material instanceof THREE.MeshStandardMaterial || material instanceof THREE.MeshLambertMaterial) {
+
+            // Reset material state
+            material.map = null;
+            material.lightMap = null;
+
+            switch (this.lightmapParams.renderMode) {
+              case 'standard':
+                // Restore original textures and remove lightmap
+                const originalMap = this.originalMaterialMaps.get(material);
+                material.map = originalMap ?? null;
+                material.lightMap = null;
+                break;
+
+              case 'positions':
+                // Show position atlas texture
+                if (this.lightmapManager && this.lightmapManager.getBaker()?.getAtlasResult()?.positionTexture) {
+                  material.lightMap = this.lightmapManager.getBaker()!.getAtlasResult()!.positionTexture;
+                  if (material.lightMap) {
+                    material.lightMap.channel = 2;
+                  }
+                }
+                break;
+
+              case 'normals':
+                // Show normal atlas texture
+                if (this.lightmapManager && this.lightmapManager.getBaker()?.getAtlasResult()?.normalTexture) {
+                  material.lightMap = this.lightmapManager.getBaker()!.getAtlasResult()!.normalTexture;
+                  if (material.lightMap) {
+                    material.lightMap.channel = 2;
+                  }
+                }
+                break;
+
+              case 'uv':
+                // Show UV debug texture
+                material.lightMap = this.createUVDebugTexture();
+                material.lightMap.channel = 2;
+                break;
+
+              case 'lightmap':
+                // Show lightmap only
+                if (this.lightmapManager && this.lightmapManager.getLastBakedTexture()) {
+                  material.lightMap = this.lightmapManager.getLastBakedTexture();
+                  if (material.lightMap) {
+                    material.lightMap.channel = 2;
+                  }
+                }
+                break;
+
+              case 'beauty':
+                // Show lightmap + original textures
+                const originalMapBeauty = this.originalMaterialMaps.get(material);
+                material.map = originalMapBeauty ?? null;
+                if (this.lightmapManager && this.lightmapManager.getLastBakedTexture()) {
+                  material.lightMap = this.lightmapManager.getLastBakedTexture();
+                  if (material.lightMap) {
+                    material.lightMap.channel = 2;
+                  }
+                }
+                break;
+            }
+
+            // Update material properties
+            if (material.lightMap) {
+              material.lightMap.needsUpdate = true;
+              material.lightMap.channel = 2;
+            }
+            material.lightMapIntensity = 1.0;
+            material.needsUpdate = true;
+          }
+        }
+      }
+    }
+
+    // Manage runtime lighting based on render mode
+    if (this.lightmapParams.renderMode === 'standard') {
+      // Restore dynamic lighting
+      this.lightmapManager?.manageRuntimeLighting(false);
+    } else {
+      // Hide runtime lights for debug modes
+      this.lightmapManager?.manageRuntimeLighting(true);
+    }
+
+    this.updateStatus(`Render mode: ${this.lightmapParams.renderMode}`);
+  }
+
+  /**
+   * Helper method to get meshes from an actor (reused logic)
+   */
+  private getMeshesFromActor(actor: ENGINE.Actor<any>): THREE.Mesh[] {
+    const meshes: THREE.Mesh[] = [];
+
+    if (actor instanceof ENGINE.GLTFMeshActor) {
+      const gltfMesh = actor.rootComponent as ENGINE.GLTFMeshComponent;
+      if (gltfMesh) {
+        meshes.push(...gltfMesh.getAllMeshes());
+      }
+    } else {
+      const rootComponent = actor.rootComponent;
+      if (rootComponent instanceof ENGINE.MeshComponent) {
+        const mesh = rootComponent.getMesh();
+        if (mesh) {
+          meshes.push(mesh);
+        }
+      }
+    }
+
+    return meshes;
+  }
+
+  public override destroy(): void {
+    // Clean up file input
+    if (this.fileInput) {
+      this.fileInput.remove();
+      this.fileInput = null;
+    }
+
+    // Clean up transform controls and light helpers
+    this.cleanupTransformControlsAndHelpers();
+
+    this.pane.dispose();
+
+    this.lightmapManager?.dispose();
+    super.destroy();
+  }
+}