Formato glTF y GLB: El JPEG del 3D para Web, Videojuegos y Realidad Aumentada

¿Qué es glTF?

glTF — GL Transmission Format — es un estándar abierto libre de regalías para escenas y modelos 3D, desarrollado y mantenido por el Khronos Group (el mismo consorcio detrás de OpenGL, Vulkan, WebGL y OpenCL). Publicado por primera vez como versión 1.0 en 2015 y revisado significativamente en la versión 2.0 (2017), glTF está diseñado para ser el "JPEG del 3D" — un formato de ejecución compacto, eficiente y listo para GPU que permite distribuir contenido 3D a través de la web e incrustarlo en aplicaciones.

A diferencia de los formatos orientados a CAD (STEP, IFC) o los formatos orientados a aplicaciones de contenido digital (FBX, .blend de Blender), glTF está optimizado específicamente para el renderizado en tiempo real — las estructuras de datos dentro de un archivo glTF reflejan directamente lo que una GPU necesita, minimizando la sobrecarga de análisis entre la carga de un archivo y su visualización en un renderizador WebGL, Vulkan o Metal.

Dos Variantes de Archivo

GLB es el formato preferido para distribución — todo en un solo archivo, sin enlaces rotos, más fácil de servir desde un servidor web o incrustar en un correo electrónico.

Estructura JSON de glTF

Un archivo glTF es un documento JSON con arrays de nivel superior para cada tipo de componente:

{
  "asset": {
    "version": "2.0",
    "generator": "Blender 4.1.0 glTF 2.0 exporter"
  },
  "scene": 0,
  "scenes": [{"name": "Escena", "nodes": [0]}],
  "nodes": [
    {
      "name": "Cubo",
      "mesh": 0,
      "translation": [0.0, 0.0, 0.0],
      "rotation": [0.0, 0.0, 0.0, 1.0],
      "scale": [1.0, 1.0, 1.0]
    }
  ],
  "meshes": [...],
  "materials": [...],
  "textures": [...],
  "images": [...],
  "accessors": [...],
  "bufferViews": [...],
  "buffers": [{"uri": "escena.bin", "byteLength": 24576}]
}

Los accessors y bufferViews forman un sistema de vistas de array tipadas — especifican rangos de bytes exactos, tipos de componentes (FLOAT, UNSIGNED_SHORT, etc.) y formas de datos (VEC3, VEC4, MAT4) dentro del buffer binario, espejando cómo WebGL y Vulkan vinculan los datos de vértices directamente.

Materiales PBR: Renderizado Físicamente Basado

glTF 2.0 exige un modelo de material de rugosidad metálica PBR — el mismo modelo usado por Unreal Engine, Unity y los principales motores de juegos:

{
  "name": "MetalCobre",
  "pbrMetallicRoughness": {
    "baseColorFactor": [0.955, 0.638, 0.538, 1.0],
    "metallicFactor": 1.0,
    "roughnessFactor": 0.2,
    "baseColorTexture": {"index": 0},
    "metallicRoughnessTexture": {"index": 1}
  },
  "normalTexture": {"index": 2, "scale": 1.0},
  "occlusionTexture": {"index": 3, "strength": 1.0},
  "emissiveFactor": [0.0, 0.0, 0.0],
  "doubleSided": false,
  "alphaMode": "OPAQUE"
}

• metallicFactor (0=dieléctrico/plástico, 1=metal) y roughnessFactor (0=espejo, 1=mate)
• normalTexture — mapa de normales en espacio tangente para detalle de superficie sin geometría adicional
• occlusionTexture — oclusión ambiental pre-horneada

Animaciones y Esqueleto

glTF 2.0 admite animación esquelética completa con interpolación por fotogramas clave. Los modos de interpolación incluyen: LINEAR (esférica para rotaciones), STEP (cambio instantáneo) y CUBICSPLINE (curvas Hermite suaves con tangentes).

Los objetivos de morfología (blend shapes) permiten animación facial. El esqueleto usa un sistema de articulaciones y pesos donde cada vértice puede tener influencia de hasta 4 huesos simultáneamente.

Compresión Draco

La extensión KHR_draco_mesh_compression usa la biblioteca Draco de Google para la compresión de geometría. Funciona en dos pasos: (1) cuantización — las posiciones de los vértices se codifican como enteros dentro del cuadro delimitador de la malla; (2) codificación de conectividad — la lista de índices de triángulos se comprime usando el algoritmo edge-breaker. Las proporciones de compresión típicas son 5–15× respecto al binario glTF sin comprimir.

Uso de glTF en JavaScript (Three.js)

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/');

const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);

loader.load('personaje.glb', (gltf) => {
  escena.add(gltf.scene);

  // Reproducir animación
  const mixer = new THREE.AnimationMixer(gltf.scene);
  const accion = mixer.clipAction(gltf.animations[0]);
  accion.play();
});

glTF vs OBJ vs FBX

Casos de Uso en RA y Tiempo Real

• Apple AR Quick Look: iOS/iPadOS muestra .usdz de forma nativa; convierte GLB a USDZ vía Reality Converter de Xcode
• Google model-viewer: <model-viewer src="modelo.glb" ar> — una etiqueta HTML para incrustar un modelo 3D con modo AR en Android
• Meta Quest / WebXR: glTF 2.0 es el formato principal de grafo de escena para experiencias WebXR
• Google Maps / Vista Inmersiva: activos de edificios 3D en glTF
• Sketchfab: la plataforma dominante de compartición de modelos 3D usa glTF como formato de intercambio principal

Exportación desde Blender

Archivo → Exportar → glTF 2.0 (.glb/.gltf). Configuraciones clave: Formato → GLB (binario, archivo único). Los materiales del BSDF Principled de Blender se mapean directamente a la rugosidad metálica de glTF. Activa Draco para archivos más pequeños. Para RA, mantén el número de polígonos bajo (menos de 100.000 triángulos), hornea todas las texturas a dimensiones potencia de 2 y usa compresión de textura KTX2 si tu destino lo admite.

Conversiones relacionadas

Lo más habitual al trabajar con imágenes son estas direcciones de conversión:

• JPG a WEBP
• PNG a JPG
• HEIC a JPG
• PNG a WEBP
• TIFF a PNG
• RAW a JPG