Vos pages web en 3D dans Firefox avec Tilt

Cet article a été publié il y a 12 ans 8 mois 29 jours, il est donc possible qu’il ne soit plus à jour. Les informations proposées sont donc peut-être expirées.

L’extension pour Firefox Tilt est issue d’un projet lancé dans le cadre d’un Google Summer of Code project, ces stages sponsorisés par Google. Elle permet de visualiser les pages web en trois dimensions à partir de la structure du document. Une idée qui pourrait connaître des usages notamment dans le contexte du travail collaboratif dans les univers virtuels 3D

Plaisir de geek

En testant cette extension, je me fais un petit plaisir de geek. En ce qui me concerne, cette extension ne me sera probablement pas d’une grande utilité. Je ne programme pas de page web et joue très peu avec les CSS. Mais les développeurs de pages web y trouveront peut-être une nouvelle façon de travailler la structure de leurs pages web.

La structure est donc représentée par l’empilement des différentes couches créées à partir de l’organisation hiérarchique du code. On peut alors faire varier le point de vue de la page à l’aide de la souris ou du clavier pour voir « en épaisseur la page » ou accéder au code des différents éléments.

WebGL dans le moteur

Ceci étant dit, je voulais voir un peu ce que pouvait donner une application de WebGL au sein d’un navigateur.

Pour rappel il s’agit d’une technologie d’affichage 3D pour les navigateurs web, créée par le Khronos Group. Elle permet d’utiliser le standard OpenGL depuis le code JavaScript d’une page web (source Wikipédia).

J’ai installé l’extension que l’on peut trouver sur le dépôt Git du projet tout d’abord sur mon Firefox 5 sous Fedora 15. Là rien à faire, WebGL ne veut pas fonctionner malgré l’activation de mes pilotes propriétaires Nvidia. Je me rabats donc sur ma partition « de secours » sous Windows Seven.  Là pas de soucis, Tilt fonctionne du premier coup.

Voici une démonstration en vidéo (vous pouvez la télécharger au format ogg sur ce lien) que j’ai faite  à l’aide de CamStudio :

L’interface que j’obtiens est quelque peu différente de celle de l’image précédente, mais je n’ai pas cherché à compiler la dernière version.

Au passage j’ai pas mal bataillé pour vous publier cette vidéo en HTML5 en utilisant Youtube. Je vous laisse un petit sondage pour m’indiquer si vous la voyez avec un lecteur flash ou HTML5.

Et si on utilisait cela en « immersion » 3D

Je sais que c’est l’été (enfin presque…), mais ne sortez pas vos palmes et vos tubas, c’est inutile. Comme depuis quelque temps je m’initie aux usages des univers virtuels 3D et à leurs technologies (en version ouverte bien sûr ), la conception d’objets et donc pourquoi pas de sites web fait partie des nombreuses possibilités. Je vous ai fait deux photos de ce que cela donne en immersion sur une maquette d’un outil similaire :

Il serait possible d’utiliser ce type de représentation pour travailler à plusieurs sur une maquette d’un site web, chacun pouvant au travers de son avatar manipuler les blocs, les redimensionner pour constituer la page voir la générer. Cela suppose évidemment qu’il y ait une interaction avec le code en lui-même.

Je passe aussi rapidement sur ce que la représentation en trois dimensions peut apporter d’un point de vu pédagogique à certaines personnes pour comprendre le fonctionnement des CSS. Certes, cette représentation en trois dimensions ne remplacera pas les outils de conception habituel, mais peut apporter un complément utile.

[troll]En plus du caractère collaboratif qu’offrirait les univers 3D, les logiciels clients utilisés sont bien moins gourmands en mémoire qu’un Firefox[/troll]. Mais ils demandent plus de ressources côté carte graphique bien que n’importe quel PC récent suffise amplement. On a même vu un utilisateur d’eepc venir visiter un univers virtuel (clin d’oeil à la Tunisie).

Si vous voulez en savoir plus sur les usages des univers virtuels ou les toucher du doigt pour mieux comprendre ce que je viens de vous expliquer, la porte est ouverte à tous par ici avec en prime un projet « différent ».

[Source]

Votre avis

 Chargement ...

 Chargement ...