WebGL: la 3D pour le Web

Le WebGL, ou Web-based Graphics Library, est l’un des rejetons technologiques les plus impressionnants de la « famille » HTML5. Cette méthode d’affichage 3D dans le canevas existe depuis 2006 même si la version 1.0 est apparue récemment, soit en février 2011. Ce n’est que depuis peu que le WebGL est opérable directement dans les navigateurs Web, sans installation supplémentaire.
[ Spécifications du WebGL 1.0 ]

Pour utiliser l’application graphique en WebGL, il s’agit de charger une page dans un navigateur Web. Le navigateur exécute alors le Javascript appelant l’interface WebGL sur la page de l’utilisateur. La bibliothèque WebGL utilisée solicite ensuite le pilote OpenGL du système d’exploitation qui prend en charge l’affichage des images directement sur l’écran, tout en exploitant les accélérations matérielles de la carte graphique.
[ Source: WebGL sur Wikipédia ]

Bien que la création de contenu adapté au WebGL demande une bonne connaissance à la fois du monde la 3D et de l’écriture de code, elle se démocratise de plus en plus, notamment grâce à l’apparition de bibliothèques Javascript dédiées.

Les navigateurs compatibles

Depuis peu, plusieurs navigateurs Web sont pourvus des ressources qui permettent d’afficher en temps réel des objets et des animations 3D grâce au WebGL. Voici le portrait actuel chez les acteurs les plus importants:

  • Firefox supporte WebGL à partir de la version 4
  • Google Chrome supporte WebGL à partir de la version 9
  • Safari propose le support de WebGL dans son menu Développement de la version 5.1 (désactivé par défaut); pour faire afficher le menu Développement, accédez aux préférences du logiciel, puis, sous l’onglet Avancées cochez Afficher le menu Développement…
  • Opera supporte cette technologie depuis la version 12 de son logiciel
  • Internet Explorer ne supporte pas WebGL par défaut, il existe cependant des modules externes qui le permettent, comme IEWebGL

Évidemment, pour profiter des applications WebGL, encore faut-il que votre navigateur puisse les rendre. Vous pouvez tester un navigateur en visitant ce site: http://get.webgl.org/. Dans la mesure où votre navigateur permet le rendu des objets en WebGL, vous y verrez un cube en fil de fer pivotant sur lui-même.

La bibliothèque Three.js

L’une des bibliothèques dédiée au WebGL les plus populaires est Three.js. Elle peut être téléchargée à cette adresse: https://github.com/mrdoob/three.js. On y trouve aussi les ressources pour composer le code nécessaire à la création d’une scène, d’une caméra, de lumières, tout comme dans le monde de l’infographie 3D.

Voici un exemple simple de ce que j’ai pu faire en peu de temps avec Three.js: un logo 3D inséré dans une scène comprenant une caméra et trois lumières, le tout piloté par la position du curseur de la souris.
[ Exemple 1 ]

Exemple d'utilisation du WebGL.

Voyez maintenant le même exemple après l’insertion d’un effet après-rendu de type « grain de film » en temps réel.
[ Exemple 2 – Avec l’effet « grain de film » ]

Exemple d'utilisation du WebGL.

Les objets affichés en WebGL peuvent être nettement plus complexes et comporter des matériaux de haute résolution, au prix de quelques secondes de chargement), comme en fait foi cette Ferrari que vous pouvez piloter avec les touches W, A, S, D de votre clavier.
[ Ferrari, par HelloRacer ]

Ferrari créée par HelloRacer à l'aide de Three.js.

Exporter de la 3D au format JSON avec Blender

La bibliothèque Three.js inclut quelques ressources qui permettent d’exporter des objets et des animations 3D au format JSON (JSON sur Wikipédia: http://fr.wikipedia.org/wiki/JavaScript_Object_Notation) à partir de plusieurs applications 3D. Le module d’exportation pour Blender (un script Python) est facile à installer: il suffit d’ajouter le dossier du module dans le dossier « addons » de Blender (vour le trouverez dans le « Content » de blender.app) puis d’activer ce addon dans les préférences du logiciel. L’option d’exportation au format .js sera ainsi disponible dans les options d’exportation.
[ Module d’exportation pour Blender sur github ]

Quelques liens

Cette entrée a été publiée dans 3D, Animation Web, HTML5, Projet de perfectionnement. Placez un signet sur le permalien.

Les commentaires sont fermés.