How to build 3D web apps. Part 3. Client-side libraries for 3D data display | CAD Exchanger

Can I use raw WebGL?

An experienced technical leader is careful with introducing dependencies in their architecture, so this is a completely natural question. Since every other tool uses WebGL under the hood to display 3D models on the web, it is possible to use the underlying technology directly. WebGL is ultimately based on OpenGL, so implementing a 3D renderer requires expressing the model data in terms of GPU-consumable buffers with vertices, normals, texture coordinates, and expressing the rendering process in terms of draw calls and shader invocation. The API is low-level, meaning that your team needs graphics developers. Additionally, virtually all the 3D viewer functionality will have to be implemented from scratch: 3D model loading, displaying with a camera, shading, handling of user input in the viewport and mapping it to the camera movements, etc.

What JavaScript 3D library to pick?

Now that the need to use a 3D library has been justified, we’ll take a look at and compare two popular client-side 3D libraries: Three.js and Babylon.js. They can be considered general-purpose 3D libraries, as they provide support for the functionality that every 3D app developer might need — managing scenes, displaying objects, handling user input, playing animations. If the app has additional, domain-specific requirements (e.g. displaying CAE simulation results), these might not be available out of the box. Generally, such requirements have to be implemented with custom logic on top of these tools. So the amount of freedom a tool gives the developer to implement domain-specific features is quite important when making the choice.

Fig. 1. CAE and BIM are two of the areas where domain-specific visualization tools, aimed at the datasets of the respective areas, can be helpful to app developers.

Three.js

This is an extremely popular 3D graphics library. Three.js makes the basic 3D model display much simpler compared to the raw WebGL. It allows the setup of the scene not in terms of raw buffers and shaders, but with convenient primitives that describe meshes and materials. It provides an ability to hierarchically group the objects to define the scene graph and to assign LODs, which are used to automatically switch to the lower-fidelity version of an object when it’s far away. It simplifies the basic scene controls by providing a few predefined control schemes (orbit, fly, first-person, etc.), which handle user input (mouse clicks and drags) and adjust the camera position relative to the object. There’s also a built-in functionality to handle object selection in the scene via mouse clicks. A simple scene editor allows one to create scenes in WYSIWYG fashion and download them in JSON format for later loading in your application, instead of setting up the same scenes by hand using JavaScript.

Fig. 2. Three.js main page, showcasing projects built with the library. Some of these are built by big and famous organizations, such as NASA, Apple, Oculus and Maserati.

Babylon.js

This is another popular Javascript library for 3D graphics. It aims to provide a more complete experience to developers seeking to implement 3D applications. Obviously, it has all the mandatory things, like the scene graph, meshes, LODs, materials, textures and lights. Aside from packaging these features into an easy-to-use API, Babylon.js provides many convenience features. There’s a comprehensive range of cameras with scene controls with convenient defaults, meaning you can just drop them into your code and have them work without having to tweak their settings. An automatic LOD generation capability based on mesh simplification is also included. There’s a built-in mechanism for selection acceleration. For more fancy rendering needs it provides a set of post-processing effects, a particle system and a collision system.

Fig. 3. The Babylon.js material editor, allowing creation of custom materials without the use of a shading programming language.

Three.js vs Babylon.js comparison

In terms of their philosophy, these tools occupy different spots on the library-frameworks spectrum. Three.js is indeed more of a library, aiming to abstract away the tediousness of WebGL API, whereas Babylon.js feels more like a framework of 3D renderer, with many things preconfigured and there being many helper and convenience functions. For a simple example, consider how the render loop is typically implemented with these tools. In Three.js we make use of built-in renderAnimationFrame() function:

function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
const engine = new BABYLON.Engine(canvas, true);
engine.runRenderLoop(function () {
scene.render();
});

Summary

Hopefully, this post clarified for you the situation around the two biggest client-side 3D display libraries. Three.js and Babylon.js are both great tools to build upon for your 3D data display functionality. Therefore, choosing between them is a matter of weighing their subtle differences against your specific requirements for third-party dependencies. For example, for basic display or another lightweight application, Three.js makes more sense, whereas Babylon.js can allow the implementation of more involved projects with less code.

--

--

CAD Exchanger is a technology that enables data exchange in the multi-CAD world.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
CAD Exchanger

CAD Exchanger

CAD Exchanger is a technology that enables data exchange in the multi-CAD world.