A high-performance 3D data rendering method based on a web browser

Abstract

The application provides a high-performance 3D data rendering method based on a web browser, comprising the following steps: S1, constructing a bottom code library: taking an open source code library as a basis, calling a basic object therein, and modifying and perfecting; S2, developing a 3D data rendering engine: on the basis of the bottommost code of web_ithinkdt.js, in combination with the indexedDB local cache technology of a browser, a 3D data rendering engine is developed; S3, publishing the engine, and publishing a 3D engine package, so that the engine is conveniently integrated in the process of project system development, and 3D data visualization is realized. The high-performance 3D data rendering method based on the web browser can be quickly and effectively implemented in a project system, and only a few tens of lines of code are needed to integrate the 3D engine into the project, and then the exposed related methods are used to realize the operation on the 3D model. Compared with the tools in an application market and the open source code library, it is very convenient, and the development cost is greatly saved and the development difficulty is reduced.

Description

TECHNICAL FIELD

[0001] The present application relates to the field of 3D data rendering, in particular to a high-performance 3D data rendering method based on a Web browser. BACKGROUND

[0002] A browser is an application program used to retrieve, display and transfer Web information resources. A Web information resource is marked by a uniform resource identifier, which is a web page, a picture, a video or any content presented on the Web. Users can browse the information associated with each other through the browser with the help of hyperlinks.

[0003] 3D visualization is to present complex abstract data information with appropriate visual elements and perspectives to facilitate understanding, memory and transmission.

[0004] Currently, the application market and open source code library that can realize 3D data visualization based on the Web browser can achieve the desired effect, but the tools provided by the application market are basically not easy to integrate, cumbersome to operate and poor in performance; and the open source code library provides the lowest layer function, such as threejs, and if you want to realize 3D data visualization, you need to compile a large amount of code.

[0005] Therefore, it is necessary to provide a high-performance 3D data rendering method based on a Web browser to solve the above technical problems. SUMMARY

[0006] The present application provides a high-performance 3D data rendering method based on a Web browser, which solves the problem of the current application market and open source code library that can realize 3D data visualization based on the Web browser, which is not easy to integrate, cumbersome to operate and poor in performance.

[0007] To solve the above technical problems, the high-performance 3D data rendering method based on a Web browser provided by the present application comprises:

[0008] S1: bottom code library construction: based on an open source code library, calling the basic object therein and modifying and perfecting;

[0009] S2: developing a 3D data rendering engine: on the basis of the bottommost code of web_ithinkdt.js, combining the indexedDB local cache technology of the browser, a 3D data rendering engine is developed;

[0010] Specifically, it includes the following objects: JT2GoOfficeApp, viewerManager, jtWeb and Controller.

[0011] S3: publishing engine: publish 3D engine package, project system development process to facilitate the integration of the engine, to achieve 3D data visualization.

[0012] Preferably, the S1 called the underlying object includes renderer, scene, camera, geometry, material, model, curve, loader, audio and mathematical library.

[0013] Preferably, the JT2GoOfficeApp is a global variable, providing static method access to all native objects.

[0014] Preferably, the viewerManager is a global variable, which is an object instance, connected to all instance objects.

[0015] Preferably, the jtWeb is a local variable, which provides encapsulation methods for all model instances.

[0016] Preferably, the Controller is a local variable of jtWeb.

[0017] Preferably, the S1 underlying code library includes classification module, extraction module, simulation detection module, perfect module and basic database, the classification module classifies the basic objects in the open source code library, and the extraction module extracts the basic object code one by one.

[0018] Preferably, the simulation detection module detects the basic code extracted by the extraction module, and when the detected code has no vulnerability, it is placed in the basic database, and when there is a vulnerability, it is repaired through the perfect module.

[0019] Preferably, the 3D data rendering engine development in S2 includes method confirmation module, one-time calling module, screening module, temporary storage module and secondary calling module.

[0020] Preferably, the method confirmation module confirms the type of utility method to be constructed, the one-time calling module calls the data object in the basic database, the screening module screens the basic data object called by the one-time calling module, screens out the basic data object required for the corresponding method type, and stores it in the temporary storage module, and calls it through the secondary calling module.

[0021] Preferably, the classification module classifies the basic objects including renderer, scene, camera, geometry, material, model, curve, loader, audio and database, the extraction module extracts the objects extracted by the classification module one by one, and induces the function code of each object, wherein the arrangement order can be arranged by the first letter or other arrangement method.

[0022] Compared with the related art, the high-performance 3D data rendering method based on a Web browser provided by the application has the following beneficial effects:

[0023] The high-performance 3D data rendering method based on a Web browser provided by the application can be quickly and effectively implemented in a project system, and only tens of lines of code are needed to integrate a 3D engine into the project, and then the operation on the 3D model is realized through the exposed related methods. This is very convenient compared with the use of application market tools and open source code library, greatly saving the development cost and reducing the development difficulty. BRIEF DESCRIPTION OF DRAWINGS

[0024] Figure 1 The principle block diagram of the first embodiment of the high-performance 3D data rendering method based on a Web browser provided by the application is shown in the figure.

[0025] Figure 2 The overall diagram of the rendering method of the high-performance 3D data rendering method based on a Web browser provided by the application is shown in the figure.

[0026] Figure 3 The Web_ithinkdt.js underlying code library diagram of the high-performance 3D data rendering method based on a Web browser provided by the application is shown in the figure.

[0027] Figure 4 The t_web_3d engine controller diagram of the high-performance 3D data rendering method based on a Web browser provided by the application is shown in the figure.

[0028] Figure 5 The Jt_web_3d indexedDB local cache service diagram of the high-performance 3D data rendering method based on a Web browser provided by the application is shown in the figure.

[0029] Figure 6 The Jt_web_3d engine package diagram of the high-performance 3D data rendering method based on a Web browser provided by the application is shown in the figure.

[0030] Figure 7 The principle block diagram of the second embodiment of the high-performance 3D data rendering method based on a Web browser provided by the application is shown in the figure.

[0031] Figure 8 The principle block diagram of the third embodiment of the high-performance 3D data rendering method based on a Web browser provided by the application is shown in the figure. DETAILED DESCRIPTION

[0032] The application will be further described below in combination with the drawings and embodiments.

[0033] First embodiment

[0034] Please refer to Figure 1 、 Figure 2 、 Figure 3 、 Figure 4 、 Figure 5 and Figure 6 wherein, Figure 1 is the principle diagram of the first embodiment of the high-performance 3D data rendering method based on the web browser provided by the application; Figure 2 is the overall diagram of the rendering method of the high-performance 3D data rendering method based on the web browser provided by the application; Figure 3 is the web_ithinkdt.js underlying code library diagram of the high-performance 3D data rendering method based on the web browser provided by the application; Figure 4 is the t_web_3d engine controller diagram of the high-performance 3D data rendering method based on the web browser provided by the application; Figure 5 is the Jt_web_3d indexedDB local cache service diagram of the high-performance 3D data rendering method based on the web browser provided by the application; Figure 6 is the Jt_web_3d engine package diagram of the high-performance 3D data rendering method based on the web browser provided by the application. The high-performance 3D data rendering method based on the web browser comprises:

[0035] S1: underlying code library construction: based on the open source code library, the basic object is called and improved;

[0036] S2: develop 3D data rendering engine: based on the most underlying code of web_ithinkdt.js, combined with the indexedDB local cache technology of the browser, develop a 3D data rendering engine;

[0037] Among them, it is specifically contained in the following objects: JT2GoOfficeApp, viewerManager, jtWeb and Controller;

[0038] S3: publish engine: publish the 3D engine package, which is convenient for the integration of the engine in the process of project system development, and realizes the 3D data visualization.

[0039] The basic object called in S1 includes renderer, scene, camera, geometry, material, model, curve, loader, audio and mathematical library.

[0040] The JT2GoOfficeApp is a global variable, which provides a static method to access all native objects.

[0041] The viewerManager is a global variable, which is an object instance connected to all instance objects.

[0042] The jtWeb is a local variable, which provides encapsulation methods for all model instances.

[0043] The Controller is a local variable of the jtWeb controller.

[0044] In S1, we mainly use the open source code library threejs, take its essence, and include its renderer, scene, camera, geometry, material, model, curve, loader, audio, math library, and other basic objects (ensure that it includes all functions required to render 3D data views); but it also has some deficiencies, which we modify and improve, and then build our own set of the lowest layer of code library. The purpose of this is to improve the deficiencies of the existing bottom layer code library, and also to meet some personalized needs of projects;

[0045] In S2, based on the bottom layer code of web_ithinkdt.js, combined with the indexedDB local cache of the browser (implementing 3D data local cache, solving the problem of calling the same data, preventing the rendering efficiency of 3D data view due to calling data), and other technologies, we develop a 3D data rendering engine.

[0046] The main purpose of developing a 3D data rendering engine is to encapsulate the large amount of code for building 3D data models and model-related operations, and expose necessary methods and properties. We can easily render 3D data views through these methods and properties.

[0047] The engine is published to facilitate the reference of front-end native html and the three major mainstream frameworks (mainstream frameworks: vue, react, angular)

[0048] The 3D engine optimization package is published on the npm website, which is to facilitate the integration of the engine in the process of project system development; and to realize 3D data visualization.

[0049] As attached Figure 2 This method contains four main parts:

[0050] A: the bottom layer code library based on threejs encapsulation;

[0051] B: encapsulate the control layer of the engine based on the bottom layer package;

[0052] C: encapsulate the indexedDB local cache service;

[0053] D: encapsulate the engine package based on the control layer and the local cache service;

[0054] As attached Figure 3The underlying code library encapsulates all the functions of the development code threejs and optimizes and improves it, and is given the special name Webithinkdt.

[0055] As shown in the accompanying drawings Figure 4 The engine controller mainly refers to various functions about 3D model display and operation encapsulated on the basis of the underlying code library, which includes model rendering, selection (selection mode switching), dragging, rotating, zooming in and out, model screenshot, model camera information acquisition, camera information setting, mouse events (left, right and middle keys) and the like.

[0056] As shown in the accompanying drawings Figure 5 In order to improve the rendering efficiency of the 3D model in browsing, a local cache service is encapsulated based on indexedDB; the service mainly caches according to model version information, and when the version changes, it will be updated in real time; meanwhile, it also provides functions of manual data updating, data updating according to a set time period and manual data clearing; the user can set the local cache information according to his own needs to meet his effective rendering data model (and the cache service is further encapsulated to form a format tool as needed).

[0057] As shown in the accompanying drawings Figure 6 On the basis of the control layer and the local cache service, a 3D engine package is integrated and encapsulated; the engine package provides active loading of model data (the user needs to provide interface information for obtaining data), and then caches the model data according to version information, and provides a view layer (and renders the model data on the Web browser).

[0058] Compared with the related art, the high-performance 3D data rendering method based on a Web browser provided by the application has the following beneficial effects:

[0059] It can be quickly and effectively implemented in a project system, and only a few lines of code are needed to integrate the 3D engine into the project, and then the exposed related methods are used to realize the operation of the 3D model. This is very convenient compared with the use of application market tools and open source code library, greatly saving the development cost and reducing the development difficulty.

[0060] Second embodiment

[0061] Please refer to Figure 7 Based on the high-performance 3D data rendering method based on a Web browser provided by the first embodiment of the application, the second embodiment of the application proposes another high-performance 3D data rendering method based on a Web browser. The second embodiment is only a preferred mode of the first embodiment, and the implementation of the second embodiment will not affect the separate implementation of the first embodiment.

[0062] Specifically, the second embodiment of the present application provides a high-performance 3D data rendering method based on a Web browser, which is different from the first embodiment in that the underlying code library in S1 includes a classification module, an extraction module, a simulation detection module, a perfecting module, and a basic database, the classification module classifies the basic objects in the open source code library, and the extraction module extracts the basic object codes one by one.

[0063] The input end of the classification module is connected with the output end of the code library, the input end of the extraction module is connected with the input end of the simulation detection module, the output end of the simulation detection module is connected with the input end of the basic database, the output end of the simulation detection module is connected with the input end of the perfecting module, and the output end of the perfecting module is connected with the input end of the basic database.

[0064] The classification module classifies the basic objects including renderers, scenes, cameras, geometric bodies, materials, models, curves, loaders, audios, and databases, the extraction module extracts the objects extracted by the classification module one by one, and summarizes and arranges the function codes of each object, wherein the arrangement order can be arranged by the first letter or other arrangement methods.

[0065] The simulation detection module detects the basic codes extracted by the extraction module, and places them in the basic database when there is no vulnerability, and repairs them through the perfecting module when there is a vulnerability.

[0066] The simulation module can simulate the functions of the extracted basic objects one by one, detect whether the functions are perfect, and whether there are vulnerabilities, and place the basic objects with vulnerabilities and imperfect running function results in the perfecting module for subsequent staff to perfect, and remove those that cannot be repaired.

[0067] The simulation detection module can detect whether the function code package can normally run and whether it has vulnerabilities, and can repair the vulnerabilities through manual operation again when there are vulnerabilities, so as to ensure the perfection, usability, and quality of the underlying basic code library.

[0068] Third embodiment

[0069] Please refer to Figure 8 Based on the first embodiment of the present application, the third embodiment of the present application provides another high-performance 3D data rendering method based on a Web browser. The third embodiment is only a preferred way of the first embodiment, and the implementation of the second embodiment will not affect the separate implementation of the first embodiment.

[0070] Specifically, the third embodiment of the present application provides a high-performance 3D data rendering method based on a Web browser, which is different from the first and second embodiments in that:

[0071] The 3D data rendering engine development in S2 includes a method confirmation module, a first calling module, a screening module, a temporary storage module and a second calling module.

[0072] The method confirmation module confirms the type of the utility method to be constructed, the first calling module calls data objects in the basic database, the screening module screens the basic data objects called by the first calling module, screens out the basic data objects required for the corresponding method type, and stores them in the temporary storage module for calling by the second calling module.

[0073] The input end of the method confirmation module is connected with the memory confirmation module, the output end of the method confirmation module is connected with the input end of the first calling module, the input end of the first calling module is connected with the output end of the basic database, the input end of the screening module is connected with the output end of the first calling module, the output end of the screening module is connected with the temporary storage module and the temporary storage module, and the output end of the temporary storage module is connected with the input end of the second calling module.

[0074] The method confirmation module confirms the type of the utility method to be constructed, which mainly includes JT2GoOfficeApp, viewerManager, jtWeb and Controller, the first calling module calls the basic data objects required by these modules, and then the screening module screens the data in the first calling module to screen out the basic data objects corresponding to the type of the utility method.

[0075] When the basic data object belongs to the type of the utility method, it is temporarily stored in the temporary storage module, and when it does not belong to the type of the utility method, it is excluded, wherein after the construction is completed, the data temporarily stored in the temporary storage module is deleted to release space and facilitate the storage of the basic data objects in the subsequent construction of the type of the utility method.

[0076] The second calling module directly extracts the basic data objects required for the current type of the utility method from the temporary storage module for use.

[0077] When constructing the utility method, it is necessary to first confirm whether the system has sufficient memory, and when the system has sufficient memory, the construction is performed, otherwise the construction cannot be performed.

[0078] By sequentially excluding the temporary storage of the basic data objects, the required basic data objects can be directly extracted when constructing the corresponding utility method, the search amount is reduced, and the construction speed is improved.

[0079] The above merely illustrates the embodiments of the present application, and is not intended to limit the patent scope of the present application. Any equivalent structure or equivalent process conversion, or direct or indirect application in other related technical fields, which is made according to the content of the present application, shall be included in the patent protection scope of the present application.

Claims

1. A high-performance 3D data rendering method based on a web browser, characterized in that, include: S1: Underlying codebase construction: Based on open-source codebases, call the basic objects within them and modify and improve them; S2: Develop a 3D data rendering engine: Based on the lowest level code of web_ithinkdt.js, and combined with the browser's indexedDB local caching technology, a 3D data rendering engine was developed; Specifically, this includes the following objects: JT2GoOfficeApp, viewerManager, jtWeb, and Controller; S3: Release Engine: Releases the 3D engine package, which can be easily integrated into the project system development process to achieve 3D data visualization; The 3D data rendering engine development in S2 includes a method confirmation module, a primary retrieval module, a filtering module, a temporary storage module, and a secondary retrieval module. The method confirmation module confirms the type of practical method to be constructed, the first retrieval module retrieves data objects from the basic database, and the filtering module filters the basic data objects retrieved from the first retrieval module to select the basic data objects required for the corresponding method type and stores them in the temporary storage module for retrieval and use through the second retrieval module. The underlying code library in S1 includes a classification module, an extraction module, a simulation detection module, an improvement module, and a basic database. The classification module classifies the basic objects in the open-source code library, and the extraction module extracts the code of each basic object one by one. The simulation detection module performs simulation detection on the basic code proposed by the extraction module. If the detected code has no vulnerabilities, it is placed in the basic database. If vulnerabilities exist, they are repaired through the improvement module.

2. The high-performance 3D data rendering method based on a web browser according to claim 1, characterized in that, The basic objects called in S1 include renderer, scene, camera, geometry, materials, model, curves, loader, audio, and math library.

3. The high-performance 3D data rendering method based on a web browser according to claim 1, characterized in that, The JT2GoOfficeApp is a global variable that provides static methods to access all native objects.

4. The high-performance 3D data rendering method based on a web browser according to claim 1, characterized in that, The viewerManager is a global variable, an object instance, and is connected to all instance objects.

5. The high-performance 3D data rendering method based on a web browser according to claim 1, characterized in that, jtWeb is a local variable that provides encapsulation methods for all model instances.

6. The high-performance 3D data rendering method based on a web browser according to claim 1, characterized in that, The Controller is the controller for the local variable jtWeb.

Images