Introduction
In this section, we will cover the topic of how you can prepare the Image renders which will be used within the 2D Render Media visualization.
As previously mentioned, this media type uses multiple layers of Rendered Images with Transparency enabled, stacked on top of each other. With this we can swap only parts of the image to create a configurable experience.
Preparation
General rules when preparing the image renders:
- Choose the angle and position of the camera within the scene and keep it there. Position it in a way, which leaves empty spaces around the object in question.
- Each image should have the same aspect ratio and resolution
- Every part of the render that can be displayed differently ( either a different color, shape, position, … ) should be rendered separately with transparency enabled to allow for proper layering.
- Images can be rendered in any format however the final file type should be in .webp encoding,
- Each visualization should always have a base render for the background
- Each visualization should always have a base black and white (monotone) render of your product.
- The Resolution per image render should be no more than 4k ( 4096 x 4096 )
- Optimal maximum width should be 4096px (Prepare images in format to the power of 2 – for example, 4096 x 2048 pixels)
- Optimal Image size: less than 1MB per Image render
- The name of the Image render should be composed from the values of the features which make up its configuration
Example
Base render
Configurable layer
Combined layers within the configurator
Image Collection
As stated in the general rules for the 2D Media Render, when preparing the image renders, each file should be made up from a logical set of values which make up its configuration.
To Add an Image Collection Shape inside the canvas, go to Add shape and select Image Collection.
Image Collection Example
For this example, I will be using a metal locker as the main product. The scope of this example is as follows:
- 1 camera angle
- 1 product
- 2 locker colors
- No configurable parts
Starting off, I first render the base image as well as the 2 images which will serve as the configurable locker colors with the parts of the product that aren’t colored, being masked out.
The naming of each configurable image is very important, as you will be swapping images relative to selected options inside chosen features.
I’ve named my base render image as m_locker_base.webp
If the base does not change, you could opt for using a regular Image Shape instead. However for the purpose of this example, I will be implementing it with an Image Collection Shape.
First we .zip the base image render, then we upload it to the collection and simply copy paste the name of the image ( without the / ), hit ok and you now have a base Image render.
But where this Shape really shines is when you have multiple images within the collection. I’ve compressed an Anthracite and a Copper color variant for the metal locker into a .zip and uploaded it to a new Image Collection
Now, within the Image name pattern field, instead of using a static copy / pasted predefined value, we want it update depending on the users choices and choose the appropriate image from the Collection.
To do this, we simply write down all the parts of the name that every image in the collection shares. For example, both images start with m_locker_ and end with .webp
This means that we can define it as the following m_locker_{{}}.webp.
The double curly brackets are what we call Handlebars. Inside these brackets, we will write the the full path to the value we wish to get.
By opening the Live Preview and checking the Debug window, we can find both the Key and the current selected value for that feature.
To retrieve the value, we simply say {{$features.[color-1].value}} which will return the value Anthracite.
Now, when we combine the static text along with the dynamic handlebars, we get
m_locker_{{$features.[color-1].value}}.webp
Clicking on OK, save the 2D Render Media and open the Live Preview to test the changes in the configurator.
