Insights on Interactive 3D Web from VisCircle

The VisCircle visualization agency stands on the front-line of an emerging market of three-dimensional internet applications. Their recent Blend4Web-powered projects clearly show how cutting-edge technologies like WebGL are entering the mainstream. In the following insightful interview, the company's founders, Dimitri Werwein and Benjamin Suhr, share their experience and views on the present and the future of interactive 3D Web.

Can you tell us a bit about VisCircle?

The VisCircle GmbH is a young company from Hannover, in the north of Germany. We specialize in the development of interactive real-time 3D, augmented reality applications and 3D-configurators. We also do more traditional work like offline rendering images and animations. Coming from the game industry, we were looking for new ways to use our experience in developing highly optimized and high quality real-time 3D content in other areas. With the rising demand for product customization and for companies to present their products in a way that goes beyond a picture or video can offer, a new market was opening for us. We started the company with just the three founders and grew with each new client. For now we have a strong team of skilled artists and coders and we plan on expanding the team further.

What kind of visualizations do you produce?

There are almost no limits to what is possible at this point. Whether a client needs a beautiful 3D presentation of their product on a website, a complex configurator, or wants to allow customers to experience a product and learn about its functions before buying it, we can create almost anything. Marketing departments and companies find more and more innovative ways to use 3D real-time applications to their advantage.

We want to go beyond presenting a product in 3D and use all of the possibilities interactive real-time 3D in WebGL to create a completely new user experience. To achieve this, we put a lot of emphasis on the development of materials. When you see a gold ring or a leather seat in a dynamically lit scene, you need to almost be able to feel the material, its quality, the texture on the surface. Understanding the product and the target group is equally important for us to create a visualization. We try to get as much information from our clients as possible to be able to create an emotional response in the user and survey the feelings our clients want to associate with their product.

Who are your customers?

We have a wide range of different clients all across different industries. We are not free to talk about all projects at the moment. However, our customers operate in different sectors like the car industry, jewelry, furniture, the medical sector. Even though our biggest projects are developed for big and often well-known companies, we also work for quite a few mid-sized and smaller companies. We offer scalable solutions to meet the needs of all potential clients.

What are the most notable projects produced by your visualization agency?

The 3D Boutique for Meister was one of our biggest projects due to the massive amount of 3D content that was required. Aside from the over 1000 ring models and millions of possible configurations, it is notable for the quality of the 3D models and the materials. We spent a lot of attention to detail and were in constant contact with Meister to deliver the most accurate real-time 3D presentation of their rings possible to this date. With the goal to create the most impressive 3D ring configurator on the web, you can imagine how much time we spent to tweak the content to perfection.

Before the 3D Boutique went live, we completed the first version of a complex furniture configurator for Joli, a Belgian manufacturer of high-quality furniture. The first version already features a huge amount of possible configurations for the chair and table products. The configurator features a lot of different materials which were all created after close examination of their real-life counterparts. The next version will bring a lot of new features and further enhance the user experience.

In the medical field we re-built the OT-light of Dr. Mach GmbH & Co. KG in 3D and added functions of the lights directly to the products on the manufacturer's website. Being known in their field for the quality of their OT-lights, they demanded the same level of quality for the virtual presentation. In addition to the WebGL project, we developed an iOS and Android app for Dr. Mach that is also used for direct marketing.

We also should mention the Polo Volkswagen 3D-Configurator because it got a lot of attention. The original project was created in Unity3D and later re-created using Blend4Web. The user can change the paint job, the rims and configure the interior in real-time. As a special feature the user can open all doors by clicking with mouse and take a seat in the car. Another possible option is to test drive the configured car or forward the real-time 3D-configuration to the manufacturers.

Your recent work for the Meister jewelry company - how important is it for them to have an online 3D configurator?

The jewelry sector is a very traditional field. Meister gains a technological edge in the presentation of their products over their competitors. The customer can create his or her individual ring configuration and gets a near photo-realistic preview presentation - either at home, or at a retailer where the customer can be provided with additional counseling. This preview of the final product helps customers to decide on a configuration and reassures them in having made the right decision for them. Meister has an extensive assortment of rings and possible configurations. The 3D configurator allows customers to quickly try out different combinations, preview them in different positions and also instantly see the influence each element has on the price.

From a more practical point of view, the 3D configurator has a lot of advantages over the traditional photos. The main advantage is the unmatched flexibility. New materials and cuts can easily be added for all rings. We developed different tools in order to offer Meister all advantages real-time rendering has to offer. While we still render photo-realistic images for Meister, all the smaller ring preview images are screenshots from the 3D configurator. This process has been automated in order to create thousands of images in a very short amount of time.

Although we are all very happy with the final result, in theory we could change the look of all products including the preview images almost instantly.

You have nice looking, photo-realistic materials like metals, diamond. How difficult was it to achieve this?

Our experience in designing accurate real-time materials for different game engines helped us a lot in Blend4Web. Thanks to the shader editor, we were able to develop shaders with the exact properties we needed. What helped us a lot was the ability to quickly make changes and test them. We had access to the real rings from Meister for a proper material study. Even after that we had many calls and meetings with Meister to tweak the materials to the exact look they wanted to achieve. The diamond shader was the most complex task. Not only was it hard to create a shader that fakes complex refractions accurately without blowing up mobile devices, the demands of Meister were very specific. We ended up creating a web-based tool to tweak all relevant material values in real-time.

What about the programming part and Blend4Web API - was it smooth to work with them?

The API is logically split into different modules making it well-structured. The functions are documented. Wherever we needed more details on a function, the included examples demonstrated them very well and helped us a great deal. Any remaining questions we had were answered on the forums, or simply by trial and error. We got replies to our questions and requests very fast and a bug we reported was fixed in the next version, which was a great help right before the release of a project.

You switched from Unity to Blend4Web. What benefits and problems did you have due to this? Was is hard to learn?

We switched from Unity3D to Blend4Web for WebGL projects while the WebGL export feature in Unity3D was hardly usable at all for production. Switching to Blend4Web quickly gave us very good results. We got a lot smaller files and almost no build time anymore. The most important aspect for us was the full support for mobile devices. We cannot offer WebGL visualizations without official support for mobile.

There was not a lot of learning required to get into Blender and Blend4Web. Blender does some things quite differently compared to other tools, but once you got your head around this, you often see that different does not necessarily mean worse. The example projects were a great help and the great support from the Blend4Web team helped us to get up to speed with Blend4Web very quickly.

We still use Unity3D for non-web projects like apps and standalone applications. To avoid doing work twice and keeping the development costs low, we are also looking into converting Blend4Web WebGL projects into actual applications. Offline-use was requested by different clients frequently.

Online store integration - please share your experience. Did you cooperate with their web developers?

We worked collectively in an interdisciplinary team of web- and 3D-developers, marketing specialists and designers from different agencies. For this project, VisCircle worked pretty much exclusively on the visuals. The online store integration was done by another agency. We provided as much support as possible from our side. Our experience may not be representative, but from our perspective the integration went rather smooth.

Interactive 3D Web - is this the future?

Seeing the increase in requests by increasingly bigger clients, we know this is a growing market segment. We are glad we were able to position our company in the early stages of this revolution. There are many other reasons why we are going to see more and more interactive content on the web. Product personalization/customization is a lot more common today than it was a few years ago. Mobile devices - even current low-end devices - have become fast enough to display nearly photo-realistic visualizations in WebGL. WebGL 2.0 support in browsers of all devices will give us and other developers new options for even more impressive projects. In 2017, we will see a lot more interactive 3D content on the web. This trend will continue until WebGL is established as standard for 3D visualizations and configurators and, of course, web browser-based games.