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 ?

Les solutions proposées ici ne requièrent pas l'installation d'un plug-in ni d'un outil spécifique côté utilisateur. Elles sont aujourd'hui supportées par la plupart des navigateurs.

Sketchfab... pour les non développeurs

Indiscutablement, la solution la plus simple, la plus efficace, est de recourir à Sketchfab, qui est aux contenus 3D ce qu'est YouTube ou Vimeo à la vidéo.

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 encore compatible.

Sketchfab propose également la visualisation en réalité virtuelle aussi bien pour les cardboards que des casques avancés (Oculus Rift, HTC Vive, etc.) et des fonctionnalités de réalité augmentée.

Van gogh Room by ruslans3d on Sketchfab

> Interview avec le YouTube de la 3D (3D Natives, 2013)

> Sketchfab, le spécialiste du partage de contenu 3D, passe la barre du milliard de pages vues de Julien Bergounhoux (Usine Digitale, 2018)

Les transformations CSS 3D

Les CSS présentent dans leur version 3 des propriétés de transformations 3D avancées qui permettent de créer des objets ou des scènes 3D interactives. La plupart des navigateurs aujourd'hui les supportent (voir Can I use CSS3 3D). Simplement avec les CSS, vous pouvez déjà obtenir des résultats bluffants, mais cela relève de l'exercice de style. Un peu de JavaScript en plus facilite la tâche et permet d'aller plus loin.

Classiquement, les CSS 3D vont plutôt être utilisées pour créer des effets d'interactivité.

> Exemple d'un cube 3D (codepen)

> Transformations CSS (MDN docs)

> The Mine: un exemple de jeu sans la moindre ligne de JS + d'autres exemples du même développeur sur codepen

Three.JS

Three.JS est une bibliothèque et une API JavaScript qui facilite la création de scène 3D dans un navigateur web. Elle permet de tirer parti de WebGL sans avoir à le manipuler directement ni entrer dans ses aspects trop techniques. C'est en quelque sorte une surcouche.

> Des exemples d'effets (site officiel)

WebGL

WebGL s'est imposé en quelques années comme le standard pour créer de l'interactivité 3D sur Internet.

Il s'agit d'une API JavaScript dérivée d'OpenGL 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.

Côté utilisateur, il requiert carte graphique, pilote et navigateur compatibles, ce qui est aujourd'hui le cas de la plupart des ordinateurs et smartphones. Vous pouvez tester votre matériel sur WebGLreport. Par ailleurs le tableau de Can I use WebGL récapitule son support par les navigateurs. Vous noterez l'apparition récente de WebGL 2, qui intègre des extensions supportées par un moins grand nombre d'entre eux.

L'emploi de WebGL requiert une bonne connaissance technique de la synthèse d'images. Comme il s'agit d'un langage de bas niveau, il est généralement utilisé par l'intermédiaire d'un framework.

> Les fondamentaux en WebGL : série de leçons et de tutoriels pour la plupart traduits en français. La mise à jour WebGL2 n'a pas encore été traduite.

> De WebGL à WebGL 2 (blog Wanadev, 2016)

> Liste des frameworks WebGL (Wikipédia)

> Synthèse d'images avec OpenGL (ES) écrit par Pierre Nerzic : le livre présente tous ses exemples dans les trois variantes d'OpenGL : OpenGL/C++, OpenGL ES/Java et WebGL/JavaScript.