Vue+SuperMap iClient3D for WebGL
Overview
In the project of 3D application development based on vue framework + SuperMap iClient3D for WebGL product, The more common problems are performance lag and low frame rate. After investigation, it is found that the following problems are generally caused, and the reasons and solutions for related problems are summarized for reference:
Common problems and solutions
1. If the Supermap3D object viewer is placed in the store, data, and computed, it will cause a serious drop in the Supermap3D frame rate.
The vue responsive framework is very friendly to the rendering of page data, and will convert the properties of all objects in the data into get and set for monitoring. However, when Supermap3D is directly mounted to the data object of vue (as shown in Figure 1), the large number of objects in Supermap3D will affect the rendering efficiency of the entire page and reduce the frame rate. Especially when loading a large model scene, the impact is more obvious.
Figure 1: Wrong approach
The correct approach: Use the viewer object as the global object of the window to prevent vue from hijacking the viewer, and at the same time, it is convenient to call in other components. As shown in Figure 2:
Figure 2: The correct approach
2. Not only the viewer object, but all objects under Supermap3D are not recommended to be placed in the store, data, and computed, such as handler editing events. As shown in Figure 3:
Figure 3: Wrong practice
The correct approach is to define the handler editing event outside of the data. As shown in Figure 4:
Figure 4: The correct approach
3. Objects such as analysis functions should be destroyed in time after being used up to prevent the situation where the function is closed on the interface but the object still resides in memory. As shown in Figure 5:
Figure 5: Destroying used objects