Improved lighting, removed debug text

app.py

@@ -242,15 +242,6 @@ APP_CSS = """
             border: none;
         }
 
-        /* PostMessage Container - must be invisible */
-        #postmessage-container {
-            position: absolute;
-            width: 0;
-            height: 0;
-            overflow: hidden;
-            pointer-events: none;
-        }
-
         /* Toast Notifications */
         #toast-container {
             position: fixed;
@@ -271,14 +262,50 @@ APP_CSS = """
         .toast.success { border-left-color: #4caf50; }
         .toast.error { border-left-color: #f44336; }
 
-        /* Hide the action data textbox but keep it in DOM for events to fire */
-        .hidden-action,
-        .hidden-action textarea,
-        .hidden-action input,
-        .hidden-action label,
-        .hidden-action .wrap,
-        #action-data,
-        #crosshair-pos {
+        /* LLM Toggle Buttons */
+        #llm-toggle-row {
+            margin-top: 8px;
+            gap: 0 !important;
+        }
+
+        .llm-btn {
+            border-radius: 0 !important;
+            border: 1px solid #444 !important;
+            background: #2a2a2a !important;
+            color: #888 !important;
+            font-size: 13px !important;
+            padding: 8px 16px !important;
+            min-height: 36px !important;
+            transition: all 0.2s ease !important;
+        }
+
+        .llm-btn:first-child {
+            border-radius: 6px 0 0 6px !important;
+            border-right: none !important;
+        }
+
+        .llm-btn:last-child {
+            border-radius: 0 6px 6px 0 !important;
+        }
+
+        .llm-btn:hover {
+            background: #3a3a3a !important;
+            color: #aaa !important;
+        }
+
+        .llm-btn-active {
+            background: #4a6fa5 !important;
+            color: #fff !important;
+            border-color: #5a7fb5 !important;
+        }
+
+        .llm-btn-active:hover {
+            background: #5a7fb5 !important;
+            color: #fff !important;
+        }
+
+        /* Hidden action textbox - must be in DOM but invisible for .change() to fire */
+        .hidden-action {
             position: absolute !important;
             width: 1px !important;
             height: 1px !important;
@@ -295,6 +322,9 @@ APP_CSS = """
 
 # Build immersive chat interface with overlay
 with gr.Blocks(title="GCP - Game Context Protocol") as demo:
+    # Inject custom CSS via HTML style tag (Gradio 6 doesn't support css= parameter)
+    gr.HTML(f"<style>{APP_CSS}</style>")
+
     # Initialize JavaScript functionality (minimal essentials only)
     gr.HTML("""
         <script>
@@ -372,13 +402,8 @@ with gr.Blocks(title="GCP - Game Context Protocol") as demo:
                 }
 
                 if (event.data && event.data.action === 'crosshairPosition') {
+                    // Store crosshair position in window for JS access
                     window.crosshairPosition = event.data.data;
-                    // Update hidden Gradio textbox so Python can read it
-                    const crosshairInput = document.querySelector('#crosshair-pos textarea');
-                    if (crosshairInput) {
-                        crosshairInput.value = event.data.data ? JSON.stringify(event.data.data) : '';
-                        crosshairInput.dispatchEvent(new Event('input', { bubbles: true }));
-                    }
                 }
             });
 
@@ -395,23 +420,11 @@ with gr.Blocks(title="GCP - Game Context Protocol") as demo:
         </script>
     """)
 
-    # State for file handling
-    file_state = gr.State([])
-
-    # Component for passing action data to JavaScript via .change() event
-    #
-    # IMPORTANT: DO NOT set visible=False!
-    # Gradio's visible=False removes the component from the DOM or renders it in a way
-    # that prevents .change() events from firing when the value is updated programmatically.
-    # Instead, we use visible=True and hide it with CSS (see .hidden-action in APP_CSS).
-    # This keeps the element in the DOM so events fire properly.
-    #
-    # The flow: bot() returns JSON → action_data updates → .change() fires → JS sends postMessage to iframe
-    action_data = gr.Textbox(value="", elem_id="action-data", visible=True, elem_classes=["hidden-action"])
+    # State for crosshair position (received from JS via window.crosshairPosition)
+    crosshair_state = gr.State("")
 
-    # Hidden textbox to receive crosshair position from JavaScript
-    # JS updates this via: document.querySelector('#crosshair-pos textarea').value = JSON.stringify(pos)
-    crosshair_pos = gr.Textbox(value="", elem_id="crosshair-pos", visible=True, elem_classes=["hidden-action"])
+    # State for selected LLM provider
+    provider_state = gr.State("openai")
 
     # Main container - side by side layout: Chat (left) | Viewer (right)
     with gr.Row(elem_id="main-container", equal_height=True):
@@ -419,25 +432,20 @@ with gr.Blocks(title="GCP - Game Context Protocol") as demo:
         with gr.Column(elem_id="chat-column", scale=1, min_width=350):
             gr.Markdown("### 🎮 GCP - Game Context Protocol")
             chatbot = gr.Chatbot(
-                height=450,  # Slightly shorter to make room for provider dropdown
+                height=480,
                 show_label=False,
                 elem_id="chatbot",
             )
-            with gr.Row():
-                msg = gr.Textbox(
-                    placeholder="'add a red cube' • 'set lighting to night' • 'help'",
-                    show_label=False,
-                    container=False,
-                    elem_id="chat-input",
-                    scale=4
-                )
-                provider_dropdown = gr.Dropdown(
-                    choices=["openai", "gemini"],
-                    value="openai",
-                    label="LLM",
-                    scale=1,
-                    min_width=100
-                )
+            msg = gr.Textbox(
+                placeholder="'add a red cube' • 'set lighting to night' • 'help'",
+                show_label=False,
+                container=False,
+                elem_id="chat-input",
+            )
+            # LLM Provider toggle buttons
+            with gr.Row(elem_id="llm-toggle-row"):
+                btn_openai = gr.Button("OpenAI", elem_id="btn-openai", elem_classes=["llm-btn", "llm-btn-active"], scale=1)
+                btn_gemini = gr.Button("Gemini", elem_id="btn-gemini", elem_classes=["llm-btn"], scale=1)
 
         # Right column: 3D Viewer (scale=3 = ~75% width)
         with gr.Column(elem_id="viewer-column", scale=3):
@@ -532,7 +540,7 @@ with gr.Blocks(title="GCP - Game Context Protocol") as demo:
         history.append({"role": "user", "content": user_message})
         return "", history
 
-    def bot(history, crosshair_position, provider):
+    def bot(history, provider):
         """Generate bot response using selected LLM provider"""
         # Gradio 6: content can be a string or list of content blocks
         content = history[-1]["content"]
@@ -545,34 +553,25 @@ with gr.Blocks(title="GCP - Game Context Protocol") as demo:
         else:
             user_message = content
 
-        # Parse crosshair position from JSON string
+        # Crosshair position is passed via JS (see js parameter on .then())
+        # It will be injected by the JS code that runs before this function
         crosshair_pos_dict = None
-        if crosshair_position:
-            try:
-                crosshair_pos_dict = json.loads(crosshair_position)
-            except:
-                pass
 
         # Process command with crosshair context and selected provider
         bot_message, action_result = chat_response(user_message, [], crosshair_pos_dict, provider)
         history.append({"role": "assistant", "content": bot_message})
 
         # Handle action_result
-        viewer_html = viewer.value  # Default: keep current viewer
         action_json = ""  # Default: no action (empty string)
 
         if action_result:
             action_type = action_result.get("action")
 
-            if action_type == "reload":
-                # Full reload: update iframe src
-                viewer_html = f'<div id="viewer-container" style="width:100%; min-height:500px; height:70vh;"><iframe src="{action_result["url"]}" style="width:100%; height:100%; border:none;"></iframe></div>'
-
-            else:
+            if action_type != "reload":
                 # Generate toast message for the action
                 toast_message = _get_toast_message(action_type, action_result.get("data", {}))
 
-                # Send action to viewer via postMessage
+                # Send action to viewer via postMessage (handled by JS in .then())
                 action_json = json.dumps({
                     "action": action_result["action"],
                     "data": action_result["data"],
@@ -581,18 +580,64 @@ with gr.Blocks(title="GCP - Game Context Protocol") as demo:
                     "timestamp": time.time()
                 })
 
-        return history, viewer_html, action_json
+        return history, action_json
+
+    # Toggle button click handlers
+    def select_openai(current_provider):
+        return "openai"
+
+    def select_gemini(current_provider):
+        return "gemini"
+
+    btn_openai.click(
+        fn=select_openai,
+        inputs=[provider_state],
+        outputs=[provider_state],
+        js="""
+        (provider) => {
+            document.getElementById('btn-openai').classList.add('llm-btn-active');
+            document.getElementById('btn-gemini').classList.remove('llm-btn-active');
+            return provider;
+        }
+        """
+    )
+
+    btn_gemini.click(
+        fn=select_gemini,
+        inputs=[provider_state],
+        outputs=[provider_state],
+        js="""
+        (provider) => {
+            document.getElementById('btn-gemini').classList.add('llm-btn-active');
+            document.getElementById('btn-openai').classList.remove('llm-btn-active');
+            return provider;
+        }
+        """
+    )
+
+    # Hidden textbox to trigger JS via .change() event
+    # NOTE: Must be visible=True with CSS hiding, as visible=False prevents .change() from firing
+    action_data = gr.Textbox(value="", elem_id="action-data", visible=True, elem_classes=["hidden-action"])
 
-    # When action_data changes, this handler sends postMessage to the iframe
-    def handle_action_change(action_json):
-        return action_json  # Pass through for JS
+    msg.submit(
+        user,
+        [msg, chatbot],
+        [msg, chatbot],
+        queue=False
+    ).then(
+        bot,
+        [chatbot, provider_state],
+        [chatbot, action_data],
+    )
 
+    # When action_data changes, send postMessage to iframe
     action_data.change(
-        fn=handle_action_change,
+        fn=lambda x: x,
         inputs=[action_data],
         outputs=[action_data],
         js="""
         (actionJson) => {
+            // Send postMessage to iframe if there's action data
             if (actionJson && actionJson.length > 2) {
                 try {
                     const actionData = JSON.parse(actionJson);
@@ -605,9 +650,11 @@ with gr.Blocks(title="GCP - Game Context Protocol") as demo:
                         if (actionData.toast && window.showToast) {
                             window.showToast(actionData.toast, actionData.toastType || 'success');
                         }
+                    } else {
+                        console.error('❌ iframe not found');
                     }
                 } catch (e) {
-                    // Silently ignore parse errors
+                    console.error('Failed to parse action:', e);
                 }
             }
             return actionJson;
@@ -615,17 +662,6 @@ with gr.Blocks(title="GCP - Game Context Protocol") as demo:
         """
     )
 
-    msg.submit(
-        user,
-        [msg, chatbot],
-        [msg, chatbot],
-        queue=False
-    ).then(
-        bot,
-        [chatbot, crosshair_pos, provider_dropdown],
-        [chatbot, viewer, action_data]
-    )
-
 
 if __name__ == "__main__":
     demo.queue()

backend/game_models.py

@@ -9,7 +9,7 @@ import uuid
 
 # Game Types
 ObjectType = Literal["cube", "sphere", "cylinder", "plane", "cone", "torus", "model"]
-LightType = Literal["ambient", "directional", "point", "spot"]
+LightType = Literal["ambient", "directional", "point", "spot", "hemisphere"]
 LightingPreset = Literal["day", "night", "sunset", "studio"]
 CameraMode = Literal["fps", "orbit", "top_down", "free"]
 MaterialType = Literal["standard", "basic", "phong", "toon"]
@@ -73,10 +73,27 @@ def create_light(
     intensity: float = 1.0,
     position: Optional[Dict[str, float]] = None,
     target: Optional[Dict[str, float]] = None,
-    cast_shadow: bool = True
+    cast_shadow: bool = True,
+    ground_color: Optional[str] = None,  # For hemisphere lights
+    distance: Optional[float] = None,    # For point/spot lights
+    decay: float = 2.0                   # Physically correct decay for point lights
 ) -> Dict[str, Any]:
-    """Create a light source."""
-    return {
+    """
+    Create a light source.
+
+    Args:
+        light_type: Type of light (ambient, directional, point, spot, hemisphere)
+        name: Light name for identification
+        color: Light color in hex format (sky color for hemisphere)
+        intensity: Light intensity (0.0-2.0 typical, higher for specific effects)
+        position: Light position in 3D space
+        target: Target position for directional/spot lights
+        cast_shadow: Whether the light casts shadows (directional/spot only)
+        ground_color: Ground color for hemisphere lights (defaults to darker version of color)
+        distance: Maximum range for point/spot lights (0 = infinite)
+        decay: Light falloff rate for point/spot (2.0 = physically correct)
+    """
+    light = {
         "id": str(uuid.uuid4()),
         "name": name,
         "type": light_type,
@@ -84,9 +101,21 @@ def create_light(
         "intensity": intensity,
         "position": position or create_vector3(10, 10, 10),
         "target": target,
-        "cast_shadow": cast_shadow
+        "cast_shadow": cast_shadow,
     }
 
+    # Add hemisphere-specific properties
+    if light_type == "hemisphere":
+        light["ground_color"] = ground_color or "#444444"
+
+    # Add point/spot-specific properties
+    if light_type in ["point", "spot"]:
+        if distance is not None:
+            light["distance"] = distance
+        light["decay"] = decay
+
+    return light
+
 
 def create_environment(
     background_color: str = "#87CEEB",

backend/storage.py

@@ -57,20 +57,78 @@ def initialize_default_scene():
         create_game_object, create_material
     )
 
-    # Create lights for sunset preset (warm, dramatic lighting)
+    # Create lights using Three.js best practices:
+    # - Ambient: Low intensity (~0.1-0.2) to fake light bounce without washing out scene
+    # - Directional: Main sun light with warm color for outdoor feel
+    # - Secondary directional: Fill light from opposite side to soften shadows
+    # - Point lights: Distributed around arena for even coverage
     lights = [
+        # Main directional light (sun) - warm sunset color, positioned for dramatic shadows
         create_light(
             name="Sun",
             light_type="directional",
-            color="#ff9944",  # Warm sunset orange
-            intensity=1.2,
-            position=create_vector3(50, 30, 50),
+            color="#ffd4a3",  # Warm sunlight (less saturated orange)
+            intensity=1.5,
+            position=create_vector3(10, 20, 10),
+            cast_shadow=True,
         ),
+        # Fill light - cooler blue from opposite side to balance shadows
+        create_light(
+            name="FillLight",
+            light_type="directional",
+            color="#a3c4ff",  # Cool blue fill
+            intensity=0.4,
+            position=create_vector3(-10, 15, -5),
+        ),
+        # Ambient light - very low intensity to simulate indirect light bounce
         create_light(
             name="Ambient",
             light_type="ambient",
-            color="#ffcc88",  # Warm ambient
-            intensity=0.4,
+            color="#404060",  # Slightly blue-ish for natural feel
+            intensity=0.2,
+        ),
+        # === Arena Point Lights (distributed for even coverage) ===
+        # Center light - main arena illumination
+        create_light(
+            name="ArenaCenter",
+            light_type="point",
+            color="#ffffff",  # Neutral white
+            intensity=1.0,
+            position=create_vector3(0, 10, 0),
+            distance=30,
+        ),
+        # Corner lights - warm tones for cozy feel
+        create_light(
+            name="ArenaCornerNE",
+            light_type="point",
+            color="#ffcc88",  # Warm
+            intensity=0.6,
+            position=create_vector3(8, 6, 8),
+            distance=20,
+        ),
+        create_light(
+            name="ArenaCornerNW",
+            light_type="point",
+            color="#ffcc88",  # Warm
+            intensity=0.6,
+            position=create_vector3(-8, 6, 8),
+            distance=20,
+        ),
+        create_light(
+            name="ArenaCornerSE",
+            light_type="point",
+            color="#88ccff",  # Cool blue
+            intensity=0.5,
+            position=create_vector3(8, 6, -8),
+            distance=20,
+        ),
+        create_light(
+            name="ArenaCornerSW",
+            light_type="point",
+            color="#88ccff",  # Cool blue
+            intensity=0.5,
+            position=create_vector3(-8, 6, -8),
+            distance=20,
         ),
     ]
 
@@ -80,7 +138,7 @@ def initialize_default_scene():
         background_color="#1a0a20",  # Dark purple (will be overridden by skybox)
     )
 
-    # Hugging Face emoji model at center (animated)
+    # Hugging Face emoji model at center (animated + unlit for true colors)
     objects = [
         create_game_object(
             object_type="model",
@@ -88,7 +146,7 @@ def initialize_default_scene():
             position=create_vector3(0, 1.5, 0),
             scale=create_vector3(3, 3, 3),
             model_path="Norod78/huggingface_emoji.glb",
-            metadata={"animate": True, "baseY": 1.5},
+            metadata={"animate": True, "baseY": 1.5, "unlit": True},
         ),
     ]
 
@@ -120,7 +178,8 @@ def initialize_default_scene():
     storage.save(scene)
     print(f"✓ Initialized Welcome Scene (ID: welcome)")
     print(f"  - 25x25 world with sunset skybox")
-    print(f"  - Hugging Face emoji model at center")
+    print(f"  - Hugging Face emoji model at center (unlit)")
+    print(f"  - 8-light setup: Sun + Fill + Ambient + 5 arena point lights")
     print(f"  - FPS physics controller ready")
 
 

frontend/game_viewer.html

@@ -92,10 +92,6 @@
         const urlParams = new URLSearchParams(window.location.search);
         const initialMode = urlParams.get('mode') || 'fps'; // Default to FPS mode
 
-        console.log('3D Game Viewer - Initializing...');
-        console.log('Scene ID:', sceneId);
-        console.log('Fetch URL:', `${baseUrl}/api/scenes/${sceneId}`);
-        console.log('Initial control mode:', initialMode);
 
         let scene, camera, renderer;
         let orbitControls;
@@ -166,93 +162,27 @@
              * Allows MCP tools to customize player controller behavior
              */
             if (!sceneData || !sceneData.player_config) {
-                console.log('No player_config in scene data, using defaults');
                 return;
             }
 
             const config = sceneData.player_config;
 
             // Apply movement settings
-            if (config.move_speed !== undefined) {
-                moveSpeed = config.move_speed;
-                console.log(`Applied player speed: ${moveSpeed} units/sec`);
-            }
-
-            if (config.jump_force !== undefined) {
-                JUMP_FORCE = config.jump_force;
-                console.log(`Applied jump force: ${JUMP_FORCE} m/s`);
-            }
-
-            // Apply camera settings
-            if (config.mouse_sensitivity !== undefined) {
-                mouseSensitivity = config.mouse_sensitivity;
-                console.log(`Applied mouse sensitivity: ${mouseSensitivity}`);
-            }
-
-            if (config.invert_y !== undefined) {
-                invertY = config.invert_y;
-                console.log(`Applied Y-axis inversion: ${invertY}`);
-            }
-
-            // Apply physics settings
-            if (config.gravity !== undefined) {
-                GRAVITY = config.gravity;
-                console.log(`Applied gravity: ${GRAVITY} m/s²`);
-            }
-
-            // Apply player dimensions
-            if (config.player_height !== undefined) {
-                PLAYER_HEIGHT = config.player_height;
-                console.log(`Applied player height: ${PLAYER_HEIGHT}m`);
-            }
-
-            if (config.player_radius !== undefined) {
-                PLAYER_RADIUS = config.player_radius;
-                console.log(`Applied player radius: ${PLAYER_RADIUS}m`);
-            }
-
-            if (config.eye_height !== undefined) {
-                EYE_HEIGHT = config.eye_height;
-                console.log(`Applied eye height: ${EYE_HEIGHT}m`);
-            }
-
-            if (config.player_mass !== undefined) {
-                PLAYER_MASS = config.player_mass;
-                console.log(`Applied player mass: ${PLAYER_MASS}kg`);
-            }
-
-            if (config.linear_damping !== undefined) {
-                LINEAR_DAMPING = config.linear_damping;
-                console.log(`Applied linear damping: ${LINEAR_DAMPING}`);
-            }
-
-            // Apply Phase 2 settings
-            if (config.movement_acceleration !== undefined) {
-                movementAcceleration = config.movement_acceleration;
-                console.log(`Applied movement acceleration: ${movementAcceleration}`);
-            }
-
-            if (config.air_control !== undefined) {
-                airControl = config.air_control;
-                console.log(`Applied air control: ${airControl}`);
-            }
-
-            if (config.camera_fov !== undefined) {
-                cameraFOV = config.camera_fov;
-                console.log(`Applied camera FOV: ${cameraFOV}°`);
-            }
-
-            if (config.min_pitch !== undefined) {
-                minPitch = config.min_pitch;
-                console.log(`Applied min pitch: ${minPitch}°`);
-            }
-
-            if (config.max_pitch !== undefined) {
-                maxPitch = config.max_pitch;
-                console.log(`Applied max pitch: ${maxPitch}°`);
-            }
-
-            console.log('✅ Player configuration applied successfully');
+            if (config.move_speed !== undefined) moveSpeed = config.move_speed;
+            if (config.jump_force !== undefined) JUMP_FORCE = config.jump_force;
+            if (config.mouse_sensitivity !== undefined) mouseSensitivity = config.mouse_sensitivity;
+            if (config.invert_y !== undefined) invertY = config.invert_y;
+            if (config.gravity !== undefined) GRAVITY = config.gravity;
+            if (config.player_height !== undefined) PLAYER_HEIGHT = config.player_height;
+            if (config.player_radius !== undefined) PLAYER_RADIUS = config.player_radius;
+            if (config.eye_height !== undefined) EYE_HEIGHT = config.eye_height;
+            if (config.player_mass !== undefined) PLAYER_MASS = config.player_mass;
+            if (config.linear_damping !== undefined) LINEAR_DAMPING = config.linear_damping;
+            if (config.movement_acceleration !== undefined) movementAcceleration = config.movement_acceleration;
+            if (config.air_control !== undefined) airControl = config.air_control;
+            if (config.camera_fov !== undefined) cameraFOV = config.camera_fov;
+            if (config.min_pitch !== undefined) minPitch = config.min_pitch;
+            if (config.max_pitch !== undefined) maxPitch = config.max_pitch;
         }
 
         function applyInitialEnvironment() {
@@ -264,14 +194,12 @@
 
             // Apply skybox if defined in scene data
             if (sceneData.skybox) {
-                console.log('Applying initial skybox:', sceneData.skybox);
                 handleAddSkybox(sceneData.skybox);
             }
 
             // Apply particles if defined in scene data
             if (sceneData.particles && Array.isArray(sceneData.particles)) {
                 sceneData.particles.forEach(particleConfig => {
-                    console.log('Applying initial particles:', particleConfig);
                     handleAddParticles(particleConfig);
                 });
             }
@@ -280,29 +208,22 @@
             if (sceneData.ui_elements && Array.isArray(sceneData.ui_elements)) {
                 sceneData.ui_elements.forEach(uiConfig => {
                     if (uiConfig.type === 'text') {
-                        console.log('Applying initial UI text:', uiConfig);
                         handleRenderText(uiConfig);
                     } else if (uiConfig.type === 'bar') {
-                        console.log('Applying initial UI bar:', uiConfig);
                         handleRenderBar(uiConfig);
                     }
                 });
             }
-
-            console.log('✅ Initial environment applied');
         }
 
         async function init() {
             try {
                 // Check for embedded scene data first (used when served via Gradio)
                 if (window.SCENE_DATA) {
-                    console.log('Using embedded scene data');
                     sceneData = window.SCENE_DATA;
                 } else {
                     // Fetch scene data from API (used when served via FastAPI)
-                    console.log('Fetching scene data...');
                     const response = await fetch(`${baseUrl}/api/scenes/${sceneId}`);
-                    console.log('Response status:', response.status);
 
                     if (!response.ok) {
                         const errorText = await response.text();
@@ -360,10 +281,18 @@
             // Position camera at player eye height (will be synced with physics in animate loop)
             camera.position.set(0, EYE_HEIGHT, 0);
 
-            // Create renderer
+            // Create renderer with shadow support
             renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(window.innerWidth, window.innerHeight);
             renderer.setPixelRatio(window.devicePixelRatio);
+            // Enable shadows for realistic lighting
+            renderer.shadowMap.enabled = true;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Soft shadows
+            // Use physically correct lighting model
+            renderer.physicallyCorrectLights = true;
+            renderer.outputColorSpace = THREE.SRGBColorSpace;
+            renderer.toneMapping = THREE.ACESFilmicToneMapping;
+            renderer.toneMappingExposure = 1.0;
             document.getElementById('viewer-container').appendChild(renderer.domElement);
 
             // Setup postprocessing for object outlines
@@ -389,6 +318,7 @@
             console.log('PostProcessing composer initialized with OutlinePass');
 
             // Add lights from scene data
+            // Best practices: Combine ambient (low intensity) + directional (sun) + point lights (accents)
             sceneData.lights.forEach(lightData => {
                 let light;
 
@@ -402,15 +332,37 @@
                     scene.add(light.target);
                     if (lightData.cast_shadow) {
                         light.castShadow = true;
+                        // Configure shadow map for better quality
+                        light.shadow.mapSize.width = 2048;
+                        light.shadow.mapSize.height = 2048;
+                        light.shadow.camera.near = 0.5;
+                        light.shadow.camera.far = 100;
+                        light.shadow.camera.left = -30;
+                        light.shadow.camera.right = 30;
+                        light.shadow.camera.top = 30;
+                        light.shadow.camera.bottom = -30;
+                        light.shadow.bias = -0.0001;
                     }
                 } else if (lightData.type === 'point') {
-                    light = new THREE.PointLight(lightData.color, lightData.intensity);
+                    // Point lights with distance and decay for realistic falloff
+                    const distance = lightData.distance || 50;
+                    const decay = lightData.decay || 2; // Physically correct decay
+                    light = new THREE.PointLight(lightData.color, lightData.intensity, distance, decay);
                     light.position.set(lightData.position.x, lightData.position.y, lightData.position.z);
+                } else if (lightData.type === 'hemisphere') {
+                    // Hemisphere light - great for outdoor scenes (sky + ground colors)
+                    const skyColor = lightData.color || '#87CEEB';
+                    const groundColor = lightData.ground_color || '#444444';
+                    light = new THREE.HemisphereLight(skyColor, groundColor, lightData.intensity);
+                    if (lightData.position) {
+                        light.position.set(lightData.position.x, lightData.position.y, lightData.position.z);
+                    }
                 }
 
                 if (light) {
+                    light.name = lightData.name || lightData.type;
                     scene.add(light);
-                    console.log('Added light:', lightData.type, lightData.name, 'at', lightData.position || 'default');
+                    console.log('Added light:', lightData.type, lightData.name, 'intensity:', lightData.intensity);
                 }
             });
 
@@ -850,6 +802,39 @@
                                         THREE.MathUtils.degToRad(obj.rotation.y),
                                         THREE.MathUtils.degToRad(obj.rotation.z)
                                     );
+
+                                    // Apply unlit material if specified in metadata
+                                    // This makes the model render at its true colors without lighting
+                                    if (obj.metadata?.unlit) {
+                                        model.traverse((child) => {
+                                            if (child.isMesh && child.material) {
+                                                // Preserve the original texture/color but make it unlit
+                                                const oldMaterial = child.material;
+                                                const newMaterial = new THREE.MeshBasicMaterial();
+
+                                                // Copy texture if exists
+                                                if (oldMaterial.map) {
+                                                    newMaterial.map = oldMaterial.map;
+                                                }
+                                                // Copy color if no texture
+                                                if (oldMaterial.color) {
+                                                    newMaterial.color = oldMaterial.color.clone();
+                                                }
+                                                // Preserve transparency
+                                                if (oldMaterial.transparent) {
+                                                    newMaterial.transparent = true;
+                                                    newMaterial.opacity = oldMaterial.opacity;
+                                                }
+                                                if (oldMaterial.alphaMap) {
+                                                    newMaterial.alphaMap = oldMaterial.alphaMap;
+                                                }
+
+                                                child.material = newMaterial;
+                                            }
+                                        });
+                                        console.log(`Applied unlit material to model: ${obj.name}`);
+                                    }
+
                                     model.userData = {
                                         id: obj.id,
                                         name: obj.name,
@@ -857,6 +842,7 @@
                                         isSceneObject: true,
                                         animate: obj.metadata?.animate || false,
                                         baseY: obj.metadata?.baseY || obj.position.y,
+                                        unlit: obj.metadata?.unlit || false,
                                     };
                                     scene.add(model);
 
@@ -1729,8 +1715,24 @@
                     light.target.position.set(lightData.target.x, lightData.target.y, lightData.target.z);
                     scene.add(light.target);
                 }
+                if (lightData.cast_shadow) {
+                    light.castShadow = true;
+                    // Configure shadow map for better quality
+                    light.shadow.mapSize.width = 2048;
+                    light.shadow.mapSize.height = 2048;
+                    light.shadow.camera.near = 0.5;
+                    light.shadow.camera.far = 100;
+                    light.shadow.camera.left = -30;
+                    light.shadow.camera.right = 30;
+                    light.shadow.camera.top = 30;
+                    light.shadow.camera.bottom = -30;
+                    light.shadow.bias = -0.0001;
+                }
             } else if (lightData.light_type === 'point') {
-                light = new THREE.PointLight(lightData.color, lightData.intensity);
+                // Point lights with distance and decay for realistic falloff
+                const distance = lightData.distance || 50;
+                const decay = lightData.decay || 2;
+                light = new THREE.PointLight(lightData.color, lightData.intensity, distance, decay);
                 light.position.set(lightData.position.x, lightData.position.y, lightData.position.z);
             } else if (lightData.light_type === 'spot') {
                 light = new THREE.SpotLight(lightData.color, lightData.intensity);
@@ -1740,13 +1742,25 @@
                     light.target.position.set(lightData.target.x, lightData.target.y, lightData.target.z);
                     scene.add(light.target);
                 }
+                if (lightData.cast_shadow) {
+                    light.castShadow = true;
+                    light.shadow.mapSize.width = 1024;
+                    light.shadow.mapSize.height = 1024;
+                }
+            } else if (lightData.light_type === 'hemisphere') {
+                // Hemisphere light - great for outdoor scenes (sky + ground colors)
+                const skyColor = lightData.color || '#87CEEB';
+                const groundColor = lightData.ground_color || '#444444';
+                light = new THREE.HemisphereLight(skyColor, groundColor, lightData.intensity);
+                if (lightData.position) {
+                    light.position.set(lightData.position.x, lightData.position.y, lightData.position.z);
+                }
             }
 
             if (light) {
                 light.name = lightData.name;
-                if (lightData.cast_shadow) light.castShadow = true;
                 scene.add(light);
-                console.log('💡 Light added to scene:', lightData.name, 'type:', lightData.light_type);
+                console.log('💡 Light added to scene:', lightData.name, 'type:', lightData.light_type, 'intensity:', lightData.intensity);
             } else {
                 console.error('❌ Failed to create light:', lightData);
             }