Compressão de textura GLB: KTX2 e WebP

A conversão de textura 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 do triângulo inalterada durante esta comparação para que o efeito das configurações de textura seja mais fácil de ver.

Escolha o formato que seu visualizador pode carregar

Saída de textura	Requisito de uso e carregamento
Formato original	Mantém a codificação existente. Útil como base de comparação.
WebP	Usa EXT_texture_webp. Verifique o suporte no visualizador de destino.
KTX2 / ETC1S	Uma codificação Basis Universal compacta. Requer suporte KHR_texture_basisu.
KTX2 / UASTC	Geralmente mantém mais detalhes de textura em um tamanho de arquivo maior. Ele usa o mesmo caminho de carregamento KTX2.

Dimensões e qualidade de codificação realizam trabalhos diferentes

Uma escala de textura 50% divide a largura e a altura pela metade, deixando um quarto dos pixels antes dos mipmaps. A configuração de tamanho máximo também limita as dimensões de saída. A qualidade da codificação controla o codec em vez das dimensões da imagem, portanto a qualidade 8 em WebP não é equivalente à qualidade 8 em ETC1S ou UASTC.

Inspecione as letras, as bordas alfa e os detalhes finos da superfície após o redimensionamento. Os mapas normais necessitam de cuidados especiais porque pequenas alterações de valor podem alterar o sombreamento. Teste a textura sob o nível de iluminação e zoom usado em seu aplicativo.

Uma comparação usando uma textura 1024 × 1024

Codificação e dimensões	Tamanho 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 acessório é nossa malha ondulada CC0 com um gradiente e ruído gerado PNG, codificado por gltfpack 1.3 nativo. Todas as linhas usam compactação Meshopt, 8.192 triângulos e qualidade 8 onde a conversão se aplica. Esses são tamanhos GLB completos, não tamanhos de textura isolados. A tabela mede bytes, não qualidade visual ou memória GPU.

Compare a textura na mesma superfície

Essas visualizações aproximadas usam as mesmas configurações de malha, câmera, iluminação e material. Eles renderizam os arquivos reais da tabela em Three.js 0.180.0. A textura gerada contém gradientes e ruído fino; é útil para inspecionar esses detalhes, mas não representa letras, transparências ou mapas normais.

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

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

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

Mesma superfície com textura WebP de metade do tamanho — WebP · 512 × 512

Nessas capturas, a versão ETC1S suaviza parte do ruído fino na superfície rosa, enquanto UASTC mantém mais sua aparência manchada. A versão WebP de meio tamanho desfoca as pequenas variações de forma mais visível. Compare esta observação com a tabela de tamanho de arquivo: preservar esses detalhes tem um custo diferente para cada codificação.

Abra as imagens em tamanho real e compare pequenas variações de cores e detalhes de superfície. A página da web reduz as visualizações, o que pode ocultar diferenças. Essas capturas de tela são referências visuais de um navegador e GPU, não um índice de qualidade ou uma garantia de renderização idêntica em todos os dispositivos.

Exemplo: reduzir pela metade as dimensões da textura 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 de textura para 50%. Deixe o tamanho máximo da textura inalterado, a menos que você também precise de um limite de pixels. Reabra o resultado no visualizador de destino antes de usá-lo.

Configure o carregamento KTX2 e Meshopt em Three.js →

Referência do motor: gltfpack

Abra o otimizador ↗