Outils & comparatifs · 2026-06-03 · 9 min

Comment visualiser un IFC dans le navigateur avec three.js, web-ifc et Fragments

Charger un IFC dans une scène three.js semble simple, jusqu'à ce que la première maquette de 200 Mo fige l'onglet pendant deux minutes. La leçon que donnent ces bibliothèques : n'analysez pas l'IFC à l'exécution. Voici comment web-ifc, Fragments et un pipeline de conversion unique s'articulent réellement.

Comment visualiser un IFC dans le navigateur avec three.js, web-ifc et Fragments — IFC Viewer Online article cover

Le rendu de l'IFC sur le web est un problème résolu — mais uniquement si l'on suit le schéma autour duquel les bibliothèques sont construites. Les développeurs qui tentent l'approche naïve (charger le .ifc, l'analyser, construire les maillages, à chaque fois) se heurtent à un mur dès la première maquette réelle : l'onglet se fige pendant une minute ou plus pendant que WebAssembly digère le fichier. La solution n'est pas un analyseur plus rapide ; c'est d'analyser une seule fois, et plus jamais ensuite.

La pile technique

web-ifc

Le cœur WebAssembly (de That Open) qui lit et écrit l'IFC à une vitesse quasi native dans le navigateur ou sous Node. La fondation sur laquelle tout le reste repose.

Fragments

Le format de géométrie optimisé de That Open. Vous convertissez IFC → Fragments une seule fois ; charger ensuite le .frag est nettement plus rapide que réanalyser l'IFC.

three.js

Le moteur de rendu WebGL qui dessine la scène. Fragments produit une géométrie compatible three.js que vous ajoutez à une scène, une caméra et des contrôles comme n'importe quel autre maillage.

L'approche naïve (et pourquoi elle fait mal)

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)

Le schéma de production : convertir une fois, charger plusieurs fois

Convertissez l'IFC en Fragments une seule fois (à l'envoi, dans un worker ou lors d'une étape de build).
Conservez le fichier .frag produit — en cache, dans l'OPFS ou dans un stockage d'objets.
À chaque chargement suivant, récupérez les Fragments et affichez-les — sans aucune analyse de l'IFC.
Exécutez le travail lourd dans un Web Worker pour que le thread principal reste réactif.

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

Pièges courants

« memory access out of bounds » : le WASM de web-ifc a manqué de mémoire sur un gros fichier — convertissez dans un worker, augmentez la mémoire disponible, ou traitez par blocs.
Géométrie éloignée de l'origine qui tremble : les maquettes créées en coordonnées géographiques réelles perdent en précision en virgule flottante ; recalez-les sur une origine locale. (Voir « Les coordonnées IFC sont incorrectes ».)
Pas de rendu côté serveur : web-ifc s'exécute dans le navigateur ou sous Node, pas comme une étape SSR sans JS — prévoyez une conversion côté client ou au moment du build, pas un SSR au moment de la requête.
Optimisation du chargement : découpez en tuiles et éliminez ce qui n'est pas visible sur les grandes maquettes, pour ne dessiner que ce qui est proche de la caméra. (Voir « Pourquoi les gros fichiers IFC font planter votre navigateur ».)

Ou ne le construisez pas

C'est exactement le pipeline que fait tourner cette visionneuse : web-ifc pour l'analyse, une étape de conversion unique façon Fragments, une mise en cache OPFS qui rend les chargements répétés environ 10 fois plus rapides, et une validation par-dessus. Si votre objectif est de visualiser et de contrôler des IFC plutôt que de construire une visionneuse, vous pouvez vous passer de toute cette ingénierie et simplement ouvrir le fichier.

Voir le pipeline en action

Une maquette IFC4 de taille réelle chargée avec exactement ce pipeline de conversion unique et de mise en cache. Ouvrez-la, puis rechargez-la : le second chargement est quasi instantané.

IFC4 · 14 MB

Ouvrir la visionneuse IFC interactive

L'intégrer dans votre propre page

Si vous hébergez votre IFC quelque part en accès public (un bucket avec CORS activé, un lien brut vers un dépôt, ou votre CDE), vous pouvez déposer exactement cette visionneuse dans un article de blog, une page de documentation ou un panneau de CDE, avec une simple iframe — sans aucune étape de build. Collez une URL ci-dessous, ajustez la mise en page et copiez l'extrait de code. La maquette est récupérée dans le navigateur du visiteur : rien ne nous est envoyé.

Créez votre intégration IFC

Collez une URL IFC publique, choisissez une mise en page et copiez l'iframe. L'aperçu en direct se met à jour au fur et à mesure.

Ouvrir IFC Viewer

Comment visualiser un IFC dans le navigateur avec three.js, web-ifc et Fragments