xeolabs bio photo


Lindsay Kay

3D software engineer / WebGL developer

Twitter LinkedIn Github

My chapter on SceneJS for OpenGL Insights is now free to download!

BIMSurfer Online BIM Viewer


Last week I integrated the latest build of xeogl into BIMSurfer.

xeogl is an open source WebGL-based 3D visualization engine I’ve been working on, and BIMSurfer is an open source tool for Web-based visualization and evaluation of Building Information Models (BIM).

Here’s my first post on my adventures with xeogl and BIMSurfer.


First, a little history. BIMSurfer’s WebGL-based 3D viewer has been through a few evolutions, so it’s been a tag-team effort in which each evolution has built upon lessons learned from the previous ones.

Rehno Lindeque kicked things off with the first version in 2011, which he implemented as a facade object wrapping a SceneJS scene graph. Robert Zach, Kaltenriner Christoph and Leichtfried Michael from TU Vienna then added more enhancements in 2012.

Bryan de Nijs wrote the next version in 2014, again on SceneJS, but this time as a collection of pluggable components that wrapped portions of the underlying SceneJS scene graph.

Bryan handed the viewer over to me in 2015. Looking at Bryan’s design, I realised that, for applications like BIMSurfer, the underlying WebGL engine should ideally have an object-component-based API. And so this is how xeogl came about - initially as a bunch of components wrapping SceneJS, then later as a completely new component-based WebGL engine, stripped down to the bare essentials for fast CAD-like visualization.

Behind the scenes all this time, there is BIMServer, which serves IFC models to BIMSurfer as binary streams over WebSockets. The principle developers of BIMServer are Thomas Krijnen (who also handles various UI elements), Ruben de Laat and Leon van Berlo (who is also overall project leader).

BIMSurfer requirements

BIMSurfer has certain requirements which have shaped xeogl, such as:


To keep applications like BIMSurfer from locking up while loading monstrous amounts of content, xeogl defers all scene updates (eg. creation of scene objects, generation of geometries, shader allocations, matrix updates etc) to a FIFO task queue, then executes a few tasks from the queue before it renders each frame.

By amortizing the cost of updates across many frames like this, xeogl also prevents WebGL from freaking out and thinking that it’s running on a potato, which may cause it to lock FPS down to a lower rate.

In the screen capture above, we’re loading a test model containing around 3500 objects. While those are loading, we can still show and hide things, rotate the model, and so forth. In future we may end up choosing to intentionally throttle the FPS while loading, just to get the initial loading out of the way as quickly as possible, but this technique is still potentially useful for keeping things snappy while dynamically loading content.

I learned this technique from the excellent article Rendering Optimizations in the Turbulenz Engine by David Galeano, which you can read in WebGL Insights.

Future extensions

An advantage of using an open source 3D engine within an app like BIMSurfer is that all enhancements made to the engine are then automatically available within the app.

xeogl has a growing library of plugin components that we can drop into our apps to add more functionality. I’m not sure exactly how many of these currently overlap with BIMSurfer’s roadmap, but there are a few xeogl components already that might be useful in BIMSurfer at some point:

I’m also planning a few more features for xeogl’s rendering core, which will be nice to have in BIMSurfer:

Want to help out?

The best way contribute to BIMSurfer is to fork the repository at GitHub. We also use the community forum from the open source BIM collective. Feel free to interact with other developers to help answer your questions. Then prepare a new branch with a new feature and post a pull request.

We will review your code and commit it into the official BIM Surfer code base. Alternatively you can also attach a patch into our issue tracker.