Added tools, and improved player movement

README.md

@@ -41,15 +41,28 @@ Simply describe what you want:
 
 ### 🎨 Scene Building
 - **6 primitive types**: cube, sphere, cylinder, plane, cone, torus
+- **LEGO-style bricks**: 10 brick types from Kenney kit (1x1, 2x4, slopes, etc.)
 - **Flexible positioning**: Place objects anywhere in 3D space
-- **Material system**: Colors, metalness, roughness, opacity
+- **Material system**: Colors, metalness, roughness, opacity, toon shading
 - **Dynamic scaling**: Custom size for each object
 
-### 💡 Lighting System
-- **4 presets**: day, night, sunset, studio
+### 💡 Lighting & Environment
+- **4 lighting presets**: day, night, sunset, studio
+- **Procedural skybox**: Realistic sky with sun positioning
 - **Multiple light types**: ambient, directional, point, spot
+- **Fog effects**: Linear and exponential fog
 - **Automatic shadows**: Realistic lighting effects
 
+### ✨ Particle Effects
+- **5 presets**: fire, smoke, sparkle, rain, snow
+- **Localized effects**: Fire, smoke at specific positions
+- **Weather effects**: Rain and snow cover entire world
+
+### 📊 UI System
+- **2D text overlay**: Render text on screen at any position
+- **Progress bars**: Health bars, mana bars with labels
+- **HUD elements**: Score displays, status indicators
+
 ### 🎮 FPS Controller
 - **Physics-based movement**: Cannon.js integration with gravity, jumping, collisions
 - **WASD controls**: Smooth keyboard-based movement
@@ -65,9 +78,9 @@ Simply describe what you want:
 
 ### 🤖 AI Integration
 - **MCP protocol**: Works with Claude, GPT, and other AI assistants
-- **Natural language**: Simple commands like "add a blue sphere" or "set speed to 10"
+- **Natural language**: Simple commands like "add a blue sphere" or "add rain"
 - **Context aware**: Builds on existing scenes
-- **16 MCP tools**: Scene building (5) + Player controller (11)
+- **40+ MCP tools**: Scene (6) + Player (10) + Rendering (10) + Environment (4) + UI (4) + Post-processing (8)
 - **No coding required**: Pure natural language scene building
 
 ---
@@ -99,9 +112,14 @@ Open `http://localhost:7860` in your browser.
 ```
 Add a red cube at 0,2,0
 Add a blue sphere at 5,1,5
-Add a green cylinder at -3,1,0
+Add a sunset skybox
+Add fire particles at 0,1,0
+Add rain
+Render "Score: 100" at the top of the screen
+Add a health bar with value 75
+Add a red brick_2x4 at 0,0,0
+Apply toon shading to the cube
 Set lighting to night
-Create a level 100 units wide
 ```
 
 ---
@@ -110,30 +128,59 @@ Create a level 100 units wide
 
 ### For AI Assistants (MCP)
 
-The MCP server exposes 16 tools that AI assistants can call:
-
-**Scene Building (5 tools):**
-- `create_scene_tool` - Create a new 3D scene/level
-- `add_object_tool` - Add objects to the scene
-- `remove_object_tool` - Remove objects from scene
-- `set_lighting_tool` - Change lighting preset
-- `get_scene_info_tool` - Get scene details
-
-**Player Controller Phase 1 (5 tools):**
+The MCP server exposes 40+ tools that AI assistants can call:
+
+**Scene Building (6 tools):**
+- `create_scene` - Create a new 3D scene/level
+- `add_object` - Add primitive objects (cube, sphere, etc.)
+- `add_brick` - Add LEGO-style bricks from Kenney kit
+- `remove_object` - Remove objects from scene
+- `set_lighting` - Change lighting preset
+- `get_scene_info` - Get scene details
+
+**Environment (4 tools):**
+- `add_skybox` - Add procedural sky (day, sunset, night, etc.)
+- `remove_skybox` - Remove skybox
+- `add_particles` - Add particle effects (fire, smoke, rain, snow)
+- `remove_particles` - Remove particle systems
+
+**UI Overlay (4 tools):**
+- `render_text_on_screen` - Display 2D text
+- `render_bar_on_screen` - Display health/progress bars
+- `remove_ui_element` - Remove UI elements
+- `get_ui_elements` - List all UI elements
+
+**Rendering (10 tools):**
+- `add_light` - Add light sources
+- `remove_light` - Remove lights
+- `update_light` - Modify light properties
+- `get_lights` - List all lights
+- `update_object_material` - Change material properties
+- `update_material_to_toon` - Apply toon/cel shading
+- `set_background_color` - Set solid or gradient background
+- `set_fog` - Add atmospheric fog
+
+**Player Controller (10 tools):**
 - `set_player_speed` - Movement speed
 - `set_jump_force` - Jump height
-- `set_mouse_sensitivity` - Mouse look sensitivity + Y-invert
+- `set_mouse_sensitivity` - Mouse look + Y-invert
 - `set_gravity` - World gravity
 - `set_player_dimensions` - Player size
-
-**Player Controller Phase 2 (4 tools):**
 - `set_movement_acceleration` - Movement feel
 - `set_air_control` - Airborne control
 - `set_camera_fov` - Field of view
 - `set_vertical_look_limits` - Look angle limits
-
-**Configuration (1 tool):**
-- `get_player_config` - Get all player settings
+- `get_player_config` - Get all settings
+
+**Post-Processing (8 tools):**
+- `set_bloom` - Glow effect
+- `set_ssao` - Ambient occlusion
+- `set_color_grading` - Color adjustments
+- `set_vignette` - Vignette effect
+- `set_depth_of_field` - Focus blur
+- `set_motion_blur` - Movement blur
+- `set_chromatic_aberration` - Lens effect
+- `get_post_processing` - Get all effects
 
 ### For Developers (HTTP API)
 
@@ -246,25 +293,26 @@ app.py                    # Gradio chat interface
 ### ✅ Completed
 - **Phase 1**: Player Controller - Core Controls (5 tools)
 - **Phase 2**: Player Controller - Enhanced Feel (4 tools)
+- **Phase 3**: Rendering & Lighting Tools (10 tools)
+- **Phase 4**: Post-Processing Effects (8 tools)
+- **Phase 5**: Environment Tools - Skybox & Particles (4 tools)
+- **Phase 6**: UI Overlay System (4 tools)
+- **Phase 7**: LEGO Brick Kit Integration (Kenney assets)
+- **Phase 8**: Toon/Cel Shading Materials
 - Physics engine integration (Cannon.js)
 - FPS controls (WASD + mouse look)
 
-### 🚧 Next Phase: Rendering & Lighting Tools
-- Add/remove individual lights
-- Update light properties (color, intensity, position)
-- Change object materials (color, metalness, roughness)
-- Set background color
-
-### 🔮 Phase 3: World Building
-- glTF model loading (Kenney assets)
-- Prefab system (props, buildings, terrain)
-- Scene templates
+### 🔮 Next Steps
+- Transform controls for object manipulation
+- Scene templates and prefabs
 - Export to Unity/Unreal
+- Persistent scene storage
 
 ### 💭 Future Ideas
 - NPC system with behaviors
 - Multiplayer support
 - Procedural generation
+- Audio system
 
 ---
 

app.py

@@ -421,49 +421,70 @@ with gr.Blocks(title="GCP - Game Context Protocol") as demo:
     # Tools panel - full width below chat and viewer
     with gr.Row(elem_id="tools-panel"):
         gr.Markdown("""
-### GCP Available Tools
+### GCP Available Tools (40+)
 
-<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 10px;">
+<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin-top: 10px; font-size: 0.9em;">
 
 <div>
 
 **🎬 Scene Tools**
-- `create_scene` - Create a new 3D scene
-- `add_object` - Add object (cube, sphere, cylinder, cone, torus, plane)
-- `remove_object` - Remove an object by ID
-- `set_lighting` - Set lighting preset (day, night, sunset, studio)
-- `get_scene_info` - Get current scene information
+- `add_object` - Add primitives (cube, sphere, cylinder, cone, torus, plane)
+- `add_brick` - Add LEGO bricks (1x1, 2x4, slopes, plates)
+- `remove_object` - Remove an object
+- `set_lighting` - Presets: day, night, sunset, studio
+- `get_scene_info` - Get scene details
+
+</div>
+
+<div>
+
+**🌅 Environment**
+- `add_skybox` - Add sky (day, sunset, night, dawn)
+- `remove_skybox` - Remove skybox
+- `add_particles` - Effects: fire, smoke, rain, snow, sparkle
+- `remove_particles` - Remove particles
 
 </div>
 
 <div>
 
 **🎮 Player Tools**
-- `set_player_speed` - Set movement speed
-- `set_jump_force` - Set jump strength
-- `set_mouse_sensitivity` - Set look sensitivity
-- `set_gravity` - Set world gravity
-- `set_player_dimensions` - Set player height/radius
-- `set_camera_fov` - Set field of view
-- `get_player_config` - Get current player settings
+- `set_player_speed` - Movement speed
+- `set_jump_force` - Jump strength
+- `set_mouse_sensitivity` - Look sensitivity
+- `set_gravity` - World gravity
+- `set_camera_fov` - Field of view
+- `get_player_config` - Get settings
 
 </div>
 
 <div>
 
-**💡 Lighting Tools**
+**💡 Lighting**
 - `add_light` - Add light (ambient, directional, point, spot)
-- `remove_light` - Remove a light by name
-- `get_lights` - List all lights in scene
+- `remove_light` - Remove light
+- `update_light` - Modify light properties
+- `get_lights` - List all lights
+
+</div>
+
+<div>
+
+**🎨 Materials**
+- `update_object_material` - Color, metalness, roughness, opacity
+- `update_material_to_toon` - Apply cel-shading
+- `set_background_color` - Solid or gradient
+- `set_fog` - Atmospheric fog
 
 </div>
 
 <div>
 
-**🎨 Material & Environment**
-- `update_object_material` - Change object color, metalness, roughness
-- `set_background_color` - Set background color or gradient
-- `set_fog` - Add/configure fog effect
+**📊 UI Overlay**
+- `render_text_on_screen` - 2D text at any position
+- `render_bar_on_screen` - Health/progress bars
+- `remove_ui_element` - Remove UI element
+- `get_ui_elements` - List UI elements
 
 </div>
 
@@ -517,7 +538,15 @@ with gr.Blocks(title="GCP - Game Context Protocol") as demo:
                                   "setBackground", "setFog",
                                   # Player tools
                                   "setPlayerSpeed", "setJumpForce", "setGravity",
-                                  "setCameraFov", "setMouseSensitivity", "setPlayerDimensions"]:
+                                  "setCameraFov", "setMouseSensitivity", "setPlayerDimensions",
+                                  # Environment tools
+                                  "addSkybox", "removeSkybox", "addParticles", "removeParticles",
+                                  # UI tools
+                                  "renderText", "renderBar", "removeUIElement",
+                                  # Toon shading
+                                  "updateToonMaterial",
+                                  # Brick blocks
+                                  "addBrick"]:
                 # Build action JSON for the JavaScript watcher
                 import json
                 import time
@@ -566,6 +595,34 @@ with gr.Blocks(title="GCP - Game Context Protocol") as demo:
                 elif action_type == "setPlayerDimensions":
                     height = action_result["data"].get("height", 1.7)
                     toast_message = f"Player height: {height}m"
+                # Environment tool toast messages
+                elif action_type == "addSkybox":
+                    preset = action_result["data"].get("preset", "custom")
+                    toast_message = f"Skybox added: {preset}"
+                elif action_type == "removeSkybox":
+                    toast_message = "Skybox removed"
+                elif action_type == "addParticles":
+                    preset = action_result["data"].get("preset", "effect")
+                    toast_message = f"Particles added: {preset}"
+                elif action_type == "removeParticles":
+                    toast_message = "Particles removed"
+                # UI tool toast messages
+                elif action_type == "renderText":
+                    text = action_result["data"].get("text", "")[:20]
+                    toast_message = f"Text rendered: {text}..."
+                elif action_type == "renderBar":
+                    label = action_result["data"].get("label", "Bar")
+                    toast_message = f"Bar rendered: {label}"
+                elif action_type == "removeUIElement":
+                    toast_message = "UI element removed"
+                # Toon shading toast
+                elif action_type == "updateToonMaterial":
+                    enabled = action_result["data"].get("enabled", True)
+                    toast_message = "Toon shading " + ("enabled" if enabled else "disabled")
+                # Brick toast
+                elif action_type == "addBrick":
+                    brick_type = action_result["data"].get("brick_type", "brick")
+                    toast_message = f"Added {brick_type.replace('_', ' ')}"
 
                 # Create JSON payload for the .then() JavaScript handler
                 # Include timestamp to ensure Gradio detects change even for repeated actions

backend/game_models.py

@@ -127,7 +127,7 @@ def create_player(
 
 
 def create_player_config(
-    move_speed: float = 5.0,
+    move_speed: float = 8.0,
     jump_force: float = 5.0,
     mouse_sensitivity: float = 0.002,
     invert_y: bool = False,
@@ -136,7 +136,7 @@ def create_player_config(
     player_radius: float = 0.3,
     eye_height: float = 1.6,
     player_mass: float = 80.0,
-    linear_damping: float = 0.9,
+    linear_damping: float = 0.0,
     movement_acceleration: float = 0.0,
     air_control: float = 1.0,
     camera_fov: float = 75.0,

backend/main.py

@@ -4,12 +4,17 @@ FastAPI server for the 3D scene viewer HTTP endpoints.
 MCP tools are defined in mcp_server.py
 """
 import os
+from pathlib import Path
 from fastapi import FastAPI, HTTPException
 from fastapi.responses import HTMLResponse, JSONResponse
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
 
 from backend.storage import storage
 
+# Get project root directory
+PROJECT_ROOT = Path(__file__).parent.parent
+
 # Create FastAPI app
 app = FastAPI(
     title="GCP - Game Context Protocol",
@@ -26,6 +31,11 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
+# Mount static files for models
+models_path = PROJECT_ROOT / "models"
+if models_path.exists():
+    app.mount("/static/models", StaticFiles(directory=str(models_path)), name="models")
+
 
 # =============================================================================
 # HTTP Endpoints (for viewer and health checks)

backend/mcp_server.py

@@ -16,6 +16,8 @@ from backend.tools.scene_tools import (
     remove_game_object,
     set_scene_lighting,
     get_scene_info,
+    add_brick,
+    BRICK_TYPES,
 )
 from backend.tools.player_tools import (
     set_player_speed,
@@ -48,6 +50,20 @@ from backend.tools.rendering_tools import (
     set_motion_blur,
     set_chromatic_aberration,
     get_camera_effects,
+    # Toon shading
+    update_material_to_toon,
+)
+from backend.tools.environment_tools import (
+    add_skybox,
+    remove_skybox,
+    add_particles,
+    remove_particles,
+)
+from backend.tools.ui_tools import (
+    render_text_on_screen,
+    render_bar_on_screen,
+    remove_ui_element,
+    get_ui_elements,
 )
 from backend.game_models import create_vector3, create_material
 
@@ -186,6 +202,53 @@ Returns: scene details including name, objects, lights, and viewer_url""",
             "required": ["scene_id"],
         },
     ),
+    Tool(
+        name="add_brick",
+        description="""Add a LEGO-style brick from the Kenney brick kit.
+
+Args:
+    scene_id: ID of the scene (required)
+    brick_type: Type of brick (required) - brick_1x1, brick_1x2, brick_1x4, brick_2x2, brick_2x4,
+               plate_1x2, plate_2x2, plate_2x4, plate_4x4, slope_2x2
+    position: {x, y, z} position
+    rotation: {x, y, z} rotation in degrees
+    color: Hex color code (default: #ff0000 red)
+    name: Optional name for the brick
+
+Examples:
+    add_brick(scene_id, "brick_2x4", position={x:0, y:0, z:0}, color="#ff0000")
+    add_brick(scene_id, "slope_2x2", position={x:1, y:0.5, z:0}, color="#0000ff")""",
+        inputSchema={
+            "type": "object",
+            "properties": {
+                "scene_id": {"type": "string"},
+                "brick_type": {
+                    "type": "string",
+                    "enum": ["brick_1x1", "brick_1x2", "brick_1x4", "brick_2x2", "brick_2x4",
+                             "plate_1x2", "plate_2x2", "plate_2x4", "plate_4x4", "slope_2x2"]
+                },
+                "position": {
+                    "type": "object",
+                    "properties": {
+                        "x": {"type": "number"},
+                        "y": {"type": "number"},
+                        "z": {"type": "number"},
+                    }
+                },
+                "rotation": {
+                    "type": "object",
+                    "properties": {
+                        "x": {"type": "number"},
+                        "y": {"type": "number"},
+                        "z": {"type": "number"},
+                    }
+                },
+                "color": {"type": "string", "default": "#ff0000"},
+                "name": {"type": "string"},
+            },
+            "required": ["scene_id", "brick_type"],
+        },
+    ),
 ]
 
 PLAYER_TOOLS = [
@@ -817,8 +880,249 @@ Returns: All camera effects settings (depth of field, motion blur, chromatic abe
     ),
 ]
 
+ENVIRONMENT_TOOLS = [
+    Tool(
+        name="add_skybox",
+        description="""Add a procedural sky to the scene.
+
+Creates realistic outdoor environments with atmospheric scattering.
+
+Args:
+    scene_id: Scene to modify (required)
+    preset: Quick preset - "day", "sunset", "noon", "dawn", "night" (default: "day")
+    turbidity: Haziness 2.0=clear, 10.0=hazy, 20.0=foggy (default: 10.0)
+    rayleigh: Blue sky intensity 0.0-4.0 (default: 2.0)
+    sun_elevation: Sun angle from horizon -90 to 90 degrees (default: 45)
+    sun_azimuth: Sun compass direction 0-360 degrees (default: 180)
+
+Examples:
+    add_skybox(scene_id, preset="sunset")
+    add_skybox(scene_id, sun_elevation=5, turbidity=4)""",
+        inputSchema={
+            "type": "object",
+            "properties": {
+                "scene_id": {"type": "string"},
+                "preset": {
+                    "type": "string",
+                    "enum": ["day", "sunset", "noon", "dawn", "night"],
+                    "default": "day"
+                },
+                "turbidity": {"type": "number", "default": 10.0},
+                "rayleigh": {"type": "number", "default": 2.0},
+                "sun_elevation": {"type": "number", "default": 45.0},
+                "sun_azimuth": {"type": "number", "default": 180.0},
+            },
+            "required": ["scene_id"],
+        },
+    ),
+    Tool(
+        name="remove_skybox",
+        description="""Remove the skybox from the scene.
+
+Reverts to solid background color.
+
+Args:
+    scene_id: Scene to modify (required)""",
+        inputSchema={
+            "type": "object",
+            "properties": {
+                "scene_id": {"type": "string"},
+            },
+            "required": ["scene_id"],
+        },
+    ),
+    Tool(
+        name="add_particles",
+        description="""Add a particle effect to the scene.
+
+Use presets for quick setup of common effects.
+
+Args:
+    scene_id: Scene to modify (required)
+    preset: Effect type - "fire", "smoke", "sparkle", "rain", "snow" (required)
+    position: {x, y, z} for localized effects (fire, smoke, sparkle)
+    particle_id: Optional unique identifier
+
+Examples:
+    add_particles(scene_id, "fire", position={x:0, y:1, z:0})
+    add_particles(scene_id, "rain")  # Weather covers entire world""",
+        inputSchema={
+            "type": "object",
+            "properties": {
+                "scene_id": {"type": "string"},
+                "preset": {
+                    "type": "string",
+                    "enum": ["fire", "smoke", "sparkle", "rain", "snow"]
+                },
+                "position": {
+                    "type": "object",
+                    "properties": {
+                        "x": {"type": "number"},
+                        "y": {"type": "number"},
+                        "z": {"type": "number"},
+                    }
+                },
+                "particle_id": {"type": "string"},
+            },
+            "required": ["scene_id", "preset"],
+        },
+    ),
+    Tool(
+        name="remove_particles",
+        description="""Remove a particle system from the scene.
+
+Args:
+    scene_id: Scene to modify (required)
+    particle_id: ID of the particle system to remove (required)""",
+        inputSchema={
+            "type": "object",
+            "properties": {
+                "scene_id": {"type": "string"},
+                "particle_id": {"type": "string"},
+            },
+            "required": ["scene_id", "particle_id"],
+        },
+    ),
+]
+
+UI_TOOLS = [
+    Tool(
+        name="render_text_on_screen",
+        description="""Render text on the screen as a 2D overlay.
+
+Args:
+    scene_id: Scene to modify (required)
+    text: The text to display (required)
+    x: Horizontal position in % (0=left, 50=center, 100=right, default: 50)
+    y: Vertical position in % (0=top, 50=center, 100=bottom, default: 10)
+    font_size: Font size in pixels (default: 24)
+    color: Text color hex (default: "#ffffff")
+    text_id: Optional unique ID for updates/removal
+    background_color: Optional background color for text box
+
+Examples:
+    render_text_on_screen(scene_id, "Score: 100", x=10, y=5)
+    render_text_on_screen(scene_id, "Game Over", x=50, y=50, font_size=48)""",
+        inputSchema={
+            "type": "object",
+            "properties": {
+                "scene_id": {"type": "string"},
+                "text": {"type": "string"},
+                "x": {"type": "number", "default": 50.0},
+                "y": {"type": "number", "default": 10.0},
+                "font_size": {"type": "integer", "default": 24},
+                "color": {"type": "string", "default": "#ffffff"},
+                "text_id": {"type": "string"},
+                "font_family": {"type": "string", "default": "Arial"},
+                "text_align": {
+                    "type": "string",
+                    "enum": ["left", "center", "right"],
+                    "default": "center"
+                },
+                "background_color": {"type": "string"},
+                "padding": {"type": "integer", "default": 8},
+            },
+            "required": ["scene_id", "text"],
+        },
+    ),
+    Tool(
+        name="render_bar_on_screen",
+        description="""Render a progress/health bar on the screen.
+
+Args:
+    scene_id: Scene to modify (required)
+    x: Horizontal position in % (default: 10)
+    y: Vertical position in % (default: 10)
+    width: Bar width in pixels (default: 200)
+    height: Bar height in pixels (default: 20)
+    value: Current value (default: 100)
+    max_value: Maximum value (default: 100)
+    bar_color: Fill color (default: "#00ff00" green)
+    background_color: Background color (default: "#333333")
+    bar_id: Optional unique ID for updates/removal
+    label: Optional label above the bar
+    show_value: Show numeric value on bar (default: false)
+
+Examples:
+    render_bar_on_screen(scene_id, value=75, bar_color="#ff0000", label="Health")
+    render_bar_on_screen(scene_id, x=10, y=90, value=50, bar_color="#0088ff", label="Mana")""",
+        inputSchema={
+            "type": "object",
+            "properties": {
+                "scene_id": {"type": "string"},
+                "x": {"type": "number", "default": 10.0},
+                "y": {"type": "number", "default": 10.0},
+                "width": {"type": "number", "default": 200.0},
+                "height": {"type": "number", "default": 20.0},
+                "value": {"type": "number", "default": 100.0},
+                "max_value": {"type": "number", "default": 100.0},
+                "bar_color": {"type": "string", "default": "#00ff00"},
+                "background_color": {"type": "string", "default": "#333333"},
+                "border_color": {"type": "string", "default": "#ffffff"},
+                "bar_id": {"type": "string"},
+                "label": {"type": "string"},
+                "show_value": {"type": "boolean", "default": False},
+            },
+            "required": ["scene_id"],
+        },
+    ),
+    Tool(
+        name="remove_ui_element",
+        description="""Remove a UI element from the screen.
+
+Args:
+    scene_id: Scene to modify (required)
+    element_id: ID of the text or bar to remove (required)""",
+        inputSchema={
+            "type": "object",
+            "properties": {
+                "scene_id": {"type": "string"},
+                "element_id": {"type": "string"},
+            },
+            "required": ["scene_id", "element_id"],
+        },
+    ),
+]
+
+TOON_TOOLS = [
+    Tool(
+        name="update_material_to_toon",
+        description="""Apply toon/cel-shading to an object for cartoon-like appearance.
+
+Creates discrete shading bands instead of smooth gradients, common in anime styles.
+
+Args:
+    scene_id: Scene to modify (required)
+    object_id: Object to update (required)
+    enabled: Enable/disable toon shading (default: true)
+    color: Base color (optional, keeps existing)
+    gradient_steps: Shading steps 2=hard, 3=medium, 5=soft (default: 3)
+    outline: Add black outline effect (default: true)
+    outline_color: Outline color (default: "#000000")
+    outline_thickness: Outline thickness 0.01-0.1 (default: 0.03)
+
+Examples:
+    update_material_to_toon(scene_id, object_id, gradient_steps=2)
+    update_material_to_toon(scene_id, object_id, enabled=False)  # Revert""",
+        inputSchema={
+            "type": "object",
+            "properties": {
+                "scene_id": {"type": "string"},
+                "object_id": {"type": "string"},
+                "enabled": {"type": "boolean", "default": True},
+                "color": {"type": "string"},
+                "gradient_steps": {"type": "integer", "default": 3},
+                "outline": {"type": "boolean", "default": True},
+                "outline_color": {"type": "string", "default": "#000000"},
+                "outline_thickness": {"type": "number", "default": 0.03},
+            },
+            "required": ["scene_id", "object_id"],
+        },
+    ),
+]
+
 # Combine all tools
-ALL_TOOLS = SCENE_TOOLS + PLAYER_TOOLS + RENDERING_TOOLS + POST_PROCESSING_TOOLS + CAMERA_EFFECTS_TOOLS
+ALL_TOOLS = SCENE_TOOLS + PLAYER_TOOLS + RENDERING_TOOLS + POST_PROCESSING_TOOLS + CAMERA_EFFECTS_TOOLS + ENVIRONMENT_TOOLS + UI_TOOLS + TOON_TOOLS
 
 
 # =============================================================================
@@ -897,6 +1201,17 @@ async def _execute_tool(name: str, args: dict) -> Any:
     elif name == "get_scene_info":
         return get_scene_info(args["scene_id"], BASE_URL)
 
+    elif name == "add_brick":
+        return add_brick(
+            args["scene_id"],
+            args["brick_type"],
+            args.get("position"),
+            args.get("rotation"),
+            args.get("color", "#ff0000"),
+            args.get("name"),
+            BASE_URL
+        )
+
     # Player tools
     elif name == "set_player_speed":
         return set_player_speed(
@@ -1094,6 +1409,86 @@ async def _execute_tool(name: str, args: dict) -> Any:
     elif name == "get_camera_effects":
         return get_camera_effects(args["scene_id"])
 
+    # Environment tools (skybox, particles)
+    elif name == "add_skybox":
+        return add_skybox(
+            args["scene_id"],
+            args.get("preset", "day"),
+            args.get("turbidity", 10.0),
+            args.get("rayleigh", 2.0),
+            args.get("sun_elevation", 45.0),
+            args.get("sun_azimuth", 180.0)
+        )
+
+    elif name == "remove_skybox":
+        return remove_skybox(args["scene_id"])
+
+    elif name == "add_particles":
+        return add_particles(
+            args["scene_id"],
+            args["preset"],
+            args.get("position"),
+            args.get("particle_id")
+        )
+
+    elif name == "remove_particles":
+        return remove_particles(
+            args["scene_id"],
+            args["particle_id"]
+        )
+
+    # UI tools
+    elif name == "render_text_on_screen":
+        return render_text_on_screen(
+            args["scene_id"],
+            args["text"],
+            args.get("x", 50.0),
+            args.get("y", 10.0),
+            args.get("font_size", 24),
+            args.get("color", "#ffffff"),
+            args.get("text_id"),
+            args.get("font_family", "Arial"),
+            args.get("text_align", "center"),
+            args.get("background_color"),
+            args.get("padding", 8)
+        )
+
+    elif name == "render_bar_on_screen":
+        return render_bar_on_screen(
+            args["scene_id"],
+            args.get("x", 10.0),
+            args.get("y", 10.0),
+            args.get("width", 200.0),
+            args.get("height", 20.0),
+            args.get("value", 100.0),
+            args.get("max_value", 100.0),
+            args.get("bar_color", "#00ff00"),
+            args.get("background_color", "#333333"),
+            args.get("border_color", "#ffffff"),
+            args.get("bar_id"),
+            args.get("label"),
+            args.get("show_value", False)
+        )
+
+    elif name == "remove_ui_element":
+        return remove_ui_element(
+            args["scene_id"],
+            args["element_id"]
+        )
+
+    # Toon shading tools
+    elif name == "update_material_to_toon":
+        return update_material_to_toon(
+            args["scene_id"],
+            args["object_id"],
+            args.get("enabled", True),
+            args.get("color"),
+            args.get("gradient_steps", 3),
+            args.get("outline", True),
+            args.get("outline_color", "#000000"),
+            args.get("outline_thickness", 0.03)
+        )
+
     else:
         raise ValueError(f"Unknown tool: {name}")
 

backend/storage.py

@@ -49,39 +49,89 @@ class Storage:
 storage = Storage()
 
 
-# Initialize with a clean default Welcome Scene for HuggingFace Spaces
+# Initialize with an impressive default Welcome Scene for HuggingFace Spaces
 def initialize_default_scene():
-    """Create a clean default Welcome Scene on startup"""
-    from backend.game_models import create_scene, create_light, create_environment, create_vector3
+    """Create a visually impressive Welcome Scene on startup"""
+    from backend.game_models import (
+        create_scene, create_light, create_environment, create_vector3,
+        create_game_object, create_material
+    )
 
-    # Create lights for day preset
+    # Create lights for sunset preset (warm, dramatic lighting)
     lights = [
         create_light(
             name="Sun",
             light_type="directional",
-            color="#ffffff",
-            intensity=1.0,
-            position=create_vector3(50, 50, 50),
+            color="#ff9944",  # Warm sunset orange
+            intensity=1.2,
+            position=create_vector3(50, 30, 50),
         ),
         create_light(
             name="Ambient",
             light_type="ambient",
-            color="#ffffff",
-            intensity=0.5,
+            color="#ffcc88",  # Warm ambient
+            intensity=0.4,
         ),
     ]
 
-    # Create environment
-    env = create_environment(lighting_preset="day")
+    # Create environment with sunset preset
+    env = create_environment(
+        lighting_preset="sunset",
+        background_color="#1a0a20",  # Dark purple (will be overridden by skybox)
+    )
+
+    # Create some visually interesting starter objects
+    objects = [
+        # Red cube - classic demo object
+        create_game_object(
+            object_type="cube",
+            name="RedCube",
+            position=create_vector3(3, 1, -3),
+            scale=create_vector3(2, 2, 2),
+            material=create_material(color="#ff4444", metalness=0.3, roughness=0.4),
+        ),
+        # Blue sphere - metallic
+        create_game_object(
+            object_type="sphere",
+            name="BlueSphere",
+            position=create_vector3(-4, 1.5, -2),
+            scale=create_vector3(3, 3, 3),
+            material=create_material(color="#4488ff", metalness=0.8, roughness=0.2),
+        ),
+        # Green cylinder
+        create_game_object(
+            object_type="cylinder",
+            name="GreenCylinder",
+            position=create_vector3(0, 1.5, -6),
+            scale=create_vector3(1.5, 3, 1.5),
+            material=create_material(color="#44ff44", metalness=0.2, roughness=0.6),
+        ),
+        # Yellow torus
+        create_game_object(
+            object_type="torus",
+            name="YellowTorus",
+            position=create_vector3(-3, 2, -7),
+            scale=create_vector3(2, 2, 2),
+            material=create_material(color="#ffcc00", metalness=0.6, roughness=0.3),
+        ),
+        # Purple cone
+        create_game_object(
+            object_type="cone",
+            name="PurpleCone",
+            position=create_vector3(5, 1, -5),
+            scale=create_vector3(1.5, 3, 1.5),
+            material=create_material(color="#aa44ff", metalness=0.4, roughness=0.5),
+        ),
+    ]
 
-    # Create clean scene with NO default objects
-    # Ground plane and walls are created by physics system in viewer
+    # Create scene with starter objects
     scene = create_scene(
-        name="Welcome Scene",
-        description="Clean 25x25 FPS world with physics - Ready to explore!",
+        name="Welcome to GCP",
+        description="AI-powered 3D scene builder - Try 'add a red sphere' or 'set lighting to night'",
         world_width=25,
         world_height=10,
         world_depth=25,
+        objects=objects,
         lights=lights,
         environment=env,
     )
@@ -89,12 +139,21 @@ def initialize_default_scene():
     # Use a predictable scene ID for easy linking
     scene["scene_id"] = "welcome"
 
+    # Add skybox configuration (sunset preset)
+    scene["skybox"] = {
+        "preset": "sunset",
+        "turbidity": 8,
+        "rayleigh": 2,
+        "elevation": 5,
+        "azimuth": 180
+    }
+
     # Save to storage
     storage.save(scene)
-    print(f"✓ Initialized default Welcome Scene (ID: welcome)")
-    print(f"  - 25x25 world with FPS physics controller")
-    print(f"  - Ground plane + invisible boundary walls")
-    print(f"  - Player spawn at (0, 1, 0)")
+    print(f"✓ Initialized Welcome Scene (ID: welcome)")
+    print(f"  - 25x25 world with sunset skybox")
+    print(f"  - 5 starter objects (cube, sphere, cylinder, torus, cone)")
+    print(f"  - FPS physics controller ready")
 
 
 # Initialize on module load

backend/tools/rendering_tools.py

@@ -846,3 +846,84 @@ def get_camera_effects(scene_id: str) -> Dict[str, Any]:
         "scene_id": scene_id,
         "camera_effects": camera_effects
     }
+
+
+# =============================================================================
+# Toon/Cel Shading Tools
+# =============================================================================
+
+def update_material_to_toon(
+    scene_id: str,
+    object_id: str,
+    enabled: bool = True,
+    color: Optional[str] = None,
+    gradient_steps: int = 3,
+    outline: bool = True,
+    outline_color: str = "#000000",
+    outline_thickness: float = 0.03
+) -> Dict[str, Any]:
+    """
+    Convert an object's material to toon/cel-shaded style.
+
+    Toon shading creates a cartoon-like appearance with discrete shading bands
+    instead of smooth gradients, commonly used in anime and cel-animation styles.
+
+    Args:
+        scene_id: ID of the scene
+        object_id: ID of the object to update
+        enabled: Enable/disable toon shading (True to apply, False to revert to standard)
+        color: Base color for toon material (optional, keeps existing if not set)
+        gradient_steps: Number of shading steps (2=hard, 3=medium, 5=soft, default: 3)
+        outline: Add black outline effect (default: True)
+        outline_color: Color of the outline (default: "#000000")
+        outline_thickness: Thickness of outline (0.01-0.1, default: 0.03)
+
+    Returns:
+        Dictionary with updated material info and message
+    """
+    scene = storage.get(scene_id)
+    if not scene:
+        raise ValueError(f"Scene '{scene_id}' not found")
+
+    if "objects" not in scene or not scene["objects"]:
+        raise ValueError("Scene has no objects")
+
+    # Find object
+    obj = None
+    for o in scene["objects"]:
+        if o.get("id") == object_id or o.get("object_id") == object_id:
+            obj = o
+            break
+
+    if not obj:
+        raise ValueError(f"Object '{object_id}' not found in scene")
+
+    # Ensure material exists
+    if "material" not in obj:
+        obj["material"] = {}
+
+    # Update toon properties
+    if enabled:
+        obj["material"]["toon"] = {
+            "enabled": True,
+            "gradient_steps": max(2, min(10, gradient_steps)),
+            "outline": outline,
+            "outline_color": outline_color,
+            "outline_thickness": max(0.01, min(0.1, outline_thickness))
+        }
+        if color:
+            obj["material"]["color"] = color
+
+        message = f"Applied toon shading to '{object_id}' ({gradient_steps} steps{', with outline' if outline else ''})"
+    else:
+        obj["material"]["toon"] = {"enabled": False}
+        message = f"Disabled toon shading on '{object_id}' (reverted to standard material)"
+
+    storage.save(scene)
+
+    return {
+        "scene_id": scene_id,
+        "object_id": object_id,
+        "message": message,
+        "material": obj["material"]
+    }

backend/tools/scene_tools.py

@@ -360,3 +360,106 @@ def get_scene_info(
         },
         "objects": objects_info,
     }
+
+
+# Valid brick types from Kenney brick kit
+BRICK_TYPES = {
+    "brick_1x1": "brick_1x1.glb",
+    "brick_1x2": "brick_1x2.glb",
+    "brick_1x4": "brick_1x4.glb",
+    "brick_2x2": "brick_2x2.glb",
+    "brick_2x4": "brick_2x4.glb",
+    "plate_1x2": "plate_1x2.glb",
+    "plate_2x2": "plate_2x2.glb",
+    "plate_2x4": "plate_2x4.glb",
+    "plate_4x4": "plate_4x4.glb",
+    "slope_2x2": "slope_2x2.glb",
+}
+
+
+def add_brick(
+    scene_id: str,
+    brick_type: str = "brick_2x4",
+    position: Optional[Dict[str, float]] = None,
+    rotation: Optional[Dict[str, float]] = None,
+    color: str = "#ff0000",
+    name: Optional[str] = None,
+    base_url: str = "http://localhost:8000"
+) -> Dict[str, Any]:
+    """
+    Add a LEGO-style brick from the Kenney brick kit.
+
+    Args:
+        scene_id: ID of the scene
+        brick_type: Type of brick - brick_1x1, brick_1x2, brick_1x4, brick_2x2, brick_2x4,
+                    plate_1x2, plate_2x2, plate_2x4, plate_4x4, slope_2x2
+        position: Position {x, y, z} (default: {0, 0, 0})
+        rotation: Rotation in degrees {x, y, z} (default: {0, 0, 0})
+        color: Hex color code for the brick (default: #ff0000 red)
+        name: Optional name for the brick
+        base_url: Base URL for the deployed space
+
+    Returns:
+        Dictionary with brick info and message
+    """
+    scene = storage.get(scene_id)
+    if not scene:
+        raise ValueError(f"Scene '{scene_id}' not found")
+
+    if brick_type not in BRICK_TYPES:
+        raise ValueError(f"Invalid brick_type '{brick_type}'. Valid types: {list(BRICK_TYPES.keys())}")
+
+    # Default position
+    if position is None:
+        position = {"x": 0, "y": 0, "z": 0}
+
+    # Default rotation
+    if rotation is None:
+        rotation = {"x": 0, "y": 0, "z": 0}
+
+    # Validate position is within world bounds
+    x = position.get('x', 0)
+    z = position.get('z', 0)
+    WORLD_HALF = 5.0
+    if abs(x) > WORLD_HALF or abs(z) > WORLD_HALF:
+        raise ValueError(
+            f"Brick position ({x}, {z}) is outside the 10x10 world bounds. "
+            f"X and Z must be between -{WORLD_HALF} and {WORLD_HALF}."
+        )
+
+    # Generate unique ID
+    brick_id = f"brick_{len(scene['objects'])}_{brick_type}"
+
+    # Generate name if not provided
+    if not name:
+        name = f"{brick_type.replace('_', ' ').title()}"
+
+    # Model path relative to static files
+    model_path = f"/static/models/kenney/brick_kit/{BRICK_TYPES[brick_type]}"
+
+    brick_obj = {
+        "id": brick_id,
+        "type": "brick",
+        "brick_type": brick_type,
+        "name": name,
+        "position": position,
+        "rotation": rotation,
+        "scale": {"x": 1, "y": 1, "z": 1},
+        "model_path": model_path,
+        "material": {
+            "color": color,
+            "metalness": 0.1,
+            "roughness": 0.7
+        }
+    }
+
+    scene["objects"].append(brick_obj)
+    storage.save(scene)
+
+    return {
+        "scene_id": scene_id,
+        "brick_id": brick_id,
+        "brick_type": brick_type,
+        "message": f"Added {name} at ({position['x']}, {position['y']}, {position['z']})",
+        "brick": brick_obj
+    }

chat_client.py

@@ -21,6 +21,7 @@ from backend.tools.scene_tools import (
     remove_game_object,
     set_scene_lighting,
     get_scene_info,
+    add_brick,
 )
 from backend.tools.player_tools import (
     set_player_speed,
@@ -42,6 +43,18 @@ from backend.tools.rendering_tools import (
     update_object_material,
     set_background_color,
     set_fog,
+    update_material_to_toon,
+)
+from backend.tools.environment_tools import (
+    add_skybox,
+    remove_skybox,
+    add_particles,
+    remove_particles,
+)
+from backend.tools.ui_tools import (
+    render_text_on_screen,
+    render_bar_on_screen,
+    remove_ui_element,
 )
 from backend.game_models import create_vector3, create_material
 
@@ -353,6 +366,179 @@ TOOLS = [
             }
         }
     },
+    # Environment Tools
+    {
+        "type": "function",
+        "function": {
+            "name": "add_skybox",
+            "description": "Add a procedural sky to the scene. Presets: day, sunset, noon, dawn, night",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "scene_id": {"type": "string", "description": "ID of the scene"},
+                    "preset": {"type": "string", "enum": ["day", "sunset", "noon", "dawn", "night"], "description": "Sky preset"},
+                    "turbidity": {"type": "number", "description": "Haziness 2-20 (default: 10)"},
+                    "rayleigh": {"type": "number", "description": "Blue sky intensity 0-4 (default: 2)"},
+                    "sun_elevation": {"type": "number", "description": "Sun angle from horizon -90 to 90 (default: 45)"},
+                    "sun_azimuth": {"type": "number", "description": "Sun compass direction 0-360 (default: 180)"},
+                },
+                "required": ["scene_id"]
+            }
+        }
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "remove_skybox",
+            "description": "Remove the skybox from the scene",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "scene_id": {"type": "string", "description": "ID of the scene"},
+                },
+                "required": ["scene_id"]
+            }
+        }
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "add_particles",
+            "description": "Add particle effects. Presets: fire, smoke, sparkle, rain, snow",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "scene_id": {"type": "string", "description": "ID of the scene"},
+                    "preset": {"type": "string", "enum": ["fire", "smoke", "sparkle", "rain", "snow"], "description": "Particle preset"},
+                    "x": {"type": "number", "description": "X position for localized effects"},
+                    "y": {"type": "number", "description": "Y position for localized effects"},
+                    "z": {"type": "number", "description": "Z position for localized effects"},
+                    "particle_id": {"type": "string", "description": "Optional unique ID"},
+                },
+                "required": ["scene_id", "preset"]
+            }
+        }
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "remove_particles",
+            "description": "Remove a particle system from the scene",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "scene_id": {"type": "string", "description": "ID of the scene"},
+                    "particle_id": {"type": "string", "description": "ID of the particle system to remove"},
+                },
+                "required": ["scene_id", "particle_id"]
+            }
+        }
+    },
+    # UI Tools
+    {
+        "type": "function",
+        "function": {
+            "name": "render_text_on_screen",
+            "description": "Render text on the screen as a 2D overlay",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "scene_id": {"type": "string", "description": "ID of the scene"},
+                    "text": {"type": "string", "description": "Text to display"},
+                    "x": {"type": "number", "description": "Horizontal position 0-100% (default: 50)"},
+                    "y": {"type": "number", "description": "Vertical position 0-100% (default: 10)"},
+                    "font_size": {"type": "integer", "description": "Font size in pixels (default: 24)"},
+                    "color": {"type": "string", "description": "Text color hex (default: #ffffff)"},
+                    "text_id": {"type": "string", "description": "Optional unique ID for updates"},
+                    "background_color": {"type": "string", "description": "Optional background color"},
+                },
+                "required": ["scene_id", "text"]
+            }
+        }
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "render_bar_on_screen",
+            "description": "Render a progress/health bar on screen",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "scene_id": {"type": "string", "description": "ID of the scene"},
+                    "x": {"type": "number", "description": "Horizontal position 0-100% (default: 10)"},
+                    "y": {"type": "number", "description": "Vertical position 0-100% (default: 10)"},
+                    "width": {"type": "number", "description": "Bar width in pixels (default: 200)"},
+                    "height": {"type": "number", "description": "Bar height in pixels (default: 20)"},
+                    "value": {"type": "number", "description": "Current value (default: 100)"},
+                    "max_value": {"type": "number", "description": "Max value (default: 100)"},
+                    "bar_color": {"type": "string", "description": "Fill color (default: #00ff00)"},
+                    "bar_id": {"type": "string", "description": "Optional unique ID for updates"},
+                    "label": {"type": "string", "description": "Optional label above bar"},
+                    "show_value": {"type": "boolean", "description": "Show numeric value"},
+                },
+                "required": ["scene_id"]
+            }
+        }
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "remove_ui_element",
+            "description": "Remove a UI element from the screen",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "scene_id": {"type": "string", "description": "ID of the scene"},
+                    "element_id": {"type": "string", "description": "ID of the text or bar to remove"},
+                },
+                "required": ["scene_id", "element_id"]
+            }
+        }
+    },
+    # Toon Material
+    {
+        "type": "function",
+        "function": {
+            "name": "update_material_to_toon",
+            "description": "Apply toon/cel-shading to an object for cartoon-like appearance",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "scene_id": {"type": "string", "description": "ID of the scene"},
+                    "object_id": {"type": "string", "description": "ID of the object"},
+                    "enabled": {"type": "boolean", "description": "Enable/disable toon shading (default: true)"},
+                    "color": {"type": "string", "description": "Base color (optional)"},
+                    "gradient_steps": {"type": "integer", "description": "Shading steps 2-10 (default: 3)"},
+                    "outline": {"type": "boolean", "description": "Add outline effect (default: true)"},
+                    "outline_color": {"type": "string", "description": "Outline color (default: #000000)"},
+                    "outline_thickness": {"type": "number", "description": "Outline thickness 0.01-0.1 (default: 0.03)"},
+                },
+                "required": ["scene_id", "object_id"]
+            }
+        }
+    },
+    # Brick Blocks
+    {
+        "type": "function",
+        "function": {
+            "name": "add_brick",
+            "description": "Add a LEGO-style brick from the Kenney brick kit. Types: brick_1x1, brick_1x2, brick_1x4, brick_2x2, brick_2x4, plate_1x2, plate_2x2, plate_2x4, plate_4x4, slope_2x2",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "scene_id": {"type": "string", "description": "ID of the scene"},
+                    "brick_type": {"type": "string", "enum": ["brick_1x1", "brick_1x2", "brick_1x4", "brick_2x2", "brick_2x4", "plate_1x2", "plate_2x2", "plate_2x4", "plate_4x4", "slope_2x2"], "description": "Type of brick"},
+                    "x": {"type": "number", "description": "X position"},
+                    "y": {"type": "number", "description": "Y position"},
+                    "z": {"type": "number", "description": "Z position"},
+                    "rotation_y": {"type": "number", "description": "Y rotation in degrees"},
+                    "color": {"type": "string", "description": "Hex color (default: #ff0000)"},
+                    "name": {"type": "string", "description": "Optional name"},
+                },
+                "required": ["scene_id", "brick_type"]
+            }
+        }
+    },
 ]
 
 
@@ -528,6 +714,97 @@ Be concise but helpful. After making changes, briefly confirm what was done."""
                 args.get("density")
             )
 
+        # Environment tools
+        elif name == "add_skybox":
+            return add_skybox(
+                args["scene_id"],
+                args.get("preset", "day"),
+                args.get("turbidity", 10.0),
+                args.get("rayleigh", 2.0),
+                args.get("sun_elevation", 45.0),
+                args.get("sun_azimuth", 180.0)
+            )
+
+        elif name == "remove_skybox":
+            return remove_skybox(args["scene_id"])
+
+        elif name == "add_particles":
+            position = None
+            if "x" in args or "y" in args or "z" in args:
+                position = {"x": args.get("x", 0), "y": args.get("y", 1), "z": args.get("z", 0)}
+            return add_particles(
+                args["scene_id"],
+                args["preset"],
+                position,
+                args.get("particle_id")
+            )
+
+        elif name == "remove_particles":
+            return remove_particles(args["scene_id"], args["particle_id"])
+
+        # UI tools
+        elif name == "render_text_on_screen":
+            return render_text_on_screen(
+                args["scene_id"],
+                args["text"],
+                args.get("x", 50.0),
+                args.get("y", 10.0),
+                args.get("font_size", 24),
+                args.get("color", "#ffffff"),
+                args.get("text_id"),
+                args.get("font_family", "Arial"),
+                args.get("text_align", "center"),
+                args.get("background_color"),
+                args.get("padding", 8)
+            )
+
+        elif name == "render_bar_on_screen":
+            return render_bar_on_screen(
+                args["scene_id"],
+                args.get("x", 10.0),
+                args.get("y", 10.0),
+                args.get("width", 200.0),
+                args.get("height", 20.0),
+                args.get("value", 100.0),
+                args.get("max_value", 100.0),
+                args.get("bar_color", "#00ff00"),
+                args.get("background_color", "#333333"),
+                args.get("border_color", "#ffffff"),
+                args.get("bar_id"),
+                args.get("label"),
+                args.get("show_value", False)
+            )
+
+        elif name == "remove_ui_element":
+            return remove_ui_element(args["scene_id"], args["element_id"])
+
+        # Toon material
+        elif name == "update_material_to_toon":
+            return update_material_to_toon(
+                args["scene_id"],
+                args["object_id"],
+                args.get("enabled", True),
+                args.get("color"),
+                args.get("gradient_steps", 3),
+                args.get("outline", True),
+                args.get("outline_color", "#000000"),
+                args.get("outline_thickness", 0.03)
+            )
+
+        # Brick blocks
+        elif name == "add_brick":
+            position = {"x": args.get("x", 0), "y": args.get("y", 0), "z": args.get("z", 0)}
+            rotation = {"x": 0, "y": args.get("rotation_y", 0), "z": 0}
+            return add_brick(
+                args["scene_id"],
+                args["brick_type"],
+                position,
+                rotation,
+                args.get("color", "#ff0000"),
+                args.get("name"),
+                self.base_url
+            )
+
         else:
             return {"error": f"Unknown tool: {name}"}
 
@@ -710,6 +987,45 @@ If the user DOES specify a position (e.g., "add a cube at 0, 0, 0"), use their s
         elif tool == "set_fog":
             return {"action": "setFog", "data": result.get("fog")}
 
+        # Environment tools
+        elif tool == "add_skybox":
+            return {"action": "addSkybox", "data": result.get("skybox")}
+
+        elif tool == "remove_skybox":
+            return {"action": "removeSkybox", "data": {}}
+
+        elif tool == "add_particles":
+            return {"action": "addParticles", "data": result.get("particle_system")}
+
+        elif tool == "remove_particles":
+            return {"action": "removeParticles", "data": {"particle_id": action["args"].get("particle_id")}}
+
+        # UI tools
+        elif tool == "render_text_on_screen":
+            return {"action": "renderText", "data": result.get("text_element")}
+
+        elif tool == "render_bar_on_screen":
+            return {"action": "renderBar", "data": result.get("bar_element")}
+
+        elif tool == "remove_ui_element":
+            return {"action": "removeUIElement", "data": {"element_id": action["args"].get("element_id")}}
+
+        # Toon shading
+        elif tool == "update_material_to_toon":
+            return {"action": "updateToonMaterial", "data": {
+                "object_id": action["args"].get("object_id"),
+                "enabled": action["args"].get("enabled", True),
+                "color": action["args"].get("color"),
+                "gradient_steps": action["args"].get("gradient_steps", 3),
+                "outline": action["args"].get("outline", True),
+                "outline_color": action["args"].get("outline_color", "#000000"),
+                "outline_thickness": action["args"].get("outline_thickness", 0.03)
+            }}
+
+        # Brick blocks
+        elif tool == "add_brick":
+            return {"action": "addBrick", "data": result.get("brick")}
+
         return None
 
     def clear_history(self):

frontend/game_viewer.html

@@ -65,8 +65,24 @@
         import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
         import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';
         import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
+        import { Sky } from 'three/addons/objects/Sky.js';
+        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
         import * as CANNON from 'cannon-es';
 
+        // Skybox and environment references
+        let sky = null;
+        let sun = new THREE.Vector3();
+
+        // Particle systems
+        let particleSystems = new Map();
+
+        // UI overlay container
+        let uiContainer = null;
+        let uiElements = new Map();
+
+        // GLTF loader for brick models
+        const gltfLoader = new GLTFLoader();
+
         // Get scene ID from URL
         const sceneId = window.location.pathname.split('/').pop();
         const baseUrl = window.location.origin;
@@ -101,7 +117,7 @@
         const MAX_SELECT_DISTANCE = 10; // Max raycast distance for selection
 
         // FPS movement and look variables (configurable via player_config)
-        let moveSpeed = 5.0;
+        let moveSpeed = 8.0;  // Default walking speed in units/sec
         const velocity = new THREE.Vector3();
         let isMouseLocked = false;
         let cameraRotationX = 0; // Pitch (up/down)
@@ -126,7 +142,7 @@
         let JUMP_FORCE = 5.0;
         let GRAVITY = -9.82;
         let PLAYER_MASS = 80.0;
-        let LINEAR_DAMPING = 0.9;
+        let LINEAR_DAMPING = 0.0;  // No damping - we control velocity directly
         // World size from scene data (default 25x25)
         let WORLD_SIZE = 25;
         let WORLD_HALF = WORLD_SIZE / 2;
@@ -238,6 +254,43 @@
             console.log('✅ Player configuration applied successfully');
         }
 
+        function applyInitialEnvironment() {
+            /**
+             * Apply initial environment settings from scene data
+             * Loads skybox, particles, and UI elements on startup
+             */
+            if (!sceneData) return;
+
+            // 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);
+                });
+            }
+
+            // Apply UI elements if defined in scene data
+            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)
@@ -278,6 +331,9 @@
                 // Render all game objects
                 renderGameObjects();
 
+                // Apply initial environment (skybox, particles, UI from scene data)
+                applyInitialEnvironment();
+
                 // Start animation loop
                 animate();
 
@@ -479,14 +535,14 @@
             physicsWorld = new CANNON.World();
             physicsWorld.gravity.set(0, GRAVITY, 0);
 
-            // Set up collision materials for better physics response
+            // Set up collision materials - zero friction since we control velocity directly
             const defaultMaterial = new CANNON.Material('default');
             const defaultContactMaterial = new CANNON.ContactMaterial(
                 defaultMaterial,
                 defaultMaterial,
                 {
-                    friction: 0.3,
-                    restitution: 0.0, // No bounce
+                    friction: 0.0,      // No friction - we set velocity directly each frame
+                    restitution: 0.0,   // No bounce
                 }
             );
             physicsWorld.addContactMaterial(defaultContactMaterial);
@@ -996,6 +1052,9 @@
             // Update crosshair floor intersection and send to parent
             updateCrosshairPosition();
 
+            // Update particle systems
+            updateParticleSystems(delta);
+
             // Render using composer (for outlines) instead of direct renderer
             if (composer) {
                 composer.render();
@@ -1322,6 +1381,38 @@
                     }
                     console.log('Player dimensions updated:', { height: PLAYER_HEIGHT, radius: PLAYER_RADIUS });
                     break;
+                // Skybox actions
+                case 'addSkybox':
+                    handleAddSkybox(data);
+                    break;
+                case 'removeSkybox':
+                    handleRemoveSkybox();
+                    break;
+                // Particle actions
+                case 'addParticles':
+                    handleAddParticles(data);
+                    break;
+                case 'removeParticles':
+                    handleRemoveParticles(data.particle_id);
+                    break;
+                // UI actions
+                case 'renderText':
+                    handleRenderText(data);
+                    break;
+                case 'renderBar':
+                    handleRenderBar(data);
+                    break;
+                case 'removeUIElement':
+                    handleRemoveUIElement(data.element_id);
+                    break;
+                // Toon shading
+                case 'updateToonMaterial':
+                    handleUpdateToonMaterial(data);
+                    break;
+                // Brick blocks
+                case 'addBrick':
+                    handleAddBrick(data);
+                    break;
                 default:
                     console.warn('Unknown postMessage action:', action);
             }
@@ -1718,6 +1809,465 @@
             console.log('Fog enabled:', fogData.type);
         }
 
+        // ==================== Skybox Handlers ====================
+
+        function handleAddSkybox(skyboxData) {
+            // Remove existing skybox if any
+            if (sky) {
+                scene.remove(sky);
+            }
+
+            // Create Sky mesh
+            sky = new Sky();
+            sky.scale.setScalar(450000);
+            scene.add(sky);
+
+            const skyUniforms = sky.material.uniforms;
+            skyUniforms['turbidity'].value = skyboxData.turbidity || 10;
+            skyUniforms['rayleigh'].value = skyboxData.rayleigh || 2;
+            skyUniforms['mieCoefficient'].value = 0.005;
+            skyUniforms['mieDirectionalG'].value = 0.8;
+
+            // Calculate sun position from elevation and azimuth
+            const phi = THREE.MathUtils.degToRad(90 - (skyboxData.sun_elevation || 45));
+            const theta = THREE.MathUtils.degToRad(skyboxData.sun_azimuth || 180);
+            sun.setFromSphericalCoords(1, phi, theta);
+            skyUniforms['sunPosition'].value.copy(sun);
+
+            // Update scene background to use sky
+            scene.background = null; // Sky will render as background
+
+            console.log('🌤️ Skybox added:', skyboxData.preset || 'custom',
+                       `elevation=${skyboxData.sun_elevation}°`);
+        }
+
+        function handleRemoveSkybox() {
+            if (sky) {
+                scene.remove(sky);
+                sky = null;
+            }
+            // Revert to solid background
+            const bgColor = sceneData?.environment?.background_color || '#87CEEB';
+            scene.background = new THREE.Color(bgColor);
+            console.log('🌤️ Skybox removed');
+        }
+
+        // ==================== Particle System Handlers ====================
+
+        function handleAddParticles(particleData) {
+            const id = particleData.id || particleData.particle_id;
+
+            // Remove existing particle system with same ID
+            if (particleSystems.has(id)) {
+                const existingSystem = particleSystems.get(id);
+                scene.remove(existingSystem.points);
+                particleSystems.delete(id);
+            }
+
+            const config = particleData;
+            const count = config.count || 100;
+
+            // Create particle geometry
+            const geometry = new THREE.BufferGeometry();
+            const positions = new Float32Array(count * 3);
+            const velocities = new Float32Array(count * 3);
+            const lifetimes = new Float32Array(count);
+
+            const spread = config.spread || 1.0;
+            const pos = config.position || { x: 0, y: 0, z: 0 };
+
+            for (let i = 0; i < count; i++) {
+                const i3 = i * 3;
+
+                if (config.localized !== false) {
+                    // Localized effect (fire, smoke, sparkle)
+                    positions[i3] = pos.x + (Math.random() - 0.5) * spread;
+                    positions[i3 + 1] = pos.y + Math.random() * spread;
+                    positions[i3 + 2] = pos.z + (Math.random() - 0.5) * spread;
+                } else {
+                    // Weather effect (rain, snow) - covers world
+                    positions[i3] = (Math.random() - 0.5) * WORLD_SIZE * 2;
+                    positions[i3 + 1] = Math.random() * 20;
+                    positions[i3 + 2] = (Math.random() - 0.5) * WORLD_SIZE * 2;
+                }
+
+                const vel = config.velocity || { x: 0, y: 1, z: 0 };
+                velocities[i3] = vel.x + (Math.random() - 0.5) * 0.5;
+                velocities[i3 + 1] = vel.y + (Math.random() - 0.5) * 0.5;
+                velocities[i3 + 2] = vel.z + (Math.random() - 0.5) * 0.5;
+
+                lifetimes[i] = Math.random() * (config.lifetime || 2.0);
+            }
+
+            geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+
+            // Create particle material
+            const startColor = new THREE.Color(config.color_start || '#ffffff');
+            const material = new THREE.PointsMaterial({
+                size: config.size || 0.1,
+                color: startColor,
+                transparent: true,
+                opacity: 0.8,
+                blending: THREE.AdditiveBlending,
+                depthWrite: false
+            });
+
+            const points = new THREE.Points(geometry, material);
+            points.name = `particles_${id}`;
+            scene.add(points);
+
+            // Store particle system data for animation
+            particleSystems.set(id, {
+                points,
+                geometry,
+                velocities,
+                lifetimes,
+                config,
+                maxLifetime: config.lifetime || 2.0,
+                startColor,
+                endColor: new THREE.Color(config.color_end || config.color_start || '#ffffff')
+            });
+
+            console.log('✨ Particles added:', id, config.preset);
+        }
+
+        function handleRemoveParticles(particleId) {
+            if (particleSystems.has(particleId)) {
+                const system = particleSystems.get(particleId);
+                scene.remove(system.points);
+                system.geometry.dispose();
+                system.points.material.dispose();
+                particleSystems.delete(particleId);
+                console.log('✨ Particles removed:', particleId);
+            }
+        }
+
+        function updateParticleSystems(delta) {
+            particleSystems.forEach((system, id) => {
+                const positions = system.geometry.attributes.position.array;
+                const count = positions.length / 3;
+                const config = system.config;
+                const pos = config.position || { x: 0, y: 0, z: 0 };
+                const spread = config.spread || 1.0;
+
+                for (let i = 0; i < count; i++) {
+                    const i3 = i * 3;
+
+                    // Update position based on velocity
+                    positions[i3] += system.velocities[i3] * delta;
+                    positions[i3 + 1] += system.velocities[i3 + 1] * delta;
+                    positions[i3 + 2] += system.velocities[i3 + 2] * delta;
+
+                    // Update lifetime
+                    system.lifetimes[i] += delta;
+
+                    // Reset particle if lifetime exceeded
+                    if (system.lifetimes[i] >= system.maxLifetime) {
+                        system.lifetimes[i] = 0;
+
+                        if (config.localized !== false) {
+                            positions[i3] = pos.x + (Math.random() - 0.5) * spread;
+                            positions[i3 + 1] = pos.y;
+                            positions[i3 + 2] = pos.z + (Math.random() - 0.5) * spread;
+                        } else {
+                            // Weather - respawn at top
+                            positions[i3] = (Math.random() - 0.5) * WORLD_SIZE * 2;
+                            positions[i3 + 1] = 20;
+                            positions[i3 + 2] = (Math.random() - 0.5) * WORLD_SIZE * 2;
+                        }
+                    }
+                }
+
+                system.geometry.attributes.position.needsUpdate = true;
+            });
+        }
+
+        // ==================== UI Overlay Handlers ====================
+
+        function ensureUIContainer() {
+            if (!uiContainer) {
+                uiContainer = document.createElement('div');
+                uiContainer.id = 'ui-overlay';
+                uiContainer.style.cssText = `
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    pointer-events: none;
+                    z-index: 50;
+                `;
+                document.getElementById('viewer-container').appendChild(uiContainer);
+            }
+        }
+
+        function handleRenderText(textData) {
+            ensureUIContainer();
+
+            const id = textData.id || textData.text_id;
+
+            // Remove existing element with same ID
+            if (uiElements.has(id)) {
+                uiContainer.removeChild(uiElements.get(id));
+            }
+
+            const element = document.createElement('div');
+            element.id = `ui-${id}`;
+
+            let bgStyle = '';
+            if (textData.background_color) {
+                bgStyle = `background-color: ${textData.background_color}; padding: ${textData.padding || 8}px; border-radius: 4px;`;
+            }
+
+            element.style.cssText = `
+                position: absolute;
+                left: ${textData.x}%;
+                top: ${textData.y}%;
+                transform: translate(-50%, 0);
+                color: ${textData.color || '#ffffff'};
+                font-family: ${textData.font_family || 'Arial'}, sans-serif;
+                font-size: ${textData.font_size || 24}px;
+                text-align: ${textData.text_align || 'center'};
+                text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+                white-space: nowrap;
+                ${bgStyle}
+            `;
+            element.textContent = textData.text;
+
+            uiContainer.appendChild(element);
+            uiElements.set(id, element);
+
+            console.log('📝 UI text rendered:', id);
+        }
+
+        function handleRenderBar(barData) {
+            ensureUIContainer();
+
+            const id = barData.id || barData.bar_id;
+
+            // Remove existing element with same ID
+            if (uiElements.has(id)) {
+                uiContainer.removeChild(uiElements.get(id));
+            }
+
+            const percentage = barData.percentage ||
+                ((barData.value / barData.max_value) * 100);
+
+            const container = document.createElement('div');
+            container.id = `ui-${id}`;
+            container.style.cssText = `
+                position: absolute;
+                left: ${barData.x}%;
+                top: ${barData.y}%;
+            `;
+
+            // Add label if provided
+            if (barData.label) {
+                const label = document.createElement('div');
+                label.style.cssText = `
+                    color: #ffffff;
+                    font-family: Arial, sans-serif;
+                    font-size: 14px;
+                    margin-bottom: 4px;
+                    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+                `;
+                label.textContent = barData.label;
+                container.appendChild(label);
+            }
+
+            // Create bar container
+            const barContainer = document.createElement('div');
+            barContainer.style.cssText = `
+                width: ${barData.width || 200}px;
+                height: ${barData.height || 20}px;
+                background-color: ${barData.background_color || '#333333'};
+                border: 2px solid ${barData.border_color || '#ffffff'};
+                border-radius: 4px;
+                overflow: hidden;
+                position: relative;
+            `;
+
+            // Create fill bar
+            const fill = document.createElement('div');
+            fill.style.cssText = `
+                width: ${percentage}%;
+                height: 100%;
+                background-color: ${barData.bar_color || '#00ff00'};
+                transition: width 0.3s ease;
+            `;
+            barContainer.appendChild(fill);
+
+            // Show value if requested
+            if (barData.show_value) {
+                const valueText = document.createElement('div');
+                valueText.style.cssText = `
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    color: #ffffff;
+                    font-family: Arial, sans-serif;
+                    font-size: 12px;
+                    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
+                `;
+                valueText.textContent = `${Math.round(barData.value)}/${Math.round(barData.max_value)}`;
+                barContainer.appendChild(valueText);
+            }
+
+            container.appendChild(barContainer);
+            uiContainer.appendChild(container);
+            uiElements.set(id, container);
+
+            console.log('📊 UI bar rendered:', id);
+        }
+
+        function handleRemoveUIElement(elementId) {
+            if (uiElements.has(elementId)) {
+                uiContainer.removeChild(uiElements.get(elementId));
+                uiElements.delete(elementId);
+                console.log('🗑️ UI element removed:', elementId);
+            }
+        }
+
+        // ==================== Toon Material Handler ====================
+
+        function handleUpdateToonMaterial(data) {
+            const obj = scene.children.find(child =>
+                child.userData.id === data.object_id ||
+                child.userData.object_id === data.object_id
+            );
+
+            if (!obj) {
+                console.error('Object not found for toon material:', data.object_id);
+                return;
+            }
+
+            if (data.enabled !== false) {
+                // Create toon material
+                const existingColor = obj.material?.color?.getHex() || 0xffffff;
+                const color = data.color ? new THREE.Color(data.color) : new THREE.Color(existingColor);
+
+                // Create gradient texture for toon shading
+                const steps = data.gradient_steps || 3;
+                const gradientMap = createToonGradientMap(steps);
+
+                const toonMaterial = new THREE.MeshToonMaterial({
+                    color: color,
+                    gradientMap: gradientMap
+                });
+
+                // Dispose old material
+                if (obj.material) obj.material.dispose();
+                obj.material = toonMaterial;
+
+                // Store toon settings in userData for reference
+                obj.userData.toonEnabled = true;
+                obj.userData.toonSettings = data;
+
+                console.log('🎨 Toon material applied to:', data.object_id);
+            } else {
+                // Revert to standard material
+                const existingColor = obj.material?.color?.getHex() || 0xffffff;
+
+                const standardMaterial = new THREE.MeshStandardMaterial({
+                    color: existingColor,
+                    roughness: 0.7,
+                    metalness: 0.0
+                });
+
+                if (obj.material) obj.material.dispose();
+                obj.material = standardMaterial;
+                obj.userData.toonEnabled = false;
+
+                console.log('🎨 Reverted to standard material:', data.object_id);
+            }
+        }
+
+        function createToonGradientMap(steps) {
+            const canvas = document.createElement('canvas');
+            canvas.width = steps;
+            canvas.height = 1;
+            const ctx = canvas.getContext('2d');
+
+            for (let i = 0; i < steps; i++) {
+                const value = Math.floor((i / (steps - 1)) * 255);
+                ctx.fillStyle = `rgb(${value},${value},${value})`;
+                ctx.fillRect(i, 0, 1, 1);
+            }
+
+            const texture = new THREE.CanvasTexture(canvas);
+            texture.minFilter = THREE.NearestFilter;
+            texture.magFilter = THREE.NearestFilter;
+
+            return texture;
+        }
+
+        // ==================== Brick Block Handler ====================
+
+        function handleAddBrick(brickData) {
+            if (!scene || !sceneData) {
+                console.error('Scene not initialized yet');
+                return;
+            }
+
+            const modelPath = brickData.model_path;
+            const position = brickData.position || { x: 0, y: 0, z: 0 };
+            const rotation = brickData.rotation || { x: 0, y: 0, z: 0 };
+            const color = new THREE.Color(brickData.material?.color || '#ff0000');
+
+            // Load the GLTF model
+            gltfLoader.load(
+                modelPath,
+                (gltf) => {
+                    const model = gltf.scene;
+
+                    // Apply position
+                    model.position.set(position.x, position.y, position.z);
+
+                    // Apply rotation (convert degrees to radians)
+                    model.rotation.set(
+                        THREE.MathUtils.degToRad(rotation.x),
+                        THREE.MathUtils.degToRad(rotation.y),
+                        THREE.MathUtils.degToRad(rotation.z)
+                    );
+
+                    // Apply color to all meshes in the model
+                    model.traverse((child) => {
+                        if (child.isMesh) {
+                            child.material = new THREE.MeshStandardMaterial({
+                                color: color,
+                                metalness: brickData.material?.metalness || 0.1,
+                                roughness: brickData.material?.roughness || 0.7
+                            });
+                            child.castShadow = true;
+                            child.receiveShadow = true;
+                        }
+                    });
+
+                    // Store metadata
+                    model.userData.id = brickData.id;
+                    model.userData.type = 'brick';
+                    model.userData.brick_type = brickData.brick_type;
+                    model.userData.name = brickData.name;
+
+                    // Add to scene
+                    scene.add(model);
+
+                    // Add to scene data for tracking
+                    if (!sceneData.objects) sceneData.objects = [];
+                    sceneData.objects.push(brickData);
+
+                    console.log('🧱 Brick added:', brickData.brick_type, 'at', position);
+                },
+                (xhr) => {
+                    console.log(`Loading brick: ${(xhr.loaded / xhr.total * 100).toFixed(0)}%`);
+                },
+                (error) => {
+                    console.error('Error loading brick:', error);
+                }
+            );
+        }
+
         // Start the application
         init();
     </script>