ZERO DA VINCI

Following the social media success of my conceptual product, Motsats, I co-founded Motsats Furniture AB in 2022 to introduce Zero da Vinci, a multi-functional designer furniture piece that transitions between work and rest modes seamlessly with the user sitting on it.

To showcase the product's innovative qualities and its transforming mechanical design, it was important to have an interactive website featuring the 3D model where users can see the product in action. So I decided to build a modern website harnessing the power of webGL API using three.js and react .

But first, I had to optimise the 3D model to be low poly and efficient for webGL rendering.

So I took the .STEP file from solidworks and jumped straight into the world of blender .

For optimal webGL performance for a marketing site, the max no. of traingle is 25k. So I reduced the traingle count from more than 250k to 17k by removing unnecessary and hidden faces, and optimised vertices without losing the shape or form.

To make model appear as real as possible without increasing the file size, I used bump, normal and roughness maps for textures and UV wrapped them to optimise and create realistic details on the model rather than using vertex points.

Once the model was optimised and ready for webGL, I used the famous three.js library r3f for adding animations and camera controls to a react website. Additionally I used tailwindcss for styling and mdx for blog posts.

I added AR visualisation feature to the site, that uses the opensource Google Model Viewer library to allow users to view the product in AR on their mobile devices. Below you can see a screen recording of the AR feature in action.

The final website succeeded in showcasing the product in all its glory that wount have been otherwise possible. The website is live at www.zerodavinci.com and has been a great success in attracting potential customers and investors.

Personally, I am very proud of the result and the skills I have acquired in the process. I am now able to create interactive 3D web experiences and have a better understanding of webGL and 3D rendering techniques. I am also able to create and optimise 3D models for webGL rendering and have a better understanding of the webGL pipeline and performance optimisations.

Here are some of the real pictures of the product.