Pendant longtemps, montrer un produit ou un bâtiment en 3D voulait dire installer un logiciel, envoyer une vidéo ou se contenter de quelques rendus figés. Aujourd'hui, un simple navigateur suffit : la scène est calculée en direct sur l'ordinateur ou le téléphone du visiteur, qui peut tourner autour, zoomer, entrer dans une pièce ou changer une finition.
Chez AELVON, nous faisons de la 3D web à côté de nos métiers de développement et d'infrastructure. Ce que vous voyez tourner sur notre Playground 3D n'est pas une vidéo : c'est une scène rendue en temps réel. Cet article explique à quoi sert concrètement cette technologie pour une entreprise, comment elle se fabrique, et où sont ses limites.
À quoi sert la 3D dans un navigateur ?
La question à se poser n'est pas « est-ce que ce serait joli en 3D ? », mais « est-ce que mon client ou mon équipe comprendrait mieux en manipulant l'objet ? ». Quand la réponse est oui, la 3D a sa place. Trois usages reviennent le plus souvent.
Les configurateurs
Un configurateur permet de choisir des options et de voir le résultat immédiatement : un revêtement, une couleur, un agencement, un meuble. Nous avons développé un configurateur d'intérieur sur ce principe. L'utilisateur compose une pièce en temps réel dans le navigateur (carrelage, calepinage, mobilier), puis demande un rendu photoréaliste calculé côté serveur par Blender. Les deux vues partagent le même catalogue et le même moteur de calepinage, si bien que l'image finale correspond exactement à ce qui a été configuré.
L'intérêt pour l'entreprise est double : le client se projette avant d'acheter, et l'échange commercial part d'une configuration précise plutôt que d'une description approximative.
Les maquettes de chantier interactives
Dans le BTP, un plan reste difficile à lire pour quelqu'un qui n'est pas du métier. Pour une entreprise de gros œuvre, nous modélisons des chantiers dans Blender à partir des plans d'exécution, avec de vraies textures (béton, parpaing, acier, terre). La maquette est découpée en étapes de construction, des fondations jusqu'aux murs du dernier niveau, et on peut indiquer où en est réellement le chantier.
Dans le navigateur, on survole l'ensemble comme avec un drone, puis on entre dans une pièce pour regarder autour. Des points discrets donnent, à la demande, le détail technique d'un mur ou d'un plancher. Quand une information ne figure pas sur les plans, elle est signalée comme hypothèse : une maquette n'a de valeur que si elle est fidèle aux documents.
La visualisation produit et métier
La 3D sert aussi à désigner quelque chose sans ambiguïté. C'est le cas de Drayan Invoice, notre logiciel de chiffrage de sinistres automobiles : un modèle 3D du véhicule aide à visualiser et sélectionner les zones concernées avant d'établir le devis. Cliquer sur une aile ou un pare-chocs est plus rapide et plus fiable que de les décrire dans un champ texte.
Enfin, la 3D peut simplement porter un message. Sur notre page d'accueil, la section consacrée à notre méthode fait pivoter un objet modélisé au fil du défilement, et la présentation « Le Prisme » illustre notre offre de communication. Dans ces cas-là, l'objectif est l'attention, pas la fonctionnalité, et il faut l'assumer comme tel.
Comment c'est fabriqué
Un projet 3D web enchaîne trois étapes, chacune avec ses outils.
La modélisation. Les objets sont construits dans Blender, un logiciel libre de création 3D. Selon le projet, on part de plans, de cotes, de fichiers fournis par le client ou d'une forme à inventer. Nous scriptons une bonne partie de ce travail : un script qui génère la maquette à partir de données structurées se relance en quelques minutes quand un plan change, là où une modélisation à la main serait à reprendre. Les textures viennent de bibliothèques sous licence libre (CC0) ou sont « cuites » directement dans le modèle.
L'export au format glTF. Le modèle est exporté au format glTF, dans sa version binaire GLB. C'est un format ouvert, maintenu par le Khronos Group, pensé pour être chargé rapidement par un navigateur : géométrie, matériaux, textures et animations tiennent dans un seul fichier. À titre d'exemple, l'objet de notre page d'accueil pèse environ 2,9 Mo pour une vingtaine de milliers de triangles.
L'affichage avec Three.js. Dans la page, la bibliothèque Three.js s'appuie sur WebGL, l'interface qui donne au navigateur l'accès à la carte graphique. C'est là que se règlent l'éclairage, les ombres, les contrôles de caméra (orbite, visite à hauteur d'homme, survol) et les effets de rendu. Notre démo du Playground utilise par exemple un post-traitement HDR avec bloom et tone mapping ACES.
L'optimisation, surtout sur mobile
C'est la partie la moins visible et la plus importante. Une scène qui tourne parfaitement sur un poste de développement peut devenir inutilisable sur un téléphone ou un ordinateur portable à carte graphique intégrée. Quelques principes que nous appliquons systématiquement :
- Charger au bon moment. Le modèle n'est téléchargé que lorsque le visiteur approche de la section, et une image fixe s'affiche en attendant.
- Ne calculer que ce qui se voit. La boucle de rendu s'arrête dès que la scène sort de l'écran.
- Adapter la qualité à l'appareil. Résolution de rendu, ombres et anticrénelage sont revus à la baisse sur les appareils modestes.
- Respecter les préférences du visiteur. Si le système demande de réduire les animations, la scène reste fixe.
- Garder le contenu lisible sans 3D. Le texte reste du vrai HTML, visible par les moteurs de recherche et par les lecteurs d'écran, et la page prévoit une version statique de la scène.
La compression des textures et de la géométrie, ou des versions simplifiées des objets pour la vue lointaine, complètent l'arsenal quand les fichiers grossissent.
Les limites à connaître
La 3D web n'est pas magique, et mieux vaut le savoir avant de lancer un projet.
Le premier écueil est le temps de chargement. Au-delà du poids des fichiers, le navigateur doit préparer les programmes de rendu de chaque matériau. Sur une scène riche, cette étape peut figer la page plusieurs secondes si elle n'est pas étalée dans le temps. Nous l'avons constaté sur un simulateur particulièrement détaillé : il a fallu revoir l'ordre de chargement pour que l'accueil s'affiche d'abord et que le reste se prépare en arrière-plan.
Le deuxième est la diversité des appareils. On ne contrôle ni la carte graphique, ni le navigateur, ni l'état de la batterie du visiteur. Il faut donc tester sur de vrais téléphones, pas seulement sur un ordinateur de bureau.
Le troisième est la donnée d'entrée. Une maquette fidèle demande des plans exploitables, un configurateur demande un catalogue structuré (dimensions, finitions, règles de compatibilité). Si ces informations n'existent pas, il faut les produire, et c'est souvent là que se joue l'essentiel du travail.
Enfin, la 3D ne remplace pas un contenu clair. Une page dont le message n'est compris qu'après avoir manipulé une scène est une page ratée, en particulier pour le référencement.
Comment démarrer
Le plus efficace est de partir d'un cas d'usage précis plutôt que de l'envie de « faire de la 3D ». Quelques questions permettent de cadrer le projet :
- Qui va manipuler la scène, et pour décider ou comprendre quoi ?
- De quelles données dispose-t-on déjà : plans, fichiers CAO, photos, catalogue ?
- Sur quels appareils sera-t-elle principalement consultée ?
- Faut-il un rendu temps réel seul, ou aussi des images photoréalistes calculées à part ?
Avec ces réponses, on peut construire une première version limitée, la tester sur de vrais appareils et l'enrichir ensuite. C'est la démarche que nous suivons sur nos propres projets.
Pour voir ce que donne la 3D temps réel dans votre navigateur, ouvrez notre Playground 3D. Et si vous avez un configurateur, une maquette ou une visualisation en tête, parlons-en.