3D Model of the Month: Creating High-Quality 3D E-Commerce Assets

In the dynamic realm of e-commerce, high-quality 3D assets are crucial for product presentation. This post highlights the creation of a 3D model of sunglasses with iridescent lenses, designed to serve as a prime example for other projects.

Dimensions and Modeling Techniques

To kick off the project, we gathered reference materials, including photographs of a real pair of sunglasses.

A photograph of real sunglasses used as a reference.

For accurate scaling in AR and VR applications, we modeled the asset using real-world dimensions. The sunglasses were designed to be approximately 15 cm wide.

Two main techniques were employed:

1. Subdivision Surface Modeling: Used for the curved parts, allowing for smooth shapes with fewer polygons. 
2. Face-Weighted Normals: Ideal for flat surfaces with beveled edges, this technique ensures efficient shading while minimizing vertex count.

Face-weighted normals are a good choice for flat surfaces with curved bevels along the edges. The articulated "temples" on the sides of the sunglasses use this technique to create the illusion of rounded bevels but using very few vertices. For fast real-time rendering and quick downloading of e-commerce 3D models, it is best to use as few vertices as possible while maintaining the necessary details.

Each vertex of a 3D surface has one or more "vertex normals" which contribute to the shading (shown below in green). These normals can be manipulated with tools in 3ds Max, Blender, Maya, etc. and the modified normals are supported in glTF.

Bevels can be added, and vertex normals can be adjusted for clean shading.

With this technique, the transitions in smooth shading are confined to the beveled faces of the model, resulting in clean well-ordered shading with a minimal number of vertices.

Materials and Textures

The materials are set to use mostly numerical values; this keeps the file small and efficient.

Textures often incur the most file size and memory storage for an asset, so minimizing their use whenever possible allows the file to be efficient.

This asset uses only one texture, for the Khronos Group logos on the black earhooks. The image is 1024 x 128 pixels, which is the closest resolution using powers-of-two dimensions which can contain both logos comfortably without causing blurriness when shown on the model. It is best to use powers-of-two dimensions for textures to support mip-mapping, which improves rendering performance and reduces aliasing artifacts.

PNG was chosen for clarity, while WebP was used for compression to enhance loading times.

Achieving Iridescence

Creating the iridescent effect involved tweaking various material settings.

In the glTF Sample Assets repository there is a helpful asset called iridescenceDielectricSpheres.gltf which can be used interactively to arrive at the desired look and derive the corresponding values to be used.

Using tools like Babylon.js Sandbox helped finalize the ideal values for the lenses.

Texture Coordinates

Only the earhooks use a texture, to place the Khronos Group logos there. The logos have been packed into a single texture, because this reduces the number of materials needed which improves performance.

Texture coordinates in 3ds Max.

Homogeneous texture coordinates are only assigned to the polygons where the logos are displayed. All the other polygons (marked here in red) are collapsed to a single coordinate point (upper left corner in the editor) to reduce texture coordinate data for the unmapped vertices... they only need a solid color, so an unused corner of the texture works fine.

Only the earhook meshes need texture coordinates. Because unused data increases the file size, it is best to remove unused texture coordinates from meshes that don't need them. All the meshes except the earhooks have had their texcoord data removed.

Exporting and Optimization

The model was developed in Autodesk 3ds Max and converted to glTF using RapidPipeline DCC Importer. Optimization techniques, including Draco compression, significantly reduced file size for efficient web delivery.

Take a look at the final result in this embed.

Conclusion

This case study demonstrates the intricacies of creating a high-quality 3D sunglasses model for e-commerce. By leveraging industry-standard techniques and tools, anyone can produce impressive 3D assets that enhance online shopping experiences. Ready to start your own 3D modeling journey? Let’s create something remarkable!