adjustments

2026-01-31 21:25:25 +01:00
parent 0a7dc2f25f
commit dedcec547d
13 changed files with 1660 additions and 2533 deletions
--- a/readme.md
+++ b/readme.md
@@ -1,11 +1,141 @@
-Projekt installieren:
+# 🌊 WebOcean

-```npm i```
+An interactive 3D ocean simulation using WebGL2, TypeScript, and Perlin noise for realistic water wave generation.

-Projekt bauen:
+![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)

-```npm run build```
+## ✨ Features

-und ausführen
+- **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

-```index.html```
+## 🎮 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! 🌊**