Web design
How to
News

Optimizing 3D models for the web

What every 3D designer should know.

If you are a web designer, web developer, or online marketer using 3D content, you know that the most important quality criteria is the loading speed and the performance of your site. If the 3D files you embed are too big, the overall experience will suffer. Optimization is a process that every 3D scene should go through for best visual results.

To think alongside you, Vectary has launched a new 3D scene analyzer tool. It does not only analyze the parts of the project that need to be optimized, but it also has a set of tools that enable you to do so quickly and effectively. This solution is helpful whether you use Vectary’s built-in WebAR viewer or your own solution. Optimize your 3D files for the web, Augmented reality, game design, or VR.

How to optimize the 3D files

  1. Import your model to Vectary Studio or create your own 3D model from scratch.
  2. Go to Preview in the top right corner.
  3. Get Vectary recommendations for optimization in the right panel consisting of four parts: Objects, Textures, Loading time, and Performance.

Key factors of optimization

Objects

This section shows the number of objects in the scene and the polygon count. It is best to keep the number of objects below 100 and the polygon count up to 100K. Same is recommended for the Augmented Reality preview.

How to reduce the number of polygons

Textures

The texture analyzer displays how many textures are in the project and their resolution. In Vectary, you can minimize the resolution of textures, and the lower quality will not be noticeable. Try to keep the number of textures below 100. It is possible to reuse the material on multiple objects to further reduce the size.

How to optimize textures and materials

Loading time

This section calculates the approximate loading time on an average computer with an average internet connection. A size below 5MB is prefered, and the loading time should be below 3 seconds for the best experience.

Performance

Performance refers to how many frames per second the scene is running at. If the framerate drops below 24, the 3D model might lag when rotating it with a mouse. It also lists the effects that are the most performance-consuming. Consider disabling them for a better experience. Please note the performance is calculated based on the device where your project is open.

Watch the full tutorial and learn how to optimize Vectary 3D models in no-time: