Performance Optimisation for WebGL Data Visualisation

When using WebGL for data visualisation, there are various performance optimisation techniques that can be taken to improve rendering efficiency and user experience. Here are some common performance optimisation methods. Beijing Muqi Mobile Technology Co., Ltd, a professional software outsourcing and development company, welcome to exchange and cooperation.

product details

1.Geometric mesh optimisation:

Keep the mesh regular and avoid unnecessary details to reduce the number of polygons and thus increase the rendering speed .

2.Normal Mapping:

Reduce the number of polygons by baking the normal mapping from a high polygon model to a low polygon model, but be aware of possible artefacts due to the precision limitations of 8-bit images .

3. Texturing:

Reduce texture size by combining multiple black and white textures into a single RGBA-channel image, or by using JPEG format and enabling greyscale mode.

4. Vertex colours:

Using vertex colours instead of images can speed up loading and improve performance, although this may require extra edges.

5. Reduce shader count:

Reduce the number of different materials/shaders in the scene to reduce loading time and improve switching efficiency during rendering.

6. Draw call optimisation:

Reducing the number of draw calls can be achieved by merging meshes and reducing the use of unique materials.

7. High Dynamic Range (HDR) Lighting:

Use HDR images for lighting instead of multiple light sources to improve performance.

8. Shadow use:

Use dynamic shadows only when they help render objects, or bake shadows and ambient light occlusion maps for non-moving objects.

9. Model format selection:

Use a model format suitable for WebGL applications, such as GLTF or GLB, to optimise loading and rendering performance.

10. Use Web Workers:

Use Web Workers to perform complex calculations to avoid main thread lag and improve interactive performance.

11.LOD technique:

Achieve multiple levels of detail in the model, dynamically adjust the model details according to the camera distance to reduce the rendering burden.

12. Face culling technology:

Use back culling to reduce unnecessary rendering calculations and improve performance.

13. Packetised streaming loading:

For 3D scenes with large data volumes, packetised loading and streaming are used to reduce user waiting time.

14. Use caching and CDN:

Use browser caching and content delivery network (CDN) to improve loading speed and reduce server bandwidth pressure.

15. Level-of-Detail (LOD) Rendering:

Reduce the amount of geometry to be processed by using different level-of-detail techniques depending on the distance of the object from the camera.