Compresión de texturas GLB: KTX2 y WebP
La conversión de texturas modifica las imágenes incorporadas en el GLB. En esta herramienta, elige KTX2 o WebP para activar los controles de calidad, escala y tamaño máximo. Mantén la misma proporción de triángulos durante la comparación para distinguir mejor el efecto de los ajustes de textura.
Elige un formato que tu visor pueda cargar
| Textura de salida | Uso y requisito de carga |
|---|---|
| Formato original | Conserva la codificación existente. Sirve como referencia para comparar. |
| WebP | Utiliza EXT_texture_webp. Comprueba que el visor de destino lo admita. |
| KTX2 / ETC1S | Una codificación compacta de Basis Universal. Requiere compatibilidad con KHR_texture_basisu. |
| KTX2 / UASTC | Suele conservar más detalle en las texturas a cambio de un archivo mayor. Utiliza el mismo mecanismo de carga KTX2. |
Las dimensiones y la calidad de codificación cumplen funciones distintas
Una escala de textura del 50% reduce a la mitad tanto el ancho como el alto y deja una cuarta parte de los píxeles antes de los mipmaps. El tamaño máximo también limita las dimensiones de salida. La calidad de codificación controla el códec, no las dimensiones de la imagen; por eso una calidad 8 en WebP no equivale a una calidad 8 en ETC1S o UASTC.
Después de cambiar el tamaño, revisa las letras, los bordes con transparencia y los detalles finos de la superficie. Los mapas de normales requieren especial cuidado: pequeños cambios de valor pueden alterar el sombreado. Prueba la textura con la iluminación y el nivel de acercamiento de tu aplicación.
Comparación con una textura de 1024 × 1024
| Codificación y dimensiones | Tamaño del GLB (bytes) |
|---|---|
| PNG original, 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 ejemplo usa nuestra malla ondulada CC0 con un PNG generado con degradados y ruido, codificado mediante gltfpack nativo 1.3. Todas las filas utilizan compresión Meshopt, 8.192 triángulos y calidad 8 cuando hay conversión. Los tamaños corresponden al GLB completo, no solo a la textura. La tabla mide bytes, no calidad visual ni memoria de GPU.
Compara la textura en la misma superficie
Estos primeros planos usan la misma malla, cámara, iluminación y configuración de materiales. Muestran los archivos reales de la tabla renderizados con Three.js 0.180.0. La textura generada contiene degradados y ruido fino, por lo que sirve para revisar esos detalles, pero no representa letras, transparencias ni mapas de normales.
En estas imágenes, ETC1S suaviza parte del ruido fino de la superficie rosa, mientras que UASTC conserva mejor su aspecto moteado. La versión WebP de dimensiones reducidas a la mitad difumina de forma más evidente las pequeñas variaciones. Compara esta observación con la tabla de tamaños: conservar esos detalles tiene un coste distinto con cada codificación.
Abre las imágenes a tamaño completo y compara las pequeñas variaciones de color y los detalles de la superficie. La página reduce las vistas previas, lo que puede ocultar diferencias. Estas imágenes son referencias visuales obtenidas con un navegador y una GPU concretos; no constituyen una puntuación de calidad ni garantizan un renderizado idéntico en todos los dispositivos.
Ejemplo: reducir las dimensiones a la mitad y exportar WebP
gltfpack -i input.glb -o output.glb -cc -tw -tq 8 -tj 1 -ts 0.5 -kn -km -keEn la interfaz, selecciona «Archivo más pequeño», elige WebP, abre los ajustes avanzados y establece la escala de textura en 50%. Mantén el tamaño máximo sin cambios salvo que también necesites un límite en píxeles. Antes de usar el resultado, vuelve a abrirlo en el visor de destino.
Configurar la carga de KTX2 y Meshopt en Three.js →
Referencia del motor: gltfpack
Abrir el optimizador ↗