HAL 9000 inspired glowing orb with real-time controls
Live Demo · Watch Video · Report Bug
https://github.com/mrsarac/lithosphere/raw/main/videos/lithosphere5.mp4
Lithosphere is a real-time procedural shader playground built with WebGPU. It features a dual-mesh rendering system with an inner glowing core inspired by HAL 9000 and a transparent outer gel shell with advanced light transmission.
The project includes a professional Shader Studio debug panel (inspired by Substance Designer) that allows real-time manipulation of every shader parameter, plus Gemini AI integration for natural language shader suggestions.
| Feature | Description |
|---|---|
| WebGPU Rendering | Next-gen graphics API with Three.js TSL (Three Shading Language) |
| Dual-Mesh System | Inner glowing core + transparent outer gel shell with light bleeding |
| HAL 9000 Aesthetic | Menacing red glow with pulsing animations |
| Shader Studio Panel | Professional debug panel with 70+ real-time parameters |
| Post-Processing | Bloom, chromatic aberration, vignette with WebGPU-native TSL |
| HDR Environment | Load .hdr/.exr files for realistic reflections and backgrounds |
| Capture Studio | Screenshot (PNG/JPEG) + video recording (WebM up to 60fps) |
| GLTF Import | Load custom 3D models with auto-normalization |
| 10 Built-in Presets | HAL 9000, Blue Crystal, Toxic Green, Golden Sun, Purple Void + 5 more |
| AI Integration | Gemini-powered natural language shader suggestions |
| TSL Code Export | Copy or download your shader code for external use |
| 60 FPS Performance | Optimized procedural noise with MaterialX functions |
| Technology | Purpose |
|---|---|
| React 19 | UI framework with concurrent features |
| Three.js r182 | 3D rendering with WebGPU backend |
| TSL | Three Shading Language for node-based materials |
| MaterialX Noise | mx_fractal_noise_float, mx_noise_float for procedural textures |
| Vite | Blazing fast development and HMR |
| Tailwind CSS | Utility-first styling for debug panel |
| Gemini API | AI-powered shader suggestions |
# Clone the repository
git clone https://github.com/mrsarac/lithosphere.git
cd lithosphere
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run buildOpen http://localhost:5173 in a WebGPU-compatible browser.
WebGPU is required. Check caniuse.com/webgpu for current support.
| Browser | Version | Status |
|---|---|---|
| Chrome | 113+ | ✅ Supported |
| Edge | 113+ | ✅ Supported |
| Safari | 18+ (macOS Sonoma) | ✅ Supported |
| Firefox | Nightly |
Open the SHADER STUDIO panel at the bottom of the screen:
| Tab | Controls |
|---|---|
| Core | Geometry size, base/glow colors, metalness, roughness, pulse intensity, noise scale |
| Gel | Transmission, thickness, IOR, clearcoat, attenuation color/distance |
| Light | Key light, fill light, rim light, HAL core point light |
| Anim | Auto-rotate speed, breathing amplitude, wobble intensity |
| Shape | Geometry type (Sphere, Icosahedron, Torus), mesh visibility |
| Presets | One-click style presets with instant preview |
| AI | Natural language shader modification via Gemini |
| HAL 9000 Classic menacing red |
Blue Crystal Icy cold glow |
Toxic Green Radioactive energy |
| Golden Sun Warm solar plasma |
Purple Void Deep space anomaly |
White Dwarf Stellar remnant |
Physics Engine Sprint 1 - Foundation Complete!
- 🌌 Physics Engine - Full N-body gravity simulation (Newton's F = Gm₁m₂/r²)
- ⚡ Gravity Modes - Newton (realistic), Artistic (exaggerated), Magnetic (attract/repel)
- 📦 Boundary System - Bounce, Wrap, or Contain objects within world boundaries
- 💎 Gel Interaction - Collision, Deformation, and Merge modes (UI ready)
- 🎨 Orbit Trails - Trail visualization for object paths (UI ready)
- 🌀 Three-Body Chaos - Chaotic dynamics with 3+ cores
- ⚖️ Mass System - Auto (scale-based) or manual mass for each instance
- ⏱️ Time Scale - Control simulation speed from 0.1x slow-mo to 3x fast-forward
Multi-Core & Gel System
- 🌐 Multi-Core System - Create and manage up to 10 core instances
- 💎 Multi-Gel System - Create and manage up to 10 gel instances
- 📐 Instance Transforms - Position, rotation, and scale for each instance
- 🔗 Core-Gel Linking - Gels follow linked core position automatically
- ✨ Arrangement Presets - 6 presets: Single, Binary, Orbital, Triangle, Stack, Cluster
- 📋 Duplicate Instances - Clone any core or gel with one click
- 🎭 Animation Sync - Synchronized, independent, or staggered modes
- 👁️ Instance Visibility - Toggle each instance on/off independently
Light & Shader Toggles
- 💡 9 Light Toggles - On/off for every light: Key, Fill, Top, Rim 1&2, HAL Core/Back, Red Rim, Ambient
- 🎭 Shader Effect Toggles - Fresnel, Specular, Red Bleed, Sheen, Env Reflection
- 🔆 Fresnel/Specular Control - Adjustable power & intensity for edge glow and highlights
New Features:
- 📱 Right-Side Panel - Panel moved from bottom to right side for better UX
- 🎛️ Vertical Tab Sidebar - Icon + label tabs in a vertical layout
- 📜 Scrollable Content - Full-height scrollable content area
- ❌ No Camera Zoom - Removed camera zoom-out when panel opens (not needed with right layout)
- 🎨 Compact UI - Optimized all controls for narrow panel width
Sprint 4 - UX & Versioning:
- 📋 Dropdown Menus - Config (Import/Export/Reset) and Code (TSL) actions consolidated
- 🏷️ Version Strategy - Single Source of Truth (version.ts) for all version references
- 🎥 Improved Camera Sync - More aggressive zoom (+3 units) and target shift (+1.5 Y)
Sprint 3 - Camera Control:
- 🎥 Panel-Camera Sync - Camera zooms out and shifts up when panel opens (no overlap)
- 🎬 Smooth Camera Animation - easeOutCubic easing with 60fps transitions
- 🎯 Camera Presets - Default, Close-Up, Wide Shot, Top-Down instant switching
- 🔒 Lock Camera - Toggle to prevent user camera interaction
- 📐 Orbit Target Y - Control vertical position of orbit center
- 📏 Distance Slider - Direct camera distance control
New Features:
- 🔲 Vignette Effect - Custom TSL vignette with UV-based distance calculation and smoothstep falloff
- 📸 Screenshot Capture - PNG (lossless) or JPEG with quality control
- 🎬 Video Recording - WebM with VP9/VP8 codec, configurable bitrate (1-15 Mbps) and FPS (24-60)
- 🌍 HDR Environment Maps - RGBELoader for .hdr/.exr files with realistic reflections
- 🖼️ HDR Background - Optional environment background with blur control
- ⏱️ Recording Timer - Real-time duration display during video capture
- 📊 New Capture Tab - Dedicated tab for all capture controls
New Features:
- ✨ Post-Processing Pipeline - WebGPU-native bloom, chromatic aberration, vignette
- 🎨 TSL Bloom Effect - Configurable intensity, threshold, and radius
- 🌈 Chromatic Aberration - RGB color separation effect
- 📦 GLTF Import - Load custom 3D models with automatic centering and normalization
- 📤 TSL Code Export - Copy/download shader code for external use
- 🎯 Effects Tab - Centralized post-processing controls
Shader Studio Update:
- ✨ Shader Studio Panel - Professional debug interface inspired by Substance Designer
- 🎬 Camera Tab - FOV, distance limits, damping controls
- 💡 Advanced Lighting - Key light position (X/Y/Z), dynamic lighting toggle, orbit speed
- 🎡 Animation Controls - Mesh rotation speed, breathing sync, wobble intensity
- 🎲 Random Button - One-click color randomization
- ⌨️ Keyboard Shortcuts - ~ toggle panel, 1-8 switch tabs, Esc close
- 📊 FPS Counter - Real-time performance monitoring
- 🌈 10 Presets - HAL 9000, Blue Crystal, Toxic Green, Golden Sun, Purple Void, White Dwarf + 4 new
- 🤖 Gemini AI Integration - Natural language shader suggestions
- 📦 Import/Export - Save and share configurations as JSON
Initial Release:
- 🌐 WebGPU Rendering - Three.js with TSL (Three Shading Language)
- 🔮 Dual-Mesh System - Inner core + outer gel shell
- 🎭 HAL 9000 Aesthetic - Iconic glowing red orb
- 🌊 MaterialX Noise - Procedural displacement
- 🔄 Auto-Rotation - Smooth orbital animation
- 💨 60 FPS - Optimized performance
- WebGPU rendering with Three.js TSL
- Dual-mesh system (core + gel shell)
- Real-time shader parameter controls
- 10 built-in presets
- Import/Export configurations
- Gemini AI integration
- Camera controls (FOV, distance)
- Advanced animation controls
- Keyboard shortcuts
- GLTF import (custom meshes)
- Post-processing effects (bloom, chromatic aberration, vignette)
- TSL shader code export
- Screenshot capture (PNG/JPEG)
- Video recording (WebM)
- HDR environment maps
- Camera presets & panel-camera sync
- Audio reactivity (microphone/audio file input)
- VR/AR support via WebXR
- Community preset gallery
- Mobile touch controls
lithosphere/
├── src/
│ ├── components/
│ │ ├── RockScene.tsx # Main WebGPU scene with dual-mesh system
│ │ └── DebugPanel.tsx # Shader Studio control panel
│ ├── index.tsx # App entry point
│ └── index.css # Global styles
├── videos/
│ └── lithosphere5.mp4 # Demo video
├── index.html # HTML template
├── nixpacks.toml # Deployment config
└── package.json
Contributions are welcome! Feel free to:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
MIT License - see LICENSE for details.
Mustafa Sarac
