This article is to help you understand and improve the performance of the viewer in your products. The performance of the viewer depends on the complexity of the scene, which is why it is important to understand and find the golden line between scene complexity and viewer performance.

Viewer Performance

The overall performance of the viewer greatly depends on the machine displaying it. Complex scenes with a lot of data might impact in bad frame rates, slow viewing, or browser crashes. This is even more noticeable on mobile devices, which is why it is important to build models that work on all devices.

Here are a few ways you can improve viewer performance.

Loading Time

Before rendering your product, the viewer first needs to download and prepare all assets in the 3D scene. The loading process is indicated through a loading bar. After every asset have been loaded a hand hint will appear and you may interact with the viewer.

If you wish to hide the loading bar or hand hint, check out Embedding your products.

Materials

Currently, there is no limit to the materials you can create and unused materials do not impact the viewer performance, but we recommend deleting unused materials and texture files as they might impact the Platform editor performance and speed. It also helps you keeping your editor UI clean.

For optimal viewer performance, you should aim to use a minimal amount of textures in your materials.

Textures

We optimize texture file size after upload and will not use textures larger than 2048×2048 pixel. Also, when using occlusion, roughness and metalness maps, we recommend using same sized maps for all slots, because the difference in map size might impact in less resolution than intended.

Using many high-quality textures carelessly can significantly affect viewer performance, which is why we emphasize the use of high-quality textures for the important and visible parts and use lower-quality textures the less significant parts.

We also recommend using the same 1:1 UV space for multiple objects. This allows you to pack together textures, which in turn significantly reduces the number of materials and textures you need to use.

Meshes

In a scene, you should always aim to have one mesh for each material and before uploading your product to the Platform merge together all the meshes that use the same material.

Merge meshes that use the same materials
20 geometries/meshes or less
200,000 polygons or less

Polygons / Vertices

Determining the optimal amount of polygons for each product is a good way to improve viewer performance. High vertex/polygon count does not always increase the quality of a product, but it does increase the download time. For most products, 200k polygons are more than enough to give a realistic portrayal of an object.

Here are a few ways you can reduce polycount:

Use normal mapping to fake surface complexity
Smoothing groups
Remove not visible polygons
Remove unused vertex points

Mobile devices will start having serious difficulties in AR for models over 500k polygons.

Environment

We recommend using a maximum of 2048×1024 pixels in your custom environment maps. Using larger images might impact the viewer loading time and performance.

Shadows

Ambient Occlusion (AO) is a rendering and shading technique that we use for shading. The use of AO maps allows users to determine the right amount of shading for their product. If you do not know how to render an AO map, check out our guide on Ambient Occlusion (shadows)