A method and system for improving 3D rendering speed

Abstract

The present invention discloses a method and system for improving 3D rendering speed, wherein the method includes the following steps: when a 3D model is loaded, caching the 3D model as a backup model; obtaining a small model in a large model from a large model in the backup model, and storing the correspondence between the large model and the small model; setting the color value of the small model, with different small models set to different color values, and storing the correspondence between the color value and the small model; obtaining the color value corresponding to the mouse position by obtaining the mouse position, obtaining the corresponding small model through the color value, and then obtaining the corresponding large model from the small model; and performing a predetermined 3D animation on the large model in the 3D model. The present invention avoids the use of traditional detection methods, reduces resource consumption of front-end system processing, and improves the rendering speed of 3D models.

Description

Technical Field

[0001] The present invention relates to the field of front-end 3D display technology, and in particular to a method and system for improving 3D presentation speed. Background Art

[0002] To enhance the user experience, existing browser front-end interfaces are increasingly adopting 3D interface presentation. These front-end 3D interfaces load 3D models from a server via the browser and then render them locally. Loading these interfaces consumes significant local computer resources, and if the local computer has poor performance, loading can take a long time. Existing front-end 3D interfaces also require human-computer interaction, meaning users must use a mouse to manipulate objects within the 3D interface. This requires the local computer to detect the position of the mouse and the 3D interface, consuming significant computer resources and easily causing lag and slow rendering. Traditional mouse collision detection is achieved by detecting object collisions. This method uses the center of an object as the starting point, emitting a ray toward each vertex, and then checking whether the ray intersects with other objects. If an intersection occurs, the distance between the nearest intersection point and the ray starting point is checked. If this distance is smaller than the distance between the ray starting point and a vertex, a collision has occurred. When creating an object in Three.js, the number of its vertices is related to the number of its segments (the number of segments is positively correlated with the model's refinement and size). The more segments and the more vertices there are, the more computational effort is required to generate the detection.

[0003] When using traditional detection on a 3D model project, we discovered that when the 3D model is constantly rotating, the traditional detection algorithm spends a significant amount of time detecting collisions, resulting in frame freezes. We attempted to optimize this by reducing the frame rate, but the results were unsatisfactory, resulting in delays in mouse movement interactions and persistent frame freezes.

[0004] By searching Chinese patents, the following solution to improve the rendering speed of 3D models was found: Patent application number: 202110174838.2, patent name: 3D model loading method. The patent discloses a 3D model loading method, which includes: introducing a Three.js file in a first HTML file; using a loader in the Three.js file to convert the obj format data of the 3D model into html format data; using a loader to load the 3D model after data format conversion into a Javascript file; using the onLoad callback function in the Three.js file to add the 3D model in the Javascript file to a preset scene file; using the render function in the Three.js file to render the 3D model in the scene; setting the parameters of the lights, cameras, scenes and renderers in the scene file; adding the scene file to the body tag in the second HTML file; encoding and defining interactive operations on the 3D model in the javascript file; and displaying the 3D model on the HTML web page. This method of loading 3D models can quickly load 3D models in HTML web pages. This solution enables fast loading of 3D models on web pages by including the Three.js file in HTML code and using the loader in the Three.js file to import the 3D model into a JavaScript file. This solution only improves the initial loading speed; when the 3D model needs to obtain the mouse position, a large amount of model calculations are still performed, and it does not improve the speed of the 3D model obtaining the mouse position. Summary of the Invention

[0005] Therefore, it is necessary to provide a method and system for improving the 3D rendering speed to solve the problems of large amount of calculation and lag in the rendering interface when obtaining the mouse position in the existing 3D model.

[0006] To achieve the above object, the present invention provides a method for improving 3D rendering speed, comprising the following steps:

[0007] When the 3D model is loaded, the 3D model is cached as a backup model;

[0008] Obtaining the small model in the large model from the large model in the backup model, and storing the corresponding relationship between the large model and the small model;

[0009] Set the color value of the small model. Different small models are set to different color values, and store the corresponding relationship between the color value and the small model;

[0010] Get the color value corresponding to the mouse position by getting the mouse position, get the corresponding small model through the color value, and then get the corresponding large model from the small model;

[0011] Perform predetermined 3D animation on the large model in the 3D models.

[0012] Furthermore, the step of obtaining the small model in the large model from the large model in the backup model includes the following steps:

[0013] The small model in the large model is obtained from the large model in the backup model in a recursive manner.

[0014] Furthermore, the step of setting different small models to different color values includes the following steps:

[0015] Set the color values to increase or decrease in sequence according to the order of the small models.

[0016] Furthermore, the 3D model is Figure 3 D model.

[0017] Furthermore, the 3D model is a front-end presentation 3D model.

[0018] Furthermore, obtaining the mouse position includes obtaining the coordinates of the mouse through a CPU.

[0019] Furthermore, obtaining the color value corresponding to the mouse position includes obtaining the color value corresponding to the mouse position through a GPU.

[0020] Furthermore, performing a predetermined 3D animation on the large model in the 3D model comprises the steps of:

[0021] Perform highlighting or highlighting actions on large models.

[0022] Furthermore, the 3D model is loaded via Three.js.

[0023] The present invention provides a system for improving 3D presentation speed, comprising a memory and a processor. The memory stores a computer program, and when the computer program is executed by the processor, the steps of the method described in any one of the embodiments of the present invention are implemented.

[0024] Unlike existing technologies, the above-mentioned technical solution caches the displayed 3D model as a backup model, which is not displayed. Different small models are then distinguished by setting different colors. When the mouse interacts with the model, the small model is determined by obtaining the color of the small model at the mouse position, and finally the large model is determined. The large model of the displayed 3D model is then animated accordingly, realizing the interaction detection and action between the mouse and the 3D model. This invention avoids the use of traditional detection methods, reduces resource consumption of front-end system processing, and improves the rendering speed of 3D models. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] Figure 1A method flow chart of a disclosed embodiment described in the detailed description;

[0026] Figure 2 A 3D animated schematic diagram of a disclosed embodiment described in the detailed description;

[0027] Figure 3 A method flow chart of another disclosed embodiment described in the detailed description;

[0028] Figure 4 A method flow chart of a disclosed embodiment described in the detailed description;

[0029] Figure 5 This is a schematic structural diagram of a system disclosed in a specific embodiment.

[0030] Description of reference numerals:

[0031] 501. Memory;

[0032] 502, processor;

[0033] 503. Display. DETAILED DESCRIPTION

[0034] In order to explain the technical content, structural features, achieved objectives and effects of the technical solution in detail, the following is a detailed description in conjunction with specific embodiments and accompanying drawings.

[0035] References to "embodiments" herein mean that the specific features, structures, or characteristics described in conjunction with the embodiments may be included in at least one embodiment of the present application. The appearance of the word "embodiment" in various places in the specification does not necessarily refer to the same embodiment, nor does it particularly limit its independence or relevance to other embodiments. In principle, in this application, as long as there are no technical contradictions or conflicts, the various technical features mentioned in the embodiments can be combined in any manner to form a corresponding implementable technical solution.

[0036] Unless otherwise defined, the technical terms used herein have the same meanings as those generally understood by those skilled in the art to which this application belongs; the use of relevant terms herein is only for describing specific embodiments and is not intended to limit this application.

[0037] In the description of this application, the term "and / or" is used in the method and system for improving 3D rendering speed to describe a logical relationship between objects, indicating that three relationships can exist. For example, A and / or B means: A exists, B exists, and both A and B exist. In addition, the character " / " in this document generally indicates that the objects associated with each other form an "or" logical relationship.

[0038] In this application, terms such as "first" and "second" are merely used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual quantity, priority or sequence relationship between these entities or operations.

[0039] Without further limitations, in this application, the words "include", "comprise", "have" or other similar expressions used in the sentences are intended to cover non-exclusive inclusion. These expressions do not exclude the presence of additional elements in the process, method or product including the elements, so that the process, method or product including a series of elements may include not only those defined elements, but also other elements not explicitly listed, or elements inherent to such process, method or product.

[0040] Consistent with the understanding in the Examination Guidelines, in this application, expressions such as "greater than," "less than," and "exceed" are understood to exclude the number itself; expressions such as "above," "below," and "within" are understood to include the number itself. Furthermore, in the description of the embodiments of this application, "multiple" means more than two (including two), and similar expressions related to "multiple" are also understood in this manner, such as "multiple groups," "multiple times," etc., unless otherwise specifically defined.

[0041] In the description of the embodiments of the present application, the space-related expressions used, such as "center", "longitudinal", "lateral", "length", "width", "thickness", "up", "down", "front", "back", "left", "right", "vertical", "horizontal", "vertical", "top", "bottom", "inside", "outside", "clockwise", "counterclockwise", "axial", "radial", "circumferential", etc., indicate the orientation or position relationship based on the orientation or position relationship shown in the specific embodiments or drawings, and are only for the convenience of describing the specific embodiments of the present application or facilitating the reader's understanding, and do not indicate or imply that the device or component referred to must have a specific position, a specific orientation, or be constructed or operated in a specific orientation. Therefore, it should not be understood as a limitation on the embodiments of the present application.

[0042] Unless otherwise expressly specified or limited, in the description of the embodiments of the present application, the terms "installed", "connected", "connected", "fixed", "set", etc. used should be understood in a broad sense. For example, the "connection" can be a fixed connection, a detachable connection, or an integrated setting; it can be a mechanical connection, an electrical connection, or a communication connection; it can be a direct connection or an indirect connection through an intermediate medium; it can be the internal connection of two elements or the interaction relationship between two elements. For those skilled in the art of the present application, the specific meanings of the above terms in the embodiments of the present application can be understood according to the specific circumstances.

[0043] The overall concept of the present invention is: by caching a backup model that is identical to the currently displayed 3D model, the backup model is in the same position as the displayed 3D model but the backup model is not displayed, and the interaction calculation with the mouse is performed through the backup model, and the interaction calculation is determined by color. This avoids affecting the originally displayed 3D model, and can determine the position of the mouse and the 3D model, realize animation of the corresponding position, avoid using traditional detection methods, thereby reducing the required processing resource consumption, improving the rendering speed of the 3D model, and avoiding 3D model freezes.

[0044] See also Figures 1 to 5 This embodiment provides a method for improving 3D rendering speed. Before implementing the present invention, some preliminary work must be performed, including generating 3D model code, such as using U4D software. Only then can the local computer load and display the 3D model. The present invention includes the following steps: Step S101: When the 3D model is loaded, the 3D model is cached as a backup model. That is, when the 3D model is to be loaded and displayed, the backup model is hidden. Then, step S102: Small models within the large model are obtained from the large model within the backup model, and the correspondence between the large and small models is stored. The 3D model has multiple large models, each of which is composed of multiple smaller models, which are in turn composed of smaller models at the next level, and so on until the small models are composed. That is, different large models correspond to different small models. Then, step S103: The color values of the small models are set, with different small models having different color values, and the correspondence between the color values and the small models is stored. And in step S104, the color value corresponding to the mouse position is obtained by obtaining the mouse position, the corresponding small model is obtained through the color value, and then the corresponding large model is obtained from the small model. The color value here is the color value where the mouse contacts the small model of the backup model. The corresponding small model is obtained through the correspondence between the color value and the small model, and the large model is obtained through the correspondence between the small model and the large model. Since the backup model and the 3D model are essentially the same model, after obtaining the large model of the backup model, 3D animation operations can be performed on the same large model in the displayed 3D model to achieve 3D interaction. That is, step S105 is entered to perform a predetermined 3D animation on the large model in the 3D model.

[0045] In the above embodiment, the 3D model displayed through the cache is a backup model, which is not displayed. Different small models are then distinguished by setting different colors. When the mouse interacts with the model, the small model is determined by obtaining the color of the small model at the mouse position, and finally the large model is determined. The large model of the displayed 3D model is then animated accordingly, realizing the interaction detection and action between the mouse and the 3D model. This invention avoids the use of traditional detection methods, reduces the resource consumption of the front-end system processing, and improves the rendering speed of the 3D model.

[0046] In the above embodiments, preferably, the 3D model is a front-end presentation 3D model, meaning that the 3D model is calculated and displayed on the front-end. The front-end interface can be a browser interface, or in some embodiments, the display interface of another application APP. The browser interface generally includes an address bar for entering a browsing address and an interface bar for displaying a page. The interface bar can be used to display text, images, or animations. When a user browses using a browser, they first enter the desired URL in the address bar and confirm it. The browser then retrieves the front-end resources from the website server corresponding to the URL and displays the retrieved front-end resources on the browser's interface bar. The front-end resources can include text, images, animations, and control codes. The user can then view the text, images, or animations on the browser's interface bar, and the front-end resources can be controlled accordingly based on the front-end control codes. This control includes detecting user actions and controlling animation display. The website server can be hosted on a local computer or a remote computer. If it is a remote computer, the local computer must be connected to the remote computer through a network. Common front-end 3D model loading is achieved through Three.js, which includes a 3D model loader that facilitates front-end 3D image display. The present invention further integrates the performance of the CPU and GPU, wherein obtaining the mouse position includes obtaining the mouse coordinates via the CPU. Obtaining the color value corresponding to the mouse position includes obtaining the color value corresponding to the mouse position via the GPU. In other words, by implementing the appropriate calculation steps using different computing units, computing resources can be fully utilized, avoiding resource waste caused by incompatible computing resources.

[0047] In the embodiments of the present invention, the present invention does not limit the specific content of the 3D model, for example, it can be a specific object (such as a building), or in some embodiments, such as Figure 2 As shown, the 3D model is Figure 3 D model. Figure 2 The 6 blocks can be used to identify 6 areas (6 large models) in the map, such as different cities, and 6 areas identify 6 cities. Of course, the figure is just a simple illustration, and the size and boundary shape of the blocks can be adjusted according to the actual map style. Among them, common 3D animation actions include highlighting actions or highlighting actions, and the predetermined 3D animation of the large model in the 3D model includes the steps of: highlighting the large model or highlighting the large model. Figure 2 As shown in the figure, this is the highlighting action. When the mouse is placed on the lower right corner, the lower right corner is lifted and highlighted, realizing the 3D action. At this time, the highlighted large model can also be highlighted to better distinguish it from other areas.

[0048] In the above embodiment, obtaining the correspondence between the large model and the small model can be implemented according to the actual interface of the 3D loader. In some embodiments, such as Figure 3 As shown, step S102 in the above embodiment, which obtains the small models in the large model from the large model in the backup model, includes the following steps: Step S302 recursively obtains the small models in the large model from the large model in the backup model. The other steps are the same as those in the above embodiment. Recursion involves obtaining smaller models from the large model one level at a time until the small model at the last level is obtained, completing the acquisition of the model correspondence through recursion.

[0049] In certain embodiments, as Figure 4 As shown, step S103 of setting different color values for different small models includes step S403: setting color values that increase or decrease sequentially based on the order of the small models. The other steps are the same as those in the above embodiment. The order of the small models here can be the order of the small models in the correspondence between the small models and the large model, and then setting the color values that increase or decrease sequentially, which can achieve color differentiation and facilitate calculation and storage.

[0050] The method of the present invention can be implemented using different codes. The present invention also provides the specific process of JavaScript code implementation of the main steps. The GPU color detection in the present invention is specifically: GPU detection is a detection method that uses the powerful performance of GPU to perform a 6-bit hexadecimal representation of the color. The color is used as the ID. After the texture is rendered in the background, the ID is queried and the picking operation is performed according to the texture color (small model color) under the mouse coordinates.

[0051] The main process includes the following:

[0052] 1. Set the off-screen texture (i.e. the small model color of the backup model)

[0053]

[0054] 2. Detection method (model for detecting mouse interaction)

[0055]

[0056]

[0057] 3. Animation Execution

[0058] The requestAnimationFrame loop method, like setInterval, has many advantages. The most important one is that it pauses when the user switches to another tab, thus not wasting precious processor resources or battery life.

[0059] The present invention provides a system for improving 3D rendering speed, such as Figure 5 As shown, it includes a memory 501 and a processor 502, and a computer program is stored on the memory. When the computer program is executed by the processor, the steps of the method described in any one of the embodiments of the present invention are implemented. The system of the present invention uses the 3D model displayed by the cache as a spare model, and the spare model is not displayed. Then, different small models are distinguished by setting different colors. When the mouse interacts with the model, the small model is determined by obtaining the color of the small model at the mouse position, and finally the large model is determined. Then, corresponding 3D animation is performed on the large model of the displayed 3D model, realizing the interactive detection and action of the mouse and the 3D model. The present invention avoids the use of traditional detection methods, reduces the resource consumption of the front-end system processing, and improves the rendering speed of the 3D model. In some embodiments, in order to realize the front-end display, a display 503 can also be included, so that the displayed 3D model can be seen on the display 503.

[0060] It should be noted that although the above embodiments have been described herein, this does not limit the scope of patent protection of the present invention. Therefore, based on the innovative concept of the present invention, changes and modifications to the embodiments described herein, or equivalent structural or equivalent process transformations made using the contents of the present invention's specification and drawings, and direct or indirect application of the above technical solutions to other related technical fields, are all included in the scope of patent protection of the present invention.

Claims

1. A method for improving 3D rendering speed, characterized in that: The steps include: When the 3D model is loaded, the 3D model is cached as a backup model; Obtaining the small model in the large model from the large model in the backup model, and storing the corresponding relationship between the large model and the small model; Set the color value of the small model. Different small models are set to different color values, and store the corresponding relationship between the color value and the small model; Get the color value corresponding to the mouse position by getting the mouse position, get the corresponding small model through the color value, and then get the corresponding large model from the small model; Perform predetermined 3D animation on the large model in the 3D models.

2. The method for improving 3D rendering speed according to claim 1, characterized in that: The step of obtaining the small model in the large model from the large model in the spare model comprises the following steps: The small model in the large model is obtained from the large model in the backup model in a recursive manner.

3. The method for improving 3D rendering speed according to claim 1, wherein: The steps of setting different small models to different color values include: Set the color values to increase or decrease in sequence according to the order of the small models.

4. The method for improving 3D rendering speed according to claim 1, wherein: The 3D model is a map 3D model.

5. The method for improving 3D rendering speed according to claim 1, wherein: The 3D model is a front-end presentation 3D model.

6. The method for improving 3D rendering speed according to claim 1, wherein: The obtaining of the mouse position includes obtaining the coordinates of the mouse through the CPU.

7. The method for improving 3D rendering speed according to claim 1, wherein: The obtaining of the color value corresponding to the mouse position includes obtaining the color value corresponding to the mouse position through a GPU.

8. The method for improving 3D rendering speed according to claim 1, characterized in that: The predetermined 3D animation of the large model in the 3D model comprises the steps of: Perform highlighting or highlighting actions on large models.

9. The method for improving 3D rendering speed according to claim 1, characterized in that: The 3D model is loaded via Three.js.

10. A system for improving 3D rendering speed, characterized by: The method comprises a memory and a processor, wherein a computer program is stored in the memory, and when the computer program is executed by the processor, the steps of the method according to any one of claims 1 to 9 are implemented.

Images