Archives par étiquette : webgl demo

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,313

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

Nouvelle démo : ambient occlusion

Laisser un commentaire

Nous avons programmé une nouvelle démo présentant l’effet d’occlusion ambiante.

C’est un effet classique qui permet d’ajouter du réalisme à une scène 3D sans coûter un centime à l’exécution. Les reliefs sont augmentés et les ombres adoucies, grâce à précalcul ne dépendant que de la géométrie du maillage.

Pour chaque vertex de l’objet, on lance des rayons (92 ici) dans toutes les directions autour de la normale à ce point. On compte alors les rayons qui intersectent l’objet. Ce nombre divisé par le nombre de rayons lancés nous donne une approximation de l’angle solide de « visibilité », qui caractérise la facilité qu’a la lumière pour y accéder.

En multipliant l’éclairement en ce point par le facteur obtenu, on obtient l’effet voulu, et les reliefs sont réhaussés.

Cliquez ici pour afficher la démo.

Vous devez avoir un navigateur récent tel Chrome ou Firefox4 ou + pour afficher cette démonstration, ainsi que des pilotes graphiques à jour.

En cas de non compatibilité, voici la vidéo :

 

Nouvelle démo webgl : Dark sea

56 réponses

Nous avons programmé une nouvelle démo vous permettant de noyer un site internet de votre choix.
Le site présent au démarrage est un miroir de madchat.org, site fermé en 2006, qui était un repository connu du milieu hacker francophone.

Cliquez ici pour afficher la démo

Vous devez avoir un navigateur récent tel Chrome ou Firefox4 ou + pour afficher cette démonstration, ainsi que des pilotes graphiques à jour.
Si votre ordinateur n’a pas de carte graphique dédiée, il se peut que la démo soit assez lente à cause des opérations de composition entre l’iframe restituant le site internet et la scène webgl.

En cas de non compatibilité, voici la vidéo :

Nouvelle démo : le Cadillac Ranch

52 réponses

Le Cadillac Ranch est une oeuvre d’art monumentale collaborative localisée à Amarillo, au Texas, sur le tracé de l’ancienne Route 66. Elle a été conçu en 1974 par Chip Lord, Hudson Marquez et Doug Michel. Elle est constituée de 10 anciennes Cadillac alignées, à enterrées à moitié dans le sol par l’avant.

SPACEGOO a créé une version virtuelle du Cadillac Ranch : elle représente 10 Cadillac plantées dans le sol, et vous pouvez les peindre et vous promener autour. Les modifications que vous apportez aux Cadillac sont enregistrées, et les compressions successives des textures au format JPG entraine un vieillissement progressif des plus anciennes peintures. C’est une oeuvre d’art en 3D pour laquelle chaque internaute peut apporter sa contribution.

Utilisez les touches directionnelles et la molette de la souris pour vous déplacer, et pour peindre déplacez la souris avec le clic gauche enfoncé. Pour changer l’angle de la caméra, vous pouvez déplacer la souris avec le clic droit enfoncé.

Cliquez ici pour lancer la démo

Si vous n’avez pas un ordinateur webgl friendly, vous devrez vous contenter de la vidéo capture d’écran :

Il s’agit à notre connaissance de la première oeuvre d’art collaborative en 3D en ligne. Au niveau technique la principale difficulté a été d’implémenter un algorithme de calcul d’intersection utilisant un octree en javascript.