De la 3D dans vos pages web

 

Comment mettre des images 3D interactives sur une page web ? Quelles solutions techniques pour qu'elles soient visibles par un maximum d'internautes, autrement dit supportées par un large éventail de navigateurs ? Comment les mettre en œuvre ?

Plusieurs solutions existent, mais aucune encore ne s'est imposée : les technologies, le matériel et les standards sont en perpétuel changement dans ce domaine, si bien que les choix ne sont pas évidents. Pour schématiser, il y a des solutions qui ont fait leurs preuves mais qui ne semblent pas d'avenir (Flash 3D, Java3D) et des solutions prometteuses fondées sur des standards mais qui ne sont pas encore universellement supportées (WebGL, CSS3 3D).

Flash 3D : solution propriétaire (Adobe), côté utilisateur requiert le plug-in Flash, côté conception une bonne connaissance d'ActionScript ou de passer par un moteur dédié à Flash 3D (Away3D, CopperCube...).

Java3D : solution open-source, API Java (non incluse dans le JDK), côté utilisateur requiert la machine virtuelle Java, côté conception une certaine connaissance de la programmation 3D ou de passer par un logiciel comme WireFusion.

Le plug-in Flash comme la JVM sont installés sur la quasi totalité (98%) des ordinateurs de bureau.

WebGL : solution open-source, portage du standard OpenGL pour les navigateurs web, côté utilisateur requiert carte graphique, pilote et navigateur compatibles (de plus en plus répandus, 70% au moment de la rédaction de ce billet, info actualisée sur WebGLstats), côté conception une certaine connaissance de la programmation 3D et Javascript ou de passer par un moteur de rendu exportant du WebGL (CopperLicht, CopperCube...). Il s'agit en fait d'une API Javascript permettant aux navigateurs d'exploiter la puissance de calculs des cartes graphiques pour afficher des images et des animations en temps réel via la balise <canvas> du HTML5.

Le tableau de Can I use WebGL récapitule le support du WebGL par les navigateurs.

CSS3 3D : solution open-source, côté utilisateur requiert un navigateur compatible (voir support sur Can I use CSS3 3D), côté conception une bonne connaissance de CSS3. Associé au HTML5, CSS3 permet aujourd'hui de créer toutes sortes de petites animations interactives, réalisées naguère quasi exclusivement en Flash.

 


Sketchfab : une alternative pour ceux qui n'ont pas le temps d'apprendre...

Récemment est apparue une solution très pratique, qui pourra répondre aux besoins immédiats de certains : la galerie Sketchfab.

Il s'agit d'un service d'hébergement de modèles 3D conçu sur le même principe que YouTube ou Vimeo. Vous importez votre fichier dans son format natif et le service se charge de l'affichage sur Internet. Vous pouvez ensuite le publier, le partager et l'intégrer à vos pages web. Le service se fonde sur le standard WebGL doublé d'une solution alternative pour les internautes dont la configuration matérielle ne serait pas compatible.