360-degree Product Visualization for an E-Commerce Giant

Elevating e-commerce user experience with 360-degree product visualization with fast loading and crystal clear visuals

Background

Srushty3D was sought by an e-commerce company to develop a 360-degree visualization of its products. This watch is one of the products created for them which involved significant challenges.

The main objective is to optimize the size of 3D models while maintaining high quality. The key challenge is to reduce polygon counts without altering the shapes of the models. This requires meticulous optimization to ensure no breaks in quality. Additionally, the final model needed to be converted to a GLB format, where data is saved in binary, adding complexity to the optimization process.

Solution

To address the challenges, a meticulous approach was taken to optimize the 3D model. This involved using specialized software to reduce polygon counts while preserving the integrity of the shapes. The final model was then converted to GLB format, ensuring efficient storage and loading. Here’s our process

360-degree-Product-Visualization-4
360-degree-Product-Visualization-3
  • Boxing Image: With the reference image, we create boxing image. A boxing image is an initial step in the modeling process, providing a visual outline of the product’s dimensions and key features. It helps define the structure and serves as a reference throughout the design process. For this watch, the dial is the focus as it has many intricate detailing. We build the structure step by step by connecting minute dots, we create the base. This watch has more quads and polygons. We maintain the quads to create the model which will bring the right texture and output.
  • UV Unwrapping: UV unwrapping is a technique used to flatten a 3D model’s surface into a 2D space, allowing textures to be applied accurately. Properly maintained quads facilitate this process, making it easier to create a seamless texture map. 
360-degree-Product-Visualization-2
360-degree-Product-Visualization-1
  • Texturing: Texturing involves applying materials and textures to the 3D model to enhance its appearance and realism. We used Substance Painter for texturing this watch. We apply the same elements from the reference image to the clay model. If the materials are not available in the library we create our own using Photoshop. For this watch, we created the dial in Photoshop. We use the blender software to check the texturing and finetune further. 
  • GLB Viewer & Iterations: The GLB viewer is used to preview the final model and check how lighting affects its appearance. We use many viewers like Babylon Viewer, 3D Viewermax, Modelviewer, etc. The lighting appears differently on each viewer. If the desired output is not achieved, we go back to Substance Painter to make corrections.

Impact

The optimized 3D model resulted in a significantly improved user experience, with faster loading speeds and high-quality visuals. The streamlined model also reduced storage space requirements, making it more efficient for distribution and use.

Client

E-commerce Giant

Tech Stack

3D Modeling