Product Configurators

After a busy summer working on an amazing and innovative project, now is a good time for a review of the three product configurators I have worked on to date.

Let's start with the most recent: an insole configurator, for those who need insoles in their shoes.

The customer selects insole measurements in a web form with sliders and inputs, including features such as arch height and an optional bump at the front, then updates a 3D viewport to preview the product, before downloading an STL file for 3D printing.

The 3D viewport is powered by the excellent WebGL Javascript library, Three.js. Communication between the browser and the server is with AJAX calls. The Apache server proxies the request to a simple HTTP server run by a dispatcher script, in turn forwarding the request to a Blender instance that generates the model.

Because insole models returned to the client are generated from a subdivided control mesh, measurements must be interpolated with calculations that in some cases are quite complex. The accuracy achieved was to within 1 millimeter at regular shapes and sizes, and within 2 millimeters at unlikely extremes. Not bad, given that only control cage dimensions are accessible in the code.

Interaction with the configurator is surprisingly fast, taking less than a couple of seconds per request. The project client initially hoped that realtime updates of the viewport would take place, updating the view as new settings are chosen. However, even if Blender model generation took no time at all, we would need to have Blender running as a Javascript application in the browser for such an interface to be possible without undue "glitchiness" that realtime AJAX traffic would entail. As it is, the interface is snappy, with a solid and reliable feel.

A few months previously, I worked on another project; a shirt configurator, taking a different approach.

This configurator had to be instantly responsive, with shirt sizes and colours chosen by the customer immediately updating in a static JPEG viewport. It was my job to write a Python script for rendering of various shirt sizes and shapes with various textures, for different parts of the shirt, such as the body, collar, cuffs, etc.

It was relatively simple, if somewhat laborious to create. The most complex aspect of the job was rendering of ties either with shirts or separately as PNGs with alpha channels. Shirt models were imported into Blender as OBJ files from Marvellous Designer, and that needed some re-anchoring adjustments as well.

This project was fairly typical of configurators that work with pre-rendered images. If the disk space taken by the images is not going to be excessively large, and 3D preview is not necessary, pre-rendering is the way to go.

Lastly, the first configurator that I worked on late last year was an exercise in render optimisation.

The client wanted his customers to be able to select some arbitrary text, have a texture generated from it, and apply the text to a coffee mug that could then be purchased. The coffee mug could be viewed from various angles in a static JPEG viewport. Because textures were unique, pre-rendering was not an option. It was my job to write a Python script for Blender to render the mug with the texture, and to do so in less than 1 second. Renders had to look realistic.

After optimizing and paring things down to the bare minimum, I achieved the objective: render times of between 0.8 and 1.0 second. Blender's old "Blender Internal" raytracer was used for maximum speed, and reflections faked with an environment map. Because of the faking, vertical rotation was constrained to 30 degrees, so that lack of shadowing inside the mug would not be seen. It worked well and the client was happy.

If you're interested in having a product configurator made, I hope the three examples above give you some idea of the possibilities. When you're ready to start your own project, get in touch for a free consultation.