🌊 Three.js – Simulateur de mer agitée

Une scène 3D interactive représentant la surface d'une mer agitée, et réagissant à une source de lumière, réalisée avec Three.js et des shaders GLSL personnalisés. Projet inspiré du parcours Three.js Journey par Bruno Simon.

Rendu avec lumière

Rendu sans lumière

🚀 Démo

Voir la démo

✨ Fonctionnalités

• Surface d’eau animée entièrement calculée côté GPU avec grandes vagues sinusoïdales et petites vagues procédurales (via bruit de Perlin)
• Normales reconstruites dans le vertex shader pour générer un éclairage sur la surface
• Contrôle en temps réel via lil-gui pour ajuster les vagues, les couleurs et les paramètres de lumière
• Couleurs de surface et de profondeur configurables, avec contrôle du mélange entre les deux
• Système d’éclairage paramétable dans le shader avec couleur, intensité, spéculaire et atténuation
• Caméra libre (OrbitControls)
• Option pour geler le temps

🛠️ Installation & Lancement

1. Cloner le dépôt :

   git clone https://github.com/Rekuiem84/raging-sea
   cd raging-sea

2. Installer les dépendances :

   npm install

3. Lancer le serveur de développement :

   npm run dev

4. Build pour la production :

   npm run build

Les fichiers optimisés seront générés dans le dossier dist/.

📁 Structure du projet

├── src/
│   ├── script.js
│   └── shaders/
│       ├── includes/
│       │   ├── ambientLight.glsl
│       │   ├── directionalLight.glsl
│       │   ├── perlinClassic3D.glsl
│       │   └── pointLight.glsl
│       └── water/
│           ├── fragment.glsl
│           └── vertex.glsl

🎛️ Paramètres ajustables (via le menu debug)

Grandes vagues

• Big Waves Elevation : amplitude globale des grandes vagues
• Big Waves Frequency X / Big Waves Frequency Y : fréquence des vagues sur les axes X et Z
• Big Waves Speed : vitesse de déplacement des grandes vagues

Petites vagues

• Small Waves Elevation : intensité des petites ondulations procédurales
• Small Waves Frequency : fréquence du bruit appliqué à la surface
• Small Waves Speed : vitesse de variation du bruit
• Small Waves Iterations : nombre d’itérations utilisées pour cumuler les détails fins

Couleur

• Color Offset : décalage utilisé pour calculer le mélange entre profondeur et surface
• Color Multiplier : intensité du mélange des couleurs
• surfaceColor : couleur de surface de l’eau
• depthColor : couleur de profondeur

Lumière

• Shift : distance utilisée pour recalculer les normales entre deux points dans le vertex shader
• Show Light : active ou désactive l’éclairage dans le shader
• Light Color : couleur de la lumière
• Light Intensity : intensité de la lumière
• Light Specular : force du reflet spéculaire
• Light Decay : distance d'atténuation appliquée à la lumière

Animation

• Freeze Time : met l’animation en pause tout en conservant l’état courant de la scène

🧪 Shaders

Vertex shader

• Déforme la géométrie selon les grandes et petites vagues
• Recalcule les normales à partir de deux échantillons décalés (Shift) pour alimenter l’éclairage
• Transmet au fragment shader la position, la normale et l’élévation du sommet

Fragment shader

• Mélange les couleurs uDepthColor et uSurfaceColor selon l’élévation
• Calcule l’éclairage de la surface avec un modèle personnalisé incluant couleur, intensité, spéculaire et decay

Includes

• perlinClassic3D.glsl : bruit de Perlin 3D utilisé pour les petites vagues
• pointLight.glsl : fonction de lumière ponctuelle utilisée par le fragment shader
• ambientLight.glsl et directionalLight.glsl : inclusions disponibles pour faire évoluer le système d’éclairage

🔗 Mes autres projets Three.js

• Repo Three.js Journey principal — pour retrouver tous mes projets suivant ce parcours