Compressão de texturas GLB: KTX2 e WebP

A conversão de texturas altera as imagens incorporadas em um GLB. Nesta ferramenta, escolha KTX2 ou WebP para habilitar os controles de qualidade, escala e tamanho máximo. Mantenha a retenção de triângulos constante durante a comparação para observar melhor o efeito das configurações de textura.

Escolha um formato que seu visualizador consiga carregar

Saída de textura	Uso e requisito de carregamento
Formato original	Mantém a codificação existente. Útil como referência para comparação.
WebP	Usa EXT_texture_webp. Verifique o suporte no visualizador de destino.
KTX2 / ETC1S	Uma codificação compacta do Basis Universal. Requer suporte a KHR_texture_basisu.
KTX2 / UASTC	Em geral, preserva mais detalhes da textura em um arquivo maior. Usa o mesmo processo de carregamento KTX2.

Dimensões e qualidade de codificação têm funções diferentes

Uma escala de textura de 50% reduz a largura e a altura à metade, mantendo um quarto dos pixels antes dos mipmaps. O tamanho máximo também limita as dimensões da saída. A qualidade de codificação controla o codec, não as dimensões da imagem; por isso, qualidade 8 em WebP não equivale a qualidade 8 em ETC1S ou UASTC.

Após redimensionar, inspecione letras, bordas com transparência e detalhes finos da superfície. Mapas normais exigem cuidado especial, pois pequenas mudanças nos valores podem alterar o sombreamento. Teste a textura com a iluminação e o nível de zoom usados na aplicação.

Comparação com uma textura de 1024 × 1024

Codificação e dimensões	Tamanho do 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

Esta amostra usa nossa malha ondulada CC0 com um PNG gerado de gradiente e ruído, codificado pelo gltfpack nativo 1.3. Todas as linhas usam compressão Meshopt, 8.192 triângulos e qualidade 8 quando há conversão. Os tamanhos são dos GLBs completos, não apenas das texturas. A tabela mede bytes, não qualidade visual nem memória da GPU.

Compare a textura na mesma superfície

Estas vistas aproximadas usam a mesma malha, câmera, iluminação e configurações de material. Elas renderizam os arquivos reais da tabela no Three.js 0.180.0. A textura gerada contém gradientes e ruído fino; serve para examinar esses detalhes, mas não representa letras, transparência ou mapas normais.

Vista aproximada da textura PNG original na malha ondulada — PNG original · 1024 × 1024

Mesma superfície com compressão de textura ETC1S — ETC1S · 1024 × 1024

Mesma superfície com compressão de textura UASTC — UASTC · 1024 × 1024

Mesma superfície com textura WebP reduzida à metade — WebP · 512 × 512

Nestas capturas, a versão ETC1S suaviza parte do ruído fino da superfície rosa, enquanto UASTC preserva melhor sua aparência pontilhada. O WebP com dimensões reduzidas à metade desfoca mais visivelmente as pequenas variações. Compare essa observação com a tabela de tamanhos: preservar esses detalhes tem um custo diferente em cada codificação.

Abra as imagens no tamanho original e compare pequenas variações de cor e detalhes da superfície. A página reduz as prévias, o que pode esconder diferenças. Estas capturas são referências visuais de um navegador e uma GPU, não uma nota de qualidade nem uma garantia de renderização idêntica em todos os dispositivos.

Exemplo: reduzir as dimensões da textura à metade e exportar WebP

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

Na interface, selecione Arquivo menor, escolha WebP, abra Configurações avançadas e defina Escala das texturas em 50%. Mantenha Tamanho máximo das texturas como está, a menos que também precise de um limite em pixels. Antes de usar o resultado, abra-o no visualizador de destino.

Configure o carregamento de KTX2 e Meshopt no Three.js →

Referência do mecanismo: gltfpack

Abrir o otimizador ↗