Interactive Configurators

reach into the image to craft your look

Product configurators are an immensely helpful tool for customers interested in buying a product that has many options. They allow customers to combine any number of colors, finishes and accessories to a base model to see exactly what they will get when they purchase. Producing the visual assets for products like this can be a challenge, one that CGI production is ideally suited to solve.

Most configurators work in one of two ways: a base image will have images overlaid on it that are specially cut out to only show on the areas being customized, or a collection of images covering every possible combination is generated and then called upon in whole depending on the user’s selections. To illustrate these methods, Hypothetical produced a collection of configurator examples powered by CGI rendering.

CGI technology is ideal for configurator media production

we can embed data about the objects, mask out the proper pieces and get pixel-perfect tracking to feed into the web experience

Our scooter configurator uses the image overlay method, and adds the twist of including animation as well. We start with the background plate and add an animated scooter in the color of the user’s choice. A windscreen and saddle bags are optional accessories overlaid depending on the user’s choice as well.

Using native browser technologies like Javascript allows us to deploy the configurator across browsers from desktop to mobile. The animation frames of the products are carefully tracked and placed to recreate the proper perspective.

Hypothetical’s example of the image catalog technique allows you to configure Restoration Hardware’s iconic aviator chair. Because there are relatively few combinations of shell and fabric, we decided to simplify the coding of the web experience by generating all of the images ahead of time.

This also takes advantange of CGI’s unique capabilities because we can automate the creation of all of the images. Instead of having to create all 15 images by hand, we design 8 finishes that the computer combines. A saving of 7 images may sound small, but consider this technique applied to a product with more configurable components and you see that the savings become exponential.