Optimisation de modèles 3D avec Draco

1. Qu'est-ce que la compression Draco ?

Avant de compresser quoi que ce soit, comprenons de quoi il s'agit.

Draco est une bibliothèque open-source créée par Google spécifiquement pour compresser et décompresser la géométrie 3D (les "maillages" ou meshes) et les nuages de points. Son but est d'améliorer le stockage et la transmission des graphismes 3D.

L'idée est de réduire la taille du fichier contenant les informations sur les positions des sommets, les normales, les couleurs, les coordonnées de texture, etc., sans pour autant dégrader significativement la qualité visuelle du modèle.

Il est crucial de comprendre que Draco s'occupe de la géométrie. Il ne compresse pas les images de textures (fichiers JPG, PNG) qui peuvent être associées à un modèle. L'optimisation des textures est un sujet tout aussi important que nous aborderons dans la prochaine leçon.

2. Comment compresser un modèle avec Draco ?

Il existe deux approches principales pour compresser un modèle .glb ou .gltf avec Draco.

Méthode 1 : Via un logiciel de modélisation 3D (ex: Blender)

C'est souvent la méthode la plus simple. La plupart des artistes 3D ou des plateformes de modèles 3D comme Sketchfab proposent déjà des modèles compressés. Si vous travaillez avec des fichiers .blend ou que vous devez exporter un modèle vous-même, vous pouvez activer la compression Draco directement dans les options d'exportation de Blender.

Comme vous pouvez le voir dans la documentation, vous avez accès à plusieurs paramètres :

• Compression level (Niveau de compression) : Plus il est élevé (max 10), plus la compression est forte, mais plus l'exportation est lente.
• Quantize Position/Normal... : Ce sont les paramètres de "quantification". La quantification réduit la précision des données (par exemple, en utilisant moins de bits pour stocker la position d'un sommet). Cela réduit considérablement la taille du fichier, mais une quantification trop agressive peut entraîner une perte de qualité visible.

Méthode 2 : Via des outils en ligne de commande

En tant que développeur, cette méthode est particulièrement puissante car elle peut être intégrée dans des scripts d'automatisation pour optimiser une série de modèles. L'outil le plus populaire pour cela est gltf-transform.

gltf-transform est un couteau suisse pour les fichiers glTF. Il vous permet de les inspecter, de les modifier, et surtout, de les optimiser.

La commande de base ressemblerait à ceci :

# Installez d'abord gltf-transform globalement si ce n'est pas fait
npm install --global @gltf-transform/cli




# Appliquez la compression Draco
gltf-transform optimize model.glb model-draco.glb --compress draco

Cette approche est idéale pour un flux de travail de développement car elle est reproductible et scriptable.

3. Comment charger un modèle compressé avec Draco ?

Un modèle compressé est inutile si on ne peut pas l'afficher. Pour lire un fichier .glb compressé avec Draco, votre application a besoin d'un décodeur.

Le décodeur Draco

Ce décodeur est un ensemble de fichiers (généralement JavaScript et WebAssembly - .wasm) que votre chargeur de modèle 3D utilisera pour décompresser la géométrie à la volée, dans le navigateur de l'utilisateur.

Ces fichiers de décodage doivent être accessibles publiquement par votre application. La pratique courante est de les placer dans votre dossier public.

Vous pouvez trouver ces fichiers dans le dépôt de Three.js ou les copier facilement dans votre projet.

Chargement dans React Three Fiber

La bonne nouvelle, c'est que l'écosystème R3F rend ce processus très simple. Le hook useGLTF de drei gère la décompression pour vous, à condition qu'il sache où trouver les fichiers du décodeur.

L'outil gltfjsx, que nous avons déjà évoqué, est le moyen le plus simple de générer un composant React qui utilise un modèle compressé. Lorsque vous l'utilisez avec l'option --draco, il configure tout pour vous.

Par exemple, si vous avez un modèle robot.glb compressé dans votre dossier public :

npx gltfjsx public/robot.glb --draco

Cette commande générera un composant Robot.js qui ressemblera à peu près à ceci :

// Robot.js (version simplifiée)
import React, { useRef } from 'react'
import { useGLTF, useDraco } from '@react-three/drei'

export function Model(props) {
  // Le hook useDraco est ajouté automatiquement par gltfjsx
  // Il s'assure que le décodeur est prêt.
  const draco = useDraco() 
  
  // useGLTF reçoit le chemin du décodeur via useDraco
  const { nodes, materials } = useGLTF('/robot.glb', draco) 
  
  return (
    <group {...props} dispose={null}>
      {/* ... la structure JSX du modèle ... */}
    </group>
  )
}

useGLTF.preload('/robot.glb', useDraco())

En coulisses, useDraco (ou la configuration de GLTFLoader dans Three.js pur) a besoin du chemin vers les fichiers du décodeur. Par défaut, drei s'attend à les trouver dans un CDN. Si vous les hébergez vous-même (ce qui est recommandé pour la production), vous devrez le spécifier.

Avec gltfjsx, vous pouvez fournir le chemin local comme ceci :

# Le chemin /draco/ correspond au dossier public/draco/ de votre projet
npx gltfjsx public/robot.glb --draco /draco/

Le code généré par gltfjsx s'occupera du reste. Lorsque useGLTF s'exécutera, il verra que le modèle est compressé, utilisera le décodeur Draco fourni, et décompressera la géométrie avant de la rendre à l'écran. Et grâce à notre leçon précédente, tout cela se passera pendant que Suspense affiche un bel indicateur de chargement !

Conclusion

La compression de la géométrie avec Draco est une technique d'optimisation fondamentale pour le web 3D. Elle permet de réduire drastiquement les temps de chargement, rendant vos expériences accessibles même avec des connexions plus lentes et améliorant significativement l'expérience utilisateur globale.

Points clés à retenir :

• Draco compresse la géométrie d'un modèle 3D (sommets, faces, etc.), mais pas ses textures.
• La compression peut être appliquée soit lors de l'export depuis un logiciel 3D comme Blender, soit via un outil en ligne de commande comme gltf-transform.
• Il existe un compromis entre le taux de compression et la qualité visuelle (via la quantification) qu'il faut savoir gérer.
• Pour charger un modèle compressé, l'application a besoin d'un décodeur Draco (fichiers JS et WASM).
• Dans R3F, l'outil gltfjsx avec l'option --draco configure automatiquement le composant React pour utiliser le décodeur et charger le modèle correctement.

Aperçu de la prochaine leçon :

Nous avons réduit le poids de la géométrie, mais qu'en est-il des textures ? Une seule texture 4K peut être bien plus lourde qu'un maillage complexe. Dans la prochaine leçon, nous nous attaquerons à l'autre moitié du problème : optimiser les textures pour le web en choisissant des formats et résolutions adaptés, en explorant des formats modernes comme WebP et KTX2.