A simple guide to high performing 3D models for e-commerce

A simple guide to high performing 3D models for e-commerce

You may be asking yourself,  “What gives? I’ve been watching movies in 3D for over 20 years—performance is an issue with 3D?”

The answer is yes.  But it’s not the software, it’s consumer hardware.  While there have been dramatic improvements in consumer hardware and browser technology in the past 20 years, for web-based experiences, any visual asset you build needs to be designed for the lowest common denominator.

Whether your customer is using a legacy iPhone or a dial-up internet connection, you want to be able to deliver the same excellent customer experience across any device, internet browser, or connection speed. 

At stake, is the gateway to 3D configurators, virtual product photography, and interactive 3D demos. But to get there, one must understand the intricacies of a 3D model. 

So what contributes to building a high-performing 3D model across any device?  

What is polygon count (a.k.a. asset weight)

As you embark on your 3D journey, there are going to be a myriad of new terms thrown your way.  One of the biggest considerations is asset weight.  What is asset weight?

Well, have you ever tried to download a PDF or a movie to your computer?

Because the file size of a PDF is smaller, you can download and open it instantly.  However, a movie is generally a much larger file that takes a lot longer to download and open.

The same concept applies in 3D space.  Instead of measuring files in bytes, 3D assets are measured by polygon count.

As a rule of thumb,  the higher the number of polygons in your 3D asset, the slower the performance.  In the 3D world, specialists refer to assets with a high polygon count as heavy assets and those with low polygon count as light assets—hence the vernacular of asset weight.

More often than not, existing CAD files have a high polygon count, which is why Threekit’s web editor measures and optimizes existing assets to ensure that performance isn’t an issue.

Let’s start by better understanding the elements of a model.  A 3D scene is generally comprised of at least 4 elements and we’ve outlined those elements below.  

black-basketball-hi

 

1. What is a 3D Model?

A model is the 3D representation of your product’s shape.  For example, if you created a basketball in 3D space, the basketball wouldn’t be orange.  Instead, the model would resemble the shape of a basketball but it would be black. The raw model is only the shape.


 

cartoon-basketball-3

2. What is a Material of a 3D model?

Materials are the colors that are layered or “mapped” onto your asset to better depict what you’re looking at.  

To continue our example, a basketball generally has an orange exterior wrapped with black seams. In 3D, that means the basketball has 2 materials on it:  one orange material and one black material. 

free-basketball-texture-vector-illustration3. What is a Texture of a 3D model?

When creating a 3D asset, you want to provide realism. The orange parts of a basketball are not simply orange, they are orangish-leather with certain depths, pock-marks, and plush.  

That’s what texture maps do.  Once you’ve layered a texture map on your material, your 3D asset truly starts to evolve.  You can see the leather exterior and experience the black rubber seams.

 

220px-Basketball4. Why does lighting of a 3D model matter?

What else contributes to realism?  Lighting. Lighting your asset gives the illusion of viewing the object in real life.

Think of it this way:  if you were to place your basketball in a pitch black room, you couldn’t see it.  But if you turned on a flashlight and pointed it at the center of the basketball, you would see that the light would shine off the front of the basketball and dissipate around sides.  The black seams would absorb the light whereas the leather would partially reflect it.

In the real world, your eyes do this naturally.  In the 3D world, we mirror this effect so you can’t tell the difference.

All these elements contribute the “weight” of a 3D asset, which impacts performance.

How to improve asset performance

This is both the art and science of 3D.  Not only does polygon count affect the performance of a 3D, but there’s also an inverse relationship with visual quality.

Purpose-built technology systems, like Threekit, can help to optimize the performance of visual assets while maintaining high performance, and working with 3D subject matter experts can help guide your business on steps you can take to minimize the polygon count while maintain high-quality visuals.

Generally, CAD tools contain a complete manufacturing framework for your bill of materials.  However, many of these elements are unnecessary for visualization.

For example:  if you are manufacturing a wristwatch, the inner gears are incredibly important for the manufacturing process.  However, your customers are not concerned about how the inner-working gears look; they care about the aesthetics of the watch face, wristband, and custom engraving. 

By removing non-visual elements from your CAD file, it’s easy to create a high-performance and high-quality visual asset.