La 3D pour le Web

L'ensemble des possibilités pour créer des expériences et jeux vidéo pour le web

3D webJavascript

De plus en plus, la 3D pour le web devient une nouvelle tendance dans le webdesign. N'étant pas très utilisée dans les sites dits "classique", elle permet de se démarquer en proposant des expériences interactives allant jusqu’à la création de petits jeux vidéos.

LES DIFFÉRENTES FAÇONS DE CRÉER SON SITE INTERNET EN 3D

Depuis 2011, la majorité des navigateurs utilise l’interface

(codée en Javascript et issue de OPENGL) pour intégrer de la 3D en

. Cependant, coder un site en webgl peut s’avérer complexe. C’est pourquoi différents logiciels,

ont vu le jour pour faciliter l’intégration en 3D.

Le plus complet : Three.js

Three.js est une librairie codée en Javascript (

). Il est

et gratuit et la doc est claire et intuitive.

Three.js a de bonnes performances et permet de simplifier la création de scènes 3D. Il permet de créer des expériences interactives. Il permet alors de faire des animations, d’intégrer des systèmes de light et de

assez complets ainsi que d’importer d’autres moteurs de rendus physiques par exemple Cannon.js ou ammo.js.
Il est également possible de créer des petits jeux vidéos. Beaucoup de sites réalisés en three.js sont classés comme meilleurs sites sur Awwards. Des exemples de sites créés en three.js sont consultables sur la doc: threejs.

Des frameworks utilisant Three.js :

Dans le même principe : Babylon.js

Babylon.js est similaire à Three.js, la principale différence est que celui-ci est codé en Typescript. Voici un article qui vous fait un bon comparatif des 2 bibliothèques.

Comparatif Three.js & Babylon.js

Le moteur de jeu pour le web : Playcanvas

PlayCanvas est un logiciel en ligne codé en Javascript (

) spécifique pour créer des jeux vidéo pour le web. Il est open source mais la plateforme en ligne est payante. Après 1GB de stockage gratuit, il faut payer 15$/ mois pour l’offre personnelle et 50$/mois pour les organisations. Son avantage est qu’il est disponible sur tous les navigateurs. La différence avec three.js est qu’il est possible d’utiliser dans Playcanvas une interface graphique pour aider à créer la scène 3D alors que dans three.js il faut tout faire soi-même. Cette interface graphique permet notamment la collaboration en temps réel, cela facilite donc le travail en équipe.

Notabene unity & unreal

Il existe des moteurs de jeux spécifiques pour les jeux vidéos autres que le web (pc, playstation, téléphone mobile etc) comme Unity et Unreal Engine. Mais ces moteurs peuvent quand même permettre d’exporter les jeux en webgl, et donc pour le web. Cependant, il peut y avoir des soucis de compatibilité, des limitations et des temps de chargement très conséquents.

Lien d’un tuto youtube : Export Unity Games to WebGL and Upload them to the Web
Lien d’un tuto youtube : Unreal Engine 4 on Web Browser is AMAZING!

Pour les non dev mais artistes 3D : Blend4Web, Verge 3D.

Pour ceux qui ne codent pas, il existe des outils pour tout de même créer son site en 3D.

Tout d’abord, Blend4Web est un plugging du logiciel Blender qui permet d’exporter les scènes 3D créées directement sur le web. L’outil est sous licence GPL, ce qui signifie qu’il est gratuit pour l’usage personnel mais payant pour le commerce. Tout comme

, Blend4Web agit comme moteur de rendu en temps réel et permet donc de visualiser son rendu directement dans le navigateur (et non pas sur Blender) avant de l’exporter par la suite en

ou en

Avec Blend4web, on peut également créer des interactions simples avec l’utilisateur grâce à un node Editor. Il n’est par contre pas possible d’aller jusqu’à la création d’interactions complexes ou de jeux vidéos comme avec Three.js ou Playcanvas. L’utilisation est donc beaucoup plus limitée, c'est plutôt pour des petites animations ou configurateurs. Par exemple pour un e-commerce de voiture, on pourra visualiser la voiture ou changer sa couleur mais pas aller jusqu’à la création du nouveau Need for speed.Lien vers Blend4Web

Verge 3D est également un plugging utilisable pour Blender mais aussi Maya et 3Ds max. Il est payant que ce soit à usage personnel ou pour le commerce. Il agit comme Blend4web (rendu temps réel dans le navigateur et création d’interactions). Cependant, les interactions sont plus développées car il utilise du post-processing qui est un langage de programmation graphique mais sans code (un peu comme Scratch).

Son utilisation principale est de créer des configurateurs mais il est également possible de créer des jeux vidéos pour le web. Cependant, les performances sont lentes et ne valent pas celles de three.js ou Playcanvas.Lien vers Verge 3D

Limites et perspectives

Pour qu’un site soit fonctionnel et utilisable, il faut penser à la performance. L’utilisateur doit pouvoir consulter le site sans latence et sans temps de chargement, surtout s'il est sur mobile. D’après la dernière étude Google, à partir de 5s d'attente sur mobile , 90 % des utilisateurs quitte la page. On appelle cela des taux de rebond. De plus, qui dit performance, dit aussi visibilité du site (

En 3D web, une des principales contraintes est donc de faire en sorte que les scènes ne soient pas trop lourdes afin d’éviter les taux de rebond.

Pour éviter cela, il faut compresser au maximum tous les

à importer et ainsi réduire leur taille. À cause de cette contrainte, les éléments de la scène 3D doivent être limités et les animations bien réfléchies.

WebGPU : L’utilisation de la carte graphique

WebGPU est très ressemblant au Webgl et tend à remplacer l’API de Webgl. Le principe est de pouvoir utiliser la carte graphique de l’utilisateur en plus du processeur et donc permettre d’avoir de meilleures performances. Même s'il est toujours en développement, il est déjà possible de coder en WebGPU. Vous pouvez le tester en téléchargeant des navigateurs spécifiques compatibles :

Les 3D web et contraintes.

Pour conclure, nous avons vu les différentes façons de créer un site en 3D. Pour chacune des solutions proposer il faut savoir quels sont vos objectifs et contrainte. Gardez à l'esprit que pour qu’un site soit fonctionnel et utilisable, il faut penser performance. L’utilisateur doit pouvoir utiliser le site sans latence ni temps de chargement, surtout s'il est sur mobile. La 3D pour web évolu et pourra de plus en plus créer des expériences intéractives complexes, mais pour le moment le navigateur préfère des scènes légères.

Voir un autre post