We recently noticed that one of our Business users, Terma from Poland, was doing extensive customization work on our viewer. I talked to Jan Klimczak who was responsible for this project.
This is an article in our API Spotlight series, highlighting projects that customize our viewer through our API.
Hi Jan, can you tell us a bit about Terma?
Terma is the manufacturer of bathroom and decorative radiators, heating elements, trenchless technology machines and rehabilitation equipment. We are based in Gdansk, Poland and have 25 years of experience working for consumers not only in Poland but also in more than 40 countries on 4 continents. We are the second manufacturer of radiators in Poland and the second manufacturer of heating elements in the world. We strive to offer the highest quality products and this is an expression of our respect for the consumers whose satisfaction is our the highest priority.
Terma is a company with no directors, managers or supervisors on board. It is a team of more than 300 people with a common desire to be possibly the best suppliers and sharing a common set of values. Why do we work in a flat structure? It is more challenging and therefore it boosts a growth. Whatever the nature of work is (production, sale, administration and others), it makes our employees broaden their awareness with knowledge from the other areas.
What kind of customizations did you make, and how did you do it?
Terma offers products in about three hundred colours. So the main feature which I implemented is a possibility to see our products in different colours. We use RAL and special colour palette. I created an array of our colours by applying defined a hex colour palette in Sketchfab for sample object and retrieve the RGB values of it. Those values are in some way filtered on Sketchfab side. Doing this step I built RAL colour palette to use it in Sketchfab. First I cached material information and separately adjusted metalness, roughness and glossiness for each product. I stored cached materials in the array with material named keys so it was easier to apply modifications for specified part of geometry. Next I applied new colour to saved material and updated it on the model. You can see it online here.
I used a transparent background to add a customizable background image. You can also use a color picker to change the background color. Additionally I implemented a module which change wall colour if it is available to similar colour as background one.
Example of arrangement used in application.
Another option is to use either provided or your own photographs to display the product in an environment. If you’re on a mobile device you can even take a picture and use that as the background image. For the provided photographs, I have prepared the right camera angle, FOV and color. Give it a try!
For our second project, our heating element Terma One, we prepared a few different 3D models of it and each of them was uploaded at Sketchfab. Then I used it separately at our product cards or at one visualisation for each model where you can directly switch between them in the application. You can see it online here.
Also worth mentioning is our product overview module which shows selected product during animation and presents its in different random RAL colours. You can use the Play button at the visualisation to see it in action. To set up it I developed another module where you can configure, change and save different aspects of each key frame of animation in life. It makes easier process of adjusting and creating animation of new products. You can see it in action here.
The VR mode is generated at Sketchfab and you can easy turn it on at visualisation. I just reloaded a model with a cardboard parameter and hide unnecessary UI objects in the application.
Pneumatic mole – Terma K95S Kret.
I also used dynamically applied transparency at our animation of pneumatic mole “Terma MAX K95S – Kret” which you can control during animation and see how it is constructed and how pneumatic mole works. Here a transparency factor is modified at transparency channel of material.
Additionally I implemented own UI to provide access for interesting options and to localize it. At the moment we are developing and translating our web-portals so in the close future you will see it also In other languages.
More our products and applications which we are developing can be found on our website. Also check out our Sketchfab profile.
Who developed the custom code for you? Was it a difficult project?
I am responsible for prototyping and developing virtual reality applications for Terma. The VR and gaming is my passion. I have graduated master degree at Gdansk University of Technology in VR programming for 6-wall CAVE at programming level. Earlier I finished CAD specialised university. I have a lot of experience in this area and I am always focused on innovation and at the new technology.
One of first version online visualisation between 2006-2011 years which I created in flash technology.
In 2006 I prototyped first 3D visualisation for Terma radiator working on Internet as flash application. From 2007 to 2011 I developed more of it in more modern way. But year 2015 is the year of true vr applications.
I closely cooperate with my brother Piotr Klimczak who is lead developer of hi-tech Internet solutions and company web-portals. He also supports me in programming. We are responsible for new technologies. To provide the best quality of service we prototype and create whole vr applications. After that we are supported by the rest of our team in the company.
For Sketchfab based applications all the scripting is my work. Two visualisations, ‘Oxford’ and ‘Pneumatic mole – Terma MAX K95S Kret – animation’ are also my work. I prepared modelling, texturing, animating, scripting, programming, projecting UI &UX, graphic and prototyping as well as developing, testing and extending it. After that team is supporting me with creating more products like that. I am prototyping and programming new functionalities and the rest of the team is supporting me in modelling 3D models, texturing etc. In our team there is also UI and UX designer, 2D and 3D graphics designers as my colleague Marcin Twarowski who supports me on board and creates 3D textured models like heater element Terma One or Easy radiator. This is the way how I can provide top level of vr applications.
The Sketchfab API is not a difficult framework. Developing application using it is easy like a piece of cake. At the moment I am also developing VR application for HMD’s like Samsung GearVR and Oculus Rift which I could say is difficult, but not Interactive 3D Visualisations, I am sure.
Which API features are you currently using?
At the moment I use almost all features of provided API. The most important features for me are getting node map, reading and updating textures and materials, working with scene graph, cameras and events. Also I have something what is not published at the moment. It’s prototyped module to change and see special colours based on different textures sets. Special colours have different material structure, sometimes are created as mixed different colours or use shine decorations. It will take a while to prepare texture pack for each special colour for each product. So this feature will be added in upcoming new version of the application.
I have extended the provided Sketchfab API: I built my own API named Terma 3D API which allows me to quickly create and configure a new Interactive 3D Visualisation. My extension provides ability to work at named objects and materials, configure cameras, colours, arranges and animation in visual way. It’s also based on our RAL colour palette and provides ability to set up and develop each visualisation in independent way. That’s why you can see each of our visualisations in a little different way.
What does the workflow for creating a new interactive model look like?
Preparing such interactive application takes a long time. So first we need to decide which product we want to show next. Then it’s time to decide how we will present it and think about adding a new function for our Interactive 3D Visualisation. After that I am prototyping a new feature for interactive visualisation. In the meantime it’s necessary to create a 3D model. Sometimes we can use some model created by our constructors and optimize it but usually we model a new version of it from scratch. We model it in low-level technology so then we can use this models in our other interactive visualisations as LOD for HMD as Samsung Gear VR or Oculus Rift which I also developing. Next it is the time for preparing UV maps and texturing. Then we create PBR materials that are used in Sketchfab or UE4 engine, which I am using as well. In Sketchfab it’s the time for final make-up like set up lights or post-process effects. At this stage we show model for wider audience to verify if everything is ok. Then I prepare a new instance of application, configure it and add new functionality. It’s tested again and then it’s uploaded at live and shared on Internet.
I am always prototyping whole product from scratch to working ones. But the rest of them is created together with my colleagues from the team. Marcin Twarowski creates 3D models for it and Piotr Klimczak implements it on the Internet on Terma web-portals which he develops. Our graphic designers team looks on it and provides a better graphic for it. Then our UX/UI designer implements it. My role is to develop and introduce a new features to the VR applications.
Did you get any reactions to the Sketchfab models on your website?
Each time the reaction is the same. Everyone really likes to watch products this way. It offers a new ability to watch and play with the product. The thing that usually gets people the most excited is the possibility to see an product in different colours. At the first moment they could be a little frustrated how to navigate in 3D viewport but after a few seconds of using it they don’t have any problems and are very happy with that functionality. I remember someone saying that this gave him way to see the product like it’s in reality.
How is Sketchfab important for your business?
I chose Sketchfab as primary container and base for all Terma 3D online interactive visualisations available directly on Internet. The decision was dictated by providing an API to develop interactive application, hi-end rendering model based on PBR which guarantees photorealistic graphic and multi-platform compatibility which generates 360 degree rotation images for devices that don’t support WebGL technology.
It is worth to mention that Sketchfab supports Google Cardboard and compatible devices. Because I am also developing applications for HMD as Samsung GearVR and Oculus Rift connected with motion sensors as Leap Motion it is a place where Sketchfab supports as in VR at this domain as well.
So, this give us powerful engine to provide hi-tech solutions for our Customers. Terma provides many products in different configuration and colours. We are company which constantly is developing and upgrading our products. Sketchfab provides a place to present our products in virtual reality as dynamic interactive application where Customer can see product in different configuration, colours and visually choose that one which will suit the best for him. That’s all what he can do just through Internet without any need to install any additional software. It is very important for our company that we can give more and make easier process of choosing our products for our Customers in easy and modern way.
Jan Klimczak
R&D Developer
Promotion
Terma
www.termagroup.pl
About the author
