Visualizador e Compressor GLB — Abra, Inspecione e Reduza .glb / .gltf Online

Um visualizador GLB no navegador decodifica o arquivo dentro da aba e o desenha com WebGL. Solte um .glb ou .gltf na página e o modelo aparece na tela em algumas centenas de milissegundos em um desktop; não há etapa de upload, nem instalador, nem conta. Um GLB é um asset glTF 2.0 empacotado em um único arquivo binário: um cabeçalho de 12 bytes, um chunk JSON que descreve o grafo de cena e um chunk BIN que guarda os buffers de vértices, os buffers de índices e, normalmente, as imagens embutidas.

A mesma página é a etapa de inspeção e redução de um pipeline de jogo. Você abre a exportação, observa o wireframe, as normais, as ilhas de UV e os slots de material, confirma que nada quebrou na saída do Blender ou do Maya, depois comprime o arquivo e baixa uma cópia para a sua engine. Esta página cobre o que cada visualização de inspeção detecta, as três alavancas de compressão e a ordem para acioná-las, e os orçamentos dentro dos quais uma cena de navegador realmente precisa viver.

Abra um .glb bem aqui

Arraste um arquivo para a zona de soltar ou escolha um na caixa de diálogo de arquivos. A página o lê por meio da File API como um Blob URL mais um ArrayBuffer e o analisa na mesma aba. Abra o painel de rede do navegador enquanto faz isso: nenhuma requisição carrega o modelo. Nada é colocado em fila, nada é gravado em um servidor e fechar a aba o descarta.

O local importa duas vezes. Primeiro a privacidade: personagens não lançados, trabalhos de clientes sob NDA, assets escaneados que você pagou. Enviá-los por um conversor de terceiros é um problema de licenciamento antes de ser um problema de desempenho. Segundo a latência: um GLB de 40 MB por uma conexão de upload de 10 Mbps dá cerca de meio minuto de espera antes mesmo de qualquer conversão começar, e essa espera muda a frequência com que você de fato verifica um arquivo. Uma leitura local em um SSD é uma fração de segundo, e o custo de análise é trabalho de CPU na sua própria máquina.

Entrada aceita: .glb é o caso de arquivo único. .gltf é a mesma cena em JSON, então normalmente chega com um buffer .bin e uma pasta de imagens. Selecione vários, arraste a pasta inteira ou solte um zip e o visualizador resolve as URIs relativas. Data URIs embutidas funcionam sem sidecars. As texturas podem ser PNG, JPEG, WebP ou KTX2 (Basis Universal), e a geometria pode estar comprimida com Draco ou meshopt, porque o visualizador traz ambos os decodificadores e lê a lista de extensões no chunk JSON para decidir qual usar.

O que ele renderiza: materiais PBR sob uma luz direcional mais um mapa de ambiente opcional, uma grade de 1 m que pode ser ativada para você ler a escala real, uma lista de clipes para cada animação do arquivo e um painel de estatísticas com contagem de triângulos, contagem de vértices, contagem de nós, uma estimativa de draw calls e as dimensões em pixels e o tamanho em bytes de cada imagem embutida. A memória é o único limite rígido. Um GLB de 100 MB normalmente abre em um desktop; uma aba de celular pode ser encerrada pelo navegador antes de terminar a análise.

A alternativa é uma ida e volta: abrir o DCC, importar, olhar, exportar, carregar a engine, perceber o problema, voltar. Cada salto custa minutos e cada salto pode introduzir sua própria alteração, então você acaba depurando o pipeline em vez do asset. Manter a inspeção na mesma aba onde o arquivo já está elimina a ida e volta e, mais útil ainda, significa que os números que você lê são os números do arquivo que você está prestes a enviar.

Inspecione: wireframe, normais, layout de UV, materiais

Quatro visualizações detectam a maioria das exportações ruins antes que cheguem à engine. O wireframe mostra a densidade de triângulos e revela onde o exportador triangulou um n-gon. As normais mostram a orientação das faces, então uma superfície invertida aparece preta sob uma única luz direcional. O layout de UV achata o canal de UV em uma grade com a textura ao fundo, o que torna óbvias as ilhas sobrepostas, os texels esticados e a geometria fora do intervalo de 0 a 1. Materiais lista cada material com suas texturas, modo alfa, flag de faces duplas e configurações de espaço de cor.

Inspecione antes de comprimir, sempre. Draco e meshopt reescrevem os buffers de vértices e alteram o layout dos vértices, e redimensionar uma textura pode esconder uma emenda que já estava lá. Se você comprimir primeiro, deixa de conseguir dizer se um artefato é seu ou do compressor.

O painel de estatísticas faz parte da inspeção. Anote a contagem de triângulos, a contagem de vértices, a contagem de nós, a contagem de materiais e as dimensões de cada imagem embutida antes de mexer em qualquer coisa. Esses são os números de referência com que você compara após cada etapa de compressão, e eles dizem qual alavanca realmente vale a pena puxar.

Comprima um GLB sem quebrá-lo

Três alavancas, e elas não são iguais. Descartar dados que nada referencia é gratuito e reversível reexportando. Recodificar texturas remove a maior parte dos bytes em um asset típico, porque as imagens dominam o arquivo. A compressão de geometria é a que pode quebrar um modelo, então ela vem por último.

Nenhuma delas tem uma taxa garantida. Um GLB que é um único PNG de 4096 por 4096 não se comporta nada como um GLB que é majoritariamente dados de vértices, e uma cena pesada em malha com 30 texturas em 512 não responderá da mesma forma que um único personagem com um atlas 4K. Meça após cada etapa em vez de confiar em um número do asset de outra pessoa.

Os decodificadores são uma restrição de entrega, não um detalhe. Draco precisa de um módulo decodificador Draco, meshopt precisa do MeshoptDecoder, e KTX2 precisa de um transcodificador com os formatos de destino corretos. O three.js traz o GLTFLoader, mas você mesmo precisa conectar o DRACOLoader, o MeshoptDecoder e o KTX2Loader; Babylon.js e o glTFast da Unity têm equivalentes. Se você comprimir com uma extensão que seu runtime não conhece, o modelo carrega preto ou lança um erro, e vai parecer uma corrupção de arquivo em vez de um erro de configuração.

GLB vs glTF vs FBX — qual deles a sua engine quer

glTF 2.0 é o formato de runtime. GLB e .gltf são dois contêineres para os mesmos dados: o GLB coloca o JSON e o buffer binário em um único arquivo, o .gltf os mantém separados como texto legível mais sidecars. FBX é um formato de intercâmbio de DCC que é anterior ao glTF e ainda é o que a maioria dos riggers e animadores entrega, e OBJ é só geometria, sem animação e sem materiais PBR.

Convenções de eixo e unidade causam mais bugs de importação do que o tamanho do arquivo. O glTF é metros, Y para cima, destro, com câmeras olhando para -Z. Os exportadores FBX discordam sobre unidades, e uma incompatibilidade entre centímetros e metros aparece como um modelo cerca de 100 vezes pequeno ou grande demais. O exportador glTF do Blender converte Z-up para Y-up para você; desative isso e o modelo chega deitado de lado. Confira a bounding box no visualizador contra uma dimensão conhecida antes de culpar a engine.

Otimize para a web: draw calls, tamanho de textura, orçamento de polígonos

Trate esses valores como pontos de partida que você ajusta por projeto, não como limites. Uma cena de navegador que mantém uma taxa de quadros estável em um laptop intermediário costuma ficar abaixo de algumas centenas de milhares de triângulos e, muito mais importante, abaixo de algumas centenas de draw calls. Instancing e mesclagem de materiais mexem no primeiro número; nada mexe no segundo exceto combinar geometria.

As draw calls são contadas por malha por material. Duzentos props que cada um carrega seu próprio material custam duzentos draws mesmo que cada um tenha apenas algumas centenas de triângulos, e o custo de CPU para submetê-los pode exceder o custo de GPU da geometria. Mescle geometria estática que compartilha um material, junte texturas pequenas em uma única imagem e use instancing para props repetidos. Materiais transparentes custam mais do que sua contagem de triângulos sugere porque se ordenam e se misturam por pixel, e a projeção de sombras re-renderiza a mesma geometria em um mapa de profundidade.

O tamanho da textura geralmente domina tanto o arquivo quanto a VRAM, que é a parte que as pessoas entendem ao contrário. Uma textura RGBA8 de 4096 por 4096 ocupa 67.108.864 bytes na memória antes dos mipmaps, e os mipmaps adicionam cerca de um terço em cima; uma malha de 100k triângulos com posições, normais e UVs de 4 bytes é alguns megabytes em comparação. Um único mapa de normal 4K descuidado pesa mais do que toda a malha sobre a qual ele está. O KTX2 mantém a textura comprimida na memória da GPU, o que é uma economia diferente do tamanho do arquivo e muitas vezes a que importa no mobile.

O espaço de cor entra nesta lista porque é rotineiramente errado. Cor base e emissivo são sRGB. Normal, metallicRoughness e oclusão são lineares. Troque-os e o material fica ou lavado, ou escuro demais, e nenhum ajuste de iluminação corrige isso, porque os dados foram interpretados errado no momento do carregamento.

Inspecione um modelo real antes de comprimir

Ler sobre topologia não é o mesmo que girá-la. A Blender Model Gallery está embutida nesta página em modo wireframe, para que você possa girar uma exportação real e olhar os triângulos que a engine realmente vai desenhar, em vez dos quads limpos que o modelador viu.

Observe três coisas enquanto ele gira. Curvatura: onde os triângulos se aglomeram é onde o exportador os adicionou, e uma parede plana de 20 triângulos ao lado de uma esfera de 20.000 triângulos é normal. Emendas: uma mudança de sombreamento ao longo de uma aresta significa que os vértices foram divididos ali, o que é correto em uma emenda de UV e errado em uma superfície lisa. Silhueta: o contorno é o que o jogador lê à distância, e ele sobrevive a uma etapa de decimação muito melhor do que o detalhe interno.

Os mesmos orçamentos se aplicam aos assets enviados em Mini World e The Cyclops' Island, ambos rodando em uma aba de navegador por meio do 3D game builder. Um prop de 40k triângulos sozinho é aceitável; quarenta deles em uma cena não é, e a visualização de wireframe é onde você descobre isso antes que a taxa de quadros descubra.

Entre no mundo ao qual ele pertence

Um sprite é um personagem sem lugar para ficar. O último passo é o que ninguém mais oferece: pegue a folha que você acabou de montar e coloque-a em um mundo pelo qual alguém possa caminhar — uma pequena ilha, um planeta, uma esquina chuvosa. Cada mundo neste site foi feito a partir de uma descrição escrita e publicado como uma página que você pode jogar.

FAQ