Here, we recommend some optimization techniques that have proven to be well-suited for creating interactive Web-based experiences. This chapter is mainly based on Soft8Soft's speech at the Verge3Day Europe 2019 conference.
Recommended: Use NSDT editor to quickly build programmable 3D scenes
1. Geometry/Grid
Geometry is the foundation of 3D applications because it forms the main shape of the model. For smoother reflections and faster rendering, you should keep the mesh as regular as possible. At the beginning, you should decide what level of detail you want in your scene and stick to this while modeling.
When modeling creases, it's better to use smoothing groups rather than adding more polygons:
When working with cylindrical models, strive to reduce the number of polygons in its center.
Don't let your model have extra details that the user won't see anyway. As shown in the image below, the orange highlighted edges define the level of detail throughout the model, so you can use this as a reference.
2. Normal map
A common way to optimize WebGL performance is to reduce the polygon count by baking normal maps from a high-poly model to a low-poly model.
However, due to the limited accuracy of 8-bit images, normal maps may produce visible artifacts. Some possible solutions are shown below: using a higher precision (16-bit) image will produce a larger file, while the second method using a smoothing group with a normal map is quite time-consuming and does not guarantee a clean result . The third method may work in some cases: if your surface is quite rough, consider adding some noise to the material to reduce these artifacts.
In our experience we have found that the best solution for glossy objects is to use an intermediate polygonal geometry with a smoothing group and without any normal maps.
Finally, there may be situations where you want to use normal maps instead of highly detailed meshes:
- Objects are made up of many different surfaces.
- The surface is rough and will not produce precision workpieces.
- Objects are further away or smaller so the user won't notice any artifacts.
3. Texturing
This is a typical set of textures used in PBR pipelines (and in general).
As you can see, most are in black and white. Therefore, you can combine black and white textures into the RGBA channels of a single image, with up to 4 maps per image.
If you only have a black and white texture, you can combine it with any existing RGB texture by packing it into an alpha channel. Finally, if you have no images to merge, you can convert the black and white images to jpeg format with 95% compression and enable grayscale mode.
Another way to reduce texture size is to optimize the UV space. The more compact the UV unwrapping is, the more efficiently the image uses texture space. Therefore, smaller images can be obtained without any loss of quality.
4. Vertex color
Using vertex colors instead of images is an effective way to speed up loading and improve the overall performance of your WebGL application. Although it comes at the cost of extra edges that you have to add to the model to separate the different vertex colors.
You can also use vertex colors to define roughness, metallicity or specular surfaces or any other parameter. An example of such a material can be seen below, where only vertex colors are used.
5. Number of shaders
This is very beneficial for reducing the different materials/shaders in the scene. Shader processing in WebGL can cause longer loading times, especially on Windows. Additionally, with fewer shaders, the engine spends less time switching between them while rendering, improving performance.
If you have similar materials that only differ in texture, you can use just one material and load/swap its texture at runtime. You can do this using a replacement texture puzzle or using JavaScript. This will not only optimize the number of shaders, but also reduce the number of images loaded when the application starts.
This is an example of such optimization. All these tires are represented by only one material and are configured by swapping their textures.
To reduce the number of shaders, 2 or more simple materials can be combined into one larger material. This technique is particularly effective if you plan to switch between these materials (such as if you are making a configurator application), as it runs faster and also allows for animated transitions.
6. Draw call
In addition, there is another important aspect - the number of draw calls. This number can be obtained from the Geometry Buffer section of the print performance information puzzle output. This is roughly equivalent to the number of separate objects if each object is assigned only one material, whereas multi-material objects require more draw calls to render them.
Therefore, you should incorporate meshes where possible and use fewer unique materials to reduce the number of draw calls and improve performance.
You can use this online tool to batch optimize materials:
https://gltf.nsdt.cloud
If you have an animated object, you can still connect its parts together and animate them using bones, which is sometimes more convenient when animating separate objects.
7. High dynamic range lighting
If you illuminate the scene with just an HDR image without using any light source, it will help improve performance significantly. HDR files may be less than 1 Mb in size.
8. Shadow
Use dynamic shadows only if they help render the object well. In the image below, dynamic shading used in an industrial robot demonstration emphasizes the shape of the robot model. The model itself can be rotated, so the shadow cannot hide any part of the object from the user. On the other hand, the shadows in the scooter demo blur many details.
If your objects don't move in your application, you can bake shadow and ambient occlusion maps and apply them to the plane underneath the object.
9. Model format
The most suitable 3D model format for WebGL applications is GLTF, so don’t forget to save your 3D model as GLTF or binary GLB, or use NSDT 3DConvert to convert models in other formats to GLTF or to GLB :
Original link: 9 WebGL performance optimization tips—BimAnt