Optimizing a shared project

Getting started

System Requirements

Importing

Design process

Materials and Textures

Lighting and Environment

3D Configurator

Scene and project settings

Version History

Augmented Reality (WebAR)

Sharing, exporting, embedding

Performance analyzer

Optimizing a shared project

Project cloning

Embedding to other software

Export options

Other

Figma Plugin - Vectary 3D Studio Lite

Model API

Floating UI Configurators

Ecommerce

Optimizing a shared project

Vectary is a powerful tool that can easily provide realistic results, but you need some touches for the best 3D experience. This page will help you get better performance on all devices and make the scene load as fast as possible.

There are two important indicators that are important to improve:

Improving performance

Like computer games, Vectary can have better or worse performance depending on the device. Our team is working hard to make much of the optimization automated, but there are still some steps that need to be done manually to view models on any platform, including mobile phones.

Improving loading time

If your scene is embedded in a website, it's important that the scene loads as quickly as possible. The ideal scene load time is up to 2 to 3 seconds. Vectary Studio is largely optimized for fast loading, and the same should apply to a 3D scene in the viewer. In addition, too large a scene can lead to potential memory issues on older devices.

Optimizing

Geometry

One of the main reasons the scene might take a long time to load is because of the large number of polygons.

In Vectary Studio, the statistics showing the number of polygons is always in the lower-left corner. The fewer there are the faster the scene loads.

The presence of a large geometry (up to 500k polygons) has no significant effect on performance. It has more of an effect on increasing load time. We always recommend reducing the number of polygons if possible. The ideal number of polygons is up to 100k polygons, and we recommend a maximum size of 500k polygons. But less is always better 🙂
For AR the recommended maximum number of polygons is 100k.

How to reduce the number of polygons

Among the tools in object mode, there is the Simplify tool. This will help to reduce the number of polygons while maintaining the shape of the object. However, with a very large number of polygons, this might not work, because the browser can't handle the computation, and it will display a page unresponsive error.

Your model geometry may consist of unrelated parts. Use the Weld tool to make it whole.

We also recommend hiding or removing parts of the object that are not visible to the viewer. For example, screws or ports (usb, cables, hdmi, etc.), as they are often highly polygonal. Hidden objects will not be exported to a shared project. If there are polygons that are not visible, you can delete them in Edit mode.
If the object is small or far away from the viewer, no one will appreciate its detail, so the number of polygons may be low.
Linking geometry will help to improve loading time. If there are several instances of the same object in the project, linking between them will allow loading only one of them. This can be done as follows:

manually by copying objects using the Duplicate linked function Ctrl+Shift+D
adding any of the Array modifiers

Textures

Textures play a big role in both performance and load time, so we've provided several ways to get the best results cheaply.

The following steps will help you get the most out of your textures:

Minimize the resolution of textures where the low quality won’t be noticeable.

This step is crucial for achieving the best results. Always be aware of the size of the object compared to the camera position. If the object is too small or far away from the camera, you can use a small texture size, for example, 128*128px. Use camera limits to limit users from zooming in too much.

Resize textures directly in Studio:

💡

You can change the resolution for all textures in the Preview mode.

do not exceed a resolution of more than 2048*2048px. Textures with a higher resolution can cause memory problems on older devices and significantly increase loading time. Always try to use the smallest possible texture size

Use as few textures as possible. The more there are, the longer it will take to load the scene and the more likely potential memory issues on older devices. Try to select the same texture from the drop-down list and use it as often as possible. You can always choose the same texture for multiple purposes, just use different settings for them. That way, Vectary will only load one texture instead of several.

💡

Do not use texture where this effect can be achieved through geometry or changing material properties.

JPG, SVG, and Lottie — best friends of performance 👨‍👩‍👧

Use JPG instead of PNG if possible. This format has a smaller size than others, such as PNG, which results in faster downloads. Even better is to use SVG, a vector format that provides perfect quality at any zoom. Use Lottie instead of GIF if possible. Lottie has a huge advantage over GIFs, and that is their infinite resolution and size. The size can be up to 100 times smaller than a similar GIF animation. Using Lottie can greatly improve loading times.

👉

Materials

Remove unused materials

In the process of selecting material and trying it out, the object may accumulate several materials. Remove unnecessary materials.

Also, Vectary uses a few material properties that can also have an impact on performance:

Opacity

Opacity can heavily affect performance (if you use the Blend method) if there are other objects behind the object with opacity applied. Try not to cover a large area of the screen with objects that use Opacity (Blend method) to improve performance.
If possible, try to use the Mask method. The Mask has almost no effect on performance, and in certain cases can give much better results.

Subsurface

Has a medium impact on performance. Try not to cover most of the screen with this material.

Refraction

Can severely reduce performance if an object with this material occupies a large portion of the screen. Try to avoid covering a large part of the screen with this material.
Try to avoid refraction if it can be replaced by an opaque (non-transparent) material. For example, if there is a dark bottle of wine, it is better to adjust the basic material parameters (color + roughness).

Clearcoat

In some cases, it may have a medium impact on performance. Try not to cover most of the screen with this material.

Effects

Some effects greatly impact performance. Always make sure that all mentioned effects are necessary for your project (sometimes they really don't make sense). The more powerful the GPU, the faster it will calculate effects in real time. The same goes for working in Vectary Studio. It is best not to enable effects unnecessarily. Set them up but then, temporarily hide them.

👉

Light and Shadows

Using light with shadows can significantly affect performance.

Here are some tips:

Always make sure that all light sources are required. Sometimes you can get it by increasing the intensity of the light from the Environment (the intensity value can be greater than 100).
Local light sources do not have shadows enabled by default. If it is not necessary, do not include shadows.
Try to use the fewest number of light sources with shadows. Having more than 2 lights with shadows can cause significant performance issues.
Prefer Directional light or Spot light, as these fixtures use less heavy shadow calculations. Avoid using more than one Point or Rectangle light with shadows.

👉

Modifiers

Use Geometry instances if possible. If you use several identical objects, you can either place them in the Array modifier or duplicate related objects (Ctrl+Shift+D). This will save the geometry data of only one copy, which saves the project size.
Try to avoid baked geometry objects as much as possible. Try to edit primitive objects with modifiers. And bake the geometry only if there is no other way to achieve the goal.

Reduce your own HDRi

If you use your own HDRi, make sure they are low resolution. If you don't need to see HDRi on reflective materials, you can use HDRi with a minimum resolution.

👉

Preparation for sharing

Do not cover the whole scene with objects if possible

This is very important because if the object takes up the whole background, then the whole scene is rendered. If you change the background to the background color, only the area that the object covers will be rendered (it could be 10% instead of 100%). This way you can significantly increase performance.

If you want to set the background color, always use the Background settings, rather than placing Plane or Backdrop behind objects. All background settings have almost no effect on performance.

Try to keep embed under 5MB (max 10MB)

To check, just go into preview mode and click on the spinner icon near Loading time:

Performance check

Preview mode

Scene performance analyzer — when you open the preview mode, the right bar displays information about the performance of the scene, there you can see what you can improve.

👉 Read more here.

On the scene itself, the preview mode shows everything exactly the same (1:1) as it would work in the shared project. So you can check if everything works as expected.

It is always good practice to open the scene on low-performance devices such as cell phones or old laptops. That way you can be sure that other people will have the best possible experience with the scene.

Ground Plane

Change the size of the Ground Plane object in the pop-up menu.

A smaller Ground plane means that less screen area is covered by objects, resulting in better performance.

Bake Ground plane for better performance and a more natural shade. Read more here.

Adjust the center of rotation

You can set the point around which the scene will be rotated. The most accurate way to do this is with the camera by manually setting the pivot point position of the camera.

It is also possible to use the Fit View feature (hotkey A), as to focus on the object and the rotation will take place around it. This applies to both Studio and Viewer.

👉

Limit the views

By default, the viewer can control the camera at will, without any restrictions.

Set viewing limits by limiting rotation angles, zoom, and panning.

You will find these settings among other camera options.

👉

Use the turntable feature

The scene can be made by rotating it with different parameters.

This feature is also part of the camera settings.

👉