Como levar um modelo BIM desenvolvido no Revit para um navegador web?

Na ATBIM, partimos do modelo BIM desenvolvido no Revit do nosso próprio escritório, preparamo-lo no Blender, trabalhamos com GLB (glTF 2.0 binário), aplicamos um processo específico de otimização e, por fim, utilizamos Three.js para visualizá-lo de forma interativa diretamente no navegador.

O fluxo geral é:

Revit → Blender → GLB → Otimização → Three.js → Web

O desafio não consistia simplesmente em exibir um modelo 3D online. Um modelo criado para trabalhar dentro de um ambiente BIM tem necessidades muito diferentes das de um modelo que precisa ser baixado, renderizado e permitir interação diretamente em um navegador.

Por isso, transformar nosso modelo BIM na base de um gêmeo digital exigiu adaptar cada uma dessas etapas.

Do modelo BIM ao navegador: o processo passo a passo

1. O ponto de partida: nosso modelo BIM no Revit

O escritório virtual nasce a partir de um modelo BIM desenvolvido no Revit, com a arquitetura e as instalações modeladas como disciplinas distintas.

Paredes, pisos, mobiliário, painéis, montantes, dutos, isolamentos e equipamentos de climatização fazem parte do modelo original.

E aqui aparece uma das características mais interessantes de todo o processo: essa origem BIM continua sendo reconhecível quando o modelo chega à web.

O arquivo GLB de arquitetura conserva 710 nós cujos nomes são provenientes do Revit, incluindo informações como categoria, família, tipo e ElementId.

Por exemplo, dentro do arquivo posteriormente utilizado pelo visualizador, ainda podemos encontrar elementos identificados como:

• Wall, para as paredes.
• Floor, para os pisos.
• FamilyInstance, para mobiliário e outros elementos.
• Panel e Mullion, para componentes da parede cortina.

Até mesmo uma mesa de reuniões conserva seu ElementId 194305.

Isso significa que transformar o modelo para levá-lo à web não elimina completamente a estrutura proveniente do Revit.

2. Preparação do modelo no Blender

A próxima etapa do processo passa pelo Blender.

Aqui foram incorporados determinados elementos visuais que originalmente não faziam parte do modelo BIM. Um exemplo são as estações de trabalho com dois monitores e seus materiais emissivos, responsáveis por fazer com que as telas apareçam acesas dentro do visualizador.

3. Do Blender para GLB

Depois de preparado o modelo, o formato utilizado para levá-lo ao ambiente web é o GLB, a representação binária do padrão glTF 2.0.

Arquitetura e instalações também são mantidas como modelos independentes.

O modelo de arquitetura conserva elementos como paredes, pisos, painéis, montantes e famílias, enquanto o modelo MEP mantém dutos, isolamento, peças especiais e equipamentos de climatização provenientes do Revit.

Essa separação nos permite trabalhar posteriormente com ambas as disciplinas de forma independente dentro do visualizador.

4. Por que não basta exportar o modelo?

Aqui aparece um dos principais desafios do projeto.

Um modelo BIM não foi originalmente projetado para ser executado dentro de um navegador.

No Revit, o principal objetivo é trabalhar com informações, geometria e disciplinas BIM. Na web, surgem outras prioridades: tamanho do download, geometrias, texturas, memória gráfica e desempenho.

Por isso, o modelo não é simplesmente publicado depois de ser exportado.

Os GLBs passam por um processo de otimização desenvolvido especificamente para o projeto antes de chegarem ao usuário. O sistema utiliza glTF-Transform, Draco e Sharp, entre outras tecnologias, para trabalhar com geometrias e texturas.

Em outras palavras, não estamos apenas alterando o formato de um arquivo.

Estamos adaptando um modelo criado para trabalhar em um ambiente BIM às necessidades de uma experiência 3D executada na web.

E é aqui que encontramos alguns dos desafios técnicos mais interessantes de todo o desenvolvimento.

Modelo BIM vs. modelo preparado para web

A diferença fica mais clara ao observar o que cada ambiente necessita.

Um modelo BIM é orientado para:

• Projeto e gerenciamento do empreendimento.
• Informações BIM estruturadas.
• Arquitetura e instalações.
• Famílias e elementos construtivos.
• Trabalho dentro de softwares especializados como o Revit.

Um modelo 3D preparado para web é orientado para:

• Carregamento a partir de um navegador.
• Redução do tamanho do download.
• Controle do consumo de memória gráfica.
• Otimização de geometrias e texturas.
• Renderização em tempo real.
• Interação a partir de computador, tablet ou celular.

O objetivo, portanto, é encontrar um equilíbrio: adaptar o modelo ao navegador sem perder completamente a continuidade com sua origem BIM.

5. Three.js: levando finalmente o modelo ao navegador

Depois de preparar e otimizar os GLBs, chega a última etapa desta primeira parte do processo: renderizá-los na web.

Nosso visualizador está desenvolvido em um site construído com Astro e utiliza Three.js como motor 3D.

Three.js permite gerenciar os elementos necessários para transformar os arquivos 3D em uma experiência interativa: cena, câmera, iluminação, sombras, controles e carregamento dos modelos.

Além disso, os GLBs começam a ser baixados a partir do <head> da página antes mesmo que o visualizador seja inicializado. Quando o Three.js está pronto para utilizá-los, os dados já estão sendo baixados ou já estão disponíveis, evitando iniciar uma segunda requisição para obter o mesmo modelo.

O resultado é a base sobre a qual construímos nosso gêmeo digital:

um modelo BIM do nosso escritório transformado em um espaço 3D acessível diretamente pelo navegador.

A continuidade BIM: o que torna o processo especialmente interessante

Uma das ideias que melhor resume esta primeira etapa do projeto é a continuidade BIM.

Depois de passar por diferentes ferramentas, formatos e processos de otimização, ainda podemos encontrar, dentro do arquivo utilizado pelo navegador, informações provenientes do Revit.

A parede continua sendo reconhecível como uma parede.

O piso mantém sua tipologia.

Os elementos da parede cortina continuam diferenciados.

E a mesa de reuniões continua conservando seu ElementId.

O relatório técnico do projeto destaca justamente essa continuidade como um dos aspectos mais interessantes do desenvolvimento: a cadeia BIM não é completamente interrompida ao chegar à web.

Isso abre a possibilidade de construir sobre o modelo muito mais do que uma simples visualização 3D.

O que conseguimos com esse processo?

O resultado desta primeira fase é uma cadeia tecnológica relativamente simples de representar:

Mas fazer com que essa última etapa funcione corretamente, especialmente em dispositivos com recursos limitados, levanta uma segunda questão:

Como conseguimos fazer com que um modelo BIM complexo funcione de forma fluida em um navegador e também em um celular?

A resposta está relacionada a texturas, Draco, WebP, geometrias, sombras e, principalmente, a um recurso que inicialmente nos causou mais problemas do que o próprio tamanho dos arquivos: a memória da GPU.

Esse será o tema da segunda parte desta série.

Perguntas frequentes sobre como levar um modelo BIM para a web

É possível visualizar um modelo do Revit diretamente em um navegador?

Não da mesma forma como se trabalha com ele dentro do Revit. No nosso caso, o modelo passa por um processo de preparação, exportação para GLB e otimização antes de ser carregado e renderizado por meio do Three.js.

Qual formato utilizamos para levar o modelo BIM para a web?

Utilizamos GLB, a representação binária do padrão glTF 2.0. Os 23 modelos analisados também utilizam compressão Draco em suas malhas.

O modelo perde todas as informações provenientes do Revit?

Não. Os GLBs conservam, nos nomes de diversos nós, informações provenientes do Revit, como categorias, famílias, tipos e ElementId. O modelo de arquitetura conserva 710 nós com essa estrutura.

Qual é o papel do Three.js no gêmeo digital?

Three.js é o motor 3D utilizado para construir a experiência no navegador. Ele gerencia a renderização dos modelos, câmeras, controles, iluminação, sombras e outros componentes das cenas 3D.

Mais novidades em nosso segundo blog sobre como criamos o gêmeo digital do nosso escritório.