Compresión de textura GLB: KTX2 y WebP
La conversión de textura cambia las imágenes incrustadas en un GLB. En esta herramienta, elija KTX2 o WebP para habilitar los controles de calidad, escala y tamaño máximo. Mantenga la retención del triángulo sin cambios durante esta comparación para que el efecto de la configuración de textura sea más fácil de ver.
Elija el formato que su espectador puede cargar
| Salida de textura | Requisito de uso y carga. |
|---|---|
| Formato original | Mantiene la codificación existente. Útil como punto de referencia de comparación. |
| WebP | Utiliza EXT_texture_webp. Consulta el soporte en el visor de destino. |
| KTX2 / ETC1S | Una codificación Basis Universal compacta. Requiere soporte KHR_texture_basisu. |
| KTX2 / UASTC | Por lo general, mantiene más detalles de textura en un tamaño de archivo más grande. Utiliza la misma ruta de carga KTX2. |
Las dimensiones y la calidad de la codificación realizan trabajos diferentes
Una escala de textura 50% reduce a la mitad el ancho y el alto, dejando una cuarta parte de los píxeles antes de los mapas mip. La configuración de tamaño máximo también limita las dimensiones de salida. La calidad de la codificación controla el códec en lugar de las dimensiones de la imagen, por lo que la calidad 8 en WebP no es equivalente a la calidad 8 en ETC1S o UASTC.
Inspeccione las letras, los bordes alfa y los detalles finos de la superficie después de cambiar el tamaño. Los mapas normales necesitan especial cuidado porque pequeños cambios de valor pueden alterar el sombreado. Pruebe la textura bajo el nivel de iluminación y zoom utilizado en su aplicación.
Una comparación usando una textura de 1024 × 1024
| Codificación y dimensiones. | Tamaño GLB (bytes) |
|---|---|
| Original PNG, 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 |
Este dispositivo es nuestra malla ondulada CC0 con un gradiente y ruido generado PNG, codificado por gltfpack 1.3 nativo. Todas las filas usan compresión Meshopt, 8192 triángulos y calidad 8 donde se aplica la conversión. Estos son tamaños GLB completos, no tamaños de textura aislados. La tabla mide bytes, no calidad visual ni memoria GPU.
Compara la textura en la misma superficie.
Estas vistas cercanas utilizan la misma configuración de malla, cámara, iluminación y material. Representan los archivos reales de la tabla en Three.js 0.180.0. La textura generada contiene degradados y ruido fino; es útil para inspeccionar esos detalles, pero no representa letras, transparencias o mapas normales.
En estas capturas, la versión ETC1S suaviza parte del ruido fino en la superficie rosa, mientras que UASTC mantiene más de su apariencia moteada. La versión WebP de tamaño medio difumina las pequeñas variaciones de forma más visible. Compare esta observación con la tabla de tamaño de archivo: preservar esos detalles tiene un costo diferente para cada codificación.
Abra las imágenes a tamaño completo y compare pequeñas variaciones en el color y los detalles de la superficie. La página web reduce las vistas previas, lo que puede ocultar diferencias. Estas capturas de pantalla son referencias visuales de un navegador y GPU, no un puntaje de calidad ni una garantía de representación idéntica en todos los dispositivos.
Ejemplo: reducir a la mitad las dimensiones de la textura y exportar WebP
gltfpack -i input.glb -o output.glb -cc -tw -tq 8 -tj 1 -ts 0.5 -kn -km -keEn la interfaz, seleccione Archivo más pequeño, elija WebP, abra Configuración avanzada y configure la Escala de textura en 50%. Deje el tamaño máximo de textura sin cambios a menos que también necesite un límite de píxeles. Vuelva a abrir el resultado en su visor de destino antes de usarlo.
Configurar la carga de KTX2 y Meshopt en Three.js →
Referencia del motor: gltfpack
Abra el optimizador ↗