3D Online Configurator – programming with the 3D graphic engine

3D Online Configurator – programming with the 3D graphic engine

Once the suitably optimized model has been loaded, it is a question of dedicating oneself to the 3D graphics engine.

This term indicates the real-time rendering system that allows you to upload, manage and view a 3D scene within the web browser.
The common graphic engines make use of high-level programming languages, which in the specific case of the web take advantage of the standard WebGL sub-libraries for rendering and managing the scene and the various graphic elements.

Some javascript-based frameworks are capable of exhibiting a very comfortable and useful programming and configuration language to use. Some examples are:


Our team of 3D experts has decided to undertake the use of Three.js, a very powerful Javascript library system with a not too steep learning curve.
It is a phase that requires very specific skills and knowledge of 3D and the engine that will be used.

We will talk about:

Loading models
Materials management
Accessory management
Animation management
Camera and movement management
Post-processing management

Loading models

Three.js favors the import of 3D models in standard format (e.g. .obj) but our choice, in the face of various tests and checks has led to the use of a binary format called .glb, derived from the gltf that uses the JSON standard.
With this format it is possible to use the Threejs native APIs to access the structure of a model or a 3D scene, whether modeled in Maya (as in our case) or in other third-party 3D software (eg 3dsmax, Blender, etc ..).
The navigation tree of the model is very clear and precise and, thanks to the use of Three.js custom functions, it is easy to navigate its structure.

Materials management

The material is an extremely important aspect when dealing with the final rendering of 3D models.
One of the trends that has now taken hold in the field of photorealistic creation of objects is that of PBR (Physically based rendering).
It is a methodology based on principles of physics to better explain the interaction of light with matter. The aim is to obtain a rendering faithful to what a real object would have hit by electromagnetic radiation.
For the record, we consider concepts such as the theory of micro-facets, the Fresnel effect, the principle of conservation of energy, to name a few.

Threejs provides full support to the PBR through the introduction of special Shaders: these are specific algorithms for the photorealistic rendering of a material.

In particular, the Three.js MeshStandardMaterial class includes a series of properties to best characterize the rendering of an object. For the more technical we list the main ones without going into the technical explanation.

color, texture map
normal, bump map
opacity map
ambient occlusion map

Accessory management

One of the characteristics of the 3D configurators is that of being able to select different accessories related to the model itself.
These elements must be individually modeled in 3D and transferred to the configurator’s environment, to be then selectable at the request of the user.
In the specific case of our trolley configurator, we have introduced some elements such as the coin acceptor, the food separator for fresh products, etc. which can be configured and activities thanks to a specific interface.


Animation management

Although not essential for all 3D configurators, animations can be a plus of impact and satisfaction, if managed appropriately and without upsetting or weighing down the normal navigation within the browser.
There can be different levels of animation: from the simple movement of an accessory to the activation of an event that triggers a sequence of actions, such as opening a box to show its contents.
Three.js has a powerful animation management system, which allows you to import sequences or clips from external software such as Maya and manage event triggering.

Camera and movement management

Depending on the type of configurator you want to create, the management of room movements is an aspect not to be overlooked for sure.
The main actions to associate with the room include:


but it is always possible to study camera movements programmed to have more cinematic sequences and to better frame one’s product.
Three.js allows you to set different types of rooms with different degrees of freedom of movement. In support of these common features, special javascript libraries for advanced room animations have been created.

One of these is the Tween library, which among its various uses has been used in our case to interpolate the movement of the chamber from one accessory to another, through soft and effective transitions.

Post processing management

When we talk about post processing we refer to everything that concerns the improvement of the quality and the final yield of the product, through the use of specific techniques and effects applied to the already existing environment.
Here we talk about some concepts such as:

Antialiasing: filter used to remove the scaling effect due to low image sampling
Motion Blur: for adding the blur effect typically found in rapid movements
SSAO: effect that creates contact shadows in the occluded points of geometry, giving greater realism to the scene
Color grading and color correction

Three.js provides specific classes and functionalities to achieve the previous effects but, in the perspective of a 3D configurator, these precautions must be used rationally, as some of them have a strong impact on the performance of the rendering engine.


What has been described represents a guideline on the main points that must be considered before going into the creation of a 3D configurator
Undoubtedly, an excellent configurator needs a 3D graphics engine that supports the features described and that makes navigation fluid and light for the user.
Performance issues must be studied and analyzed a priori, in order to be able to design an optimal configurator from the outset, even in the face of additional additional components that could further weigh down navigation.
The discussion of textures and materials also has an important impact on performance, as does the set up and the presence of lighting sources.


In the next article we will talk about the setting of the scene: stay tuned!


Benvenuto! Scegli con chi parlare o invia una mail a staff@inode.it