IFC importer for threejs

[kdilayer]

I have written an ifc 2x3 importer for threejs. It is very experimental but most of the objects will render.

Is this something that can be included in the distribution ? My hope is that someone would develop it further and eventually also add support for ifc4

Example of imported ifc:

[kdilayer]

forgot to mention that it depends on ThreeCSG

[mrdoob]

Never heard of this format. Where is it usually used?

[kdilayer]

As far as I konw, It's used mainly in the construction business, building modeling. Supported by Autocad, Revit, Tekla and Solibri to mention a few.

[mrdoob]

I see I see!
What does it need ThreeCSG for?

[kdilayer]

For example; a Wall object (extruded shape in threejs) might have an opening. And the easiest solution I found was to use ThreeCSG. Also used in other cases like IfcBooleanResult.

Link to the IfcOpeningElement spec:
http://www.buildingsmart-tech.org/ifc/IFC2x3/TC1/html/ifcproductextension/lexical/ifcopeningelement.htm

[johnney88]

you can reference at
http://www.ifcquery.com

[fraguada]

@mrdoob , IFC stands for Industry Foundation Classes and is meant to be a standard exchange format for Building Information Model/Management (BIM) projects. Software packages typically related to this are Revit, ArchiCAD, VisualARQ, and quite few others. While I am generalizing, BIM software provides standard object types such as walls, slabs, roofs, stairs, windows, etc all driven by a family/style definition where the operator defines the parameters for the object. Therefore if I have a wall with a layer of CMU, Plasterboard, and Tile, I can define the thicknesses of all of the layers. I something changes, I change the family/style definition, and everything automagically updates! Reality is not so magical! It is a contentious format, as each software vendor is free to play around with the definition of what a wall may constitute in import/export http://buildingsmart.org/compliance/certified-software/.
It is a great format to support, and I thank @kdilayer for setting it up. @johnney88 is that viewer using threejs?

[johnney88]

Yes, The Viewer use Threejs.
The saved file 'ifcquery.min.js' is writed by Three.js, but it is encoded.

[rhairston]

I can confirm that ifc is used in ConSci. I actually used an ifc converter app to convert my companies files into .objs with .mtl files and they read really well. So taking out the middle man would be really helpful since our customers tend to upload ifc files anyway

[RicoLiu]

@rhairston An ifc converter app?It can convert ifc file into obj file so that Threejs can load it well.
Am I right?

here is an ifc converter app?

[mrdoob]

Thanks everyone for chiming in!

@kdilayer a PR would be great. Please, include ThreeCSG too 😊

[cmeeren]

Any progress here? We're currently converting IFC to DAE for use with three.js, and would love it if three.js supported IFC directly.

[remitache]

Hi kdilayer,

I am very interested into having a look and taking it further.

[Servuc]

Hi everybody,

I've seen that too https://www.npmjs.com/package/ifc-convert
With that you can convert IFC to DAE, OBJ, STP and IGS.

[AlexanderChen1989]

@kdilayer Any progress ?

[dslwz2008]

@kdilayer Any progress here? It will save a lot of things if three.js could support IFC format directly.

[RicoLiu]

@dslwz2008 #9860

[jean-noelp]

Nobody has any news ?

[kdilayer]

I tweaked the editor to supprt ifc files.
A few screenshots attached. I have worked on this for quite some time now... currently I have not seen any IFC 2x3 files that it cant render... largest file that I've tried is 180 MB...
Awesome.

[simplynail]

Hey, awesome work!
Can this be accessed directly from master branch or the tweaked code for IFC support sits somewhere else?

[jean-noelp]

Yer ! Awsome ! How can we have access to this loader code, please ? :o

[Mugen87]

I vote for a PR 😊 . THREE.IFCLoader would be a great contribution!

[swisx]

We would love this feature as well, for now, I'm converting IFC files to obj with https://github.com/IfcOpenShell/IfcOpenShell, but some more complicated geometries are still not parsed, so sometimes is the object, not 100% complete.

[CreggTheEgg]

Hi, I was wondering if you were able to get some of the complex things such as doors and transparencies with windows loading in your viewer and loader. It looks awesome so far! I'm curious if you planned on putting out any version of this in the near future.

Good luck!, Thanks for updating.

[Foosballfan]

Hi @kdilayer, could we please have access to your application?

I'm interested to see the file size difference between .ifc and three.js formats.

Thanks!

[jean-noelp]

@Foosballfan I think an IFC is not an interesting format for the size, since it's very verbose. It's just an exchange format for architecture software like AutoDesk.
It's a standard of BIM. (ask to google this term which is famous in this kind of profession)

[Foosballfan]

@jean-noelp Thanks for the reply.

I have an ifc file for a building which is 34MB and am trying to display this data on the web with the smallest possible download size.

With Unity WebGL I can get it down to about 11MB but would like to see whether it is possible with more pure WebGL using Three.js. Hopefully I can achieve an even smaller download size.

Do you have any experience with a similar situation?

[donmccurdy]

@Foosballfan to minimize file size, the steps I would try are:

1. convert to OBJ
2. run through obj-simplify
3. compress the OBJ with Draco
4. load with THREE.DRACOLoader

If the file can't be converted to OBJ or another format, then there's probably not a lot you can do beyond simplifying the model or using gzip... "pure WebGL using three.js" is a way of rendering the file, but you must still use some format or other to get the file loaded first.

[Foosballfan]

@donmccurdy That looks great, thanks!

I'll give it a go and see how it turns out.

I originally gave up on obj as the one I made is 220MB from the 34MB file.

[DanielRamosAcosta]

Greetings, theare aren't any news from @kdilayer right? he never released the source code?

[Aarbel]

any news about this ?

[agviegas]

Hey! A few days ago I started to implement an IFC parser in JS with the idea of applying it to Three.js. This is a personal project that I do in my spare time, so I have no clear idea how long it will take. However, I saw this thread today and thought you may find it of interest. You can find it here.

[Aarbel]

@agviegas looking forward for what you do with it ! a PR could be really welcome

[mrdoob]

Indeed! @agviegas we may get more people helping on it if you do a PR with it 😍

[kdilayer]

Unfortunaltey I was unable to release my work on the ifcimporter, but I can help @agviegas

[agviegas]

@mrdoob That sounds great. I am still working on the core functionalities of the parser; it can already load all spatial structure elements and I will start building the geometry soon. I suppose that the code also needs to be adapted to this before doing the PR. Is there any references to check to prepare the code for the PR? We can do this whenever you want. Any help regarding this will be welcomed.

On the other hand, the IFC format is very easy to implement, although it can be a little intimidating because of the harshness of the official documentation. I consider that I know the IFC format relatively well, so if anyone is interested in participating, we can surely get this ready sooner. 🙂

[mrdoob]

I suppose that the code also needs to be adapted to this before doing the PR.

Yes, it should use the same interface the other loaders use. Maybe the MD2Loader is the simpler reference right now.

Don't worry about having everything perfect for the PR. You can submit what you have as a draft and we can help making sure the code fits the rest.

[agviegas]

After several stumbles and struggles with the format there are already some results. I have implemented the first version of the parser, as well as some of the geometric entities (including extrusions and b-reps). Much remains to be done yet, but I am happy with the results so far. The image below shows a small IFC generated by Revit running smoothly in Chrome. Each geometric instance has the parsed IFC information associated (in fact, in the scene below each instance has a material depending on its cathegory / ifcclass), so creating filters using properties values (Psets and Qsets) should not be hard to archieve from this point. Any ideas or suggestions are welcomed. 🙂

[mrdoob]

@agviegas Excellent!

[haroldiedema]

@agviegas Very well done!

As for ideas for property management. How are you storing these now? Just as userData on the meshes or geometry I suppose?

Most of our customers use software like HiCad or ArchiCAD for their modeling and they store A TON of information that is very important for the constructionworkers (thermal density, wind resistance, measurements, weights, etc. etc.).

I'm also very curious about the parsing/loading speed. The models I've tested my implementation with take about 5 seconds to parse, but to generate the geometry, the process takes nearly 2 minutes to convert to a DAE model. (I'm converting it server-side due to the lack of time and experience on my end 😅, which is why I'm so excited for this loader to work 'natively')

[agviegas]

@haroldiedema I haven't implemented the property sets yet, but the current data structure consists of a JS object where the keys are the express IDs and the values are the parsed objects loaded in memory. Each property that was an express ID is replaced by a reference to the object with that ID. In the current implementation, each instance of IfcProduct with one or more geometric representations has an additional property called Geometry , which is an array of references to the geometries of the scene. For example, each IfcWallStandardCase has a property Geometry with a reference to the Path (a Line) a to the Body (a Mesh).

Probably each geometric instance of Three.js will have a property containing the express ID, so finding back the ifc entity loaded in memory (and the related information) will be easy (f. e. when clicking on the meshes in the scene).

As for the user defined properties, there will be one or more IfcRelDefinesByProperties (or another indirect relationship object) to bind everything toguether. Perhaps each instance of IfcProduct can have an attribute hasPropertySets which would contain an array of the related parsed property sets (I have seen this pattern in other IFC libraries, and this is what I am doing with other indirect relationships such as IfcRelAggregates). I am not worried about the amount of properties as they will be structured according to the IFC, but let's see how it goes when I get there. 😅

I am making everything client-side, and currently the parsing takes less than a second and the geometric generation of the last scene shown around 4 seconds. I am aware that with bigger files this time will increase; however, I hope to be able to optimise the system when I have covered more IFC entities and can load IFCs from real projects. 🙂 I will be extending the CONTRIBUTING document, in case anyone wants to dig into any of this.

[haroldiedema]

@agviegas that sounds awesome!

I've tried cloning the main branch of your repo to test some of our customers models, but unfortunately every single one of them produces an error in the console about _ExpressId is undefined (not all models are 100% coherent when it comes to referencing records that actually exists). I think some CAD software don't clean up references nicely to removed properties.

I could share some of these models with you, but we'll have to do that privately. You can reach me at harold@iedema.me if you're interested in some more test cases of models exported with ArchiCAD or HiCAD.

[andrewisen]

@haroldiedema I haven't implemented the property sets yet, but the current data structure consists of a JS object where the keys are the express IDs and the values are the parsed objects loaded in memory. Each property that was an express ID is replaced by a reference to the object with that ID. In the current implementation, each instance of IfcProduct with one or more geometric representations has an additional property called Geometry , which is an array of references to the geometries of the scene. For example, each IfcWallStandardCase has a property Geometry with a reference to the Path (a Line) a to the Body (a Mesh).

Probably each geometric instance of Three.js will have a property containing the express ID, so finding back the ifc entity loaded in memory (and the related information) will be easy (f. e. when clicking on the meshes in the scene).

As for the user defined properties, there will be one or more IfcRelDefinesByProperties (or another indirect relationship object) to bind everything toguether. Perhaps each instance of IfcProduct can have an attribute hasPropertySets which would contain an array of the related parsed property sets (I have seen this pattern in other IFC libraries, and this is what I am doing with other indirect relationships such as IfcRelAggregates). I am not worried about the amount of properties as they will be structured according to the IFC, but let's see how it goes when I get there. 😅

I am making everything client-side, and currently the parsing takes less than a second and the geometric generation of the last scene shown around 4 seconds. I am aware that with bigger files this time will increase; however, I hope to be able to optimise the system when I have covered more IFC entities and can load IFCs from real projects. 🙂 I will be extending the CONTRIBUTING document, in case anyone wants to dig into any of this.

Parsing User Defined IFC Property Sets are super-easy. I have a repo that does that. My parser is not as sophisticated as yours.

However, I have noticed that some properties tend to break parsers. I haven't used chevrotain, so I'm not sure how your code would hold up. I have written more about these problems here. Hope it can be of some use to you.

Anyways, very good job so far! 👍

[agviegas]

Update: I have deployed the app in Github pages for easier user testing throughout the development. This includes responsive navigation for mobile and tablet support. Also, here you can find an alternative deploy that loads an IFC model on startup; the logic for clearing the scene and adding multiple IFCs is not implemented yet, but at least you can see how the navigation looks. The parsing is made by the client, so the loading times depend on the device used. My laptop makes it in around 5 seconds, while my Moto G5 Plus needs around 50 seconds for this scene. There are still classes to be implemented before loading a full project, but feel free to send me any IFCs to add them to the testing files.

[agviegas]

In case you are interested, this Saturday OSArch has invited me to present the project in their monthly meeting. Feel free to join, say hi, see the last advances and drop your questions / ideas. 🙂

[mrdoob]

@agviegas Nice!

Are you still planning on doing a pull request with what you have so other people can fill the gaps?

[agviegas]

@mrdoob Yes, I was planning on doing the pull request once all the basic IFC2x3 entities are implemented (we are close to this point). Nevertheless, everything is ready to make the PR. Do you think it is better to make the PR now?

Also, I have noticed that the examples folders (both js and jsm) contain only the bundled files. I assume that the original code will remain in its original repository, and the PR will add the bundles only. Is that right? I ask this because I am not sure wether future collaborations will be PRs to the original repository or somewhere else.

[Mugen87]

Since the original repository is quite big, it's probably better to just mirror the build files into the three.js repository.

TBH, my concerns mentioned in #20836 (comment) still stand (meaning the problems with a too big examples folder).

[mrdoob]

I agree. I think we can have webgl_loader_ifc using the builds for exposure and if people want to contribute they can do so in the original repo.

[Aarbel]

@agviegas did you included all recent WebGl files optimization in your loader ? (for example the ones that Draco use for Gltf)

Goal: Ifc files can be heavy to load, having modern 3d display optimizations would be perfect !

[agviegas]

@Aarbel I didn't know about these optimization features, so I haven't implemented them so far. However, once we complete all the basic geometric entities of IFC2x3 and merge the PR, it would be a great functionality to implement!

[mrdoob]

IFCLoader just landed! 🍾 #20598

[shohara]

Are there any working projects to include layer in IFC?
It seems the loaded model includes "layers", but it includes only "mask=1", when I loaded the default rac_advanced_sample_project.ifc.
Loaded model includes "materials" with groups, I wonder if it is possible to have similar for layers.
I really appreciate any suggestions or ideas.
Thanks,

[agviegas]

Hey, what do you mean by "layers"? You can already filter, select and extract subsets of geometry by IFC class (e. g. isolate all IfcDoors). Is this what you mean?

[fraguada]

The threejs object schema includes layers: https://threejs.org/docs/index.html?q=layers#api/en/core/Layers
@shohara is that what you are referring to?

[shohara]

@agviegas @fraguada Thanks for your comments. The "layers" I mentioned is the layers in CAD. We can define layers (kind of view sets) in Revit or ARCHICAD: https://helpcenter.graphisoft.com/user-guide/88369/. I suppose the layers in such CADs will be converted IFC objects (e.g. IfcPresentationLayerAssignment).

I think it is similar to object group in threejs: https://threejs.org/docs/index.html?q=group#api/en/objects/Group. Therefore, I imagined IFC's layer might be converted to object groups by IFCLoader, but I could not find such properties in the loaded model. The layer in threejs as mentioned by @fraguada is also similar, but it seems we can only define layers up to 32.

@agviegas

You can already filter, select and extract subsets of geometry by IFC class (e. g. isolate all IfcDoors). Is this what you mean?

It seems similar too, but I don't familiar with filtering the IFC model. Therefore I don't know whether I can filter the objects which are selected in CAD as a layer. Would you mind telling me more about how we can filter, select and extract subsets of geometry by IFC class?

Thanks,

[agviegas]

Maybe we can continue the conversation in our discord channel so we can figure out how to help you or include your suggestion in the list of issues: https://discord.gg/jBRSMgHC 😄 otherwise, feel free to directly ask in the github repositories!