Interview - Diving Deeper Into the Zodiac Configurator

We speak again about our friends Zodiac Nautic, the world leader in inflatable boats. Our last article gave a general overview on the company itself, what their online configurator does for them, and how Sketchfab supports the configurator. Today, we speak to Klaas Nienhuis to delve a little deeper into the technicals of how exactly Sketchfab’s API works into the customizability of the configurator’s workflow.  

This is an article in our API Spotlight series, highlighting projects that customize our viewer through our API.

Who is Klaas?

It’s me, Klaas Nienhuis

Klaas Nienhuis is an independent developer for 3ds Max and works on projects such as product configurators, 3D mapping tools, 3D pipelines. Klaas has also written the 3dsMax exporter for Sketchfab. Prior to full time programming Klaas has worked in architectural visualization and has been educated as an architect. I’ve taken on this project for Zodiac Nautic together with Frodo Schering and Innouveau. Jeroen Breen and Arjen Duinhouwer from Innouveau are web developers from Rotterdam. Frodo Schering is a graphic and interaction designer from the Hague. I’ve dealt with the 3D models and the Sketchfab API. Frodo has created the graphic design and Innouveau has built the actual website.

One of my first models on Sketchfab

High Level Overview

The Zodiac Nautic website enables you to configure a Zodiac boat in 3D, share that design on social media, download it as a PDF, see the price and contact a dealer for purchasing.

A short video of me configuring a boat

The website contains all elements you’d expect in a regular site. We’ve made a graphic design and interaction design based on design suggestions by the client. The website is responsive for desktop, tablet and mobile. This means the graphic and interaction design need to hold up on your phone too.

There is no product photography of the boat. All options are shown in a Sketchfab model. The 3d model takes up most space in the website. This makes it the most important part visually and makes it stand out from other product configurators. Of course having a 3d boat spinning around is more engaging than static images.

A single boat costs a lot of money. Although you can see the price of the boat you can’t just buy one directly from the website. Once you’re happy with your configuration you can download it as a PDF. This PDF contains a screenshot of the configured model and a list of all the options you’ve picked. If you leave your contact info a zodiac dealer will get in touch to actually sell you the boat. Since the dealer also received a copy of this configuration he knows exactly what you’re after.

More invisibly but very important to the client is that the site is multilingual and displays prices in three currencies. Zodiac Nautic is a multinational and it would be a waste just to have this site in one language. This is a nice touch because it happens quite often different marketing departments of the same company are basically competing with each other trying to create the coolest campaigns wasting time and money in the process. But not Zodiac Nautic. They now have a site they and their customers can use internationally, in showrooms, tradeshows and on the go.

Mobile view of the website

The Viewer

The Sketchfab viewer is controlled through the viewer API. We’re changing colors of materials and showing and hiding a few other options such as the engine or attachment for your water skis.

This means we’re using the setMaterial, show and hide api calls with JavaScript. Besides that we use a screenshot of the viewer for use in the pdf. This uses the getScreenShot method. The website contains a few js files which contain a list of possible colors.

While developing I usually build a simple bootstrap mockup website totally separated from the actual website. This mockup contains just the Sketchfab model and buttons to configure it. This is a great way to prototype the Sketchfab code and preview the model to the client without interfering with the web development.

While the 3d model is the coolest part of the website it’s actually not the most complex to develop. It’s a bit new right now, but I think it will be as easy to include social sharing in a website as including Sketchfab in the future. The most difficult part of Sketchfab is getting the 3d model right.

Workflow

In a project like this there are two separate streams I’m working on. Firstly there’s the website which needs to be designed and developed. Secondly there are the 3D models which need to be created or in this case optimized. Designing and building the website has been handled by my team: Frodo Schering and innouveau. I’ve taken on the 3D models and all Sketchfab configuration code.

We’re in constant contact with the client through Slack. This proved very handy to get quick feedback and avoid super long emails.

I’ve worked with the client to gather all the info needed such as all the texts in five languages, all prices, names for all the labels, images for some thumbnails and so on. At the same time Frodo started designing the website. We’ve used a tool called Zeplin to preview the designs. Zeplin streamlines the feedback process by allowing the client to leave remarks directly in the designs. After I was confident we had all content I asked the developers to start building the site. Of course I was wrong and lots of content changed along the way.

An overview of some of the screen designs in Zeplin by Frodo Schering

At the same time as collecting the content I started optimizing the 3D models the client supplied, prepare the materials and object names. I also created the simple bootstrap site to mockup the configurator. This allowed me to create the code for the configurator. The web developers only needed to drop this code in later on. It’s very important to start early with the 3D content. In my experience most clients are no 3D artists themselves and just pass on 3d models. This makes it difficult for them to see if there are any issues with the models which need to be fixed.

Why Sketchfab

I’ve advised my client to use Sketchfab for a couple of reasons:

• I’ve got lots of experience with it
• The models look good fast. This saves a lot of time
• The support is great (thanks James!)
• The API is simple to use
• It allows for VR easily

Although we’re not using VR right now, it’s an option which will be inevitable in the future. Especially for trade shows and showrooms. When the client will ask for it, we’re ready.

The main downside for my clients from a business perspective is the fact the Sketchfab viewer always has a Sketchfab logo in it. This makes it a less obvious choice for ecommerce projects.

Future Improvements

There are lots of things which would make Sketchfab even more powerful but also more complex to use. But during my projects I’ve found a few small things which would make a great impact.

• • Autospin: we’re using a few preset camera angles in the configurator. The user can push a button for front, top and side view. This is incompatible with autospin. Since autospin actually spins the 3D model, the preset views don’t line up anymore. Having an autospin feature which spins the camera instead of the 3D model would be great. Adding an autospin for just the lights would be the cherry on top!
  • Scene tree: it would be great to have a scene tree on Sketchfab.com to hide and show parts of a model. For example: the boats have two engine options. But you can only have one at a time of course. The configurator manages this through the Sketchfab API. If you pick one engine, the other is hidden. If you look at the same model on Sketchfab.com this is not possible though. Both engines are shown at the same time.
  • Profile page: normally I make the 3D models in a configurator private. You can interact with the models on the configurator, but not on Sketchfab.com. This is mostly due to the fact the initial state of the 3D model might be a bit weird like described above. But also because the client wants to drive as much traffic to the configurator as possible. Though, each model can be viewed on Sketchfab.com by pressing the small Sketchfab logo in the viewer. This is a bit strange, but I’m not sure what the alternative would be.

Thanks Klaas!

Don’t forget to visit Zodiac Nautic’s excellent boat configurator and try all the different options. Are you inspired to build an application with our viewer too? Then start off with the Viewer API documentation. Feel free to drop any questions in our Development and API forum.