Rendering Optimization for Mobile Web 3D Based on Animation Data Separation and On-Demand Loading

Based on advances in image processing technology and Web-enabling technologies for mobile devices, mobile Augmented Reality (AR) and Virtual Reality (VR) has developed rapidly. The rendering and interaction of 3D models is an important part of AR and VR applications and is closely related to user experience. However, since the existing WebGL 3D JavaScript libraries for Web-based mobile 3D (represented by three.js and babylon.js) load the entire model file at once, large-size 3D models with complex interactions cannot be rendered smoothly due to limited data transmission, the weak computation capabilities of mobile Web browsers, and the latency of 3D model rendering. In this paper, we first propose model-animation data separation and an on-demand loading mechanism to improve the data request and loading process of Web 3D models. The main mechanisms are the following: (1) The model data are segmented into topological data and animation data sequences, and only the necessary data of the model are loaded when the Web-based mobile 3D model is first rendered. (2) The 3D model animation data sequence is semantically decomposed, and a multigranular model animation data service is established to provide continuous animation data support. (3) An asynchronous request-response mechanism is used to optimize the loading method of the model data. The model rendering mechanism uses an on-demand request and rendering method to transform the centralized loading process of the 3D model into a decentralized process. According to the testing and verification results, this optimization method can reduce the latency of mobile Web 3D in model data transmission and rendering by 24.72% for the experiment models. The interaction experience of Web-based mobile AR and VR is substantially improved relative to existing Web 3D rendering engines and rendering mechanisms, especially in complex interactive service scenarios.