Skip to main content

Introduction

๐ŸŽฎ IFC.js is a JavaScript library to load, display and edit IFC models in the browser. Try the live demo with your IFC model and discover the power of IFC.js.

What is this library?#

What is IFC?#

๐Ÿ  Architects no longer draw building plans one by one, but create 3D models of buildings, much like the houses modelled in The SIMS. This way of working is called BIM (Building Information Model), because the models created contain both geometry and information.

๐Ÿ”ฅ However, a building is so complex that there is no single application that can create these models in their entirety. Each application has a specific mission: modelling geometry, calculating structures, making energy simulations, creating project documents, and so on.

๐Ÿ‘€ These tools come from multiple developers around the world and each one works in its format. In other words, the structural model created by a structural calculation application cannot be read by energy simulation software and vice versa. So how is it possible to create a model of a building from multiple tools?

๐ŸŽ‰ The answer is IFC, a format created by BuildingSMART to contain these 3D models of buildings. It is open, so anyone can read and write it. Yay!

The problem of IFC#

Anyone who wants to make a BIM application needs to read and write IFC files to be able to import and export information from other tools. Unfortunately, IFC is a format that is difficult to read and write. There are thousands of pages of documentation and creating and maintaining a self-made IFC parser is a huge task.

Can you afford IFC?

๐Ÿ’ธ This is something only companies with several developers working full time on this could afford. It doesn't sound that open anymore, does it?

In case you are curious about how an IFC looks like inside, here you have an example. Imagine parsing hundreds of thousands of lines like these:

#6699= IFCCARTESIANPOINT((0.,-1.7053025E-13));
#6701= IFCAXIS2PLACEMENT2D(#6699,#23);
#6703= IFCCARTESIANPOINT((892.,-253.399999,150.));
#6705= IFCAXIS2PLACEMENT3D(#6703,#15,#19);
#6706= IFCEXTRUDEDAREASOLID(#6702,#6705,#19,506.8);
#6707= IFCCOLOURRGB($,0.50196,0.501913,0.501960);

๐Ÿ’€ Even if you are willing to create a parser from scratch and maintain it with every change in the IFC schema, there are several non-trivial questions to tackle this problem. How to manage memory in very large files? How to implement geometric generation efficiently? What to do when an IFC has not been defined correctly?

IFC.js to the rescue#

It wouldn't make sense for all developers to have to implement their own IFC file reader and writer for their applications. Especially when we all want the same thing: importing and exporting geometry and data.

IFC.js is a JavaScript library that makes it super easy to read and write IFC files.

This allows developers of architecture and construction applications to work in IFC effortlessly and focus on the functionalities that add value to their business.

IFC.js in a nutshell#

IFC.js has two focuses:

Geometry

IFC.js can generate 3D scenes because it is compatible with 3D libraries such as Three.js or Babylon.js. This means that you can create 3D BIM tools right away.

High-level access to all the properties associated with that geometry. This means easy access to data on the building components, their materials, thermal characteristics, structural strength, etc.

Creating BIM applications with IFC.js is as easy as creating a webpage with JavaScript, HTML and CSS.

import { IfcLoader } from 'web-ifc-three';
import { Scene } from 'three';
// Creates THREE.js scene
const scene = new Scene();
// ...
// Loads IFC and adds it to the scene
const ifcLoader = new IfcLoader();
ifcLoader.load(ifcURL, (geometry) => scene.add(geometry));

Who is this library for#

This library is for anyone who wants to develop BIM applications. This includes both developers creating applications for the construction industry and architects and other professionals who want to take advantage of the data in their IFC files.

To use this library it is necessary to have a basic knowledge of JavaScript, HTML and CSS. This knowledge is beyond the scope of this documentation. You'll also need to use some 3D libraries to display the geometry of the IFC (Three.js or Babylon.js).

๐Ÿ˜Š If you don't know where to start, we suggest you take a look here or just join the Discord Channel and say hi.

Why is IFC.js different?#

IFC.js is a library written by and for JavaScript, arguably one of the most ubiquitous languages. This means that it is compatible with web browsers, desktop and mobile applications. JavaScript is also one of the easiest languages to learn and allows you to build user interfaces with HTML and CSS. In other words, creating BIM applications with IFC.js is as easy as creating a web page.

Multiplatform#

You can use IFC.js to create open BIM applications for any platform:

Frontend web applications that read and write IFC files and display 3D without relying on server communication can be created using vanilla JavaScript or other tools such as React, Vue, Angular, Svelte, etc. That is, with IFC.js we can turn any web browser into an open BIM app.

Speed#

โšก๏ธ If you have experience with web applications, you might be thinking that the weak point of a JavaScript-based IFC library is performance. However, the core of the library is developed in C++ combined with WebAssembly and Emscripten. It is designed specifically for maximum performance, allowing IFC.js to approach the speed and performance of desktop applications while running directly in the browser.

Features#

๐Ÿ‘“ IFC.js can read IFC files seamlessly.

๐Ÿ Generate 3D geometry that runs on 60 fps in a browser.

๐ŸŽจ Easily edit geometry appearance with the power of Three.js.

๐Ÿ ๐Ÿ ๐Ÿ  Load multiple federated IFC models.

๐Ÿ“ƒ Retrieve IFC properties for reports and databases.

โœ IFC.js also can edit and write IFC files from scratch.

Source code#

IFC.js is a large, multi-language library (C++, TypeScript JavaScript, etc). Having it in a single repository would be difficult and unwieldy. For that reason, the library exists in multiple repositories, where each one has its purpose. You can find them here.

  • web-ifc
  • web-ifc-three
  • web-ifc-viewer

The core of the library: an IFC parser and geometry generator written from scratch in C++ and compiled via Emscripten to WebAssembly. This repository encapsulates the complexity of reading IFC files and loading their data into memory.

Contribute#

Do you want to help us keep improving the world of Open BIM development with IFC.js? The library is big, so you will have to choose where you want to participate.

I can't code, but I want to get in

That's great! There are tons of things you can do aside from coding. Get into the Discord channel to find out how.

Parsing, geometry and C++

If you are passionate about C++, WebAssembly, parsing or the nitty-gritty of IFC, you can help us with the fastest open source BIM parser in the industry: web-ifc.

Three.js, geometry and Typescript

If you are a Three.js developer, you can help us with web-ifc-three, which is the official Three.js IFC Loader.

BIM tools, brainstorming and UX

If you are interested in creating cool open BIM applications and you have great ideas for BIM tools or user interfaces, help us make web-ifc-viewer the best IFC viewer on the market.

In any case, we encourage you to stop by the Discord channel, say hello and tell us what's on your mind, so we can give you some guidance.