Compression des textures GLB : KTX2 et WebP

La conversion des textures modifie les images intégrées au GLB. Dans cet outil, choisissez KTX2 ou WebP pour activer les réglages de qualité, d'échelle et de taille maximale. Gardez la proportion de triangles inchangée pour mieux isoler l'effet des textures.

Choisir un format pris en charge par votre visualiseur

Format de sortie des textures	Usage et exigence de chargement
Format d'origine	Conserve l'encodage existant. Utile comme référence de comparaison.
WebP	Utilise EXT_texture_webp. Vérifiez sa prise en charge dans le visualiseur cible.
KTX2 / ETC1S	Un encodage compact de Basis Universal. Nécessite la prise en charge de KHR_texture_basisu.
KTX2 / UASTC	Conserve généralement davantage de détails, avec un fichier plus volumineux. Utilise le même mécanisme de chargement KTX2.

Dimensions et qualité d'encodage ont des rôles différents

Une échelle de 50% divise la largeur et la hauteur par deux, soit un quart des pixels avant les mipmaps. La taille maximale limite également les dimensions produites. La qualité d'encodage agit sur le codec, pas sur les dimensions : une qualité 8 en WebP n'équivaut donc pas à une qualité 8 en ETC1S ou UASTC.

Après redimensionnement, examinez les caractères, les bords transparents et les détails fins. Les cartes de normales demandent une attention particulière : de petites variations de valeur peuvent modifier l'ombrage. Testez la texture avec l'éclairage et le niveau de zoom de votre application.

Comparaison avec une texture de 1024 × 1024

Encodage et dimensions	Taille du 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

Cet exemple associe notre maillage ondulé sous CC0 à un PNG généré avec dégradé et bruit, encodé par gltfpack natif 1.3. Toutes les lignes utilisent la compression Meshopt, 8 192 triangles et la qualité 8 lors d'une conversion. Les tailles sont celles des GLB complets, pas des textures seules. Le tableau mesure des octets, pas la qualité visuelle ni la mémoire GPU.

Comparer les textures sur la même surface

Ces vues rapprochées utilisent le même maillage, la même caméra, le même éclairage et les mêmes matériaux. Elles affichent les fichiers réels du tableau avec Three.js 0.180.0. La texture générée comporte des dégradés et un bruit fin ; elle permet d'étudier ces détails, mais ne représente ni des caractères, ni la transparence, ni des cartes de normales.

Vue rapprochée de la texture PNG d'origine sur le maillage ondulé — PNG d'origine · 1024 × 1024

Même surface avec compression de texture ETC1S — ETC1S · 1024 × 1024

Même surface avec compression de texture UASTC — UASTC · 1024 × 1024

Même surface avec une texture WebP de dimensions divisées par deux — WebP · 512 × 512

Sur ces captures, la version ETC1S atténue une partie du bruit fin de la surface rose, tandis qu'UASTC conserve davantage son aspect moucheté. La version WebP aux dimensions réduites floute plus visiblement les petites variations. Rapprochez cette observation du tableau des tailles : conserver ces détails a un coût différent selon l'encodage.

Ouvrez les images à leur taille réelle pour comparer les petites variations de couleur et les détails de surface. Les aperçus réduits de la page peuvent masquer des différences. Ces captures sont des références visuelles issues d'un navigateur et d'un GPU ; elles ne constituent ni une note de qualité ni une garantie de rendu identique sur tous les appareils.

Exemple : diviser les dimensions par deux et exporter en WebP

gltfpack -i input.glb -o output.glb -cc -tw -tq 8 -tj 1 -ts 0.5 -kn -km -ke

Dans l'interface, sélectionnez Fichier plus petit, choisissez WebP, ouvrez les Paramètres avancés et réglez l'Échelle des textures sur 50%. Laissez la Taille maximale des textures inchangée, sauf si vous avez aussi besoin d'une limite en pixels. Rouvrez le résultat dans votre visualiseur cible avant de l'utiliser.

Configurer le chargement KTX2 et Meshopt dans Three.js →

Référence du moteur : gltfpack

Ouvrir l'optimiseur ↗