Ferramentas e comparativos · 2026-06-03 · 9 min

Como Visualizar IFC no Navegador com three.js, web-ifc e Fragments

Carregar um IFC em uma cena three.js parece simples até o primeiro modelo de 200 MB travar a aba por dois minutos. O truque que as bibliotecas ensinam é: não faça o parsing do IFC em tempo de execução. Veja como web-ifc, Fragments e um pipeline de conversão única realmente se encaixam.

Como Visualizar IFC no Navegador com three.js, web-ifc e Fragments — IFC Viewer Online article cover

Renderizar IFC na web é um problema resolvido — mas só se você seguir o padrão em torno do qual as bibliotecas foram construídas. Desenvolvedores que tentam a abordagem ingênua (carregar o .ifc, fazer o parsing, construir as malhas, toda vez) esbarram em uma parede no primeiro modelo real: a aba trava por um minuto ou mais enquanto o WebAssembly mastiga o arquivo. A solução não é um parser mais rápido; é fazer o parsing uma única vez e nunca mais.

A Pilha de Tecnologias

web-ifc

O núcleo em WebAssembly (da That Open) que lê e grava IFC em velocidade quase nativa no navegador ou no Node. A base sobre a qual tudo o resto se apoia.

Fragments

O formato de geometria otimizado da That Open. Você converte IFC → Fragments uma vez; carregar o .frag depois disso é dramaticamente mais rápido do que refazer o parsing do IFC.

three.js

O renderizador WebGL que desenha a cena. Os Fragments produzem geometria compatível com three.js, que você adiciona a uma cena, câmera e controles como qualquer outra malha.

A Abordagem Ingênua (e por que Ela Dói)

import * as WebIFC from "web-ifc";

const api = new WebIFC.IfcAPI();
await api.Init();

// Parsing the raw IFC at runtime — fine for tiny files, painful for real ones
const data = new Uint8Array(await file.arrayBuffer());
const modelID = api.OpenModel(data);
// ...extract geometry, build meshes... (slow, blocks the main thread)

O Padrão de Produção: Converter Uma Vez, Carregar Muitas Vezes

Converta o IFC para Fragments uma única vez (no upload, em um worker ou em uma etapa de build).
Persista a saída .frag — em cache, no OPFS ou em um object storage.
Em todo carregamento seguinte, busque os Fragments e renderize — sem nenhum parsing de IFC envolvido.
Rode o trabalho pesado em um Web Worker para que a thread principal continue responsiva.

import * as OBC from "@thatopen/components";

const components = new OBC.Components();
const fragments = components.get(OBC.FragmentsManager);
const ifcLoader = components.get(OBC.IfcLoader);
await ifcLoader.setup();

// First time only: IFC → Fragments
const model = await ifcLoader.load(ifcBytes);

// Serialize once, reuse forever
const frag = fragments.export(model.group);
await saveToCache(frag);          // OPFS / IndexedDB / server

// Subsequent loads: skip IFC entirely
const cached = await loadFromCache();
fragments.load(cached);            // fast

Armadilhas Comuns

"memory access out of bounds": o WASM do web-ifc ficou sem memória em um arquivo grande — converta em um worker, aumente a memória disponível ou processe em blocos.
Geometria longe da origem treme: modelos criados em coordenadas geográficas reais perdem precisão de ponto flutuante; reposicione para uma origem local. (Veja "As Coordenadas do IFC Estão Erradas".)
Sem renderização no servidor: o web-ifc roda no navegador/Node, não como uma etapa de SSR sem JS — planeje para o lado do cliente ou uma conversão em tempo de build, não SSR a cada requisição.
Otimização de carregamento: divida em tiles e faça culling de modelos grandes para desenhar só o que está perto da câmera. (Veja "Por que Arquivos IFC Grandes Travam seu Navegador".)

Ou Não Construa Isso

É exatamente esse o pipeline que este visualizador roda: web-ifc para o parsing, uma etapa de conversão única no estilo Fragments, cache em OPFS para que carregamentos repetidos sejam ~10× mais rápidos, e validação por cima. Se o seu objetivo é visualizar e verificar IFCs, e não construir um visualizador, você pode pular toda a engenharia e simplesmente abrir o arquivo.

Veja o Pipeline em Ação

Um modelo IFC4 de tamanho real de produção, carregado exatamente com esse pipeline de conversão única e cache. Abra, depois recarregue — o segundo carregamento é quase instantâneo.

IFC4 · 14 MB

Abrir o visualizador IFC interativo

Incorpore em sua Própria Página

Se você hospedar seu IFC em algum lugar público (um bucket com CORS habilitado, um link direto de repositório ou o seu CDE), pode inserir exatamente este visualizador em um post do blog, uma página de documentação ou um painel do CDE com um único iframe — sem nenhuma etapa de build. Cole uma URL abaixo, ajuste o layout e copie o trecho de código. O modelo é buscado no navegador do visitante, então nada é enviado para nós.

Monte seu Embed de IFC

Cole uma URL pública de IFC, escolha um layout e copie o iframe. A pré-visualização ao vivo se atualiza conforme você ajusta.

Abrir o IFC Viewer

Como Visualizar IFC no Navegador com three.js, web-ifc e Fragments