glTF y GLB: El Formato 3D Diseñado para la Web

glTF y GLB: El Formato 3D Diseñado para la Web

Si alguna vez has intentado mostrar un modelo 3D en un sitio web, habrás descubierto rápidamente que los formatos que los diseñadores usan a diario — OBJ, FBX, COLLADA — nunca fueron diseñados pensando en la web. Son demasiado grandes, demasiado complejos o están protegidos por especificaciones propietarias. glTF (GL Transmission Format) fue creado específicamente para resolver este problema y se ha convertido en el estándar de facto para 3D en tiempo real en la web, en realidad aumentada y en motores de juego. Esta guía explica todo lo que necesitas saber.

El "JPEG del 3D"

El Khronos Group — el mismo consorcio detrás de OpenGL y Vulkan — publicó glTF 2.0 en junio de 2017. Los diseñadores del formato lo denominaron el "JPEG del 3D": igual que JPEG facilitó la incrustación de fotografías en páginas web, glTF facilita la incrustación de modelos 3D interactivos. Los objetivos fueron explícitos:

• Compacto — minimizar el tamaño del archivo para una transferencia rápida por la red.
• Rápido de cargar — diseño de datos listo para GPU para que el navegador pueda renderizar sin un preprocesamiento costoso.
• Abierto — especificación completamente documentada y libre de regalías.
• Completo — geometría, materiales, animación y skinning en un único asset.

¿Por qué necesitaba la web un nuevo formato? OBJ es de texto y enorme para mallas complejas; no tiene un estándar de material o animación. FBX es propietario (de Autodesk), sin especificación abierta y repleto de datos heredados. COLLADA (DAE) fue el intento previo de Khronos — basado en XML, legible por humanos, pero tan complejo que las implementaciones varían enormemente entre exportadores e importadores.

glTF vs GLB: Múltiples Archivos vs Archivo Único

Un asset glTF puede presentarse en dos formas:

glTF (JSON + archivos externos)

• model.gltf — un archivo de texto JSON que describe el grafo de escena, materiales y animaciones.
• model.bin — un buffer binario con los datos de vértices (posiciones, normales, UVs, índices).
• Imágenes de textura (PNG/JPEG) — referenciadas por ruta desde el JSON.

GLB (GL Binary)

• Un único archivo .glb que agrupa el JSON, el buffer binario y todas las texturas en un contenedor.
• Utiliza un sencillo envoltorio binario: una cabecera de 12 bytes, seguida de un fragmento JSON y un fragmento binario.
• GLB es preferible para la distribución — no hay problemas de archivos faltantes, es más fácil de subir y funciona como un asset de arrastrar y soltar.

Estructura JSON: Cómo glTF Describe una Escena

El JSON de glTF está organizado en arrays de nivel superior:

• scenes / scene — Qué nodos forman la raíz de la escena.
• nodes — Un árbol de transformaciones (traslación, rotación, escala). Cada nodo puede referenciar una malla, una cámara o una luz.
• meshes — Cada malla contiene uno o más primitivos (llamadas de dibujo), cada uno referenciando accesores para datos de posición/normal/UV y un material.
• accessors / bufferViews / buffers — La capa de datos tipados. Un accesor describe cómo leer un fragmento de un buffer binario (p. ej., 1000 valores VEC3 FLOAT para posiciones de vértices).
• materials — Utiliza el modelo PBR metallic-roughness (ver más abajo).
• textures / images / samplers — Definiciones de texturas y sus ajustes de filtrado/envolvimiento.
• animations — Datos de fotogramas clave para transformaciones de nodos o pesos de morph targets.
• skins — Datos esqueléticos (jerarquía de articulaciones + matrices de vinculación inversa) para animación de personajes.

Materiales PBR Metallic-Roughness

glTF 2.0 estandarizó el modelo de material de renderizado basado en física (PBR) metallic-roughness, que se corresponde directamente con cómo las GPU modernas renderizan materiales. Cada material puede tener:

Este sistema de cinco texturas está soportado por todos los motores de juego principales (Unity, Unreal, Godot) y los renderizadores en tiempo real, haciendo que los assets glTF sean altamente portables.

Animación: Esquelética y Morph Targets

glTF admite dos enfoques de animación:

• Animación esquelética — Una malla skin es deformada por una jerarquía de articulaciones (huesos). Los pesos de articulación se almacenan por vértice en los accesores. Se logra una animación de personajes suave con hasta 4 influencias de articulación por vértice.
• Morph targets (blend shapes) — Posiciones de vértice alternativas almacenadas como deltas desde la malla base. Se usan para expresiones faciales, simulación de tela y animación controlada por shape keys.

Las animaciones pueden reproducirse individualmente o mezclarse en tiempo de ejecución por la aplicación.

Extensiones: Desbloqueando Funciones Extra

El sistema de extensiones de glTF permite a los proveedores añadir capacidades sin romper la especificación principal. Las extensiones más importantes:

Cuando exportas desde Blender con la compresión Draco habilitada, el GLB resultante es típicamente 6–10 veces más pequeño que el equivalente sin comprimir.

glTF en Navegadores: model-viewer, Three.js, Babylon.js, A-Frame

Los navegadores no muestran glTF de forma nativa (a 2025), pero el ecosistema web tiene soluciones maduras:

• <model-viewer> — Un web component mantenido por Google. Añade <model-viewer src="model.glb"> a tu HTML y obtienes un visor 3D completamente interactivo con soporte AR. No requiere JavaScript para el uso básico.
• Three.js — La biblioteca WebGL más popular; tiene un GLTFLoader integrado. Ofrece control programático completo sobre la escena, la iluminación y la animación.
• Babylon.js — Motor WebGL respaldado por Microsoft; excelente soporte de glTF incluyendo todas las extensiones principales.
• A-Frame — El framework VR basado en HTML de Mozilla; admite glTF mediante <a-gltf-model>.

glTF en AR/VR

• WebXR — La API del navegador para realidad aumentada y virtual. Three.js y Babylon.js admiten WebXR + glTF para experiencias AR/VR en el navegador.
• Apple Reality Composer / Reality Converter — Las herramientas de Apple importan glTF/GLB y los convierten a USDZ para iOS AR Quick Look.
• Android SceneViewer — El visor AR integrado de Google en Android 10+ abre archivos GLB directamente desde un enlace del navegador usando el esquema intent://, sin necesidad de instalar ninguna aplicación.

Conversión desde OBJ, FBX y COLLADA a glTF

Blender 4.x es la herramienta gratuita recomendada para todas las conversiones:

1. Importa tu archivo fuente (Archivo → Importar → OBJ / FBX / Collada).
2. Comprueba la configuración de materiales en el Editor de Shaders — asegúrate de que las texturas estén conectadas al nodo Principled BSDF.
3. Archivo → Exportar → glTF 2.0.
4. En el diálogo de exportación: elige GLB para un único archivo, activa la compresión de malla Draco en Geometría y activa las texturas KTX2 en Imágenes para máxima compresión.

Alternativas en línea: KaijuConverter, el pipeline de carga de Sketchfab (convierte y aloja) y gltf-pipeline (herramienta CLI de Node.js de Cesium).

Optimización del Tamaño de Archivo

Validación

Antes de desplegar un asset glTF, pásalo por el Khronos glTF Validator (disponible en línea en validator.khronos.org o como extensión de VS Code). Comprueba violaciones de la especificación, texturas faltantes, datos de accesor inválidos y problemas de compatibilidad de extensiones, reportando errores y advertencias con rutas JSON precisas.

Resumen

glTF 2.0 y su contraparte binaria GLB han logrado exactamente lo que Khronos se propuso: un formato 3D compacto, listo para GPU y completamente abierto que funciona en todos lados — navegadores, motores de juego, plataformas AR/VR y visores de productos de comercio electrónico. Con el excelente soporte de exportación de Blender, la compresión Draco y el web component <model-viewer>, ofrecer 3D interactivo en la web nunca ha sido tan accesible.

Conversiones relacionadas

Conversiones frecuentes del catálogo:

• JPG a PNG
• MP4 a MP3
• PDF a DOCX
• PNG a JPG
• MP3 a WAV
• DOCX a PDF