Archives par étiquette : surface

Effet d’eau pour webglparis.com

Laisser un commentaire

Un effet de simulation d’eau fait office d’arrière plan sur le site internet de WebGL Paris, http://www.webglparis.com . Pour réaliser cet effet nous simulons les équations de Saint Venant (Shallow Water Equations) en GPGPU dans le shader de fragments en utilisant une texture flottante de 512X512 pixels.

La simulation est réalisée 4 fois par image rendue, soit à un rythme de 4*60=240 pas par seconde pour un affichage à 60Hz.

Après le chargement de la page, les positions et les tailles de différents éléments de la page (ayant la classe CSS .obstacle) sont récupérées en javascript avec l’aide de JQuery. Un canvas2D est alors dessiné pour faire office de heightmap.

Une normal map est calculée côté GPU, après avoir préalablement appliqué un flou gaussien sur la heightmap.

Le rendu final est assez léger, peu perturbant pour l’oeil, et il répartit la teinte d’une façon intéressante sur la page. Seul bémol : pour les configuration n’ayant pas l’extension WebGL OES_TEXTURE_FLOAT, les vagues sont légèrement trop marquées.

Une vidéo de l’effet :

WebGL tiny background water effect
Runtime
0:37
Compteur de vues
350

 

Welcome to SPACEGOO BEACH

2 réponses

A défaut de pouvoir partir sur une plage des tropiques pour contempler un océan bleu turquoise, nous avons recréé en partie ce genre de paradis sur spacegoo.com.
Ainsi notre dernière démo webgl, SPACEGOO BEACH, est une simulation d’océan.

La surface de l’eau est représentée par une surface maillée de façon plus resserrée au centre, sur laquelle sont appliquées deux textures : celle du ciel et la texture du fond. Pour calculer les coordonnées UV relatives à l’application de ces textures, nous utilisons les lois de Descartes dans les shaders via les fonctions refract et reflect.

Les vagues sont représentées par une superposition de 10 ondes sinusoïdales. Leurs paramètres sont liées via des lois empiriques que l’on peut trouver sur cet article de wikipédia.

Cliquez ici pour lancer la démo

Pour les non compatibles webgl, qui n’ont pas profité des promotions de la rentrée pour s’acheter un nouvel ordinateur, voici la vidéo capture d’écran :

SPACEGOO beach
Runtime
1:01
Compteur de vues
10,315

Nouvelle démo webgl : traceur de surfaces

48 réponses

Le webgl peut avoir des applications mathématiques intéressantes, notamment dans le cas de la représentation d’objets 3D telles les surfaces.
Nous avons développé un traceur de surfaces en 3D de type z=f(x,y) , qui prend en compte les différentes fonctions mathématiques fournies par le javascript.
Le traceur est disponible ici : spacegoo.com/demo_plots.php

Si vous n’êtes pas compatible webgl, vous pouvez toujours admirer cette vidéo capture d’écran :

SPACEGOO plots
Runtime
0:58
Compteur de vues
190