🌊 WebOcean

An interactive 3D ocean simulation using WebGL2, TypeScript, and Perlin noise for realistic water wave generation.

✨ Features

• Real-time Ocean Simulation - Dynamic water surface with Perlin noise-based displacement
• Advanced Rendering Techniques:
  • Fresnel reflection for realistic water appearance
  • Subsurface scattering for light penetration
  • Specular highlights for sun glitter effect
  • Dynamic normal mapping from displacement
• Interactive Camera Controls - Mouse and keyboard navigation
• Responsive Design - Automatically adapts to window size
• Performance Monitoring - Real-time FPS counter

🎮 Controls

Action	Keys
Rotate Camera	W A S D or Arrow Keys
Zoom In/Out	Q / E or + / -
Mouse Drag	Click and drag to rotate
Reset Camera	R
Toggle Help	H

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

# Clone the repository
git clone <repository-url>
cd WebOcean

# Install dependencies
npm install

Development

# Start development server with hot reload
npm run dev

Open your browser at http://localhost:3000

Build for Production

# Build optimized production bundle
npm run build

# Preview production build
npm run preview

The built files will be in the dist/ directory.

🛠️ Technical Details

Architecture

• WebGL 2.0 - Hardware-accelerated 3D graphics
• TypeScript - Type-safe development
• Vite - Fast build tool and dev server
• gl-matrix - High-performance matrix and vector operations

Rendering Pipeline

1. First Pass: Generate Perlin noise texture for displacement
2. Second Pass: Render ocean grid with:
   • Vertex displacement using noise texture
   • Dynamic normal calculation
   • Advanced lighting (Fresnel + subsurface scattering)
   • Specular highlights

Project Structure

WebOcean/
├── src/
│   └── main.ts          # Main application code
├── index.html           # HTML entry point
├── vite.config.ts       # Vite configuration
├── tsconfig.json        # TypeScript configuration
└── package.json         # Project dependencies

📝 Configuration

Water and rendering parameters can be modified in src/main.ts:

• GRID_SIZE - Resolution of water mesh (default: 128)
• NOISE_TEXTURE_WIDTH/HEIGHT - Perlin noise resolution (default: 256x256)
• FOV - Field of view
• OCEAN_COLOR - Base water color
• MOUSE_SENSITIVITY - Camera rotation sensitivity

🔧 Development Notes

Browser Compatibility

Requires a browser with WebGL 2.0 support:

• Chrome 56+
• Firefox 51+
• Edge 79+
• Safari 15+

Performance

• Target: 60 FPS on modern hardware
• Grid complexity affects performance linearly
• Noise texture resolution affects memory usage

📄 License

ISC License - see LICENSE file for details

👤 Author

Julian Niessner

🙏 Acknowledgments

• Perlin noise implementation based on WebGL Perlin Noise tutorial
• Fresnel and lighting techniques from various WebGL resources

---

Enjoy exploring the digital ocean! 🌊