Sometimes the success of a project relies on the correct choice of technology. This proved to be the case on the latest project we worked on for Zespoke, a manufacturer of customisable designer tables based in Belfast. Their service allows customers to select a table type and choose different colours for the various surfaces. Zespoke then builds the tables to order.
The client had previously approached us to create an interactive customiser to sit on their website to allow customers to visualise their chosen colour scheme before purchase. This involved us creating a generic virtual table using 3D design software and rendering out images of each part of the table in a variety of different colours. The customiser then constructed a representation of the table by layering the different images based on the customer’s selections.
See the original customiser in action.
This customiser looked and functioned great and the client was very happy with the results. In fact, they liked the customiser so much that they asked us if we could expand it to include all of their different table designs, customisable with all their colours and options for additional extras such as shelves and feet. We raised our eyebrows at this point as we had already created nearly 100 images, and with all the new options this figure would increase exponentially to hundreds if not thousands of images. This would be a huge undertaking and the cost would in turn likely cause the client to raise their eyebrows!
At this point that we hit upon the idea of ditching the old customiser and recreating it using WebGL. In simple terms WebGL is a technology that brings real-time computer generated images into your browser. Think first person shooter games like Halo, but running in Google Chrome over the internet. This would allow us to show the 3D table models directly in the browser and map different colours and patterns onto the objects on the fly. Rather than a standalone visualiser, the new customiser would be an integral part of the ordering process, with the chosen options feeding straight into the shopping cart.
The virtual table models already existed as part of Zespoke’s manufacturing process so we just needed to import them and separate them into their different parts. We then created an image of each texture at the same scale so that these could be used directly on any of the tables without having to resize them. The final and most difficult step was to try to get the quality of the images as close to the original as possible by adding virtual lights to the scene and tweaking them to create highlights which not only look nice but when combined with fake reflections help to show the difference between the matt and gloss materials.
While there was a certain amount of development time involved in creating the WebGL customiser, this is far outweighed by the benefits in the long run. We can easily add as many new colours, textures and table models as required without us having to generate hundreds of assets – Adding a new texture means creating one image instead of 30. And as a result of drastically reducing the amount of content, the customiser loads faster and puts less strain on the web server. We also have a lot more flexibility to resize the customiser to fit wherever it needs to go without having to create all new images at the correct size.
See the new WebGL customiser in all it’s glory!
We’re really pleased with the result and the client is delighted. We are especially excited about the potential for developing the idea further. For example, although the view is static, with a little tweaking we could allow the user to rotate the view so they can spin the table around and view it from all angles. If we were to really push the boat out, we could even use this as the basis of an augmented reality app that would allow the user to customise the table on their phone or tablet then, using the device’s camera, actually see what it would look like in their own house. The possibilities are endless!
