Faire de la 3D sur son site

Écrit par Killian

Pourquoi faire de la 3D sur un site ?

La 3D sur navigateur n’est pas un concept récent, on en trouve trace dès les années 90. Mais c’est à la sortie de WebGL en 2011 et grâce à l’augmentation des performances de nos machines que la 3D sur le Web s’est fortement développée et démocratisée.

Cet article vise à fournir une bonne compréhension des différents outils 3D sur le web en introduisant les concepts principaux liés à la 3D, en présentant les différentes technologies et en développant les bons cas d’applications pour chacune d’entre elles.

Pourquoi faire de la 3D sur un site ?

La 3D permet d’apporter une dimension supplémentaire à son site, que ce soit en termes d’effet visuel ou en termes d’interaction. L’ajout de la 3D peut ainsi être intéressant afin d’offrir une expérience utilisateur inédite.

Les cas d’utilisations sont nombreux :

• Mise en valeur d’un produit en utilisant la 3D pour le rendre plus attrayant par rapport à une simple image tel qu’utilisé dans certains sites d’e-commerce.
• Utilisation de la 3D en tant qu’expérience virtuelle via l’utilisation d’environnements virtuels tels que dans des visites virtuelles ou des jeux vidéos.
• Mise en place d’effets visuels afin de dynamiser le fond avec des effets style parallax : un effet visuel donnant de la profondeur dans la page, très souvent utilisé dans les agences de design.
• Meilleure visualisation de donnée par l’ajout d’une dimension supplémentaire, facilitant la lecture des données. Utilisé par des entreprises d’analyses, dans le visuel, pour le journalisme ou dans des institutions gouvernementales.

Les différentes technologies

Le choix de la technologie est primordial pour pouvoir réaliser de façon simple et concise ce qu’on souhaite faire. Il est important de choisir l’outil le plus adapté à notre demande et aux contraintes techniques.

Nous allons ainsi présenter différentes méthodes pour faire de la 3D sur le web ainsi que les cas d’utilisations pour lesquels ils sont le plus adaptés.

HTML / CSS

exemple

Faire de la 3D avec du CSS peut sembler difficile, mais s’avère en réalité très simple à condition de rester dans des effets peu complexes. Ainsi, avec du CSS, nous chercherons plus à mettre en place des effets styles parallax grâces aux différentes propriétés de transformations 3D plutôt que de réaliser un rendu complexe techniquement.

Un exemple d’effet parallax pour le site du jeu firewatch

Les propriétés de transformation 3D nous permettant de faire de la 3D sont les suivantes :

• transform: translate3D(x, y, z) : déplace l’élément dans l’espace en trois dimensions
• transform: rotate3D(x, y, z, angle) : fait tourner l’élément autour des axes x, y et z
• transform: scale3D(x, y, z) : change la taille de l’élément en trois dimensions
• perspective : détermine la distance entre le plan d’équation z = 0 et la position de l’utilisateur afin de donner une perspective aux objets positionnés dans l’espace 3D

Il est toutefois possible de réaliser des représentations 3D d’objets en CSS en profitant de ces propriétés pour réaliser des objets primitifs tels que des cubes ou des cônes. Pour ce faire, on représente chaque face via un div et on les combine via les propriétés de transformation 3D à la manière d’un patron.

Représentation du patron d’un cube

Cette technique, bien que réalisable, reste limitée à des objets primitifs et serait complexe techniquement même pour un rendu simple.

WebGL

exemple

WebGL (Web Graphics Library) est une implémentation de OpenGL pour le web permettant de rendre des graphismes 3D et 2D interactifs dans n’importe quel navigateur web compatible sans l’utilisation de plug-ins.

Il permet ainsi de créer des éléments graphiques au sein du navigateur et est souvent utilisé en tant que sous-couche pour d’autres librairies graphiques tels que Three.js ou Babylon.js.

WebGL, en tant que fondement de la 3D sur le web, est une technologie populaire, bien qu’extrêmement complexe à maîtriser. En tant que sous couche, cette bibliothèque nous offre une liberté totale sur le rendu à réaliser et sur la manière de le faire.

En contrepartie, cette bibliothèque demande de vastes connaissances en 3D et en mathématiques puisqu’elle se base nativement sur des calculs géométriques (principalement matriciels).

Elle est donc très difficile à prendre en main. Pour ces raisons, il serait plus judicieux d’utiliser des surcouches de WebGL, plus simplistes tels que Three.js ou Babylon.js.

Simplification de WebGL avec Three.js et Babylon.js

exemple

Afin de faciliter la mise en place du rendu 3D sous WebGL, de nombreuses librairies ont vu le jour dont Three.js et Babylon.js en tant que sur-couches de WebGL.

À la manière des autres moteurs de rendu, ces librairies simplifient le développement en encapsulant les propriétés 3D dans les éléments suivants :

• Renderer : moteur de rendu, qui représentera le résultat affiché
• Scene : environnement 3D dans laquelle évoluera chacun des objets
• Camera : représente la vue de l’utilisateur
• Light : la source de lumière de l’environnement (soleil, lampe)
• Mesh : représente l’objet 3D qui sera affiché, il est composé des propriétés suivantes :
• Geometry : représente la forme sur laquelle il sera affiché
• Materiau : représente la couleur et les propriétés lumineuses du mesh

Représentation des différents éléments d’une scène

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);

Ces librairies permettent toutes les deux de réaliser de façon plus ou moins simple de la 3D sur son site. Actuellement, Three.js est l’outil le plus populaire, car il bénéficie d’une forte communauté et ancienneté.

Cependant, Babylon.js est en bonne voie pour le rattraper, parce qu’il bénéficie d’une plus grande simplicité que Three.js et d’une très bonne documentation.

Ces librairies sont à l’heure actuelle les plus populaires pour réaliser de la 3D puisqu’elles permettent de manière simple de réaliser tous les effets possibles. De plus, ces deux librairies possèdent toutes les deux un éditeur en ligne : Three.js/editor et editor.Babylon.js/ permettant de créer des environnements sans avoir besoin coder.

Des outils plus spécialisés

Avec l’essor de la 3D sur le web, un grand nombre de technologies de visualisation de données implémentant de la 3D se sont développées et améliorées.

Parmi celles-ci, on peut noter :

• deck.gl : un framework permettant de visualiser des datasets et des cartes
• cesium : librairie permettant de créer des globes et des cartes en 3D

Il existe un grand nombre d’outils permettant de réaliser de la 3D sans code, ils se présentent sous la forme d’éditeur web ou sous la forme de logiciels pouvant s’exporter sur navigateur. Parmi ceux-ci il y a :

• vectary : plateforme 3D permettant de créer des designs 3D interactifs
• Unity webgl : export du moteur de jeu unity3D
• playcanvas : moteur de jeu en ligne

Conclusion

En conclusion, la création de contenu en 3D pour le web est de plus en plus populaire et accessible, et ce grâce à l’évolution des technologies et des outils disponibles. Il existe ainsi une variété d’options pour utiliser de la 3D sur un site internet.

Cependant, il est important de bien prendre en compte les outils les plus adaptés à notre besoin et de prêter une forte attention aux limites de la 3D tels que les problèmes de compatibilité ou de performance.

Sources: