feat: Implement WebGPU context manager and shaders for ocean rendering

- Added WebGPUContext class to manage WebGPU initialization and resource creation.
- Created main_webgl.ts for WebGL rendering setup and scene management.
- Introduced WGSL shaders for Perlin noise generation and ocean rendering.
- Implemented vertex and fragment shaders for ocean surface displacement and lighting effects.
- Enhanced camera controls and rendering logic for improved user experience.

readme.md

@@ -1,38 +1,74 @@
 # 🌊 WebOcean
 
-An interactive 3D ocean simulation using WebGL2, TypeScript, and Perlin noise for realistic water wave generation.
+An interactive 3D ocean simulation using **WebGPU**, TypeScript, and Perlin noise for realistic water wave generation.
 
-![WebGL](https://img.shields.io/badge/WebGL-2.0-990000?style=flat-square)
+![WebGPU](https://img.shields.io/badge/WebGPU-Chrome113+-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
+- **WebGPU Rendering** - Modern GPU API for optimal performance and future tessellation support
 - **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
+  - Gradient skybox with sun rendering
+- **Dual Camera System**:
+  - **Orbital Camera** - Rotate around the ocean surface
+  - **FPS Camera** - Free-flying first-person exploration
+- **Animation Controls**:
+  - Pause/play ocean animation
+  - Adjustable speed (1x-5x)
+- **Rendering Modes**:
+  - Wireframe toggle for mesh visualization
 - **Responsive Design** - Automatically adapts to window size
-- **Performance Monitoring** - Real-time FPS counter
+- **Performance Monitoring** - Real-time FPS counter and frame time
 
 ## 🎮 Controls
 
+### Camera 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 |
+| **Toggle Camera Mode** | `C` |
 | **Reset Camera** | `R` |
-| **Toggle Help** | `H` |
+| **Mouse Drag** | Click and drag to rotate camera |
+
+### Orbital Camera Mode (Default)
+
+| Action | Keys |
+|--------|------|
+| **Rotate** | `W` `A` `S` `D` or Arrow Keys |
+| **Zoom In/Out** | `Q` / `E` or `+` / `-` |
+
+### FPS Camera Mode
+
+| Action | Keys |
+|--------|------|
+| **Move Forward/Back** | `W` / `S` |
+| **Strafe Left/Right** | `A` / `D` |
+| **Move Up/Down** | `E` / `Q` or `Space` / `Ctrl` |
+| **Fast Movement** | Hold `Shift` |
+| **Look Around** | Click and drag mouse |
+
+### Rendering Controls
+
+| Action | Keys |
+|--------|------|
+| **Wireframe Mode** | `F` |
+| **Pause/Play Animation** | `P` |
+| **Set Speed** | `0` (reset) `1` `2` `3` `4` `5` (multipliers) |
+| **Toggle Help UI** | `H` |
 
 ## 🚀 Getting Started
 
 ### Prerequisites
 
-- Node.js (v16 or higher)
+- **Node.js** (v16 or higher)
+- **Browser**: Chrome 113+, Edge 113+, or Firefox 130+ (with WebGPU enabled)
 - npm or yarn
 
 ### Installation