A device and method for optimizing performance of a web three-dimensional large scene animation demonstration based on a Three.js engine

Abstract

The application discloses a kind of based on Three.js engine web page three-dimensional scene animation demonstration performance optimization device and method, based on Three.js engine is carried out system development, establishes double scene and is rendered, model scene realizes the storage and material model position update calculation of model, rendering scene realizes the rendering processing of merged model.Animation scheduling center judges whether the model in scene is animation model, animation model needs to carry out position real-time update calculation, other model system judges model and merged mode, load new model object constructed after merging to rendering scene and render, so as to reduce the Draw Call number when rendering, freeze the model without animation execution simultaneously, system does not carry out position calculation to this part of model, reduce performance overhead.

Description

TECHNICAL FIELD

[0001] The application relates to the technical field of three-dimensional animation demonstration, and in particular to a Three.js engine-based webpage three-dimensional large-scene animation demonstration performance optimization device and method. BACKGROUND

[0002] When a three-dimensional scene is demonstrated in a webpage, a plurality of three-dimensional models of different types are usually loaded, and one type of three-dimensional model is used multiple times to finally form a three-dimensional scene. During the animation demonstration process, the system refreshes and renders the three-dimensional scene in real time, and each model in the refreshed scene needs to undergo one Draw Call (drawing instruction). When the number of models used in the scene is in the thousands, the Three.js will undergo thousands of Draw Calls. If each Draw Call takes 2 ms, the final rendering of a scene of one thousand models takes 2 s, and when the number of models reaches ten thousand, it takes 20 s. This rendering method will cause the animation to be stuck in a large scene, and only simple scene demonstration can be performed, and in a complex scene, the user cannot normally use the system. SUMMARY

[0003] The application aims at the deficiencies of the prior art and provides a Three.js engine-based webpage three-dimensional large-scene animation demonstration performance optimization device and method which freezes non-animation models, reduces system position update calculation, and improves system performance.

[0004] The technical scheme of the application is as follows:

[0005] The application discloses a Three.js engine-based webpage three-dimensional large-scene animation demonstration performance optimization method, which comprises the following steps:

[0006] A double-scene dispatching center, an animation dispatching center, a model scene, and a rendering scene are established.

[0007] The system calls a scene loading module to load the models to the model scene, and the model scene stores the models and updates the material model positions.

[0008] The animation dispatching center generates a demonstration animation, judges the models in the scene, freezes the models without animation tasks, performs real-time position update calculation on the animation models, and creates a merged model according to the number of materials.

[0009] The double-scene dispatching center loads the merged model to the rendering model for rendering.

[0010] Further, the method specifically comprises the following steps:

[0011] S1, load the model, determine whether the model in the scene exists and needs to be cloned, and the newly loaded model and the existing model share geometric surface data and material data;

[0012] S2, establish a double scene for rendering, use the Three.js engine for system development, use the double scene scheduling center to realize the storage of the model scene and the position update calculation of the material model, and render the scene to realize the rendering processing of the merged model;

[0013] S3, determine whether the model in the scene is an animation model, the animation model needs to be updated in real time, judge the model and the merging mode of the other model system, load the new model object constructed after merging to the rendering scene by using the double scene scheduling center, and render the scene again. At the same time, the models without animation execution are frozen;

[0014] S4, perform three-dimensional animation demonstration.

[0015] Further, in the step S1 of loading the model, the system sends a network request to load the scene file in the server according to the scene scheme selected and saved by the user in the system.

[0016] Further, in the step S3, the system calls the scene loading module, parses the scene file, and uses the animation scheduling center to traverse the models in the scene animation path set. If the model is a conveyor type model, it is determined whether the model is set with an animation attribute. For the model without the animation attribute, the system sets a frozen identifier and adds the model to the frozen model set Blocking_List[]. For the model with the animation attribute, the animation scheduling center traverses the sub-models in the model, extracts the three-dimensional geometry shared by the sub-models and the world coordinates of each sub-model, and adds the model to the animation merging set Animation_List[].

[0017] Further, the model without the animation attribute includes a shelf, a track line, and a text type; the model with the animation attribute includes a single machine device, a robot device, and an AGV device.

[0018] Further, after the model in the scene is added to the corresponding set according to whether it is an animation model, the double scene scheduling center merges the models in the animation merging set Animation_List[], generates a merged serial number, and binds the serial number to the original sub-model attribute. The animation scheduling center listens to the position coordinate update of the model and the sub-model in the merged Animation_List[] set, and synchronously updates the updated coordinates of the model or the sub-model to the corresponding serial number part world coordinates in the merged model.

[0019] Further, the three-dimensional animation demonstration of the step S4 includes the following steps:

[0020] S4.1, animation material preparation, the animation scheduling center creates a basic unit model of the material according to the quantity and type of the material set by the user, and then creates a combined material model according to the quantity. The double-scene scheduling center loads the combined material model into the rendering scene for rendering. When the model is created for the first time, the coordinate of the material model of each sequence is set to zero, so that the material is temporarily not displayed during rendering.

[0021] S4.2, during animation, the double-scene scheduling center traverses the frozen model set Blocking_List[], sets a frozen identifier for the combined model of the corresponding type in the rendering scene, and the rendering scene does not perform position update calculation when performing refresh rendering. The animation scheduling center extracts the model set without the frozen identifier in the model scene, and only updates the position coordinate information of the non-frozen model when performing rendering. The frozen model system no longer performs position update calculation.

[0022] S4.3, animation pause, the double-scene scheduling center unfreezes the models in the frozen model set Blocking_List[], and the models can be edited. After modification, the animation demonstration can continue.

[0023] S4.4, animation end, the double-scene scheduling center clears all models in the model scene and the rendering scene, and re-executes the scene file loading. At this time, the models have been completely cached locally, and the system performs scene model copying according to the model type to realize fast recovery of the scene.

[0024] Further, the animation scheduling center of S4.1 updates the coordinates of the material on the path model in real time according to the path. The animation scheduling center synchronizes the coordinates of the specified sequence number part in the combined material model in the rendering scene according to the sequence number of the changed material model bound in the model scene. After synchronization, the scene rendering is triggered.

[0025] Further, after the step S4.1 animation material preparation is completed, the system traverses the models in the scene. The models not in the path set range are set with a frozen identifier, and the models are added to the frozen model set Blocking_List[].

[0026] The application further discloses a Three.js engine webpage three-dimensional large scene animation demonstration performance optimization device, characterized by comprising a scene loading module, a double scene dispatching center, an animation dispatching center, a model scene and a rendering scene, the model scene realizes storage of models and material model position updating calculation, and the rendering scene realizes rendering processing of the combined model; the animation dispatching center independently calculates the coordinate position of the model scene, judges whether the model in the scene is an animation model, freezes the model without animation execution, the system does not perform position calculation on the frozen model, performs real-time position updating calculation on the animation model, and combines the animation model and loads the combined animation model into the rendering scene through the double scene dispatching center for rendering.

[0027] Compared with the prior art, the application has the following beneficial effects:

[0028] 1. The non-animation model is frozen, the system does not perform position calculation on the model, the system position updating calculation is reduced, and the system animation rendering performance is improved.

[0029] 2. The material model in the animation demonstration is combined, optimized and independently calculated and processed, the number of DrawCall is greatly reduced, the rendering efficiency is improved, the rendering performance of the three-dimensional scene is ensured, and the three-dimensional scene can run smoothly even if thousands of material models are created in the animation demonstration.

[0030] 3. The model with animation in the three-dimensional scene is extracted, the coordinate position of the model and the sub-model is independently calculated and updated by the animation dispatching center, and the real-time synchronization is updated to the combined model of the rendering scene, and the three-dimensional scene rendering time is reduced. BRIEF DESCRIPTION OF DRAWINGS

[0031] Figure 1 The figure is a flowchart of the application;

[0032] Figure 2 The figure is a model type diagram of the application with a frozen model set;

[0033] Figure 3 The figure is a model type diagram of the application with an animation combined set;

[0034] Figure 4 The figure is a three-dimensional animation demonstration flowchart of the application. DETAILED DESCRIPTION

[0035] It is to be understood that the terms "first" and "second" and similar such relational terms are used solely to distinguish one entity or action from another without necessarily requiring or implying any such actual relationship or order between such entities or actions. Also, the terms "comprises", "comprising", or any other variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but can include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element preceded by "comprises... a" does not, without more constraints, foreclose the existence of additional identical elements in the process, method, article, or apparatus that comprises the recited element.

[0036] The technical solutions of the application will be further described in detail below with reference to the embodiments.

[0037] As shown in Figure 1 The application discloses a method for optimizing performance of web three-dimensional large scene animation demonstration based on a Three.js engine, a system is developed based on the Three.js engine, a double-scene and an animation scheduling center are established, a model scene is used to realize storage of models and material model position update calculation, and a rendering scene is used to realize rendering processing of merged models, so that the number of Draw Call times during rendering is reduced; the animation scheduling center judges whether the models in the scene are animation models, performs real-time position update calculation on the animation models, and performs model merging, and freezes models without animation execution, so that the system does not perform position calculation on the models, and performance overhead is reduced.

[0038] The specific steps are as follows:

[0039] S1, loading models, judging whether existing models in a scene are cloned and copied, and the newly loaded models and the existing models sharing geometric surface data and material data;

[0040] S2, establishing a double scene for rendering, developing a system by using the Three.js engine, realizing storage of models and material model position update calculation by using a double-scene scheduling center, and realizing rendering processing of merged models by using a rendering scene;

[0041] S3, judging whether the models in the scene are animation models, performing real-time position update calculation on the animation models, judging models and merging modes by using the system, loading a new model object constructed after merging to a rendering scene by using a double-scene scheduling center, and rendering the rendering scene, and freezing models without animation execution;

[0042] S4, performing three-dimensional animation demonstration.

[0043] The user selects a saved scene scheme in the system, and the system sends a network request to load the scene file in the server. The system calls the scene loading module, parses the scene file, and loads the scene into the model scene according to the type of the model. The build optimization module traverses the models in the model scene, and performs merging and optimization processing according to the type of the model.

[0044] As shown in Figure 2 and Figure 3 , during the animation demonstration, the animation scheduling center traverses the models in the scene animation path set, judges the type of the model, and judges whether the model is set with an animation attribute if it is a conveying type model. For models without an animation attribute, the system sets a frozen identifier and adds the model to the frozen model set Blocking_List[]. For models with an animation attribute, the animation scheduling center traverses the sub-models in the model, extracts the three-dimensional geometry shared by the sub-models and the world coordinates of each sub-model, and adds the model to the animation merging set Animation_List[]. The models without an animation attribute include shelves, track lines, and text types. The models with an animation attribute include single-machine devices, robot devices, and AGV devices. At the same time, when the system traverses the models in the scene, for models not in the path set range, the system sets a frozen identifier and adds the model to the frozen model set Blocking_List[].

[0045] After the model type judgment is completed, the double-scene scheduling center merges the models in the animation merging set Animation_List[], generates a merging serial number, and binds the serial number to the original sub-model attribute. The animation scheduling center listens to the position coordinate updates of the models and sub-models in the merging Animation_List[] set. After the coordinates of the models or sub-models are updated, the corresponding serial number components in the merging model are synchronously updated.

[0046] As shown in Figure 4 , the three-dimensional animation demonstration includes the following steps:

[0047] S4.1, animation material preparation, the animation scheduling center creates a material basic unit model according to the material quantity and material type set by the user, and then creates a merged material model according to the quantity. The double-scene scheduling center loads the merged material model into the rendering scene for rendering. When the material model is created for the first time, the coordinates of each sequence are set to zero to ensure that the material is temporarily not displayed during rendering.

[0048] The animation scheduling center updates the coordinates of the materials on the path model in real time according to the path. The animation scheduling center synchronizes the coordinates of the specified serial number components in the merged material model in the rendering scene according to the serial number bound to the changed material model in the model scene. After the synchronization is completed, the scene rendering is triggered.

[0049] S4.2 During animation execution, the dual-scene scheduling center traverses the frozen model set Blocking_List[], sets a freeze flag for the corresponding merged models in the rendering scene, and does not perform position update calculations when the rendering scene performs refresh rendering; the animation scheduling center extracts the set of models without freeze flags in the model scene, and only updates the position coordinate information of the non-frozen models when performing rendering. The frozen model system no longer performs position update calculations;

[0050] S4.3 Animation paused. The dual-scene scheduling center will unfreeze the models in the frozen model collection Blocking_List[]. The models can be edited. After the modification is completed, the animation demonstration can continue.

[0051] S4.4 After the animation ends, the dual-scene scheduling center clears all models in the model scene and the rendering scene, and re-executes the scene file loading. At this time, all models have been cached locally. The system copies the scene model according to the model type to achieve rapid scene restoration.

[0052] The animation scheduling center of S4.1 updates the coordinates of materials on the path model in real time according to the path. The animation scheduling center synchronizes the coordinates of the parts with specified serial numbers in the merged material model in the rendering scene according to the serial numbers bound to the changing material models in the model scene. After the synchronization is completed, the scene rendering is triggered. After the animation materials are prepared, the system traverses the models in the scene. For models that are not in the path set range, the system sets a freeze flag and adds the models to the frozen model set Blocking_List[].

[0053] This invention also discloses a performance optimization device for webpage 3D large-scene animation demonstration based on the Three.js engine. It is characterized by comprising a scene loading module, a dual-scene scheduling center, an animation scheduling center, a model scene, and a rendering scene. The model scene stores the models and calculates the position updates of the material models, while the rendering scene handles the rendering of merged models. The animation scheduling center independently calculates the coordinates of the model scene, determines whether a model in the scene is an animation model, freezes models without animation execution, and does not perform position calculations on frozen models. It performs real-time position update calculations on animation models and merges the animation models, loading them into the rendering scene through the dual-scene scheduling center for rendering.

[0054] The above-described devices and methods enable 3D animation demonstrations, reducing the number of models in the rendering scene. Even after merging tens of thousands of models by type, only about a hundred models remain in the rendering scene, greatly reducing the number of draw calls and improving rendering efficiency. At the same time, non-animated models are frozen, reducing system position update calculations and improving system performance.

[0055] The specific embodiments described in this application are quite detailed, but they should not be construed as limiting the scope of protection of this application. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of the technical solution of this application, and these modifications and improvements all fall within the scope of protection of this application.

[0056] The "system" provided in this embodiment has the following features and functions:

[0057] Software developed using the Three.js 3D engine allows users to load external FBX models or create basic 3D models using the Three.js engine, assembling them into meaningful models such as shelves, trajectory lines, and text. Users upload FBX format models and input model parameters on a webpage, then load, create, and drag the models to form a complete 3D scene.

[0058] It should be noted that the above description of the "system" does not imply that such a "system" is an essential technical feature, nor should it limit the scope of protection of this invention. This embodiment only uses the method of utilizing the "system" for the purpose of more conveniently and clearly explaining the content of this invention.

Claims

1. A method for performance optimization of large-scale 3D scene animation demonstrations on web pages based on the Three.js engine, characterized in that, Includes the following steps: Establish a dual-scene scheduling center, an animation scheduling center, a model scene, and a rendering scene; The system calls the scene loading module to load the model into the model scene, and the model scene stores the model and updates the material model position. The animation scheduling center generates demonstration animations, uses the animation scheduling center to judge the models in the scene, freezes the models without animation tasks, performs real-time position update calculations on the animation models, and creates merged models based on the quantity of materials. The dual-scene scheduling center loads the merged model into the rendering scene for rendering. Specifically, the following steps are included: S1. Load the model, determine if there is an existing model in the scene and clone it. The newly loaded model and the existing model share the same geometric surface data and material data. S2. Establish dual-scene rendering, use the Three.js engine for system development, use the dual-scene scheduling center to store the model and calculate the position update of the material model in the model scene, and implement rendering processing in the rendering scene. S3. Determine whether the model in the scene is an animated model. Animated models need to be updated in real time. For other models, the system determines the model and merging mode. The dual-scene scheduling center loads the newly constructed model object after merging into the rendering scene. The rendering scene then renders the model. At the same time, models without animation are frozen. S4. Perform a 3D animation demonstration; In step S3, the system calls the scene loading module, parses the scene file, uses the animation scheduling center to traverse the models in the scene animation path set, determines the model type, and if it is a transport type model, determines whether the model has animation attributes. For models without animation attributes, the system sets a freeze flag and adds the model to the frozen model set Blocking_List[]. For models with animation attributes, the animation scheduling center traverses the sub-models in the model, extracts the shared 3D geometry of the sub-models and the world coordinates of each sub-model, and adds the model to the animation merge set Animation_List[].

2. The method for performance optimization of webpage 3D large-scene animation demonstration based on the Three.js engine according to claim 1, characterized in that, In step S1, which loads the model, the system sends a network request to load the scene file from the server based on the scene scheme selected and saved by the user in the system.

3. The method for performance optimization of webpage 3D large-scene animation demonstration based on the Three.js engine according to claim 1, characterized in that, The models without animation attributes include shelves, trajectory lines, and text types; the models with animation attributes include stand-alone devices, robot devices, and AGV devices.

4. The method for performance optimization of webpage 3D large-scene animation demonstration based on the Three.js engine according to claim 1, characterized in that, After the models in the scene are added to the corresponding set according to whether they are animation models, the dual-scene scheduling center merges the models in the animation merge set Animation_List[], generates a merge sequence number, and binds the sequence number to the original sub-model attribute; The animation scheduling center listens for updates to the position coordinates of models and sub-models in the merged Animation_List[] collection, and synchronously updates the updated coordinates of the model or sub-model to the world coordinates of the corresponding part in the merged model.

5. The method for performance optimization of webpage 3D large-scene animation demonstration based on the Three.js engine according to claim 1, characterized in that, The 3D animation demonstration in step S4 includes the following steps: S4.1 Animation material preparation: The animation scheduling center creates a basic unit model of the material based on the quantity and type of the material set by the user, and then creates a merged material model based on the quantity. The dual-scene scheduling center loads the merged material model into the rendering scene for rendering. When creating the material model for the first time, the coordinates of the material model of each sequence are set to zero to ensure that the material is not displayed temporarily during rendering. S4.2 During animation execution, the dual-scene scheduling center traverses the frozen model collection Blocking_List[], sets a freeze flag for the merged model of the corresponding model in the rendering scene, and does not perform position update calculation when the rendering scene performs refresh rendering; the animation scheduling center extracts the model collection without the freeze flag in the model scene, and only updates the position coordinate information of the non-frozen models when performing rendering, and the frozen model system no longer performs position update calculation. S4.3 Animation paused. The dual-scene scheduling center will unfreeze the models in the frozen model collection Blocking_List[]. The models can be edited. After the modification is completed, the animation demonstration can continue. S4.4 After the animation ends, the dual-scene scheduling center clears all models in the model scene and the rendering scene, and re-executes the scene file loading. At this time, all models have been cached locally. The system copies the scene model according to the model type to achieve rapid scene restoration.

6. The method for performance optimization of webpage 3D large-scene animation demonstration based on the Three.js engine according to claim 5, characterized in that, The animation scheduling center of S4.1 updates the coordinates of materials on the path model in real time according to the path. The animation scheduling center synchronizes the coordinates of the components with specified serial numbers in the merged material model in the rendering scene according to the serial numbers bound to the changing material models in the model scene. After the synchronization is completed, the scene rendering is triggered.

7. The method for performance optimization of webpage 3D large-scene animation demonstration based on the Three.js engine according to claim 5, characterized in that, After the animation material preparation is completed in step S4.1, the system traverses the models in the scene. For models that are not in the path set range, the system sets a freeze flag and adds the model to the frozen model set Blocking_List[].

8. A performance optimization device for webpage 3D large-scene animation demonstration based on the Three.js engine, characterized in that, The method for performance optimization of webpage 3D large scene animation demonstration based on the Three.js engine, as described in any one of claims 1-7, includes a scene loading module, a dual scene scheduling center, an animation scheduling center, a model scene, and a rendering scene. The model scene implements the storage of models and the calculation of material model position updates, and the rendering scene implements the rendering processing of merged models. The animation scheduling center independently calculates the coordinate position of the model scene, determines whether the model in the scene is an animation model, freezes the model without animation execution, does not perform position calculation on the frozen model, performs real-time position update calculation on the animation model, and merges the animation model and loads it into the rendering scene through the dual scene scheduling center for rendering.

Images