Photorealistic 3D Product Configurators - How our 3D Viewer sets new Standards

23.Nov 2020

The new standard for attractive, interactive product visualizations. 
Inspire Customers. Enjoy 3D in real-time.

Do you sell or use technically sophisticated products that require explanation? Do you want to visualize them simply, innovatively, and effectively? If so, our web-based 3D viewer embedded in our Combeenation platform is the ideal tool. A high-quality representation of the models, realistic optics and the ability to explore the model in real time give a vivid idea of how your product is built and how it works.

We have all seen the advances in realism over the past years in movies, games and product visualization but we don’t know how they have achieved such realism. To put it in simple words, for something to look real we need 2 aspects: materials and light. The more a material and light behaves like in the real world the more realistic it will appear. This is particularly important in metallic, transparent and reflective materials and the reason for our new viewer with the focus on a more visual point of view.

The following comparison of materials shows the optimized visualization of the new Combeenation Viewer (left side - old viewer, right side - new viewer)

3D GlossyPlastic
Material: Glossy Plastic 
3D Glass
Material: Glass
3D MattPlastic
Material: Matt Plastic

The basic functionality of a 3D viewer is viewing and displaying 3D models in a web browser, but also the possibility to rotate or to interact with 3D models.
Our current viewer uses the latest technology to visualize materials as real as possible within the constraints of a real-time application. We have the possibility to use materials that are based on physics and light that is taken from a real scene, which means we can reproduce reality much closer and therefore present your product in a more realistic way.

What are the technical features of the new viewer?

Declarative Scene Description

  • Scenes & model descriptions in declarative form in JSON format
  • For a simple scene with a static model, around 60 lines of this declarative description and around 10 lines of JS code are sufficient to initialize the viewer
  • In the future, no explicit code will be necessary, as the viewer will be a control in the Combeenation Editor, which can be created and configured via UI
  • Easy reuse of assets, e.g. integration of a material library that can use all geometries in the scene

Changeability of the Scene at Runtime

Nearly all properties defined in the declarative scene description can be changed dynamically at runtime. These include

  • Show/hide entire models or individual meshes of a model
  • Change textures of single meshes. Replace the whole texture or adjust single aspects like color, metalness, roughness, ...
  • Positioning of meshes
  • Scaling. Meshes can be scaled up, down, distorted etc. at runtime.

Use of Variables

  • The user can define new variables in the declarative scene description
  • Almost all properties of the declarative scene description can be defined and changed at runtime using these variables
  • Benefits:
    • Reusability of the variables, as properties can be changed by changing a parameter value x
    • Free choice of names due to good decoupling of the program code. It only needs to know the parameters, but not the structure of the geometry (and thus the names & nesting of the meshes it contains)

Additional Technical Features

  • Current support of .glb files as a container for geometries, textures, materials etc. and rapid expandability to new formats such as * .babylon, * .dxt, etc.
  • Easy integration of HDR textures as environment texture and/or skybox. In many cases, the complex design of a lighting scene can therefore be easily avoided without noticeable loss of quality.
  • Easy "highlighting" of meshes in the scene (e.g. highlighting clicked elements with "green glow")

What are the specific advantages of the viewer for Combeenation customers?

  • Perfectly matched for use with our Configurator platfor
  • More cost-efficient realization of 3D configurators
  • Continuous improvements of the infrastructure (optimizing the speed of the viewer, new features, etc.)
  • API design focused on Separation of Concerns - it allows an ideal division of responsibilities and optimal use of the strengths of all persons involved
    • The 3D artist takes care of the visual representation (scene design, lights, materials, camera, animations, camera movements, ...)
    • The creator of the configurator is responsible for the product logic, the configurator UI and the connection between product logic and visual representation (setting correct parameters at the right time in the 3D viewer)

From the visual point of view this is a big step forward and we are confident you will enjoy the benefits of the new technology we have implemented.

Arrange a demo

We would be happy to explain to you how our new 3D viewer also optimally stages your products:

Contact us