Compression de texture GLB : KTX2 et WebP
La conversion de texture modifie les images intégrées dans un GLB. Dans cet outil, choisissez KTX2 ou WebP pour activer les contrôles de qualité, d'échelle et de taille maximale. Gardez la rétention du triangle inchangée pendant cette comparaison afin que l'effet des paramètres de texture soit plus facile à voir.
Choisissez le format que votre visionneuse peut charger
| Sortie de texture | Exigence d'utilisation et de chargement |
|---|---|
| Format original | Conserve l'encodage existant. Utile comme base de comparaison. |
| WebP | Utilise EXT_texture_webp. Vérifiez la prise en charge dans la visionneuse de destination. |
| KTX2 / ETC1S | Un encodage Basis Universal compact. Nécessite la prise en charge de KHR_texture_basisu. |
| KTX2 / UASTC | Conserve généralement plus de détails de texture dans une taille de fichier plus grande. Il utilise le même chemin de chargement KTX2. |
Les dimensions et la qualité de l'encodage font des tâches différentes
Une échelle de texture 50% réduit de moitié la largeur et la hauteur, laissant un quart des pixels avant les mipmaps. Le paramètre de taille maximale limite également les dimensions de sortie. La qualité d'encodage contrôle le codec plutôt que les dimensions de l'image, donc la qualité 8 dans WebP n'est pas équivalente à la qualité 8 dans ETC1S ou UASTC.
Inspectez le lettrage, les bords alpha et les détails fins de la surface après le redimensionnement. Les cartes normales nécessitent une attention particulière car de petits changements de valeur peuvent modifier l'ombrage. Testez la texture sous l'éclairage et le niveau de zoom utilisés dans votre application.
Une comparaison utilisant une texture 1024 × 1024
| Encodage et dimensions | Taille GLB (octets) |
|---|---|
| PNG d'origine, 1024 × 1024 | 2,914,152 |
| WebP, 1024 × 1024 | 445,632 |
| ETC1S, 1024 × 1024 | 258,488 |
| UASTC, 1024 × 1024 | 1,373,516 |
| WebP, 512 × 512 | 118,088 |
Ce luminaire est notre maillage ondulé CC0 avec un dégradé et un bruit générés PNG, codé par gltfpack 1.3 natif. Toutes les lignes utilisent la compression Meshopt, 8 192 triangles et la qualité 8 là où la conversion s'applique. Il s'agit de tailles GLB complètes, et non de tailles de texture isolées. Le tableau mesure les octets, pas la qualité visuelle ou la mémoire GPU.
Comparez la texture sur la même surface
Ces vues rapprochées utilisent les mêmes paramètres de maillage, de caméra, d’éclairage et de matériau. Ils restituent les fichiers réels de la table dans Three.js 0.180.0. La texture générée contient des dégradés et du bruit fin ; il est utile pour inspecter ces détails, mais ne représente pas le lettrage, la transparence ou les cartes normales.
Dans ces captures, la version ETC1S atténue une partie du bruit fin sur la surface rose, tandis que UASTC conserve davantage son aspect moucheté. La version demi-taille WebP estompe plus visiblement les petites variations. Comparez cette observation avec le tableau des tailles de fichiers : la préservation de ces détails a un coût différent pour chaque encodage.
Ouvrez les images en taille réelle et comparez les petites variations de couleur et de détails de surface. La page Web réduit les aperçus, ce qui peut masquer les différences. Ces captures d'écran sont des références visuelles d'un navigateur et de GPU, et non un score de qualité ou une garantie de rendu identique sur chaque appareil.
Exemple : divisez par deux les dimensions d'une texture et exportez WebP.
gltfpack -i input.glb -o output.glb -cc -tw -tq 8 -tj 1 -ts 0.5 -kn -km -keDans l'interface, sélectionnez Fichier plus petit, choisissez WebP, ouvrez les paramètres avancés et définissez l'échelle de texture sur 50%. Laissez la taille maximale de la texture inchangée, sauf si vous avez également besoin d'une limite de pixels. Rouvrez le résultat dans votre visionneuse cible avant de l'utiliser.
Configurer le chargement de KTX2 et Meshopt dans Three.js →
Référence moteur : gltfpack
Ouvrez l'optimiseur ↗