# 🌊 WebOcean

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

![WebGL](https://img.shields.io/badge/WebGL-2.0-990000?style=flat-square)
![TypeScript](https://img.shields.io/badge/TypeScript-5.9-3178C6?style=flat-square)
![Vite](https://img.shields.io/badge/Vite-6.0-646CFF?style=flat-square)

## ✨ 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

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

# Install dependencies
npm install
```

### Development

```bash
# Start development server with hot reload
npm run dev
```

Open your browser at `http://localhost:3000`

### Build for Production

```bash
# 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](https://medium.com/neosavvy-labs/webgl-with-perlin-noise-part-1-a87b56bbc9fb)
- Fresnel and lighting techniques from various WebGL resources

---

**Enjoy exploring the digital ocean! 🌊**