Babylon IFC Loader - Load, Render and Export .ifc Files

Demos and projects
1

Hello friends,

I am glad to introduce Babylon IFC Viewer, which allows to load IFC files from URLs or via drag-and-drop, with automatic metadata extraction and 3D rendering.

One may export displayed IFC models to GLB with the help of the Inspector tools.

  • Babylon.js - Fully working 3D scene with camera controls
  • web-ifc - Initialized with proper WASM loading
  • IFC Loader - Unified loading function for URLs and File objects
  • Metadata Extraction - Project info, buildings, units, and property sets
  • Material Merging - Intelligent mesh merging to reduce draw calls (needs further optiimization)
  • Transparency Handling - Proper rendering of transparent materials
  • Drag-and-Drop - Drop .ifc files onto the canvas to load them
  • Automatic Cleanup - Previous models are properly disposed when loading new files

Still at the current stage it is just the initial proof of concept.

Next possible steps:

  • Add element selection and highlighting
  • Add UI controls for metadata display
  • Implement property panel for selected elements
  • Implement filtering by IFC type
  • And more…

Feedback, suggestions and PRs are welcome!

10 Likes
Babylon 9.0 Release Video Community Contributions
2

That looks great!

1 Like
3

Nice. Do you have any suggestion about element selection and highlighting?

As lots of objects are merged to reduce draw calls, it lost the individual element ID. One of the method i can think about is to cache the original element face/vertex range to indexing back the original geometry. Not sure if there is any better ways.

Thank you for your great work.

1 Like
4

Thank you for your kind words!

At the moment individual elements are presented as submeshes (which is not good for draw calls but gives the access to those elements). It is possible also to use Face Index Mapping together with some other approaches as well to use the Object Tree from IFC.
Anyway, I’ll add different merging options during the further development.

5

The project evolves from a basic IFC file loader into a complete, interactive 3D viewer. Key improvements include:

  • Interactive Features: Added element picking, visual highlighting, and info banners

  • Smart Performance: Implemented context-aware mesh merging that preserves logical structure (by IFC Type)

image
image767×737 18.6 KB

There will be more improvements soon.

1 Like
6

Finally,

https://www.npmjs.com/package/babylon-ifc-loader

2 Likes
7

Excellent! Thanks for sharing!!

1 Like
8

The next step after the IFC Loader is a full-featured IFC Viewer.

1 Like
9

[2.0.0]

Exposed API Changes

  • RawIfcModel:

    • Removed storeyMap: Map<number, number>.

  • IfcInitOptions (used by loadIfcModel):

    • Added signal?: AbortSignal.

  • SceneBuildOptions (used by buildIfcModel):

    • Added usePBRMaterials?: boolean.

    • Added releaseRawPartsAfterBuild?: boolean (default is true).

Behavior Changes With API Impact

  • buildIfcModel now clears model.parts by default (releaseRawPartsAfterBuild=true) unless explicitly disabled.

  • Storey-based merge restrictions were removed; merge strategy is now element/material-group based.

4 Likes
10

With a much refined UI as well. :+1:

Is there anyway to trigger the Babylon inspector v1/v2 (e.g. FPS, drawcall etc.)?

I feel the performance is not very far from mesh merged by material, is there any optimisation considered in the viewer?

Many thanks for your nice project.

11

If you install IFC Loader locally, the Inspector is called with Ctrl+I.
I separated Loader repo from Viewer repo but they have the same demo site.
The Viewer has no Inspector at the moment but it will be added later.
Would be great if you could share some challenging IFC file to test.
I didn’t implement workers in Loader yet, but it is possible.
The current optimization is simple - all meshes and materials are frozen.
I was concentrated more on IFC tree UX.
Now I am going to deal with material UX and visualization.
I have in mind different possible merging/instancing approaches. At the moment meshes are merged by construction type and separated as in IFC tree, but of course it is possible to reduce draw calls further.

1 Like
12

I added some status info and material info panel.

image
image1909×942 99.8 KB

Will add more merging and optimization options soon.

2 Likes
13

Thanks.

You can take a look of the following IFC files.

I will share more once i test more non-sensitive IFC files.

They are not the normal ones (typical ones will be muti-GB size).

But it will depends on what scenarios the viewer targets to handle in the end.

image
image1104×1025 120 KB

2 Likes
14

Added worker and different merging options in new Loader version 2.2.1

https://www.npmjs.com/package/babylon-ifc-loader?activeTab=readme

It deals with large models much better now.
Only local benchmarking at the moment.
Will integrate updated Loader into Viewer soon.

1 Like
15

Seems much better now :slight_smile:

image
image1054×900 125 KB

2 Likes
16

The performance is much better. I will try out more samples.

There are some good viewer tools. Such as BIMVision is a quite popular one to take a look of their features.