A high-performance 3D fighter jet game featuring dynamic terrain generation, advanced lighting systems, and immersive gameplay mechanics built with Three.js.
- Level-of-Detail (LOD) Rendering: Optimized terrain that adapts based on camera distance
- Procedural Generation: Dynamic terrain generation using noise functions
- Multiple Environments: Switch between different terrain styles (Mars, Realistic, Crystal)
- Shader-Based Displacement: GPU-accelerated terrain height generation
- Realistic Flight Controls: Intuitive keyboard controls with physics-based movement
- Combat System: Laser weapons with terrain collision detection
- Multiple Game Modes:
- Play Mode: Full fighter jet experience with combat
- Float Mode: Free camera exploration of the terrain
- Cascaded Shadow Mapping: Multi-level shadow system for realistic lighting
- Dynamic Sun System: Time-of-day simulation with moving sun
- Lens Flare Effects: Realistic sun lens flares with terrain occlusion
- Advanced Materials: PBR-style shading with multiple lighting models
- Interactive Control Panel: Real-time adjustment of lighting, shadows, and terrain
- Screen Management: Seamless transitions between menu, game, and pause states
- Environment Toggle: Quick switching between terrain environments
- HUD Display: Real-time position and system information
- Dynamic Music: Context-aware audio that changes based on game state
- Menu Music: Atmospheric background music for exploration
- Game Music: High-energy combat music during gameplay
- Post-Processing Pipeline: Bloom, anti-aliasing, and color grading
- Particle Effects: Combat effects and environmental particles
- Atmospheric Rendering: Realistic sky and atmosphere simulation
- Performance Optimization: Efficient rendering with mobile device support
- Engine: Three.js (WebGL)
- Build Tool: Vite
- Shaders: GLSL (Vertex & Fragment shaders)
- Audio: Web Audio API
- Input: Keyboard and mouse controls with pointer lock API
- Node.js (v14 or higher)
- npm or yarn
- Modern web browser with WebGL support
-
Clone the repository
git clone https://github.com/felixpalmer/lod-terrain.git cd lod-terrain -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open in browser Navigate to
http://localhost:3000
npm run buildThe built files will be in the dist/ directory.
- Enter: Start experience
- Mouse: Navigate menu options
- A/D: Steer left/right
- Space: Fire lasers
- Shift: Fire bombs
- Tab: Afterburner
- Esc: Pause game
- R: Restart game
- WASD: Move camera
- Q/E: Move up/down
- Mouse: Look around (pointer lock)
- C: Toggle camera mode
- Esc: Return to main menu
- T: Switch terrain environment
- F: Toggle fog
- P: Cycle performance stats
src/
├── game/ # Game logic and systems
│ ├── Game.js # Main game controller
│ ├── Player.js # Fighter jet player
│ ├── InputManager.js # Input handling
│ ├── CollisionDetector.js # Physics and collisions
│ └── EnvironmentEffectsManager.js # Particle effects
├── ui/ # User interface components
│ ├── UIManager.js # UI controller
│ ├── ScreenManager.js # Screen transitions
│ ├── ControlPanel.js # Settings panel
│ └── IntroOverlay.js # Start screen
├── audio/ # Audio system
│ └── AudioManager.js # Music and sound effects
├── assets/ # Static assets
│ ├── shaders/ # GLSL shader files
│ ├── models/ # 3D models
│ └── audio/ # Audio files
├── environment/ # Environment management
│ └── EnvironmentManager.js # Terrain environments
├── app.js # Main application
├── terrain.js # Terrain generation
├── LensFlare.js # Lens flare effects
├── material.js # Material definitions
└── main.js # Entry point
The terrain system uses procedural noise generation combined with GPU-based displacement mapping for efficient, high-quality landscapes.
Implements cascaded shadow maps (CSM) for realistic shadow rendering across large distances, essential for aerial gameplay.
Uses height sampling for accurate collision detection between projectiles and the shader-displaced terrain.
- LOD system reduces polygon count for distant terrain
- Frustum culling eliminates off-screen objects
- Efficient shader-based calculations
- Mobile device optimization
The game includes extensive configuration options accessible through the control panel:
- Lighting: Sun time, intensity, ambient lighting
- Shadows: Quality, distance, cascade settings
- Terrain: Smoothing, height gain, noise resolution
- Visual: Bloom, anti-aliasing, post-processing effects
- Performance: Render quality, pixel ratio
- Create new shader files in
src/assets/shaders/ - Add environment configuration in
src/environment/ - Update the environment manager to include new options
- Modify
src/game/Player.jsfor flight physics - Update
src/game/InputManager.jsfor control schemes - Extend
src/game/CollisionDetector.jsfor new collision types
The project uses custom GLSL shaders for:
- Terrain displacement and texturing
- Shadow mapping
- Post-processing effects
- Atmospheric rendering
- Shadow Quality: Lower shadow resolution for better performance
- Terrain Detail: Reduce terrain levels on slower devices
- Post-Processing: Disable bloom and anti-aliasing if needed
- Render Scale: Lower pixel ratio for mobile devices
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
Requires WebGL 2.0 support.
- Fork the repository
- Create your 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
This project is licensed under the ISC License - see the LICENSE file for details.
- Built with Three.js - 3D graphics library
- Terrain system based on LOD Terrain by Felix Palmer
- Music generated with Suno AI for atmospheric and combat tracks
- Shader techniques from the WebGL and graphics programming community
This entire project was vibe coded using AI assistance from:
- Claude (Anthropic) - Primary development assistant
- Codex (OpenAI) - Code generation and debugging
- Gemini (Google) - Algorithm optimization and problem solving
- Grok (xAI) - Creative solutions and feature ideation
The fusion of human creativity and AI collaboration made this ambitious 3D game possible.
Built with ❤️ using Three.js and modern web technologies