Web 3D Application Operation Method and Device

Abstract

A method and device for operating a Web 3D application are disclosed. The method includes: obtaining a user operation from the current page of the current 3D scene of the Web 3D application; switching the route of the currently displayed page according to the user operation; and changing the display of the front-end components and the display of 3D graphics based on the change of the display page route, where the Web 3D application includes at least one 3D scene, the at least one 3D scene corresponds to multiple pages of a front-end single-page application, and front-end components of the front-end single-page application can be mounted in the 3D scene. Thus, any operation of a user in the Web 3D application can be obtained, converted into front-end routing parameters and passed to both the front-end single-page application and the Web 3D application, so that corresponding 3D graphics transformation and front-end display transformation can be simultaneously achieved through page switching.

Description

Technical Field

[0001] The present disclosure relates to the field of 3D applications, and in particular, to a method and device for operating a Web 3D application. Background Art

[0002] With the introduction of the WebGL standard, web applications have entered the 3D era. Compared with two-dimensional web pages or 3D applications that need to be installed, web-based 3D applications have significant advantages in terms of visualization and convenience. Therefore, web-based 3D visualization systems have emerged as the times require.

[0003] In practical applications, 3D visualization systems not only need to display 3D graphics, but also need to display the real-time status of the entity objects represented by the 3D graphics. For this reason, various front-end components indicating the status usually need to be mounted on the web page.

[0004] Therefore, a Web 3D application operation solution is needed to optimize the interaction between 3D graphics and Web front-end applications, so as to optimize the response speed of the user side and reduce the operating pressure on the local and server sides. Summary of the Invention

[0005] One technical problem to be solved by the present disclosure is to provide a method and device for operating a Web 3D application. The method can obtain the operations of a user in a Web 3D application, convert them into front-end routing parameters, and pass them to both the front-end single-page application and the Web 3D application, so as to realize corresponding 3D graphics transformation and front-end display transformation through page switching.

[0006] According to the first aspect of the present disclosure, a method for operating a Web 3D application is provided, including: obtaining user operations from the current page of the current 3D scene of the Web 3D application; switching the route of the current display page according to the user operations; and changing the display of the front-end components and the display of the 3D graphics based on the change of the display page route, where there is at least one 3D scene in the Web 3D application, the at least one 3D scene corresponds to multiple pages of the front-end single-page application, and front-end components of the front-end single-page application can be mounted in the 3D scene.

[0007] Optionally, obtaining user operations from the current display page of the current 3D scene of the Web 3D application includes: obtaining object operations of the user on the 3D display object in the current display page; or obtaining component operations of the user on the front-end components mounted in the current display page, where both the object operations and the component operations can cause the switching of the display page route.

[0008] Optionally, switching the route of the current display page according to the user operation includes: in response to the user operation pointing to another page of the current three-dimensional scene, switching the route of the current display page to the route of the other page as the target page, and obtaining the route parameters of the target page.

[0009] Optionally, changing the display of the front-end component and the display of the three-dimensional graphics based on the change of the display page route includes: the front-end single-page application obtains the front-end resources corresponding to the target page and not yet loaded according to the obtained route parameters of the target page, and displays the front-end component corresponding to the route parameters based on the obtained front-end resources; the Web three-dimensional application displays the three-dimensional graphics corresponding to the route parameters according to the obtained route parameters of the target page.

[0010] Optionally, displaying the three-dimensional graphics corresponding to the obtained route parameters of the target page includes: obtaining a transition function corresponding to the change from the current page to the target page; and based on the transition function, completing the change of the three-dimensional graphics display including camera change and three-dimensional graphics change.

[0011] Optionally, changing the display of the front-end component and the display of the three-dimensional graphics based on the change of the display page route includes: when the change of the display route indicates a switch to a page included in another scene, obtaining the three-dimensional resources corresponding to the other scene as the target scene and not yet loaded and the front-end resources corresponding to the target page and not yet loaded; and displaying the three-dimensional graphics corresponding to the target scene and the target page based on the obtained three-dimensional resources, and displaying the front-end component corresponding to the route parameters based on the obtained front-end resources.

[0012] Optionally, the method further includes: obtaining the scene list and the three-dimensional resource list corresponding to the Web three-dimensional application; and when the user operation corresponds to a scene switch, traversing the scene list and performing one of the following operations includes: if the target scene is recorded as loaded in the scene list, directly switching to the target scene; if the target scene is recorded as not loaded in the scene list, obtaining the three-dimensional resources corresponding to the target scene and not yet loaded, and modifying the status of the target scene recorded in the scene list to loaded.

[0013] Optionally, the method further includes: maintaining the loaded front-end resources in the memory of the front-end single-page application; and reusing the loaded front-end resources when the display page route is switched.

[0014] Optionally, the method further includes: the front-end component obtains the status information of the entity corresponding to the Web three-dimensional application; and displays the updated status in the front-end component or in the three-dimensional graphics.

[0015] According to a second aspect of the present disclosure, there is provided a computing device, including: a processor; and a memory storing executable code thereon, which when executed by the processor, causes the processor to execute the method as described in the first aspect above.

[0016] According to a third aspect of the present disclosure, there is provided a computer program product including executable code, which when executed by a processor of an electronic device, causes the processor to execute the method as described in the first aspect above.

[0017] According to a fourth aspect of the present disclosure, there is provided a non-transitory machine-readable storage medium storing executable code thereon, which when executed by a processor of an electronic device, causes the processor to execute the method as described in the first aspect above. Thus, the present invention can create a three-dimensional scene based on the singleton paradigm, realize the on-demand loading and cross-router reuse of the scene, and reduce the performance overhead of the three-dimensional composite application; it can realize the two-way communication and control between the front-end SPA application and the three-dimensional application based on the monitoring of the front-end routing state, avoid the complex state management introduced due to inconsistent coding paradigms, and reduce the coding maintenance cost; further, the present invention provides a feasible solution for large-scale three-dimensional hybrid applications with multiple scenes and multiple pages from the front-end architecture level, and provides a general construction mode for large-scale three-dimensional applications. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] By describing the exemplary embodiments of the present disclosure in more detail in conjunction with the accompanying drawings, the above and other objects, features, and advantages of the present disclosure will become more apparent. Among them, in the exemplary embodiments of the present disclosure, the same reference numerals generally represent the same components.

[0019] Figure 1 Shows an adaptive flowchart of a Web three-dimensional application operation method according to an embodiment of the present invention.

[0020] Figure 2 Shows an example of a functional architecture of a Web three-dimensional composite application.

[0021] Figure 3 Shows a schematic diagram of information transfer of a state machine.

[0022] Figure 4 Shows a schematic structural diagram of a computing device that can be used to implement the above Web three-dimensional application operation method according to an embodiment of the present invention.

[0023] Figure 5A -H shows an example of a composite three-dimensional application and its operation method according to the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0024] Preferred embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although the preferred embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided to make the present disclosure more thorough and complete, and to fully convey the scope of the present disclosure to those skilled in the art.

[0025] Current Web-based 3D application programs are mainly implemented based on technologies such as WebGL. Due to the characteristics and limitations of Web applications, when implementing 3D applications in front-end applications, many problems need to be considered and solved, mainly including:

[0026] (1) Effective loading and reuse of resources such as models, materials, and data

[0027] (2) Efficiency and user experience of interactions such as drilling / switching in 3D scenes

[0028] (3) How 3D graphics and Web front-end applications interact efficiently

[0029] Although the prior art has relatively comprehensively solved the problem of how to stably run 3D programs on the Web based on frameworks (or libraries) such as Three.js, when 3D applications need to mount front-end components to implement relevant visualization management functions, there is a lack of an effective integration solution between 3D applications and front-end applications.

[0030] Therefore, the present invention proposes a 3D composite application implementation solution that supports the user experience of front-end single-page applications (SPAs) and the 3D interaction characteristics of Web 3D applications.

[0031] In the present invention, a Web 3D application refers to an application instance implemented based on a 3D application framework in a Web application. An instance contains multiple scenes, cameras, graphics, data sources, etc. Before the 3D application runs, virtual objects such as 3D models, lights, and cameras need to be placed in a 3D scene, and a series of operations are performed according to the principles of spatial geometry and graphics. Finally, an image is output to the display device. Therefore, the 3D scene can be regarded as a container for 3D resources and a display canvas for 3D graphics. In the present invention, a 3D scene is created using the singleton pattern, and the 3D scene can be referred to as a 3D view scene or a scene.

[0032] Furthermore, in order to implement visualization corresponding management or control functions, front-end components that can reflect the actual situation of visualization objects need to be mounted on the displayed 3D scene. For example, as will be detailed below Figure 5AIn the 3D application of the data center shown in -H, the 3D layering visualization of the data center is to more intuitively view the operating status of each server in the data center through visualization and promptly detect abnormalities. For this purpose, it is necessary to display the relevant information and current status of the current object, such as fault warnings, etc., on the right side of each figure through the front-end components.

[0033] Therefore, a Web front-end application needs to be incorporated into the Web 3D application. In the present invention, a front-end single-page application (SPA) is combined with the Web 3D application.

[0034] SPA (Single Page Web) is a special Web application model. All its activities are confined to one Web page. Only the corresponding HTML, JavaScript, and CSS files are loaded when the Web page is initialized. Once the page is loaded, the SPA does not perform a page reload or jump. Instead, it uses JavaScript to dynamically transform the HTML and interacts with the user by dynamically rewriting the current page.

[0035] This method realizes the "page" switching through the transformation of the front-end routing. However, since the "page" switching does not involve the loading of new HTML, the user experience will not be interrupted. Here, the front-end routing refers to the application routing implemented through front-end technology. For the front-end single-page application (SPA), the front-end routing is used to organize and isolate different function / content modules. In a single-page application, the switching of page data and modules can be completed through the switching of the front-end routing.

[0036] Correspondingly, the multiple "pages" or "front-end pages" of the SPA mentioned in this article are from the perspective of the user's understanding, referring to the different contents of the Web front-end application that the user can view when accessing different URL paths. In fact, the SPA application only loads one HTML page. When the user switches the access path, the application will lift each module in the page for asynchronous update, loading (or unloading) to achieve the effect of seamless switching of page content.

[0037] Figure 1 The adaptive flowchart of the operation method of the Web 3D application according to an embodiment of the present invention is shown.

[0038] The Web 3D application includes at least one 3D scene and is combined with a front-end single-page application. The at least one 3D scene corresponds to multiple pages of the front-end single-page application, thereby enabling front-end components of the front-end single-page application to be mounted in the 3D scene.

[0039] In step S110, a user operation is obtained from the current page of the current three-dimensional scene of the Web three-dimensional application. The user can perform an operation in the current page (i.e., the "front page" as described above), for example, an operation on a three-dimensional display object. Specifically, the above operation can be a perspective change operation based on mouse dragging, or a zoom operation. The above operation can change the perspective of the camera displaying the three-dimensional graphics, thereby changing the display state of the three-dimensional graphics. Generally, the above perspective change operation will not cause the switching of the "page".

[0040] Since the Web 3D application of the present invention is combined with the SPA application, a front-end component can be mounted in some pages, and the user can also operate the front-end component. The front-end component can obtain the status information of the entity corresponding to the Web 3D application, and thus display the updated status in the front-end component or in the 3D graphics. For example, Figure 5A In the diagram, the right chart can indicate the statistical information and current status of the data center equipment, and the exclamation mark on the left building can highlight the emergency status of the server in Building B, which makes it easier for operation and maintenance personnel to handle the situation accordingly.

[0041] When the user's operation indicates a change in route, then in step S120, the route of the current display page may be switched according to the user's operation. In some embodiments, the user's operation that can cause the route to change may be an object operation of the user on a three-dimensional display object in the current display page, such as in the attached Figure 5A In the figure, the mouse clicks on Building A on the right side of the screen or Building B on the left side of the screen; in other embodiments, the user may also operate the component of the front-end component mounted on the current display page, for example, in the attached Figure 5B In the diagram of , the mouse clicks "Enter" in the front-end component (ie, the A building information table on the right side of the middle of the screen). In other words, the object operation and component operation can both cause the display page route to be switched in some cases.

[0042] After the page route is switched, in step S130, the display of the front-end component and the display of the three-dimensional graphics may be changed based on the change of the display page route.

[0043] Thus, through routing transformation, simultaneous transformation of three-dimensional graphics display and front-end component display is achieved.

[0044] Specifically, in the present invention, according to the user operation, switching the route of the currently displayed page may include: in response to the user operation pointing to another page of the current three-dimensional scene, switching the route of the currently displayed page to the route of the other page as the target page, and obtaining the route parameters of the target page. Figure 5A and 5B As shown, Figure 5AIt is regarded as the current display page. When the user clicks on the right building in the 3D graph on the current page with the mouse, the address (i.e., the route) of the browser changes from the route of the current page example / Cloud / to example / Cloud / A, and route parameters (e.g., route parameter A) are obtained.

[0045] The obtained route parameter A can then be used to change the displays of both the Web 3D application and the front-end single-page application. For this purpose, based on the change in the display page route, changing the display of the front-end component and the 3D graph includes: the front-end single-page application obtains the front-end resources corresponding to the target page and not yet loaded according to the route parameter of the obtained target page, and displays the front-end component corresponding to the route parameter based on the obtained front-end resources; the Web 3D application displays the 3D graph corresponding to the route parameter according to the route parameter of the obtained target page. Similarly, in Figure 5A and 5B In the shown example, the route parameter A can be used for the Web 3D application to change the display of the 3D graph, such as adding a bounding box to Building A to indicate selection; at the same time, it can be used for the SPA to call out the front-end component icon related to Building A information.

[0046] Furthermore, a transition function can be introduced to smooth the display of page switching. For this purpose, displaying the 3D graph corresponding to the route parameter according to the obtained route parameter of the target page includes: obtaining the transition function corresponding to the change from the current page to the target page; and based on the transition function, completing the change in the 3D graph display including camera change and 3D graph change. Since Figure 5A and 5B In the page switching shown, there is no transformation in the display position of the 3D graph and the camera view (i.e., the effect of the transition function is not obvious), so the Figure 5C and 5D with more obvious graphic transformation are combined to illustrate the effect of the transition function.

[0047] In the example in Appendix Figure 5C and 5D , Figure 5C is regarded as the current display page. When the user clicks on the left building in the 3D graph on the previous page corresponding to Figure 5A with the mouse, the address (i.e., the route) of the browser changes from the route example / Cloud / to example / Cloud / B, and route parameters (e.g., route parameter B) are obtained. This route parameter B can be used for the Web 3D application to change the display of the 3D graph, such as adding a bounding box to Building B to indicate selection; at the same time, it can be used for the SPA to call out the front-end component icon related to Building B information, thus obtaining the Figure 5C display page.

[0048] In Figure 5C the display page, the user can click "Enter" in the front-end component, and the route is switched to example / Cloud / B / floor-entry, and the route parameter floor-entry is obtained. The above route parameter floor-entry can be used for the Web 3D application to change the display of the 3D graphics, and thus obtain Figure 5D the floor display presented in the form of an exploded view as shown. In order to make the visual effect coherent, a transition function from page B to page floor-entry can be selected, so that the 3D display changes from that shown in Figure 5C to Figure 5D as shown. For example, the transition function can first zoom in the screen to the main display of Building B (i.e., the camera zooms in), and then use the explosion effect to display the layers.

[0049] In the present invention, the Web 3D application and the SPA application can be regarded as a 3D composite application realized through the two-way transmission of route parameters. Figure 2 An example of the functional architecture of the Web 3D composite application is shown. The left side is the front-end single-page application (SPA), the right side is the 3D application, and the middle part is the mechanism for connection and control between the two applications, for example, through the two-way transmission of route parameters.

[0050] A SPA application usually contains multiple routes (such as route 01, route 02 to route 06 in the figure, etc.). Each route corresponds to a "page", that is, the relationship between the route and the page is one-to-one. Combining Figures 5A - 5E with Figures 5A - 5E each corresponding to a different browser address (i.e., different routes), and each displays a different SPA page.

[0051] Each page is composed of multiple front-end resources (which can be understood as front-end components). For example, when initially loading page 01, the front-end resources 01-02 need to be downloaded. When the front-end route changes, the SPA page also switches accordingly, unloads the resources that are not needed for the next page, and loads the resources that are needed for the next page (and not loaded in the current page). For example, when switching from page 01 to 02, unload the resources for page 01 and obtain resource 03 (for example, obtain resource 03 from the server) to complete the display of the front-end components of page 2. Each resource can be reused for different pages, that is, the loaded front-end resources can be kept in the memory of the front-end single-page application, and when the display page route switches, the loaded front-end resources can be reused. For example, when subsequently switching to page 4, the resource 05 in the memory can be directly loaded without repeated downloading.

[0052] A 3D application consists of multiple 3D scenes, and each scene contains a specific combination of resources (resources in a 3D application mainly refer to elements such as cameras, lights, and meshes). These resources can also be reused in different scenes. When the scene of the 3D application is switched, essentially, the resources that the next scene does not need are unloaded, and the resources that the next scene needs (and are not loaded in the current scene) are loaded. For example, when switching from Scene 01 to Scene 02, 3D resources 03 and 04 can be reused, and only 3D resources 05 and 06 are newly downloaded from the server.

[0053] In the present invention, two-way communication and control between a Web 3D application and an SPA application are achieved through the two-way transfer of routing parameters. It can be pre-specified that three pages corresponding to Routing 01, Routing 02, and Routing 03 share a 3D scene, namely Scene 01. When the page routing is switched, the routing parameters are passed to the SPA application and the 3D application on the left and right sides, thereby realizing the conversion of the SPA application and the 3D application from the current state to the target state referred to by the routing parameters.

[0054] There can be a changing process when switching between any two pages, and the above process can be implemented by a transition function, thereby ensuring the smooth switching of pages. When a user operates in the 3D application, the internal logic of the 3D application directly triggers the switching of the front-end routing, and the switching of the routing will cause changes in both the front-end components corresponding to the SPA application and the 3D graphics. For example, when the user Figure 5A clicks on the building on the right side of the page, the internal logic of the 3D application causes the front-end routing to switch from example / Cloud / to example / Cloud / A, and the routing parameter A causes the SPA application to call up Figure 5B the front-end component of the building A information shown, and causes the 3D application to deepen the display of the graphic boundary line of building A.

[0055] In a preferred embodiment, a state machine can be used to achieve two-way communication and control for the Web 3D application and the SPA application. In other words, Figure 2 the two "routing parameters" shown in

[0056] Figure 3 can be implemented as State Machine 01 and State Machine 02. Figure 3 The state machine shown corresponds to Figure 2 State Machine 01 that connects Scene 01 of the Web 3D application and Routing 01 - 03 of the SPA application in

[0057] Three-dimensional composite applications can optimize the transmission of routing parameters with the help of a state machine. How to drive the feedback of the three-dimensional view when user interactions occur in SPA applications (such as camera transformation, object animation, scene switching, etc.), and how to drive the feedback of SPA applications when interactions occur in three-dimensional applications (such as pop-up floating layers, module switching, page switching, etc.). These functional logics can all be completed in the state machine.

[0058] As mentioned above, the pages corresponding to Route 01, Route 02, and Route 03 share a three-dimensional scene, that is, Scene 01. At this time, each page can correspond to a "state" of the state machine, that is, corresponding to State 01, State 02, and State 03 respectively. When switching routes between the pages within Scene 01, the state of the state machine will change accordingly, that is, switch between State 01, State 02, and State 03 pairwise.

[0059] A "transition process" can be set between any two states. On the application interface, it is reflected as the transition animation of the graphics (transition of the camera, transition of three-dimensional graphics). Here, the method used to define and implement this transition process can be called a "transition function". There are positive and negative processes between any two states. Therefore, a total of 6 transition functions need to be defined in State Machine 01, namely Transition 1-2, Transition 2-1; Transition 1-3, Transition 3-1; Transition 2-3, Transition 3-2.

[0060] When the user operates in a three-dimensional application, the internal logic of the three-dimensional application directly triggers the switching of the front-end route, and the switching of the route will cause the update of the SPA and the state machine. The change of the state will trigger the execution of the corresponding transition function, thereby driving the smooth change of the graphics in the three-dimensional scene. Thus, a control closed-loop of mutual communication and feedback is formed between the SPA and the three-dimensional application.

[0061] During the switching of different pages in the same scene, for example, during the switching between Page 01-03 under Scene 01, since the three-dimensional resources 01-04 corresponding to Scene 01 will all be loaded when the scene is initially loaded, the subsequent switching of Page 01-03 will not involve the loading of three-dimensional resources, but only involve the loading of new front-end resources.

[0062] When it comes to switching between different scenarios, the loading of both 3D resources and front-end resources is required. To this end, based on the change of the display page route, changing the display of the front-end component and the 3D graphics may include: when the change of the display route indicates a switch to a page included in another scenario, obtaining the 3D resources corresponding to the other scenario as the target scenario that have not been loaded and the front-end resources corresponding to the target page that have not been loaded; and displaying the 3D graphics corresponding to the target scenario and the target page based on the obtained 3D resources, and displaying the front-end component corresponding to the route parameters based on the obtained front-end resources.

[0063] Further, in the right part of the 3D application of the composite application ( Figure 2 ), a global "scene list" and "resource list" can be maintained to store the loading status of all 3D scenes and resources. That is, all scenes and resources of the 3D application can be declared in advance in the two lists. To this end, the operation method of the present invention may further include: obtaining the scene list and the 3D resource list corresponding to the Web 3D application; and when the user operation corresponds to a scene switch, traversing the scene list and performing one of the following operations: if the target scene is recorded as loaded in the scene list, directly switch to the target scene; if the target scene is recorded as not loaded in the scene list, obtain the 3D resources corresponding to the target scene that have not been loaded, and modify the status of the target scene recorded in the scene list to loaded.

[0064] Specifically, when the application state is switched, first traverse the scene list. If the status of the target scene is "not loaded", load the scene and load the required resources according to the correspondence between the scene and the resources; after the loading is completed, the status of the corresponding element in the list needs to be updated to "loaded". When switching scenes, before loading a certain resource required by the target scene, first traverse the scene list. If the status of the resource is "loaded", the resource will not be reloaded. For example, when switching to page 04 for the first time, since page 04 corresponds to a new scene 02, and scene 02 includes 3D resources 05 and 06 that have not been loaded before, the above resources can be loaded, and the resource status corresponding to scene 02 can be updated to loaded. When accessing this scene 02 again subsequently, the resource loading can be directly performed according to the indication of the list without obtaining from the server. Thus, multiplexing of scenes and resource instances in the 3D application can be achieved.

[0065] Since in the present invention, the loaded 3D resources and front-end resources can be stored in the memory of the 3D application and the SPA application respectively, the resource loading strategy of the composite application of the present invention can be divided into 3 modes.

[0066] First, when a user first accesses a composite application via a URL, for example, when the user first types in the address https: / / example / Cloud / , it is necessary to establish the initial state of the application based on the route accessed by the user. During initialization, it is necessary to create a SPA application and load the required pages and their related resources for the initial state according to the route; at the same time, it is necessary to create a 3D application and load the required scenes and their related resources for the initial state according to the route.

[0067] Second, during the runtime of the composite application, when the user jumps within the application or accesses other routes, it is necessary to switch to the new state of the application according to the target route. When there is an incremental jump during runtime, for the SPA application, the page corresponding to the target route and its related resources can be loaded and switched to that page, and at this time, the front-end resources of the old page will not be destroyed or released; for the 3D application, the scene corresponding to the target route and its related resources can be loaded and switched to that scene. Similarly, at this time, the 3D resources of the old scene will not be destroyed or released.

[0068] Finally, during the runtime of the composite application, when the user jumps within the application or goes back to a previously accessed route in the history, since it corresponds to a non-incremental jump during runtime, the application state corresponding to that route can be directly switched back. That is, for the SPA application, it can be directly switched to the page corresponding to the target route. Since the relevant resources remain in the memory of the SPA application, there is no need to reload them; for the 3D application, it can be switched to the scene corresponding to the target route. Since the relevant resources remain in the memory of the 3D application, there is also no need to reload them.

[0069] Thus, the composite application implemented based on the above three resource loading modes can avoid the time-consuming caused by repeated loading and unnecessary memory overhead for the already loaded scenes; when the user switches pages based on the browser history (forward, backward), if the destination scene is a previously created scene, the 3D graphics can be seamlessly switched without showing loading on the screen.

[0070] Thus, the present invention realizes a composite 3D application and its operation method that can achieve on-demand loading of 3D scenes and resources, cross-route reuse of 3D view scenes, and two-way communication between 3D applications and front-end applications.

[0071] In one embodiment, the present invention can also be implemented as a computing device. Figure 4 The structural schematic diagram of a computing device that can be used to implement the above Web 3D application operation method according to an embodiment of the present invention is shown.

[0072] See Figure 4 , the computing device 400 includes a memory 410 and a processor 420.

[0073] The processor 420 can be a multi-core processor or include multiple processors. In some embodiments, the processor 420 can include a general-purpose main processor and one or more special coprocessors, such as a graphics processing unit (GPU), a digital signal processor (DSP), and so on. In some embodiments, the processor 420 can be implemented using custom circuits, such as an application specific integrated circuit (ASIC) or a field programmable gate array (FPGA).

[0074] The memory 410 can include various types of storage units, such as system memory, read-only memory (ROM), and permanent storage devices. Among them, the ROM can store static data or instructions required by the processor 420 or other modules of the computer. The permanent storage device can be a readable and writable storage device. The permanent storage device can be a non-volatile storage device that does not lose the stored instructions and data even when the computer is powered off. In some embodiments, the permanent storage device uses a mass storage device (such as a magnetic or optical disk, flash memory) as the permanent storage device. In some other embodiments, the permanent storage device can be a removable storage device (such as a floppy disk, optical drive). The system memory can be a readable and writable storage device or a volatile readable and writable storage device, such as dynamic random access memory. The system memory can store some or all of the instructions and data required by the processor during operation. In addition, the memory 410 can include any combination of computer-readable storage media, including various types of semiconductor storage chips (DRAM, SRAM, SDRAM, flash memory, programmable read-only memory), and magnetic disks and / or optical disks can also be used. In some embodiments, the memory 410 can include a removable storage device that is readable and / or writable, such as a compact disc (CD), a read-only digital versatile disc (such as DVD-ROM, dual-layer DVD-ROM), a read-only Blu-ray disc, a high-density optical disc, a flash memory card (such as SD card, min SD card, Micro-SD card, etc.), a magnetic floppy disk, and so on. The computer-readable storage medium does not include carrier waves and instantaneous electronic signals transmitted wirelessly or by wire.

[0075] An executable code is stored on the memory 410, and when the executable code is processed by the processor 420, it can cause the processor 420 to execute the Web three-dimensional application operation method described above.

[0076] Application Example

[0077] For the convenience of understanding the principle of the present invention, Figure 5A-H shows an example of a composite 3D application and its operation method according to the present invention. The composite 3D application is a Web 3D visualization example of the operating status of a data center campus computer room.

[0078] As Figure 5A shown, for example, the user can type the corresponding address, such as example / Cloud / , in the address bar of the browser to access the Web 3D visualization example, thereby loading various 3D resources corresponding to the data center campus scene (e.g., scene 01), as well as the front-end components corresponding to the example / Cloud / page (e.g., page 01), thereby presenting a 3D view of the data center campus and the campus data table on the right. As shown in the figure, the initial scene can be that the camera lens is switched to the center of the campus to show that the data center includes Building A on the right side of the page and Building B on the left side of the page, and an exclamation mark indicating server hardware anomalies is shown on Building B. The campus data table includes the asset inventory, IT capacity, and system communication status of both Building A and Building B.

[0079] In Figure 5A the page and each of the following pages, the user can perform common operations of Web 3D applications, such as changing the perspective and zooming of 3D graphics by, for example, mouse dragging and scroll wheel sliding. Although the above operations will change the display of the 3D graphics, they do not trigger route switching.

[0080] When the user clicks on Building A with the mouse, for example, that is, when a specific operation is performed on the 3D graphics in the 3D application, the internal logic of the 3D application triggers the front-end route switching. For example, the address in the browser switches from example / Cloud / to example / Cloud / A. The above route parameter A can be passed to the state machine, causing changes in the 3D graphics and front-end components, that is, Building A is highlighted, and the campus data table on the right becomes only indicating the asset inventory, IT capacity, and system communication status of Building A, and a pop-up window showing the current server status of Building A is shown on Building A, as Figure 5B shown.

[0081] Similarly, the user can be on the Figure 5A overall view page of the campus, or on the Figure 5B selected page of Building A, and directly click on Building B to achieve the switching of the browser address to example / Cloud / B. The above route parameter B can be passed to the state machine, causing changes in the 3D graphics and front-end components, that is, Building B is highlighted, and the campus data table on the right becomes only indicating the asset inventory, IT capacity, and system communication status of Building B, and a pop-up window showing the current server status of Building B is shown on Building B, as Figure 5C shown.

[0082] In order to view the specific fault location corresponding to the exclamation mark on Building B, users can Figure 5C Click "Enter" in the front-end component on the display page. The SPA application obtains the user operation and switches the route to example / Cloud / B / floor-entry, and obtains the route parameter floor-entry. The above route parameter floor-entry can be used in the Web 3D application to change the display of 3D graphics, thereby obtaining Figure 5D In order to make the visual effect coherent, a transition function from page B to page floor-entry can be selected, so that the three-dimensional display is transformed from that shown in FIG5C to Figure 5D As shown, for example, the transition function may cause the image to first zoom in to primarily display Building B (i.e., the camera zooms in), and then display the layers using an explosion effect. Figure 5A Towards Figure 5B When switching between pages shown in 5C or 5C, you can also select the corresponding transition function to display. Figure 5A -The changes in the three-dimensional graphics in C are not significant and not very obvious.

[0083] The user can then Figure 5D Select the floor you want to view in the exploded diagram. For example, when the user clicks F3 in Building B with the mouse, that is, when a specific operation is performed on the three-dimensional graphics in the three-dimensional application, the internal logic of the three-dimensional application triggers the front-end route switching. For example, the address in the browser switches from example / Cloud / B / floor-entry to example / Cloud / B / floor-entry / 3. The above routing parameters can be passed to the state machine, resulting in changes in the three-dimensional graphics and the front-end components. That is, F3 is highlighted, and the campus data table in the right front-end component changes to only indicate the asset inventory, IT capacity, and system communication status of F3 in Building B, and a pop-up window of the current server status of F3 in Building B is displayed, such as Figure 5E shown.

[0084] from Figure 5A -E, it can be seen that the three-dimensional scene of the data center park (including Building A, Building B, surrounding buildings, roads, and street trees) runs through multiple pages. When the user switches or jumps between these pages, the three-dimensional scene does not switch, but makes certain changes based on the state before and after the page jump, such as: changes in graphics, displacement of the camera, etc.

[0085] When the user Figure 5E When you click "Enter" in the F3 chart of Building B, Figure 5FAs shown in the figure, the page corresponding to the different scenes is jumped to, and the 3D scene is switched. That is, the scene is switched from the campus scene (scene 01) to the computer room floor scene (scene 02), and the new page route example / Cloud / B / floor / 3 is switched. Since this scene is loaded for the first time, the resources required by the target scene (for example, computer room graphics) can be loaded to complete the loading of the target scene. Figure 5F The status of the server rooms on the 3rd floor of Building B is shown in the figure, including Room A on the left and Room B on the right, and charts on the page distribution, IT capacity and alarms of the servers on this floor are shown on the right side of the page.

[0086] Subsequently, the user can click on Room A, causing the internal logic of the 3D application to trigger the front-end route switch, switching the address in the browser from example / Cloud / B / floor / 3 to example / Cloud / B / floor / 3 / room / A. The above route parameters can be passed to a new state machine (e.g., state machine 02 corresponding to scenario 2), resulting in changes in the 3D graphics and front-end components, i.e., Room A is displayed on the page, and the data table on the right becomes a chart that only indicates the page distribution, IT capacity, and alarms of Room A, as shown in Figure 1. Figure 5G shown.

[0087] exist Figure 5G In the display, you can also use the fault indication such as the exclamation mark to finally locate the faulty server hardware through multiple layers of operations, such as Figure 5H As shown, the selected hardware route can correspond to, for example, a unique identifier of the hardware and obtain real-time status information of the machine, such as Figure 5H The chart on the right shows.

[0088] When the user wants to check the hardware status of other computer rooms, he can use the forward and back functions of the browser. The front-end page can jump according to the access history, and the three-dimensional scene also generates corresponding feedback.

[0089] The Web 3D application operation method and the corresponding composite 3D application according to the present invention have been described in detail above with reference to the accompanying drawings. The 3D composite application of the present invention includes multiple interactive 3D scenes, which are effectively combined with other UI interfaces (SPA applications) to achieve two-way communication and linkage. Front-end components can be mounted in the 3D graphics to effectively convey data information.

[0090] In view of multiple problems existing in the prior art, after creating a reusable application solution of the present invention for a three-dimensional application, only one creation is performed for the same three-dimensional scene, and all subsequent accesses reuse this singleton, thereby avoiding the problem of repeated creation of large objects in the prior art. Further, this solution can be implemented as a solution at the front-end architecture level, without involving specific implementations and dependencies. For various front-end development modes and technical systems, this solution can be adopted for practice.

[0091] Thus, the present invention can create a three-dimensional scene based on the singleton paradigm, realize the on-demand loading and cross-router reuse of the scene, and reduce the performance overhead of three-dimensional composite applications compared with the previous mainstream solutions; it can realize the two-way communication and control between the front-end SPA application and the three-dimensional application based on the monitoring of the front-end routing state, avoid the complex state management often introduced due to inconsistent coding paradigms between the two, and reduce the coding maintenance cost; further, the present invention provides a feasible solution for large three-dimensional hybrid applications with multiple scenes and multiple pages from the front-end architecture level, providing a general mode for front-end developers with different technical backgrounds to construct large three-dimensional composite applications.

[0092] In addition, the method according to the present invention can also be implemented as a computer program or a computer program product, which includes computer program code instructions for executing the above steps defined in the above method of the present invention.

[0093] Alternatively, the present invention can also be implemented as a non-transitory machine-readable storage medium (or computer-readable storage medium, or machine-readable storage medium), on which executable code (or computer program, or computer instruction code) is stored. When the executable code (or computer program, or computer instruction code) is executed by a processor of an electronic device (or computing device, server, etc.), the processor is caused to execute each step of the above method according to the present invention.

[0094] Those skilled in the art will also understand that the various exemplary logical blocks, modules, circuits, and algorithm steps described in connection with the disclosure herein can be implemented as electronic hardware, computer software, or a combination of both.

[0095] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems and methods according to various embodiments of the present invention. In this regard, each block in the flowchart or block diagram may represent a module, a segment of a program, or a portion of code, which contains one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions noted in the blocks may occur in a different order than noted in the accompanying drawings. For example, two consecutive blocks may in fact be executed substantially in parallel, or they may sometimes be executed in the reverse order, depending upon the functionality involved. It should also be noted that each block of the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented by special purpose hardware-based systems that perform the specified functions or operations, or by combinations of special purpose hardware and computer instructions.

[0096] The embodiments of the present invention have been described above. The above description is exemplary, not exhaustive, and is not limited to the disclosed embodiments. Many modifications and variations will be apparent to those of ordinary skill in the art without departing from the scope and spirit of the described embodiments. The choice of terms used herein is intended to best explain the principles of the embodiments, the practical application, or improvements made to the technology in the market, or to enable other ordinary skilled artisans in the art to understand the embodiments disclosed herein.

Claims

1. A method for operating a Web 3D application, comprising: obtaining a user operation from the current page of the current 3D scene of the Web 3D application; switching the route of the current display page according to the user operation; and changing the display of the front-end components and the display of 3D graphics based on the change of the display page route, wherein, there is at least one 3D scene in the Web 3D application, the at least one 3D scene corresponds to multiple pages of a front-end single-page application, and front-end components of the front-end single-page application can be mounted in the 3D scene.

2. The method according to claim 1, wherein, obtaining a user operation from the current display page of the current 3D scene of the Web 3D application includes: obtaining an object operation of the user on a 3D display object in the current display page; or obtaining a component operation of the user on a front-end component mounted in the current display page, wherein both the object operation and the component operation can cause the switching of the display page route.

3. The method according to claim 1, wherein, switching the route of the current display page according to the user operation includes: in response to the user operation pointing to another page of the current 3D scene, switching the route of the current display page to the route of the other page as the target page, and obtaining the route parameters of the target page.

4. The method according to claim 3, wherein, changing the display of the front-end components and the display of 3D graphics based on the change of the display page route includes: the front-end single-page application obtains front-end resources corresponding to the target page and not yet loaded according to the obtained route parameters of the target page, and displays front-end components corresponding to the route parameters based on the obtained front-end resources; the Web 3D application displays 3D graphics corresponding to the route parameters according to the obtained route parameters of the target page.

5. The method according to claim 4, wherein, displaying 3D graphics corresponding to the route parameters according to the obtained route parameters of the target page includes: obtaining a transition function corresponding to the change from the current page to the target page; and completing the change of 3D graphics display including camera change and 3D graphics change based on the transition function.

6. The method according to claim 3, wherein, changing the display of the front-end components and the display of 3D graphics based on the change of the display page route includes: when the change of the display page route indicates a switch to a page included in another scene, obtaining 3D resources corresponding to the other scene as the target scene and not yet loaded and front-end resources corresponding to the target page and not yet loaded; and displaying 3D graphics corresponding to the target scene and the target page based on the obtained 3D resources, and displaying front-end components corresponding to the route parameters based on the obtained front-end resources.

7. The method according to claim 6, further comprising: obtaining the scene list and 3D resource list corresponding to the Web 3D application; and when the user operation corresponds to a scene switch, traversing the scene list and performing one of the following operations includes: If the target scene is recorded as loaded in the scene list, directly switch to the target scene; If the target scene is recorded as unloaded in the scene list, obtain the unloaded 3D resources corresponding to the target scene, and modify the status of the target scene recorded in the scene list to loaded.

8. The method according to claim 6, further comprising: Maintain the loaded front-end resources in the memory of the front-end single-page application; and When the display page route is switched, reuse the loaded front-end resources.

9. The method according to claim 1, further comprising: The front-end component obtains the status information of the entity corresponding to the Web 3D application; and Display the updated status in the front-end component or in the 3D graphics.

10. A computing device, comprising: A processor; and A memory having executable code stored thereon, which when executed by the processor causes the processor to execute the method according to any one of claims 1 to 9.

11. A computer program product comprising executable code which, when executed by a processor of an electronic device, causes the processor to execute the method according to any one of claims 1 to 9.

12. A non-transitory machine-readable storage medium having executable code stored thereon, which when executed by a processor of an electronic device, causes the processor to execute the method according to any one of claims 1 to 9.

Images