Open Ocean 3D Simulation

A photorealistic, interactive ocean simulation built with Three.js and WebGL technology. Experience realistic water physics, dynamic wave patterns, and immersive first-person navigation through an expansive ocean environment.

Features

Visual & Physics

• Photorealistic Water Rendering: Advanced shader-based water with normal mapping and realistic reflections
• Dynamic Wave System: Real-time wave generation with customizable height, speed, and length parameters
• Interactive Water Physics: Camera movement creates ripples and disturbances in the water surface
• Atmospheric Sky System: Procedurally generated sky with accurate sun positioning and atmospheric scattering
• Advanced Lighting: Multiple light sources including directional sun light, ambient lighting, and fill lights
• Dynamic Shadows: Real-time shadow mapping for enhanced depth perception

Controls & Interaction

• Dual Camera Modes:
  • First-person camera with mouse look and keyboard movement (WASD/Arrow keys)
  • Orbit controls for cinematic viewing
• Real-time Water Interaction: Movement speed and proximity to water surface affect wave patterns
• Customizable Parameters: Live adjustment of wave properties, wind strength, and surface detail
• Performance Monitoring: Built-in FPS counter with adaptive quality scaling

Technical Features

• Optimized Performance: Adaptive quality rendering maintains smooth framerates
• Responsive Design: Fully responsive across different screen sizes
• Modern Web Technologies: ES6 modules, WebGL 2.0, and latest Three.js features
• Clean UI: Glassmorphic control panel with smooth animations

🎮 Controls

Navigation

• WASD or Arrow Keys: Move horizontally
• Space: Move up
• Shift: Move down
• Mouse: Look around (click to lock pointer)
• C: Toggle between first-person and orbit camera modes

Parameters

Adjust these settings in real-time via the control panel:

• Wave Height (0.1 - 2.0): Controls the amplitude of ocean waves
• Wave Speed (0.2 - 3.0): Adjusts the animation speed of wave motion
• Wave Length (10 - 80): Modifies the scale of wave patterns
• Wind Strength (0.0 - 1.0): Affects water opacity and choppiness
• Surface Detail (0.0 - 1.0): Controls the detail level of water distortion

Getting Started

Prerequisites

• Modern web browser with WebGL 2.0 support (Chrome, Firefox, Edge, Safari)
• No additional dependencies or build tools required

Installation

1. Clone or download the project files
2. Open index.html in a web browser to view the landing page
3. Click "Launch Simulation" or directly open simulation.html to start the experience

Running Locally

Simply open the HTML files in a web browser. For best results, use a local web server:

# Using Python
python -m http.server 8000

# Using Node.js
npx http-server

# Using PHP
php -S localhost:8000

Then navigate to http://localhost:8000

🛠️ Technical Stack

• Three.js: 3D graphics library (v0.158.0)
• WebGL 2.0: Hardware-accelerated 3D rendering
• ES6 Modules: Modern JavaScript module system
• Custom GLSL Shaders: Enhanced water physics and interaction

Key Components

1. Water System: Three.js Water object with custom shader modifications for user interaction
2. Sky System: Procedural sky dome with atmospheric scattering simulation
3. Camera System: Hybrid first-person and orbit control system
4. Performance Monitor: Real-time FPS tracking with adaptive quality adjustment
5. Lighting System: Multi-source lighting that follows camera position

Customization

Modifying Water Properties

Edit the water initialization in simulation.html:

const water = new Water(waterGeometry, {
    textureWidth: 512,        // Water texture resolution
    textureHeight: 512,
    waterColor: 0x001e0f,     // Deep water color
    distortionScale: 3.7,     // Wave distortion amount
    sunDirection: new THREE.Vector3(),
    sunColor: 0xffffff
});

Adjusting Sky Parameters

Modify the sky properties:

skyUniforms['turbidity'].value = 10;      // Atmospheric haze
skyUniforms['rayleigh'].value = 2;        // Sky scattering
skyUniforms['mieCoefficient'].value = 0.005;  // Light scattering
skyUniforms['mieDirectionalG'].value = 0.8;   // Sun glow

Performance Tuning

Adjust renderer settings for different hardware:

renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Limit pixel ratio
water.material.uniforms.textureWidth = 256; // Reduce water texture size

Performance

• Target FPS: 60 FPS on modern hardware
• Adaptive Quality: Automatically adjusts rendering quality based on performance
• Optimized Rendering: Shadow map size and texture resolution dynamically scaled
• Efficient Shaders: Custom GLSL code optimized for real-time interaction

Known Issues

• First-person camera may pass through water surface (by design for exploration)
• Pointer lock may require user gesture in some browsers
• Performance may vary on integrated graphics

🔮 Future Enhancements

• Underwater view with caustics effects
• Particle system for foam and spray
• Weather system (rain, storm effects)
• Marine life (fish, dolphins)
• Boat or surfing mechanics
• VR support
• Multiplayer synchronization

📝 License

This project is open source and available for educational and personal use.

👤 Author

Sethu Nguna - 2025

An experimental project exploring real-time water simulation and interactive 3D environments in the browser.

Acknowledgments

• Three.js community for excellent documentation and examples
• WebGL community for shader techniques and optimization strategies
• Water and Sky implementations from Three.js examples

---

Enjoy exploring the open ocean! 🌊