Démonstration : une eau crédible pour les décors 3D en ligne
Démonstration : océan, lac, rivière et cascades réglables en direct dans le navigateur, pour donner un décor crédible à une expérience 3D en ligne.
Cascade calculée en temps réel
Démonstration. Cette fiche montre un savoir-faire du studio ; elle n’a ni client ni utilisateur à ce jour.
En résumé
Du problème à la solution
Technologies
- Three.js
- TypeScript
- WebGL2
- WebGPU (en cours)
- génération procédurale de terrain
- Le problème
- L’eau est l’un des éléments les plus difficiles à rendre en 3D temps réel. Dans la plupart des expériences web, elle se réduit à un plan bleu immobile qui casse immédiatement l’immersion.
- La solution
- Océan avec houle et écume, lac, rivière avec eau vive, cascades avec embruns et brume : une eau dont chaque paramètre se règle en direct, pour ajuster une scène à l’ambiance voulue, dans un paysage généré automatiquement.
- Le résultat
- Démo fonctionnelle en WebGL2 ; version WebGPU en cours de finition.
- L’apport de Grimolab
- Recherche et développement, rendu temps réel, interface de réglage.
En images
Le projet en images
01/04Cascade calculée en temps réel 
02/04Lac, rivières et littoral d'un même monde 
03/04Cours d'eau en plaine 
04/04Embouchure et écume sur l'estran
Démo jouable
Essayez-le dans votre navigateur
Simulateur d’eau
- À quoi ça sert
- Montrer qu’une eau crédible — vagues, écume, cascades — peut tourner en temps réel dans un simple navigateur.
- Ce que vous pouvez faire
- Choisissez un point de vue, puis jouez avec les réglages de l’océan, de la rivière ou de la cascade ; déplacez-vous au clavier et à la souris.
3D temps réel dans le navigateur. Rien n’est chargé avant votre clic.
Usage
Ce que l’on peut y faire
- Passer d’un point de vue à l’autre : plage, embouchure, méandres, pied ou lèvre de cascade, lac.
- Régler la houle de l’océan (hauteur, longueur d’onde, direction), l’écume et le sable mouillé.
- Augmenter le débit d’une cascade et voir les embruns, la brume et les anneaux d’impact réagir.
- Faire défiler l’heure du soleil de minuit à minuit et observer la lumière sur l’eau.
- Marcher au bord de l’eau, voler au-dessus ou plonger sous la surface.
- Copier un lien qui conserve tous ses réglages pour le partager.
Cette démonstration s’adresse aux créateurs d’expériences 3D en ligne : elle permet d’ajuster une scène d’eau à l’ambiance voulue, puis de la partager par un lien.
Pour qui ?
Les réglages sont pensés pour des créateurs d’expériences : ils permettent d’ajuster une scène à l’ambiance voulue — mer d’huile au lever du soleil, torrent en crue, cascade de jungle — puis de la partager par un lien.
Pourquoi l’eau ?
Une plage, une rivière ou une cascade suffisent à rendre un lieu vivant — ou à trahir un décor en carton. Nous avons voulu prouver qu’une eau crédible pouvait tourner dans un simple navigateur, sans application à installer.
Ce que l’on peut faire
- Océan : houle réglable (hauteur, longueur d’onde, direction, cambrure), rides, écume, jet de rive et sable mouillé.
- Rivière : vitesse d’écoulement, eau vive, écume de berge et autour des rochers.
- Cascade, le cœur de la démo : hauteur, largeur, débit, dislocation du rideau d’eau, jets, embruns, brume, vasque et roche mouillée.
- Lac : une eau calme, pour les reflets.
- Ciel : heure solaire de 0 à 24 h, orientation du soleil, brouillard et exposition.
Le paysage est généré automatiquement à partir d’une graine : le même monde revient à chaque visite, et le réseau de rivières suit le relief.
Côté technique : où en est le projet
La version WebGL2 est aboutie. Une version WebGPU, plus performante, est en cours de finition ; la page choisit automatiquement le rendu adapté à l’appareil.
Pour aller plus loin
L’eau rejoint nos autres briques de mondes 3D : les escaliers, halls et bureaux en 3D pour les bâtiments et la ville néon pour l’échelle urbaine. Le passage de WebGL à WebGPU est expliqué dans WebGPU : la 3D dans le navigateur. Activité concernée : 3D temps réel et expériences immersives.
Questions fréquentes
Vos questions sur ce projet
Peut-on simuler de l’eau réaliste dans un navigateur web ?
Oui. Les cartes graphiques actuelles et les technologies WebGL2 et WebGPU permettent d’afficher en temps réel de la houle, de l’écume, des cascades et des reflets crédibles, sans rien installer.
À quoi sert un simulateur d’eau 3D ?
À créer des environnements immersifs crédibles : visites virtuelles de sites naturels ou touristiques, projets d’aménagement en bord de rivière ou de mer, jeux, expériences de marque, formation.
La démo fonctionne-t-elle sur tous les ordinateurs ?
Elle détecte la carte graphique et propose trois niveaux de qualité (Éco, Standard, Ultra). Un ordinateur récent offre la meilleure expérience.
Peut-on intégrer cette eau dans un projet existant ?
Oui, c’est sa vocation : ce banc d’essai sert de brique pour des mondes 3D plus vastes, configurés selon le lieu à représenter.
Aller plus loin
Le métier, les guides et les mots de ce projet
Tous les projets du même métier
Glossaire
Les mots de cette page
- WebGPU
- WebGPU est l’interface de programmation moderne qui donne au navigateur web un accès direct et performant à la carte graphique, pour afficher de la 3D et exécuter des calculs, sans rien installer. Elle succède à WebGL.
- WebGL
- WebGL est la technologie qui permet depuis 2011 d’afficher de la 3D dans un navigateur. Plus ancienne que WebGPU, elle reste la solution de repli la plus largement compatible.