Improving Viewer Performance

In theory, there's no limit to the complexity of models that can be displayed. However, WebGL is hardware-accelerated, so the viewer's performance depends greatly on the machine displaying it. This is even more important to consider for mobile users. Many different factors can affect how long a model takes to load and how well it performs after it's loaded.

Download Time

Before a model or scene can be rendered, the viewer needs to download and prepare all the required assets. This is what happens during the Loading 3D Model screen as well as the first moments of rendering when higher-resolution textures are loaded (the blue loading bar across the top of the viewer - if you want to avoid this step and only display the model when the full resolution textures are ready, try the preload embed parameter).

Textures

All the texture images need to be downloaded, so using many high-resolution textures can greatly affect download time. We optimize texture file size after you upload a model or make changes to materials, and we will never use a texture larger than 8192×8192 pixels. However, you should minimize the number of textures and the size of textures as much as possible.

Visit the Materials & Textures article and texture performance in this article for more details.

Mesh Size

The higher the vertex count / polygon count of your model, the longer it will take to download.

Background

HDRi environments are large images, and if you are using one for the background and/or lighting, it needs to be downloaded. A fixed image background also needs to be downloaded. A solid color background is the best, as it requires no download.

Scene Optimization

While not technically part of the "download", several scene optimization processes take place before the scene is rendered. This can greatly improve viewer performance. It usually does not take much time, but the more complex the scene, the longer this will take. The following things happen during scene optimization:

Merge identical materials
Merge meshes (geometries) that share the same material
Simplify the scene graph
Remove unused UVs
Remove unused vertex colors
Remove unused normals & tangents (this can also happen during processing in some cases)
Channel pack textures (e.g. Diffuse and Metalness)

Scene optimization is disabled by default in the 3D Settings editor and when using the Viewer API. Geometries are not merged for animated objects or transparent objects, up to a maximum of 100 geometries per material.

If you don't need to keep the meshes and materials separated in a Viewer API application, you can enable these optimizations in your URL options:

'merge_materials': 1,
'graph_optimizer': 1,
'material_packing': 1,

Rendering Performance

If you're having trouble with slow model viewing, bad frame rates, or browser crashes, the scene is probably too complex for your device or browser. There are many complexity factors that affect performance.

Materials
Textures
Meshes
Polygons / Vertices
Bones
Nodes
Transparency
Shadows / Lighting
Shading
Post-Processing Filters
Conclusion

Materials

A large number of materials is a significant bottleneck in rendering performance. Instead, you can use a single texture instead of many material colors. Sketchfab supports a maximum of 100 materials in a scene.

Textures

Textures require a lot of VRAM to render, so the fewer textures you can use, the better. A 4096×4096 (4k) texture, for instance, can require ~50MB (50 MiB, actually) of memory. It adds up quickly with lots of meshes and big textures.

Keep in mind the size of a texture versus the final screen size of the object in question. It's unnecessary to use a large texture on an object that will appear very small on the screen. Rather than use many separate textures, you can use a texture atlas to pack the textures for different objects together. This also allows you to have fewer materials. Check out the Polycount Wiki on the subject.

Textures above 8k will never be rendered in the viewer. If you need higher resolution, use multiple textures instead. Non "power of two" textures will never be rendered in the viewer. See Materials and Textures.

While there's no strict rule here, we've found that 4k resolution is a good limit for performance and compatibility. It's better to use a 4k texture than several 2k textures, but it could be better to use a few 4k textures rather than an 8k texture.

Meshes

The more separate meshes/objects/geometries in your scene, the worse the model will perform. Ideally, there would be only one mesh for each material. This is a common issue with SketchUp models and CAD models. During processing, we also split large meshes into 65,536-vertex chunks, in order to support all graphics cards.

Polygons / Vertices

Decimating your models to reduce polygon count can be a good way to improve performance. In most cases, it's unnecessary to have a polycount in the millions. It's also possible to 'fake' a higher polycount with normal mapping. Here are some related tutorials:

The lower you can make your polygon count the better, and there is no exact "maximum" because it depends on lots of different variables about the model and the device. However, as a rule of thumb, aim for less than 2 million polygons for desktop and less than 500,000 polygons for mobile.

Bones

The more bones you use in an animated skeleton, the more expensive it is to render the animation.

Nodes

The total number of nodes in the scene graph roughly represents the overall complexity of the model, and includes common objects like nodes, transforms, meshes, and bones.

Transparency

Rendering transparency is very expensive, depending on the type of transparency you use. From fastest to slowest: Mask, Dithered, Additive, Blending, Refraction. The more objects with transparency and the more polygons a transparent object has, the slower rendering becomes.

See Transparency.

Shadows / Lighting

Rendering real time shadows from dynamic lights is expensive. Lights Attached to camera are problematic because they must be rendered every single frame as the camera moves. It's best to avoid Directional and Hemi lights casting shadows and attached to camera whenever possible.

Shading

Using Shadeless mode is faster than Lit mode because there are no light calculations needed.

Post-Processing Filters

Using a lot of post-processing filters can hurt performance. SSR, SSAO, Bloom, and DoF are particularly expensive.

Conclusion

All of these different complexity factors interact to influence the complexity of the scene and affect the viewer's performance. It's not an exact science, but here are some recommendations for model performance:

As few materials as possible
50 geometries/meshes or less
10 textures or less, especially when they are 4k+
2 million polygons or less for desktop; 500,000 polygons or less for mobile
Fewer than 35 bones per geometry
Low scene complexity
Avoid expensive transparency methods
Avoid lights casting shadows when attached to the camera
Consider using Shadeless mode when appropriate

Obviously, different models will have different requirements, but it's important to keep these points in mind, especially for large and complex scenes. Check out Unity's Performance Tips for more details.

Download Time

Textures

Mesh Size

Background

Scene Optimization

Rendering Performance

Materials

Textures

Meshes

Polygons / Vertices

Bones

Nodes

Transparency

Shadows / Lighting

Shading

Post-Processing Filters

Conclusion

Other common problems

Shaky model with cracks and seams

Flickering surfaces (Z-Fighting)

Download Time

Textures

Mesh Size

Background

Scene Optimization

Rendering Performance

Materials

Textures

Meshes

Polygons / Vertices

Bones

Nodes

Transparency

Shadows / Lighting

Shading

Post-Processing Filters

Conclusion

Other common problems

Shaky model with cracks and seams

Flickering surfaces (Z-Fighting)

Related articles