TOOLinux

Le journal du Libre

Vos pages web en 3D dans Firefox avec Tilt

vendredi 29 juillet 2011

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.

<p
style="text-align: center;"><a
href="http://philippe.scoffoni.net/wp-content/uploads/2011/07/tiltalpha-1024x648.png" rel="lightbox[4168]"><img
class="aligncenter size-full wp-image-4169" style="float: center;" title="tiltalpha-1024x648" src="http://philippe.scoffoni.net/wp-content/uploads/2011/07/tiltalpha-1024x648.png" alt="WebGL Firefox 3D " width="614" height="389" />

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 <a
title="Khronos Group" href="http://fr.wikipedia.org/wiki/Khronos_Group">Khronos Group. Elle permet d’utiliser le standard <a
title="OpenGL" href="http://fr.wikipedia.org/wiki/OpenGL">OpenGL depuis le code JavaScript d’une page web
(<a
href="http://fr.wikipedia.org/wiki/WebGL">source Wikipédia).

J’ai installé l’extension que l’on peut trouver sur <a
href="https://github.com/victorporof/Tilt/blob/master/bin/Tilt.xpi">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<a
href="http://bypsc.fr/1n5"> format ogg sur ce lien) que j’ai faite à l’aide de <a
href="http://camstudio.org/">CamStudio :<br
/> <iframe
src="http://www.youtube-nocookie.com/embed/u4RDdWOLQPE?html5=1" frameborder="0" width="600" height="480">

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 :

<p
style="text-align: left;"><img
title="gallery" src="http://philippe.scoffoni.net/wp-includes/js/tinymce/plugins/wpgallery/img/t.gif" alt="WebGL Firefox 3D " />
<a
href="http://philippe.scoffoni.net/wp-content/uploads/2011/07/Snapshot_001.png" rel="lightbox[4168]"><img
class="size-full wp-image-4173 alignright" style="margin: 5px;" title="css 3D immersion" src="http://philippe.scoffoni.net/wp-content/uploads/2011/07/Snapshot_001.png" alt="WebGL Firefox 3D " width="343" height="203" /><a
href="http://philippe.scoffoni.net/wp-content/uploads/2011/07/Snapshot_002.jpg" rel="lightbox[4168]"><img
class="size-full wp-image-4174 alignnone" style="margin: 5px;" title="css en 3D" src="http://philippe.scoffoni.net/wp-content/uploads/2011/07/Snapshot_002.jpg" alt="WebGL Firefox 3D " width="224" height="176" />

<p
style="text-align: justify;">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.

<p
style="text-align: justify;">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.

<p
style="text-align: justify;">[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’<a
href="http://eeepc.asus.com/">eepc venir visiter un univers virtuel (clin d’oeil à la Tunisie).

<p
style="text-align: justify;">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, <a
title="X-repetita, quel avenir pour le logiciel libre ? Propositions ?" href="http://philippe.scoffoni.net/x-repetita-avenir-pour-logiciel-libre-propositions/">la porte est ouverte à tous par ici avec en prime un projet “différent”.

Philippe SCOFFONI