Archives de catégorie : 3D dans le navigateur internet

Autres technologies que le WebGL permettant d’insérer la troisième dimension dans le navigateur internet.

PARIS BUBBLES

Le développement de cette démonstration webgl nous a fait revenir à l’objet initial qui nous a lancé dans la création de SPACEGOO, à savoir l’affichage de contenus multimédia, typiquement 2D, dans un contexte 3D. Ici le contexte 3D permet une expérience de navigation plus douce, qui n’est pas hachée par les clics sur les liens hypertextes.

Le contraste entre la 2D et la 3D créé un effet intéressant, et met en valeur le contenu 2D par effet de perspective. Cette mise en valeur est enrichie par les transitions entre la couleur et le noir et blanc.

Cette démonstration nous a pris 4 jours de développement à 2, et on est très satisfait du résultat produit. Par rapport à nos autres démonstrations nous introduisons des éléments nouveaux, notamment le positionnement d’éléments CSS en synchronisation avec la scène Webgl. Le déploiement du contenu est également innovant : au début il sort de la bulle où chaque contenu est emballé dans un carré, et ces carrés sont de tailles décroissantes et positionnés dans un rectangle dont le rapport hauteur/largeur vaut le nombre d’or ( vous trouverez plus d’informations sur cette disposition ici : http://en.wikipedia.org/wiki/Fibonacci_number ). Puis il se dispatche sur l’écran de sorte à ne pas trop se chevaucher.

Cette présentation rend particulièrement bien avec un écran tactile de grande taille.

Le lien vers la démo est ici : http://www.spacegoo.com/bubbles

Pour les non compatibles, voici la démo :

bubbles.ogv
Runtime
1:25
Compteur de vues
460

Welcome to SPACEGOO BEACH

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

Nouvelle démo webgl : traceur de surfaces

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
192

Nouvelle démo : ambient occlusion

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 :

 

IEWebGL, un plugin pour Internet Explorer

Jusque là les utilisateurs d’Internet Explorer souhaitant afficher du WebGL sans devoir changer de navigateur n’avaient pas d’autre choix que d’installer le plugin Google Frame, qui transforme Internet Explorer en skin pour Chrome.

Un nouveau projet à vu le jour : celui d’un plugin qui ne fait que rajouter la fonctionnalité WebGL à Internet Explorer. Souhaitons longue vie à ce projet (sauf si Microsoft se décide enfin d’arrêter Silverlight au profit du WebGL ) !

Cliquez ici pour accéder au site du projet IEWebGL