A visual product configurator allows a customer to visualise a customisable product according to their desired specification. In this guide we'll discuss some of the approaches you can take to build a visual product configurator.
This type of configurator uses flat images to display a static view of the product. It's suitable for products where the general shape and size remains the same but the customer can choose various options and colours, such as a chair.
The product images used in the configurator are typically produced using 3D rendering. This requires accurately modelling the product in CAD software and then setting up a scene with realistic materials, textures and lighting before rendering the model to an image. We use SolidWorks to produce our 3D renders.
One important consideration is the number of product variations. For example our chair configurator has the following options:
This results in a total of 432 variations of the product. 3D rendering can be a time consuming process so in order to reduce the number of 3D renders required we can build the product view using layers of images. Product components are split into separate PNGs with transparent backgrounds, retaining the correct positioning allowing them to be layered on top of each other to build up the product view. In our chair configurator example this reduces the number of images required from 432 to just 24.
This type of configurator displays an simplified 2D view of the product typically including configured dimensions. It's suitable for products where a technical 2D view is preferred allowing the customer to easily view the dimensions they have configured.
Here is a simple example using Canvas:
This type of configurator displays an interactive 3D view of the product. It's suitable for products where a 3D view is preferred but the customer can adjust the dimensions of the product, such as a bookshelf.
This requires programmatically generating a 3D view in real-time to accurately display the correct shape and size of the product. There are many options for displaying 3D graphics in the web browser, we currently use Babylon.js and X3D.
Here is a simple example using Babylon.js:
Here is a simple example using X3D and X_ITE:
X3D isn't as extensive as libraries like Three.js and Babylon.js but it's more than adequate for building most 3D product configurators. It also has a few advantages over those libraries: