La 3D sur le web

Métiers Interactivité
Programmes Interactivité

Depuis ses débuts, le Web a toujours essayé d’égaler les technologies natives pour éviter d’être une simple avancée de l’imprimerie. La 3D fait partie de ces domaines où les technologies natives ont toujours eu une avance majeure sur l’aspect des performances, mais peu à peu, le Web a évolué et acquis des compétences le rendant capable de rendre des scènes en 3D.

3dweb

World Population par Data Arts

Historique

VRML / X3D

Le Virtual Reality Modeling Language est un langage de programmation permettant la diffusion de contenu 3D sur le web. Ce langage fut présenté en 1994 par le consortium Web3D, ayant alors pour objectif de permettre la diffusion de modèle 3D simple, ce type de fichier nécessitait alors, pour être lu, soit un plug-in navigateur ou alors une visionneuse. L’avantage de cette technologie se trouve surtout dans le poids de ces fichiers, qui pour l’époque permettait la diffusion de modèle 3D plus ou moins complexe sur le web. Il fut normalisé en 2005 sous le nom de X3D, cette année correspond aussi à l’année de perte de vitesse de la technologie, qui sera progressivement abandonnée par les sociétés spécialisées dans le domaine au profit de solutions interne.

41-1

Exemple de visualisation de VRML

Flash / Shockwave

Le plug-in Flash lancé par adobe en 1996 et a permis une certaine démocratisation de l’usage de 3D dans le web. C’est surtout avec l’acquisition de Macromedia en 2005 et donc de Shockwave qu’Adobe va permettre l’utilisation de la 3D dans le web notamment sur des jeux encore aujourd’hui appelé « jeux flash ». Cette technologie n’est fonctionnelle que si le plug-in propriétaire est installé sur le navigateur. Depuis 2010 Shockwave a été intégré a flash et cette date correspond aussi au déclin de cette technologie. Encore utilisé de nos jours, il est souvent remplacé par des solutions plus légères et optimisées pour l’usage de 3D tel que Three.js ou encore Unity sur web.

Technologies actuelles

WebGL

WebGL est une API JavaScript qui se base sur le standard OpenGL pour développer le rendu 3D sur le web. Le projet initial vient de la fondation Mozilla mais fut repris par le consortium spécialisé dans les standards graphiques libres : Khronos Group. Lancée en 2011, cette API permet aux développeurs de faire appel à l’accélération matérielle grâce aux GPU des machines sans utiliser de plug-ins additionnels sur les navigateurs. La boucle technique est centrée autour du JavaScript, avec la possibilité d’utiliser du GLSL pour les shaders, et le tout est rendu dans le navigateur grâce à une balise <canvas> dans la page. WebGL agit en tant que fondation technique, qui peut être améliorée avec des frameworks tiers, mais qui est indispensable pour l’essor de la 3D sur le web.

CSS3D

Il est aussi possible de faire de la 3D sur le web simplement avec des transformations CSS en 3D. L’avantage est que l’on déplace des éléments de la page HTML plutôt que de dessiner dans un <canvas>. Par exemple, on peut déplacer des éléments pour former un cube et créer une navigation qui tourne autour de ce cube (https://developer.apple.com/videos/play/wwdc2011/509/). Par contre, cette technologie est limitée à des transformations (translation, rotation et échelle) sur des éléments HTML de la page, donc on ne peut pas mettre de lumière, de textures ou de shaders.

WebVR

WebVR est une API JavaScript encore au stade expérimental, provenant ici aussi initialement de la fondation Mozilla. Le 1er mars 2016, la coopération des équipes VR de Mozilla et Chrome de Google a fait naitre une proposition de version 1.0. Étant une proposition expérimentale, son support est extrêmement faible pour l’instant (seulement disponible dans les versions développeur de Mozilla Firefox et Google Chrome) mais son intérêt est grandissant. Cette API permet de faire le lien entre les applications Web et les casques de réalité virtuelle, sans forcer les développeurs à réinventer la roue pour supporter tous les supports. Sketchfab utilise cette API pour ajouter un mode VR à sa visualisation de modèles 3D, Blend4Web utilise cette API pour offrir une caméra VR dans son moteur de jeu.

Outils pour la 3D sur le web

WebGL étant plutôt complexe à prendre en main, il existe plusieurs outils qui facilitent la présentation d’éléments 3D sur le web.

Three.js

Three.js est une bibliothèque JavaScript qui vient simplifier l’utilisation de WebGL. Aujourd’hui très répandue, elle rend la prise en main de WebGL plus facile pour les non-initiés à la 3D sur le web, mais qui ont déjà une certaine expérience avec le JavaScript en général. Sur threejs.org, on retrouve de nombreuses expériences conçues avec la bibliothèque, de même qu’un éditeur 3D directement sur le web. Comme les autres outils de 3D, on retrouve le schéma similaire de mise en place de la scène 3D. D’abord, chaque scène est composée d’un maillage, d’une lumière et d’une caméra. Chaque maillage est composé d’une géométrie (la forme de l’objet) et d’une texture  appliquée sur  l’objet.

Schéma three.js

Fonctionnement d’une scène dans three.js, Archives personnelles

Les performances en matière de rendu 3D ne sont certes pas les mêmes que sur une application native, mais on s’approche de cette qualité. Voici quelques exemples de site et d’expériences web qui utilisent three.js:

http://www.playkeepout.com

http://phoboslab.org/wipeout/

http://hexgl.bkcore.com/play/

http://lights.helloenjoy.com

https://kamra.invisi-dir.com

SketchFab

SketchFab est un outil qui permet aisément de présenter les modèles en 3D qu’on a conçus. On charge gratuitement un modèle avec textures et animations sur le site. On peut ensuite les visualiser sur Sketchfab ou le placer sur un site avec un <iframe>.

P5.js

P5.js est une bibliothèque JavaScript dont le but est de rendre le code plus accessible aux artistes et qui se base sur le fonctionnement du logiciel Processing. La plupart des fonctions se ressemblent et comme avec Processing, il est possible de faire un peu de 3D. Cela reste cependant limité à des formes généralement assez simples, pour des formes plus complexes, il vaut mieux utiliser Three.js.

Unity

Le moteur de jeux Unity propose un plug-in permettant aux utilisateurs de jouer à des projets Unity depuis leur navigateur. Le fonctionnement de cette technologie passe par un plug-in propriétaire, et la plus par du temps, l’ouverture d’un projet s’avère lourd en donnés qui seront temporairement stocker sur le disque dur, mais aussi sur la connexion qui devra récupérer l’ensemble des modèles et code pour faire fonctionner le projet. Cette solution est simple à utiliser, car il est très facile d’exporter un projet Unity déjà existant pour le mettre sur le Web.

 

 

Article coécrit par Marc Bouchenoire, Benjamin Carrier et Alexandre Deffenain, tous étudiants en 3e année en design d’interactivité.

Partager cet article

Articles liés

40 vues
vetement-connecte-google-2016-6
Les textiles connectésfévrier 17, 2017 par Florent MICHEL
33 vues
e-reputation-rien-ne-sefface-copie
Vie privé et numérique par Florent MICHEL
35 vues
museographie-expo-economie1
Muséographie et Numérique par Florent MICHEL

Articles Populaires

Laisser un commentaire