TRIBORG/3D
← Blog
Optimisation · 14 min de lecture

Comment optimiser un modèle 3D pour le web et le WebAR

Géométrie, textures, matériaux, échelle et chargement pour le navigateur et le mobile.

Un modèle créé pour un rendu haute résolution n’est pas automatiquement adapté à un site web.

Un moteur de rendu hors ligne peut traiter des millions de polygones, de grandes textures et des matériaux complexes pendant plusieurs minutes ou plusieurs heures.

Un navigateur doit afficher le modèle en temps réel, souvent sur un smartphone disposant de ressources limitées.

L’optimisation réduit cette charge technique tout en conservant la qualité visuelle importante.

Pourquoi optimiser les modèles 3D pour le web ?

Un modèle destiné au rendu publicitaire peut contenir :

— Des millions de polygones

— Des modificateurs de subdivision

— De la géométrie cachée

— Des composants internes

— Des dizaines de matériaux

— Des textures 4K ou 8K

— Des shaders de verre complexes

— De lourdes animations

— Des caméras inutilisées

— Des lumières inutilisées

— Des objets dupliqués

— Des données spécifiques au rendu

Ces éléments peuvent être acceptables dans une scène de production, mais inefficaces pour une diffusion web.

Quel est l’objectif de l’optimisation ?

L’objectif n’est pas de produire le plus petit fichier possible à tout prix.

Un modèle excessivement compressé peut charger rapidement mais sembler imprécis et non professionnel.

Il faut équilibrer :

Qualité visuelle

Le produit doit conserver sa silhouette, ses matériaux et ses détails importants.

Vitesse de chargement

Le fichier doit être téléchargé dans un délai raisonnable, y compris sur réseau mobile.

Performances

Le modèle doit tourner de manière fluide et rester stable sur l’appareil cible.

Étape 1 : définir l’utilisation finale

Avant de modifier le modèle, il faut déterminer comment il sera utilisé.

Visualiseur produit

Le client tourne l’objet et examine ses détails.

WebAR

Le modèle est placé dans un environnement réel à la bonne échelle.

Configurateur produit

L’utilisateur change les couleurs, matériaux ou composants.

Présentation technique

Le modèle peut inclure animations, annotations, vues éclatées ou pièces amovibles.

Les différentes utilisations nécessitent différentes décisions.

Étape 2 : optimiser la géométrie

Supprimer la géométrie invisible

Supprimez les surfaces et détails que l’utilisateur ne verra jamais.

Par exemple :

— Parois internes

— Vis cachées

— Pièces mécaniques fermées

— Surfaces inférieures invisibles

— Objets dupliqués

— Géométrie restante après des modificateurs

Ne supprimez pas les éléments internes si le produit utilise de la transparence, des ouvertures ou une animation éclatée.

Réduire la densité de polygones

Une densité excessive augmente la taille et le coût du rendu.

Des réductions importantes sont possibles sur :

— Les surfaces planes

— Les cylindres avec trop de segments

— Les composants cachés

— Les très petits chanfreins

— Les filetages

— Les surfaces scannées très denses

Les courbes et silhouettes importantes doivent être conservées.

Utiliser la retopologie

Une réduction automatique peut créer des triangles étirés, des arêtes irrégulières et des problèmes de shading.

La retopologie contrôlée produit un maillage plus propre.

Elle est particulièrement utile pour :

— Les modèles générés par IA

— Les scans 3D

— La photogrammétrie

— Les sculptures numériques

— Les conversions CAD

— Les topologies endommagées

Baker les petits détails

Les petits détails peuvent être représentés par des textures plutôt que par de la géométrie.

Exemples :

— Coutures

— Texture du tissu

— Petites vis

— Relief de surface

— Gravures

— Fines lignes de panneaux

— Petits chanfreins

Une Normal Map conserve l’apparence du détail sans ajouter des milliers de polygones.

Nombre de polygones recommandé

Il n’existe pas de limite universelle.

Les performances dépendent aussi des matériaux, textures, transparence, animations, lumières et nombre d’objets.

Valeurs de départ pratiques pour un seul produit :

Produit simple

Environ 20 000 à 50 000 triangles.

Produit de complexité moyenne

Environ 50 000 à 120 000 triangles.

Produit détaillé

Environ 120 000 à 200 000 triangles, avec des tests attentifs.

Ces valeurs sont des références, pas des normes strictes.

Un modèle bien organisé avec davantage de triangles peut fonctionner mieux qu’un petit modèle comportant de nombreux matériaux et de lourdes textures.

Étape 3 : vérifier les normales et le lissage

Des normales incorrectes peuvent provoquer :

— Des taches sombres

— Un éclairage incorrect

— Des surfaces invisibles

— Une transparence inattendue

— Des coutures visibles

— Des transitions dures

— Des reflets déformés

Avant l’export, vérifiez :

— L’orientation des faces

— Les Vertex Normals

— Le lissage

— Les arêtes vives

— Les sommets dupliqués

— Les surfaces ouvertes

— Les échelles négatives

— Les transformations non appliquées

— La géométrie non-manifold

— Les faces superposées

Le shading doit être vérifié à nouveau après l’export dans le visualiseur final.

Étape 4 : préparer le dépliage UV

Le dépliage UV détermine comment les textures 2D sont placées sur la surface 3D.

Un bon UV pour le web doit avoir :

— Peu de chevauchements accidentels

— Un espacement suffisant

— Une densité de texels cohérente

— Une utilisation efficace de l’espace

— Une bonne orientation des matériaux

— Pas d’îlots importants trop petits

— Peu d’espace inutilisé

— Un emplacement prévisible pour les étiquettes

Les UV superposés peuvent convenir aux pièces symétriques, mais pas aux détails uniques ou aux éclairages bakés.

Étape 5 : convertir les matériaux en PBR

Les moteurs de rendu hors ligne utilisent des systèmes de matériaux complexes qui ne sont pas toujours compatibles avec les visualiseurs web.

Pour le temps réel, les matériaux doivent généralement être convertis vers un workflow PBR.

Base Color

Définit la couleur principale de la surface.

Metallic

Détermine si la surface se comporte comme un métal.

Roughness

Contrôle la netteté des reflets.

Normal

Ajoute de petits détails sans géométrie supplémentaire.

Ambient Occlusion

Ajoute des ombres de contact dans les creux.

Emissive

Définit les zones lumineuses.

Les matériaux procéduraux doivent souvent être bakés dans des images.

Étape 6 : réduire le nombre de matériaux

Chaque matériau séparé peut augmenter le coût du rendu.

Un modèle CAD ou une scène hors ligne peut contenir de nombreux matériaux presque identiques.

Lorsque c’est possible :

— Fusionnez les matériaux dupliqués

— Utilisez des matériaux partagés

— Créez des atlas de textures

— Supprimez les emplacements inutilisés

— Regroupez les canaux compatibles

— Évitez la transparence inutile

Les atlas conviennent lorsque les composants ne doivent pas changer indépendamment.

Pour un configurateur, des matériaux séparés peuvent rester nécessaires.

Étape 7 : optimiser les textures

Les textures peuvent occuper plus d’espace que la géométrie.

Elles consomment également de la mémoire après leur chargement.

Textures 1K

Adaptées aux petits objets et détails secondaires.

Textures 2K

Choix courant pour les modèles produits principaux.

Textures 4K

À utiliser seulement si les gros plans nécessitent réellement cette résolution.

Textures 8K

Généralement excessives pour un produit web mobile.

Autres méthodes :

— Recadrer les espaces inutilisés

— Supprimer les textures inutilisées

— Retirer les canaux alpha inutiles

— Utiliser une compression efficace

— Combiner les maps compatibles

— Remplacer les textures unies par des valeurs de matériau

— Réutiliser les textures des pièces identiques

Le texte des emballages doit être contrôlé après réduction de la résolution.

Étape 8 : vérifier la transparence

La transparence est coûteuse et peut produire des problèmes de tri.

Elle doit être utilisée uniquement si nécessaire.

Préférer des matériaux opaques lorsque

— La surface est solide

— La transparence n’est pas visible

— Un reflet simulé suffit

— Les performances mobiles sont prioritaires

Utiliser la transparence lorsque

— Le produit contient du vrai verre

— Les éléments internes doivent être visibles

— Le design dépend d’un matériau transparent

— Le visualiseur cible gère correctement la transparence

Les matériaux en verre doivent être testés sur tous les appareils cibles.

Étape 9 : régler l’échelle, l’origine et l’orientation

Un modèle correct peut échouer en AR si son échelle ou son pivot est incorrect.

1. Appliquer l’échelle et la rotation.

2. Utiliser des dimensions réelles.

3. Placer le modèle au niveau du sol.

4. Définir un pivot logique.

5. Vérifier l’axe vertical.

6. Vérifier l’axe avant.

7. Supprimer les objets vides inutiles.

8. Vérifier la Bounding Box.

9. Vérifier qu’aucune géométrie n’est loin de l’origine.

10. Tester le placement en AR.

Pour les meubles, le pivot est souvent placé au centre de la zone de contact inférieure.

Pour les portes et pièces tournantes, le pivot doit correspondre à l’axe réel.

Étape 10 : optimiser les animations

Supprimez :

— Les actions inutilisées

— Les keyframes vides

— Les pistes dupliquées

— Les os inutiles

— Les objets animés invisibles

— Les keyframes excessivement nombreux

Les animations en boucle doivent avoir une transition propre entre le premier et le dernier frame.

Les poids du squelette et les pièces mobiles doivent être vérifiés après l’export.

Étape 11 : exporter les bons fichiers

Pour la plupart des visualiseurs web, préparez un GLB optimisé.

Pour Apple AR Quick Look, préparez un USDZ.

Conservez séparément la scène source modifiable.

Fichier source

Utilisé pour les futures modifications.

Fichier GLB

Utilisé pour le site et les workflows temps réel compatibles.

Fichier USDZ

Utilisé pour l’AR sur les appareils Apple compatibles.

Étape 12 : optimiser le chargement sur le site

Même un modèle optimisé n’a pas toujours besoin de charger immédiatement.

Le site peut utiliser :

— Une image poster

— Le Lazy Loading

— Un chargement au clic

— Un indicateur de progression

— Le cache

— Un CDN

— Une qualité mobile adaptée

— Des scripts différés

— Des ressources compressées

— Une image alternative

Une image poster montre le produit avant le téléchargement complet du modèle.

Cela améliore l’apparence initiale et évite un chargement inutile si l’utilisateur n’interagit pas avec la 3D.

Taille recommandée d’un fichier GLB

Moins de 5 Mo

Modèle léger et rapide à charger.

5 à 15 Mo

Plage raisonnable pour de nombreux produits détaillés.

15 à 30 Mo

Nécessite des tests mobiles attentifs.

Plus de 30 Mo

Peut charger lentement sur une connexion mobile.

Ces valeurs ne sont pas des normes strictes.

Un fichier plus lourd peut être justifié, mais son avantage visuel doit être clair.

Géométrie ou textures : qu’est-ce qui influence le plus les performances ?

Facteur · Effet principal

Nombre de polygones · Charge GPU et complexité

Résolution des textures · Taille du téléchargement et mémoire

Nombre de matériaux · Draw Calls et coût du rendu

Transparence · Complexité et tri

Animation · Taille du fichier et calculs

Nombre d’objets · Gestion de la scène

Ombres · Charge GPU

Compression · Taille du téléchargement

Puissance de l’appareil · Performance réelle

Connexion internet · Temps de chargement initial

Les performances dépendent de l’ensemble du modèle, et non d’un seul chiffre.

Checklist avant publication

Géométrie

— Échelle correcte

— Topologie propre

— Normales correctes

— Pas de surfaces dupliquées

— Géométrie cachée supprimée

— Nombre de polygones adapté

— Structure d’objets logique

Matériaux et textures

— Matériaux PBR compatibles

— Résolution raisonnable

— Aucune image manquante

— Aucune texture inutilisée

— Transparence testée

— Nombre de matériaux optimisé

— Textes produit lisibles

Site et AR

— GLB testé

— USDZ testé

— Performances mobiles vérifiées

— Placement AR correct

— Image poster ajoutée

— Chargement testé

— Fallback disponible

Questions fréquentes

Comment réduire la taille d’un fichier GLB ?

Réduisez la géométrie inutile, optimisez les textures, supprimez les données inutilisées, simplifiez les matériaux et utilisez une compression adaptée.

Qu’est-ce qui est le plus important : les polygones ou les textures ?

Les deux sont importants. Les matériaux, la transparence, l’animation et la structure de scène influencent également les performances.

Peut-on optimiser automatiquement un modèle 3D ?

Les outils automatiques peuvent aider, mais le résultat doit être vérifié manuellement.

Pourquoi un modèle paraît-il différent dans Blender et dans un navigateur ?

Les applications utilisent des systèmes différents d’éclairage, de gestion des couleurs et de matériaux. Le modèle doit toujours être testé dans le visualiseur final.

Conclusion

Optimiser un modèle 3D pour le web et le WebAR ne consiste pas simplement à l’exporter en GLB.

Le processus comprend la réduction de géométrie, la retopologie, la conversion des matériaux, l’optimisation des textures, la correction de l’échelle et les tests sur de vrais appareils.

J’optimise des modèles 3D pour les sites, boutiques en ligne, configurateurs de produits et projets de réalité augmentée. Les services peuvent inclure la retopologie, le dépliage UV, les matériaux PBR, l’optimisation GLB et l’export USDZ.