Exportar modelos de Blender 5.2 a la web con glTF/GLB

Un modelo de 60 MB en FBX puede acabar ocupando menos de 2 MB como glTF optimizado, y esa es la diferencia entre una web 3D que carga en segundos y una que nadie espera. Exportar modelos de Blender 5.2 a la web con glTF/GLB es el puente directo entre tu escena y el navegador.

Por qué glTF/GLB es el formato para la web

El estándar abierto de Khronos y su ecosistema

glTF (GL Transmission Format) es el estándar abierto de Khronos para transmitir y cargar modelos 3D en aplicaciones web y nativas: reduce el tamaño de los archivos y el procesado que necesita el motor para desempacarlos y renderizarlos. Es el formato que recomienda la documentación de three.js y el que entienden de serie Babylon.js, Godot y la mayoría de visores. Si tu destino es el navegador, glTF gana a OBJ y FBX en peso y en soporte de materiales PBR.

GLB frente a glTF + bin + texturas: cuándo elegir cada uno

El exportador ofrece tres formatos de salida. El glTF Binary (.glb) empaqueta malla, texturas y animaciones en un único archivo, la opción habitual para la web por portabilidad y menos peticiones. El glTF Separate genera un JSON que referencia un .bin y texturas sueltas, ideal para depurar o para pipelines que versionan cada asset. El glTF Embedded incrusta todo en un .gltf y sirve para compartir prototipos. Para una página web, el .glb es casi siempre la elección correcta.

Preparar la escena en Blender 5.2 antes de exportar

Escala real en metros y aplicar transformaciones con Ctrl+A

El estándar glTF trabaja con metros como unidad, así que modelar a escala real evita sorpresas al combinar modelos o iluminar en el motor. Antes de exportar, selecciona cada objeto y aplica las transformaciones con Ctrl+A (Rotation & Scale): una escala sin aplicar se traduce en normales y bounding boxes incorrectos en el navegador. Es el paso que más problemas fantasma resuelve.

De Z-up a Y-up: cómo gestiona la conversión de ejes el exportador

Blender trabaja con el eje Z hacia arriba y glTF define Y-up con -Z hacia delante; el exportador aplica la conversión automáticamente. Si el modelo aparece tumbado en three.js, el problema suele estar en transformaciones sin aplicar o en un armature con rest pose extraño, no en el exportador.

Nombrar objetos y limpiar la escena

Los nombres de los objetos pasan al archivo exportado y son los que verás en el inspector del visor, así que nómbralos de forma descriptiva. Además, purga en el panel de Orphan Data (Data y Mesh) lo que no uses: cada objeto olvidado infla el archivo final.

El exportador glTF 2.0 de Blender 5.2

File > Export > glTF 2.0 y el panel de opciones

Blender 5.2 trae el addon de glTF 2.0 activado por defecto: basta con File > Export > glTF 2.0. El panel de opciones decide el formato (GLB o Separate), qué incluir y cómo tratar las mallas. Si el addon no apareciera, se reactiva en Preferences > Add-ons buscando glTF.

Mallas: modifiers, UVs, normales y tangentes

En la sección Mesh puedes elegir si exportar los modifiers aplicados, incluir UVs, normales y tangentes, y limitar las influencias de huesos por vértice. Para un resultado predecible, aplica los modifiers definitivos antes de exportar y mantén normales y tangentes activadas.

Incluir cámaras y luces con KHR_lights_punctual

El exportador puede incluir cámaras y convertir las luces de Blender en luces puntuales, de área y direccionales gracias a la extensión KHR_lights_punctual. No esperes un portado fotográfico de Cycles: sirve para escenas en tiempo real que necesitan una base lumínica coherente al cargar.

Materiales y texturas compatibles

PBR Metal/Rough: qué nodos se exportan y cuáles se ignoran

El exportador construye el material glTF a partir de los nodos que reconoce, y el punto de partida es el Principled BSDF con el modelo Metal/Rough: base color, roughness, metallic, normal map, occlusion y emissive se exportan directos. Los node groups complejos, los shaders de mezcla exóticos o los nodos de volumen se simplifican o se ignoran: si un material depende de trucos de nodos, hornéalo a texturas antes de exportar.

Extensiones: KHR_materials_unlit, emissive_strength y texture_transform

El addon soporta extensiones que amplían el core. KHR_materials_unlit convierte materiales shadeless (útil para low-poly o UI en 3D), KHR_materials_emissive_strength permite intensidades de emisión superiores a uno y KHR_texture_transform exporta desplazamientos y rotaciones de textura. Los visores modernos las entienden; los muy antiguos pueden ignorarlas.

Empaquetar y comprimir texturas: PNG, JPEG y WebP

Las texturas viajan dentro del .glb si están empaquetadas, y su resolución marca el peso final. Exporta a la resolución justa: 2K para hero shots, 1K o menos para assets secundarios. Elige PNG para mapas con alfa o de datos (normal, roughness) y JPEG o WebP para albedo sin transparencia. Una textura de 4K innecesaria pesa más que toda la geometría.

Animaciones y shape keys

Exportar NLA strips y sample animations

En la sección Animation puedes agrupar las acciones por NLA strips, de forma que cada strip sea una pista de animación independiente en el archivo. La opción de sample animations muestrea los keyframes a intervalos fijos, lo que suaviza curvas complejas y normaliza el resultado entre motores.

Bone influences y shape keys

El exportador respeta las influencias de huesos por vértice y exporta las shape keys como morph targets, la base de blendshapes faciales o deformaciones de personaje en el navegador. Mantén los nombres de las shape keys claros: los consumirás desde el código para controlar expresiones.

Comprimir para la web: Draco y compañía

Compresión Draco integrada en el exportador de Blender

En Geometry > Compression el exportador incluye Draco, un algoritmo de compresión de geometría que reduce drásticamente el peso de las mallas. Actívalo con una calidad de posición y normal equilibrada (10-14 es un buen punto de partida). El coste: el cargador necesita el decodificador Draco, que three.js sirve como worker descargable.

gltfpack y gltf-transform: optimización post-exportación

Después de exportar, herramientas como gltfpack (del proyecto meshoptimizer) y gltf-transform permiten afinar el resultado: reordenan buffers, eliminan datos redundantes, cuantifican atributos y aplican Meshopt. En casos documentados, un .glb de 60 MB bajó a un tercio con el Draco del exportador y hasta 1,8 MB (un 97 por ciento menos) tras una pasada adicional. Es el último empujón de peso antes de publicar.

Draco frente a Meshopt: cuándo usar cada decodificador

Draco comprime más en tamaño final y es la opción integrada en Blender; Meshopt (KHR_mesh_quantization) ofrece una descompresión más rápida en CPU a cambio de algo más de peso. Para juegos y configuradores con muchas mallas suele ganar Draco; para escenas que deben cargar al instante en móviles, Meshopt puede ser mejor. three.js soporta ambos de serie.

Cargar el modelo en three.js

GLTFLoader y DRACOLoader en unas pocas líneas

En three.js, cargar un .glb es cuestión de importar el cargador, registrar el decodificador Draco si lo usaste y lanzar la petición. El patrón mínimo queda así:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';

const draco = new DRACOLoader();
draco.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.7/');

const loader = new GLTFLoader();
loader.setDRACOLoader(draco);
loader.load('/models/personaje.glb', (gltf) => {
  scene.add(gltf.scene);
  mixer = new THREE.AnimationMixer(gltf.scene);
  gltf.animations.forEach((clip) => mixer.clipAction(clip).play());
});

El ejemplo completo: escena, cámara, luz y el .glb del personaje

Con el personaje estilizado de los tutoriales de escultura y retopología exportado como .glb, montar la escena es directo: una cámara en perspectiva, una luz direccional con sombras y el modelo al centro. Si exportaste las animaciones, el AnimationMixer las reproduce en bucle; si usaste Draco, el DRACOLoader se encarga del resto. En menos de cincuenta líneas tu personaje corre en el navegador.

Buenas prácticas de rendimiento

Draw calls: combinar mallas y usar instancing

Cada objeto exportado como malla separada es un draw call más en el navegador. Combina en un solo objeto las piezas que comparten material y usa instancing para elementos repetidos (árboles, piedras, props). Un modelo con cientos de mallas sueltas carga lento aunque pese poco.

Presupuesto de texturas y memoria en el navegador

Las texturas se descomprimen en la GPU: una textura 4K ocupa unos 64 MB solo con el albedo. Haz un presupuesto por escena (por ejemplo, 100-200 MB en móvil) y repártelo entre albedo, normal y roughness. La regla simple: menos resolución en texturas secundarias y compresión donde no haga falta alfa.

Checklist final antes de publicar

Antes de subir el modelo, repasa: transformaciones aplicadas con Ctrl+A, escala real en metros, modifiers aplicados, texturas a la resolución justa, Draco activado con calidad equilibrada, animaciones muestreadas y nombres limpios. Prueba la carga en una conexión lenta y en un móvil. Si la escena pesa menos de 5 MB y carga en pocos segundos, está lista para producción.

Conclusión

Exportar modelos de Blender 5.2 a la web con glTF/GLB convierte tu trabajo de modelado en contenido que cualquier navegador puede mostrar: prepara la escena a escala real, configura el exportador para PBR y animaciones, comprime con Draco y carga el resultado con GLTFLoader en three.js. Es el mismo pipeline que usan portfolios, configuradores de producto y juegos web. Si quieres profundizar en la parte artística, revisa los tutoriales de UV mapping y materiales procedurales de este blog, y sigue leyendo para no perderte los próximos pasos del flujo 3D a web.