Company A – Interactive showcasing of designer apparels using WebGL

About Company A – Interactive showcasing

Company A is an Interactive showcasing marketplace for designer apparels, that combines the expertise of global tailors with online convenience. They are headquartered at sunny Sydney and primarily provide services in Australia, New Zealand, UK and US markets. Company A’s collection involves a wide range of shirts and other apparels for all occasions. Company A’s design studio gives you the correct tools to design your own unique shirts. Company A’s platforms works exactly similar to that of a menswear designer.

The Brief

For Company A to provide their customers with unique personalized experience, it was increasingly necessary to provide them with a platform to dynamically render apparels like shirts, pants through Interactive showcasing as per their custom design and selection.

Challenge

Dynamically render different apparels like suits, shirts , pants based on their choice and custom designs.

Need to tackle problems in:

• Rendering speed
• Reducing cost of rendering
• Interactive
• Security for the 3D models
• Implementing proper shaders to get better result

How we helped them overcome this hurdle

We worked on Company A’s website platform to improve its overall look and feel.

This was done by delivering a major update on the areas of:

• Rendering speed
  • Introduced WebGL/Three.js framework for seamless and real-time rendering.
  • Made the 3D models low polygon and fine tuned it using the shaders and textures
• Reducing cost of rendering
  • A cache layer was introduced in Application level.
  • A headless browser was introduced for rendering the images in servers
• Interactive
  • The Apparels will be directly rendered in the user’s browser
  • Using the camera orientation in the scene  and the ray tracing of the 3D points.
• Security for the 3D models
  • In the interactive design studio , the 3D models will be loaded in the browser and any one can download it.
  • To prevent the unauthorized usage we have introduced a custom 3D model parser, so the 3d model can be parsed only with the custom parser.
• Implementing proper shaders to get better result
  • This was completely a trial and error solution.
  • Tried out different shaders and modified  the lightning , textures , depth maps , reflection maps  to get a better result

What happened next

By creating a unique, personalized and customizable content, we were able to reach out to a target list of appropriate customers all over the world. In turn, we saw a 73% increase in returning customers.

The solution success helped in the creation of a unique brand experience by delivering:

• Highly optimized rendered model with realistic feel and experience
• WebGL based 3D representation of shirts and other apparels
• Easy to use CMS platform for connecting tailors
• An extra upgrade in the overall website through cutting edge web technologies
• Fully elegant and restful solution

Technology Stack

Use Cases

• Customization of Apparels
• Design studio, where user can design their own apparels
• Virtual tailoring store
• Interactive showcasing designer apparels.
• Real-time rendering engine for Websites to showcase their products , Eg Ecommerce websites  etc.