Skip to main content

πŸ“‹ Json Property

Introduction#

πŸ‘©β€πŸ« As you might know, IFC is a data schema and what we call as a '.ifc' file is a STEP-File that is widely used to exchange data for 3D objects. This STEP-File is in text format and is not designed as a database. Wanting to be fast reading a single text file is like wishing to go as fast as a car, but with a cycle.

🚧🚧🚧 While IFC.js is super efficient and it works well for medium IFC models, its not the most efficient especially for bigger models and thus you can't except high performance when making concatenated queries. There are ways to gain efficiency in this kind of queries: the easiest one is to generate a JSON with the properties and query that JSON instead.

πŸšΆβ€β™€οΈπŸšΆβ€β™€οΈπŸšΆβ€β™€οΈ Here, we will learn how to deal with this situation, so nothing can stop us, no matter how big the IFC model is! πŸ’ͺπŸ€–πŸ”₯

πŸ‘Ά Check out this wiki link for details on IFC file format

🎩 Thankfully IFC.js allows you to pre-process the properties and geometry of an IFC model and convert it to something much more efficient. Specifically, convert the properties to JSON and the geometry to GLB files. After this preprocessing, even big models will run like a charm on any browser. This will make loading and working with files faster and more efficient.

πŸš΄β€β™‚οΈ Enough theory. Lets see how to convert the properties to JSON.

How to do it#

Loading the file#

⚑⚑⚑ Let's start out by loading our IFC file. This is done through loadIfcUrl() method

async function init() {
await viewer.IFC.setWasmPath(wasmPath);
const model = await viewer.IFC.loadIfcUrl(url);
}

Serializing all properties#

πŸ€” Next, we take all the properties of the model and serialize them, that means, we will create a JSON file with all the properties. The idea beind this is to take properties from JSON instead of IFC directly. This way, you will be able to get the properties an order of magnitude much faster and is super efficient.

πŸš€ IFC.js makes it super easy with the built in serializeAllProperties() method. This method serializes all the properties of an IFC (exluding the geometry) into an array of Blobs.

const properties = await viewer.IFC.properties.serializeAllProperties(model);

🍰 Working with JSON is also more convenient as you can put the JSON file into a database like MongoDB.

Downloading JSON file#

Now that we have serialized all the properties and generated the JSON file, let's go ahead and download this file πŸ’Ύ. We can then use this downloaded JSON file for our super efficient IFC model.

πŸ‘‡ In the code below we are creating a link that downloads the JSON file when we open the page

const file = new File(properties, 'properties');
const link = document.createElement('a');
document.body.appendChild(link);
link.href = URL.createObjectURL(file);
link.download = 'properties.json';
link.click();
link.remove();

Github code#

😎 Check out the generated JSON file and the implementation of the code in the Github page

Result#

πŸŽ‰πŸŽ‰πŸŽ‰ Congratulations! You now have all the properties from the IFC file in a much efficient JSON format πŸ‘“. If you open this file with Visual Studio Code and format it, you will see that this is all the data from the IFC, but in JSON format.