Visor y Compresor GLB — Abre, inspecciona y reduce .glb / .gltf online

Un visor GLB en el navegador decodifica el archivo dentro de la pestaña y lo dibuja con WebGL. Suelta un .glb o un .gltf en la página y el modelo aparece en pantalla en unos pocos cientos de milisegundos en un escritorio; no hay paso de subida, ni instalador, ni cuenta. Un GLB es un recurso glTF 2.0 empaquetado en un único archivo binario: una cabecera de 12 bytes, un chunk JSON que describe el grafo de escena y un chunk BIN que contiene los búferes de vértices, los búferes de índices y, normalmente, las imágenes incrustadas.

La misma página es el paso de inspección y reducción de un pipeline de juego. Abres la exportación, observas la malla de alambre, las normales, las islas UV y las ranuras de material, confirmas que nada se rompió al salir de Blender o Maya, y luego comprimes el archivo y descargas una copia para tu motor. Esta página cubre qué detecta cada vista de inspección, las tres palancas de compresión y el orden en que conviene aplicarlas, y los presupuestos dentro de los que realmente tiene que vivir una escena de navegador.

Abre un .glb Aquí Mismo

Arrastra un archivo a la zona de soltar o elige uno con el diálogo de archivos. La página lo lee a través de la File API como una Blob URL más un ArrayBuffer y lo analiza en la misma pestaña. Abre el panel de red del navegador mientras lo haces: ninguna petición transporta el modelo. Nada se pone en cola, nada se escribe en un servidor y cerrar la pestaña lo descarta.

Lo local importa por partida doble. Primero la privacidad: personajes sin publicar, trabajo de clientes bajo NDA, recursos escaneados que pagaste. Enviarlos a través de un conversor de terceros es un problema de licencias antes que un problema de rendimiento. Segundo la latencia: un GLB de 40 MB por una conexión de subida de 10 Mbps supone aproximadamente medio minuto de espera antes de que empiece siquiera cualquier conversión, y esa espera cambia la frecuencia con la que realmente compruebas un archivo. Una lectura local desde un SSD es una fracción de segundo, y el coste de análisis es trabajo de CPU en tu propia máquina.

Entrada aceptada: .glb es el caso de archivo único. .gltf es la misma escena como JSON, así que normalmente llega con un búfer .bin y una carpeta de imágenes. Selecciónalos múltiples, arrastra la carpeta completa o suelta un zip y el visor resuelve las URI relativas. Las URI de datos incrustados funcionan sin archivos auxiliares. Las texturas pueden ser PNG, JPEG, WebP o KTX2 (Basis Universal), y la geometría puede estar comprimida con Draco o meshopt, porque el visor incluye ambos decodificadores y lee la lista de extensiones del chunk JSON para decidir cuál usar.

Lo que renderiza: materiales PBR bajo una luz direccional más un mapa de entorno opcional, una cuadrícula de 1 m activable para que puedas leer la escala real, una lista de clips para cada animación del archivo y un panel de estadísticas con el recuento de triángulos, el recuento de vértices, el recuento de nodos, una estimación de las llamadas de dibujo y las dimensiones en píxeles y el tamaño en bytes de cada imagen incrustada. La memoria es el único límite duro. Un GLB de 100 MB normalmente se abre en un escritorio; una pestaña de móvil puede ser cerrada por el navegador antes de que termine de analizarlo.

La alternativa es un viaje de ida y vuelta: abrir el DCC, importar, mirar, exportar, cargar el motor, notar el problema, volver. Cada salto cuesta minutos y cada salto puede introducir su propio cambio, así que acabas depurando el pipeline en lugar del recurso. Mantener la inspección en la misma pestaña donde ya vive el archivo elimina el viaje de ida y vuelta y, más útil aún, significa que los números que lees son los números del archivo que estás a punto de enviar.

Inspección: malla de alambre, normales, trazado UV, materiales

Cuatro vistas detectan la mayoría de las exportaciones defectuosas antes de que lleguen al motor. La malla de alambre muestra la densidad de triángulos y revela dónde trianguló el exportador un n-gon. Las normales muestran la orientación de las caras, de modo que una superficie del revés se ve negra bajo una única luz direccional. El trazado UV aplana el canal UV sobre una cuadrícula con la textura detrás, lo que hace evidentes las islas superpuestas, los téxeles estirados y la geometría fuera del rango de 0 a 1. Materiales enumera cada material con sus texturas, su modo alfa, su indicador de doble cara y su configuración de espacio de color.

Inspecciona antes de comprimir, siempre. Draco y meshopt reescriben los búferes de vértices y cambian el diseño de los vértices, y cambiar el tamaño de una textura puede ocultar una costura que ya estaba ahí. Si comprimes primero, dejas de poder distinguir si un artefacto es tuyo o del compresor.

El panel de estadísticas forma parte de la inspección. Anota el recuento de triángulos, el de vértices, el de nodos, el de materiales y las dimensiones de cada imagen incrustada antes de tocar nada. Esos son los números de referencia con los que comparas después de cada paso de compresión, y te dicen qué palanca merece realmente la pena accionar.

Comprime un GLB sin romperlo

Tres palancas, y no son equivalentes. Descartar datos que nada referencia es gratis y reversible reexportando. Recodificar las texturas elimina la mayor parte de los bytes en un recurso típico, porque las imágenes dominan el archivo. La compresión de geometría es la que puede romper un modelo, así que va al final.

Ninguna de ellas tiene una ratio garantizada. Un GLB que es un único PNG de 4096 por 4096 no se comporta en absoluto como un GLB que es mayormente datos de vértices, y una escena con mucha malla y 30 texturas de 512 no responderá igual que un solo personaje con un único atlas 4K. Mide después de cada paso en lugar de fiarte de un número del recurso de otra persona.

Los decodificadores son una restricción de publicación, no un detalle. Draco necesita un módulo decodificador de Draco, meshopt necesita MeshoptDecoder y KTX2 necesita un transcodificador con los formatos de destino correctos. three.js incluye GLTFLoader, pero tienes que conectar tú mismo DRACOLoader, MeshoptDecoder y KTX2Loader; Babylon.js y glTFast de Unity tienen equivalentes. Si comprimes con una extensión que tu runtime no conoce, el modelo carga en negro o lanza un error, y parecerá una corrupción del archivo en lugar de un error de configuración.

GLB vs glTF vs FBX — Cuál quiere tu motor

glTF 2.0 es el formato de runtime. GLB y .gltf son dos contenedores para los mismos datos: GLB coloca el JSON y el búfer binario en un único archivo, y .gltf los mantiene separados como texto legible más archivos auxiliares. FBX es un formato de intercambio de DCC anterior a glTF y sigue siendo el que entregan la mayoría de riggers y animadores, y OBJ es solo geometría, sin animación y sin materiales PBR en absoluto.

Las convenciones de ejes y unidades causan más errores de importación que el tamaño del archivo. glTF usa metros, Y hacia arriba, diestro, con las cámaras mirando hacia -Z. Los exportadores de FBX no se ponen de acuerdo sobre las unidades, y una discrepancia entre centímetros y metros se manifiesta como un modelo unas 100 veces demasiado pequeño o demasiado grande. El exportador glTF de Blender convierte Z-up a Y-up por ti; desactívalo y el modelo llegará tumbado de lado. Comprueba el cuadro delimitador en el visor contra una dimensión conocida antes de culpar al motor.

Optimiza para la web: llamadas de dibujo, tamaño de textura, presupuesto de polígonos

Considera estos valores puntos de partida que ajustas según el proyecto, no límites. Una escena de navegador que mantiene una tasa de fotogramas estable en un portátil de gama media suele estar por debajo de unos cientos de miles de triángulos y, mucho más importante, por debajo de unos cientos de llamadas de dibujo. El instancing y la fusión de materiales mueven el primer número; nada mueve el segundo salvo combinar geometría.

Las llamadas de dibujo se cuentan por malla y por material. Doscientos props que llevan cada uno su propio material cuestan doscientas llamadas aunque cada uno tenga solo unos cientos de triángulos, y el coste de CPU de enviarlos puede superar el coste de GPU de la geometría. Fusiona la geometría estática que comparte un material, agrupa texturas pequeñas en un solo atlas y aplica instancing a los props repetidos. Los materiales transparentes cuestan más de lo que sugiere su recuento de triángulos porque se ordenan y se mezclan píxel a píxel, y la proyección de sombras vuelve a renderizar la misma geometría en un mapa de profundidad.

El tamaño de las texturas suele dominar tanto el archivo como la VRAM, que es la parte que la gente entiende al revés. Una textura RGBA8 de 4096 por 4096 ocupa 67.108.864 bytes en memoria antes de los mipmaps, y los mipmaps añaden aproximadamente un tercio más; una malla de 100k triángulos con posiciones, normales y UV de 4 bytes es de unos pocos megabytes en comparación. Un solo mapa de normales 4K descuidado pesa más que toda la malla sobre la que se asienta. KTX2 mantiene la textura comprimida en la memoria de la GPU, lo que es un ahorro distinto del tamaño de archivo y a menudo el que importa en móvil.

El espacio de color pertenece a esta lista porque se equivoca con frecuencia. El color base y el emisivo son sRGB. Normales, metallicRoughness y oclusión son lineales. Si los intercambias, el material se ve desvaído o demasiado oscuro, y por mucho que ajustes la iluminación no se arregla porque los datos se interpretaron mal al cargar.

Inspecciona un modelo real antes de comprimir

Leer sobre topología no es lo mismo que rotarla. La Blender Model Gallery está incrustada en esta página en modo de malla de alambre, para que puedas girar una exportación real y ver los triángulos que el motor dibujará de verdad en lugar de los cuadriláteros limpios que vio el modelador.

Observa tres cosas mientras gira. Curvatura: allí donde los triángulos se agolpan es donde los añadió el exportador, y una pared plana de 20 triángulos junto a una esfera de 20.000 triángulos es normal. Costuras: un cambio de sombreado a lo largo de una arista significa que los vértices se dividieron ahí, lo cual es correcto en una costura UV y erróneo en una superficie lisa. Silueta: el contorno es lo que lee un jugador a distancia, y sobrevive a una pasada de decimación mucho mejor que el detalle interior.

Los mismos presupuestos se aplican a los recursos incluidos en Mini World y The Cyclops' Island, ambos de los cuales se ejecutan en una pestaña del navegador a través del 3D game builder. Un prop de 40k triángulos por sí solo está bien; cuarenta de ellos en una escena no, y la vista de malla de alambre es donde lo descubres antes de que lo haga la tasa de fotogramas.

Entra en el mundo al que pertenece

Un sprite es un personaje sin ningún sitio donde estar de pie. El último paso es el que nadie más ofrece: coger la hoja que acabas de crear y ponerla en un mundo por el que alguien pueda caminar: una pequeña isla, un planeta, una esquina de calle lluviosa. Todos los mundos de este sitio se crearon a partir de una descripción escrita y se publicaron como una página que puedes jugar.

FAQ