Modélisation 3D web : configurateur produit et jumeau numérique

Montrer un produit en photo suppose de choisir un angle, une finition et un coloris. Le client, lui, veut voir saconfiguration. La 3D temps réel dans le navigateur résout ce problème depuis plusieurs années sans plugin ni téléchargement : une page web s'ouvre, l'objet apparaît, on le tourne.

Cet article décrit le pipeline réel de la modélisation à la mise en ligne, les contraintes techniques qui déterminent le budget, et les cas où la 3D ne se justifie pas.

Trois usages qui fonctionnent

Le configurateur produit.L'acheteur compose sa version — matériaux, coloris, options, dimensions — et la voit immédiatement. C'est l'usage au retour sur investissement le plus direct : il réduit l'incertitude qui bloque la décision, et donc les retours produit. Mobilier, menuiserie, véhicules, équipements industriels.

La visite virtuelle.Parcourir un lieu avant de s'y rendre : complexe sportif, hôtel, showroom, site industriel. Elle joue un rôle de préqualification — le visiteur qui prend rendez-vous après la visite virtuelle sait déjà ce qu'il vient voir.

Le jumeau numérique.Une représentation d'installation réelle alimentée par des données en direct : capteurs, états machine, flux. C'est l'usage le plus technique, et il relève davantage de la supervision que du marketing.

Un quatrième usage revient souvent et donne rarement des résultats : la 3D décorative, posée sur une page d'accueil parce que « ça fait moderne ». Elle alourdit la page, retarde l'affichage et n'apporte rien. Si l'objet 3D ne répond pas à une question que se pose le visiteur, il n'a pas lieu d'être.

Du modèle CAO au navigateur

Beaucoup d'entreprises industrielles possèdent déjà des modèles CAO et supposent qu'il suffit de les publier. Ce n'est pas le cas, et l'écart explique l'essentiel du budget.

Un modèle CAO décrit des surfaces mathématiques exactes, destinées à la fabrication. Un moteur 3D temps réel affiche des triangles. La conversion n'est pas un simple export : un assemblage mécanique converti brutalement produit couramment plusieurs millions de triangles, là où une scène web doit rester dans les centaines de milliers pour rester fluide sur un téléphone.

Le travail consiste donc à reconstruire une version allégéequi conserve la silhouette et les détails visibles, en supprimant tout ce qui ne se voit pas : géométrie interne, visserie, tolérances. Sur une pièce mécanique, la réduction atteint couramment un facteur cinquante sans différence perceptible à l'écran.

Les détails fins — filetages, gravures, grain de surface — ne sont pas modélisés mais simulés par des texturesqui décrivent le relief. C'est la technique qui permet à un objet visuellement riche de rester léger. La qualité de ce travail détermine le rendu final davantage que le nombre de triangles.

Ce qui détermine le budget

L'état des modèles de départ.Des fichiers CAO propres et organisés représentent une base exploitable. Des plans papier, des modèles perdus ou un produit qui n'existe qu'en exemplaire physique impliquent une modélisation complète, ou une numérisation.

Le nombre de références. Un produit isolé est un projet court. Une gamme de quarante références demande un pipeline— un processus outillé et reproductible. L'investissement initial est plus lourd, le coût unitaire s'effondre ensuite. C'est le point de bascule à identifier tôt.

Le nombre de combinaisons. Un configurateur à cinq options de trois valeurs représente 243 combinaisons. Elles ne sont évidemment pas produites une par une — la scène est assemblée dynamiquement — mais cela impose une modélisation modulaire, pensée dès le départ pour être recombinée.

Le niveau de réalisme attendu.Un rendu correct et un rendu photoréaliste ne demandent pas le même travail d'éclairage et de matériaux. Le second se justifie pour du mobilier haut de gamme ; rarement pour une pièce technique.

En ordre de grandeur, un configurateur simple portant sur une référence et quelques options se situe dans la même tranche qu'un site sur mesure. Un configurateur de gamme complète relève de la tranche plateforme — voir prix d'un site internet.

La contrainte mobile

C'est le point où les projets 3D échouent le plus souvent. La scène est validée sur l'ordinateur du studio, elle est superbe ; sur le téléphone d'un visiteur en 4G, elle met quinze secondes à s'afficher et fait chauffer l'appareil.

Trois exigences non négociables. Un poids de scène maîtrisé : la compression des géométries et des textures divise couramment le volume par cinq à dix par rapport à un export brut. Un affichage progressif : une version basse définition apparaît d'abord, la qualité monte ensuite, plutôt qu'un écran vide suivi d'un objet parfait. Une solution de repli : sur les appareils anciens, mieux vaut une image fixe de bonne qualité qu'une 3D qui saccade.

Il faut également accepter que la 3D ne soit pas indexable par les moteurs de recherche. Une page qui repose uniquement sur une scène 3D est une page vide pour Google. Le contenu textuel, les caractéristiques et les prix doivent exister en HTML à côté de la scène. Nos constats de terrain sont détaillés dans performances WebGL.

Les technologies

Nous travaillons avec Three.jssur le socle WebGL, aujourd'hui universellement supporté. Le format d'échange est glTF, conçu pour le temps réel, avec compression des géométries et des textures. Les matériaux suivent le modèle physique standard, ce qui garantit qu'un objet réagit correctement à l'éclairage de la scène.

Pour les effets qui n'existent pas en standard — matière particulière, animation de surface — nous écrivons des shaders sur mesure, décrits dans shaders GLSL. Les bases techniques sont présentées dans introduction à Three.js.

Quand ne pas faire de 3D

Si le produit est simple et bien compris— un objet dont trois photos font le tour —, la 3D n'apporte rien d'autre qu'un coût.

Si l'audience est majoritairement mobile sur réseau contraint, le risque de dégrader l'expérience dépasse le bénéfice.

Si la gamme change tous les six moissans pipeline de production en place, les modèles seront périmés avant d'être rentabilisés.

Si l'objectif réel est le référencement, la 3D est contre-productive. Du contenu écrit servira mieux cet objectif.

Notre intervention

Nous prenons en charge la chaîne complète : reprise ou création des modèles, optimisation pour le temps réel, développement de l'interface de configuration, intégration au site et à votre catalogue, et transfert de compétences si vous souhaitez gérer les nouvelles références en interne. Le site O'Padel illustre ce type de rendu 3D temps réel.

Voir le détail de la prestation web immersif et 3D. Pour les usages ludiques, voir mini-jeux WebGL.