Best practices for maximizing performance in Zakeke's 3D Product Configurator

Zakeke improves performance using default compression tools like the Draco library for 3D models and a CDN for all Zakeke page contents. This approach prevents the repeated downloading of assets, ensuring faster load times. If you find that the performance of your Zakeke 3D Product Configurator is still not optimal, you can follow the steps in this guide to further maximize performance.

 

 

Summary:

                1. Asset preparation

                    1.1 Use low-poly modes and compressed GLB format for your 3D files

                    1.2 Texture optimization

                2. Setup

                    2.1 Save only default meshes and materials in the Scene Editor

                    2.2 Delayed Materials option

                    2.3 Activate Optimize Texture Management for shared textures

                    2.4 Enable WebP conversion

  1.  

 

 

1. Asset preparation

1.1 Use low-poly modes and compressed GLB format for your 3D files

To ensure optimal performance and efficiency, it's crucial that 3D assets are lightweight. While a 100 MB 3D model might seem perfect, it wouldn't be functional for web use. Therefore, it's essential for 3D assets to be as compact as possible, ideally a few tens of MBs. The best way to achieve this is by developing models using the 'low-poly' technique to create 3D models with a polygon count not exceeding 200,000 tris

If a model has already been created without using low-poly techniques and has an excessive number of polygons, techniques like polygon decimation available in 3D modeling software or other solutions can help optimize it.

Additionally, whenever possible, use 3D files in the GLB format. This format offers better compression, which significantly improves performance.

 

1.2 Texture optimization

When using textures, it's crucial to optimize them for efficient performance:

  • Limit Texture Size: Aim for a maximum resolution of 1024x1024 pixels for desktops, avoiding sizes beyond 2048x2048 pixels. For mobile devices, textures should not exceed 512x512 pixels.

  • Compression: Utilize tools such as TinyPNG to compress PNG/JPG textures effectively.

 

2. Setup

2.1 Save only default meshes and materials in the Scene Editor

Optimize scene management by saving only the essential meshes and materials relevant to the initial product configuration, while hiding all other unnecessary elements. This practice is considered the most important and ensures a fast initial loading of the 3D Product Configurator.

When setting up the configurator, there are essentially two steps: loading and saving the 3D scene in the Scene Editor, and defining the Composer part where product customization attributes/options are set. Among the created options, you can decide which ones are default and thus which product permutation the customer should see as the default when they start using the configurator.

Once the default options are defined, it is crucial to return to the Scene Editor and re-save the scene with ONLY the default options visible. This guarantees that upon opening the configurator, the entire 3D scene won't be downloaded at once. Instead, only the meshes/textures necessary to display the default permutation will be downloaded, while all other meshes/textures will be downloaded as the customer proceeds with customization.

 

 

2.2 Delayed Materials option 

One simple step to enhance performance is to enable the Delayed Materials option. This feature ensures that materials are downloaded one at a time as they are selected by the customer while using the configurator, rather than all at once upon opening the configurator, preventing system slowdowns.

Using delayed materials loading is particularly beneficial if you have numerous variants, options, and materials and, together with the previous point, this is the most important step to optimize performance.

To enable it, navigate to the 3D Product Configurator > Click on the 3D Scene Editor > Go to Settings > Check the "Use Delayed Materials" checkbox (see below).

Foto delayed materials.png

 

2.3 Activate Optimize Texture Management for shared textures

You can also merge textures with identical names into a single texture to improve performance. When textures with the same names are uploaded across multiple materials, Zakeke automatically consolidates them. This allows the browser to download the texture only once, reducing loading times and significantly boosting overall performance. This optimization ensures a faster and smoother 3D product experience for your customers. Simply go to 3D Product Configurator > click on the 3D Scene Editor > go to Settings > Check the "Optimize Texture Management" checkbox (see below).

Screenshot 2024-06-28 alle 11.17.48.png

 

2.4 Enable WebP Conversion

Optimize texture file sizes by enabling the WebP format. You have two options:

  1. Lossy Compression: Textures are heavily compressed with some quality loss. You can customize the quality level to balance file size and visual fidelity.
  2. Lossless Compression: Minimal compression is applied to maintain the original quality. You can adjust the compression level to suit your needs.

For better performance and faster download times, we recommend using the Lossy option. The quality setting depends on your specific needs: our default setting is 75%, but you can increase it for materials requiring higher quality. Conversely, for simpler textures, you can lower the quality without noticeable impact.

We encourage you to explore these options further to find the best balance for your project, ensuring optimal performance without compromising visual quality.

Screenshot 2024-06-28 alle 12.08.07.png

 

 

Was this article helpful?
0 out of 0 found this helpful