¿Cómo se lleva un modelo BIM desarrollado en Revit hasta un navegador web?

En ATBIM partimos del modelo BIM desarrollado en Revit de nuestra propia oficina, lo preparamos en Blender, trabajamos con GLB (glTF 2.0 binario), aplicamos un proceso específico de optimización y finalmente utilizamos Three.js para visualizarlo de forma interactiva desde el navegador.

El flujo general es:

Revit → Blender → GLB → Optimización → Three.js → Web

El reto no consistía simplemente en mostrar un modelo 3D online. Un modelo creado para trabajar dentro de un entorno BIM tiene unas necesidades muy diferentes a las de un modelo que debe descargarse, renderizarse y permitir interacción directamente desde un navegador.

Por eso, convertir nuestro modelo BIM en la base de un gemelo digital requirió adaptar cada una de esas etapas.

Del modelo BIM al navegador: el proceso paso a paso

1. El punto de partida: nuestro modelo BIM en Revit

La oficina virtual nace a partir de un modelo BIM desarrollado en Revit, con la arquitectura y las instalaciones modeladas como disciplinas diferenciadas.

Muros, suelos, mobiliario, paneles, montantes, conductos, aislamientos o equipos de climatización forman parte del modelo original.

Y aquí aparece una de las características más interesantes de todo el proceso: esa procedencia BIM sigue siendo reconocible cuando el modelo llega a la web.

El archivo GLB de arquitectura conserva 710 nodos cuyos nombres proceden de Revit, incluyendo información como categoría, familia, tipo y ElementId.

Por ejemplo, dentro del archivo que posteriormente utiliza el visor podemos seguir encontrando elementos identificados como:

• Wall, para los muros.
• Floor, para los suelos.
• FamilyInstance, para mobiliario y otros elementos.
• Panel y Mullion, para componentes del muro cortina.

Incluso una mesa de reuniones conserva su ElementId 194305.

Esto significa que transformar el modelo para llevarlo a la web no elimina completamente la estructura procedente de Revit.

2. Preparación del modelo en Blender

El siguiente paso del proceso pasa por Blender.

Aquí se incorporaron determinados elementos visuales que no procedían originalmente del modelo BIM. Un ejemplo son los puestos de trabajo con doble monitor y sus materiales emisivos, responsables de que las pantallas aparezcan encendidas dentro del visor.

3. De Blender a GLB

Una vez preparado el modelo, el formato utilizado para llevarlo al entorno web es GLB, la representación binaria del estándar glTF 2.0.

Arquitectura e instalaciones se mantienen además como modelos independientes.

El modelo de arquitectura conserva elementos como muros, suelos, paneles, montantes y familias, mientras que el modelo MEP mantiene conductos, aislamiento, piezas especiales y equipos de climatización procedentes de Revit.

Esta separación nos permite trabajar posteriormente con ambas disciplinas de forma independiente dentro del visor.

4. ¿Por qué no basta con exportar el modelo?

Aquí aparece uno de los principales retos del proyecto.

Un modelo BIM no está diseñado originalmente para ejecutarse dentro de un navegador.

En Revit, el objetivo principal es trabajar con información, geometría y disciplinas BIM. En la web aparecen otras prioridades: tamaño de descarga, geometrías, texturas, memoria gráfica y rendimiento.

Por eso el modelo no se publica simplemente después de exportarlo.

Los GLB pasan por un proceso de optimización desarrollado específicamente para el proyecto antes de llegar al usuario. El sistema utiliza glTF-Transform, Draco y Sharp, entre otras tecnologías, para trabajar sobre geometrías y texturas.

En otras palabras, no estamos cambiando únicamente el formato de un archivo.

Estamos adaptando un modelo creado para trabajar en un entorno BIM a las necesidades de una experiencia 3D ejecutada desde la web.

Y aquí encontramos algunos de los retos técnicos más interesantes de todo el desarrollo.

Modelo BIM vs. modelo preparado para web

La diferencia se entiende mejor observando qué necesita cada entorno.

Un modelo BIM está orientado a:

• Diseño y gestión del proyecto.
• Información BIM estructurada.
• Arquitectura e instalaciones.
• Familias y elementos constructivos.
• Trabajo dentro de software especializado como Revit.

Un modelo 3D preparado para web está orientado a:

• Carga desde un navegador.
• Reducción del peso de descarga.
• Control del consumo de memoria gráfica.
• Optimización de geometrías y texturas.
• Renderizado en tiempo real.
• Interacción desde ordenador, tablet o móvil.

El objetivo, por tanto, es encontrar un equilibrio: adaptar el modelo al navegador sin perder por completo la continuidad con su origen BIM.

5. Three.js: llevar finalmente el modelo al navegador

Después de preparar y optimizar los GLB llega el último paso de esta primera parte del proceso: renderizarlos en la web.

Nuestro visor está desarrollado sobre un sitio web construido con Astro y utiliza Three.js como motor 3D.

Three.js permite gestionar los elementos necesarios para convertir los archivos 3D en una experiencia interactiva: escena, cámara, iluminación, sombras, controles y carga de los modelos.

Además, los GLB empiezan a descargarse desde el <head> de la página antes de que el propio visor se inicialice. Cuando Three.js está preparado para utilizarlos, los datos ya se están descargando o están disponibles, evitando iniciar una segunda petición para obtener el mismo modelo.

El resultado es la base sobre la que construimos nuestro gemelo digital:

un modelo BIM de nuestra oficina convertido en un espacio 3D accesible directamente desde el navegador.

La continuidad BIM: lo que hace especialmente interesante el proceso

Una de las ideas que mejor resume esta primera etapa del proyecto es la continuidad BIM.

Después de pasar por diferentes herramientas, formatos y procesos de optimización, dentro del archivo que utiliza el navegador todavía podemos encontrar información procedente de Revit.

La pared sigue siendo reconocible como un muro.

El suelo mantiene su tipología.

Los elementos del muro cortina siguen diferenciados.

Y la mesa de reuniones continúa conservando su ElementId.

El informe técnico del proyecto destaca precisamente esta continuidad como uno de los aspectos más interesantes del desarrollo: la cadena BIM no se rompe completamente al llegar a la web.

Esto abre la puerta a construir sobre el modelo mucho más que una simple visualización 3D.

¿Qué conseguimos con este proceso?

El resultado de esta primera fase es una cadena tecnológica relativamente sencilla de representar:

Pero conseguir que ese último paso funcione correctamente, especialmente en dispositivos con recursos limitados, plantea una segunda pregunta:

¿Cómo conseguimos que un modelo BIM complejo funcione de forma fluida en un navegador y también en un móvil?

La respuesta tiene que ver con texturas, Draco, WebP, geometrías, sombras y, sobre todo, con un recurso que inicialmente nos dio más problemas que el propio peso de los archivos: la memoria de la GPU.

Ese será el tema de la segunda parte de esta serie.

Preguntas frecuentes sobre llevar un modelo BIM a la web

¿Se puede visualizar un modelo de Revit directamente en un navegador?

No de la misma forma que se trabaja con él dentro de Revit. En nuestro caso, el modelo pasa por un proceso de preparación, exportación a GLB y optimización antes de ser cargado y renderizado mediante Three.js.

¿Qué formato utilizamos para llevar el modelo BIM a la web?

Utilizamos GLB, la representación binaria del estándar glTF 2.0. Los 23 modelos analizados utilizan además compresión Draco para sus mallas.

¿El modelo pierde toda la información procedente de Revit?

No. Los GLB conservan en los nombres de numerosos nodos información procedente de Revit, como categorías, familias, tipos y ElementId. El modelo de arquitectura conserva 710 nodos con esta estructura.

¿Qué papel tiene Three.js en el gemelo digital?

Three.js es el motor 3D utilizado para construir la experiencia en el navegador. Gestiona el renderizado de los modelos, las cámaras, controles, iluminación, sombras y otros componentes de las escenas 3D.

Más novedades en nuestro segundo blog sobre cómo creamos el gemelo digital de nuestra oficina .