CN111369656B - WebGL-based editable large-scene progressive real-time rendering method - Google Patents
WebGL-based editable large-scene progressive real-time rendering method Download PDFInfo
- Publication number
- CN111369656B CN111369656B CN202010141839.2A CN202010141839A CN111369656B CN 111369656 B CN111369656 B CN 111369656B CN 202010141839 A CN202010141839 A CN 202010141839A CN 111369656 B CN111369656 B CN 111369656B
- Authority
- CN
- China
- Prior art keywords
- scene
- bvh
- rendering
- real
- webgl
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—3D [Three Dimensional] image rendering
- G06T15/005—General purpose rendering architectures
Landscapes
- Engineering & Computer Science (AREA)
- Computer Graphics (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Theoretical Computer Science (AREA)
- Processing Or Creating Images (AREA)
Abstract
The invention discloses a WebGL-based editable large-scene progressive real-time rendering method, which relates to the field of 3D real-time rendering, and comprises the following steps: 1. managing a hierarchical spatial relationship based on a BVH spatial structure; 2. and (5) progressive scene drawing. The invention has the beneficial effects that: the method has the advantages that an original scene design model is reserved, editable updating operation is supported, large three-dimensional scenes are rendered and drawn progressively, and three-dimensional interactive real-time rendering environments are kept smooth under equipment with different capabilities and scenes with different scales. In the graphical system of the cool music design tool, the technology is used so that a user can design and edit a large scene in a browser environment.
Description
Technical Field
The invention relates to the field of 3D real-time rendering, in particular to a 3D large scene real-time rendering technology based on browser operation.
Background
The three-dimensional scene is the basis of graphic visualization application, and with the deepening of business and more detailed design, the three-dimensional data volume and the scene are larger and larger. For design software, the requirement of data update enables data to exist independently, and optimization such as data merging is not facilitated, so that the requirement for reducing the number of hardware DrawCall is reduced. On the other hand, especially the browser-based WebGL three-dimensional display technology, has limited ability to fully exploit hardware and underlying graphical interfaces. For example, advanced OpenGL/DirectX/Valken and other underlying graphical interface characteristics cannot be used, multi-core/multi-thread usage is limited, and runtime consumption is additionally higher compared with that of a local software Javascript/browser. As a common industry user, commonly used computer devices are popular. The method has the advantages that the software is convenient to use, meanwhile, great challenges are provided for real-time rendering of the three-dimensional scene, and interactive graphic application scenes cannot be normally conducted due to insufficient speed and fluency, especially application scenes of design and editing types.
One type of static scene browsing application is realized, scene data is static and unchangeable, and the traditional method is to reduce the data volume and grade LOD data by preprocessing the data and reduce the number of DrawCall to improve the optimization of drawing efficiency so as to achieve efficient three-dimensional large scene rendering. For example, data merging is performed on each model in the scene, maps are merged, data is extracted and drawn in an instancing mode, and model LOD multi-level data is obtained. Some use a server or locally to perform offline preprocessing. Some of them perform data preprocessing when the software loads data. And the data exchange and LOD batch loading are carried out through a network server. These approaches basically increase the size of the scene that can be rendered in real time by increasing the rendering efficiency, the LOD representation of the data. Even so, when the device capability is certain, only a certain size of the supportable scene is promoted, and the performance problem of the scene size is still easily encountered, which is limited by the capability of software and hardware and the processing efficiency. The same is true for devices with reduced capabilities, such as mobile devices and notebook computers.
The cool family decoration design software is three-dimensional graph design editing software based on Web. And rendering the home decoration design scheme in real time in a three-dimensional graphic system operated based on WebGL in a browser, and providing design editing operation for a user. The data of the scheme comprises geometric figures of various shapes and Mesh geometric shapes of a large number of models, the home decoration scheme usually needs to be paved on the wall and the ground, and various ornaments and furniture with patterns, so the scheme also comprises a large number of texture maps. During editing, the geometry, the position, the texture map and the like need to be edited and modified respectively, the operations are real-time interactive operations, and the operations can be performed in a three-dimensional environment and the updating feedback of a real-time scene can be obtained. For the home decoration design industry, from two rooms and three rooms in common, with the development of business and subdivision fields, the tool offices, supermarkets, warehouses and the like have larger design areas and data volumes. In addition, in the design area, deeper design is performed, such as a customizable cabinet, a wall panel and the like. Design elements and refinement degree are further improved, and data volume is continuously increased.
For design editing applications, data is dynamic, being generated and updated during the editing process. The data object of the three-dimensional scene corresponds to an individual business entity object, and independent operations such as highlighting, displaying/hiding and the like need to be performed in software. Pretreatment cannot be performed on occasion. The data volume is large, and frequent data updating is not suitable for data processing and copying at runtime to generate merging optimized data. Especially for home decoration design software, the types of geometric objects in a three-dimensional scene are rich, and a large number of chartlet textures need to be displayed and rendered.
Disclosure of Invention
The invention aims to overcome the defects in the prior art, and provides a WebGL-based large-scene editable progressive real-time rendering method, which reserves an original scene design model, supports editable updating operation, performs progressive rendering and drawing on a large three-dimensional scene, and enables a three-dimensional interactive real-time rendering environment to be kept smooth under equipment with different capabilities and scenes with different scales. In the graphical system of the cool music design tool, the technology is used so that a user can design and edit a large scene in a browser environment.
The purpose of the invention is achieved by the following technical scheme: the progressive real-time rendering method of the editable large scene based on the WebGL comprises the following steps:
step 1: the hierarchical spatial relationship management based on the BVH spatial structure comprises the following steps:
A. balancing the BVH, and constructing the BVH in a way of averagely distributing the child nodes;
B. BVH generation based on WebWorker, and the generation logic of the BVH spatial structure is transferred to the WebWorker to be executed by adopting the WebWorker technology;
C. checking whether the Worker is in a finished state; if the BVH is in the finished state, taking out a BVH result generated by the Worker and executing the step D; otherwise, directly executing the step D;
D. judging whether the scene changes or not; if the change occurs, executing the step E; otherwise, entering the step 2;
E. judging whether the current Worker is constructing the BVH or not; if the building is being carried out, entering the step 2; otherwise, executing the step F;
F. collecting scene information, requesting a Worker to generate a BVH, and entering the step 2;
step 2: progressive scene rendering, comprising the steps of:
a. a user scene description layer, wherein each data combination of rendering information required by completion of webgldrawcall, namely rendering description, is sorted out;
b. maintaining a linear intermediate data structure related to rendering description, and improving the conversion performance from the nonlinear scene description of a user to linear rendering data;
c. b, obtaining a certain amount of rendering descriptions sorted according to the removal strategy from the intermediate data structure in the step b and storing the rendering descriptions in a rendering queue by using the BVH information generated in the step 1 and the removal strategy of the BVH;
d. calculating more additional information for the objects in the rendering queue, and performing additional optimized sequencing;
e. rendering the objects in the rendering queue;
f. c, checking whether the frame time-consuming budget exceeds the standard or not, and if not, repeating the step c;
g. in the next frame, if the object in the BVH has not acquired all the objects, or the scene has no observable change, or the camera has no change; continuing to draw the next frame from the step c; otherwise, the next frame completes the corresponding scene update, resets the current acquisition position of the BVH, and continues to execute the process from step a.
As a further technical solution, the data combination in step a in step 2 includes completing the drawcall, the needed shader, uniform, attributebuffer, and necessary state setting.
As a preferred technical solution, in step c in step 2, an optimized hierarchical cone culling strategy is used.
The invention has the beneficial effects that:
1. a scene model of design data is maintained, and dynamic and interactive data editing and updating are supported;
2. for a large scene and a large data volume, the interaction performance which is basically constant and smooth is achieved;
3. the method is universal and can be used in different devices such as browsers, desktops, mobile platforms and the like under common design and application.
Drawings
FIG. 1 is a schematic flow chart of step 1 of the present invention.
FIG. 2 is a schematic flow chart of step 2 of the present invention.
Fig. 3 is a schematic diagram of an application scenario 1 of the present invention.
Fig. 4 is a schematic diagram of an application scenario 2 of the present invention.
Detailed Description
The invention will be described in detail below with reference to the following drawings:
example (b): as shown in fig. 1 and 2, the progressive real-time rendering method for editing a large scene based on WebGL includes:
step 1: hierarchical spatial relationship management based on a BVH spatial structure (for reducing canvas drawing mutation of progressive rendering under different camera viewing angles and simultaneously improving the rendering performance of the progressive rendering, effective spatial division needs to be carried out on a scene before the progressive rendering is carried out, and spatial scene division based on BVH is adopted in the scheme), the method comprises the following steps:
A. the BVH is balanced, in order to be compatible with an editable scene and maximize the effectiveness of the current BVH, the BVH is constructed in a way of averagely distributing sub-nodes, and the constructed BVH can be strictly ensured to be a structure similar to a complete binary tree; the structure can greatly ensure the influence on the grouping of the child nodes when the scene is updated, and simultaneously, the tree data structure has the highest traversal efficiency;
B. based on BVH generation of WebWorker, in order to improve the rendering effect, the WebWorker technology adopted in the scheme transfers the generation logic of the BVH space structure to the Worker for execution, so that the space scene division can be carried out under the condition of not blocking a main thread, and the rendering efficiency can be improved to the maximum extent;
C. checking whether the Worker is in a finished state; if the BVH is in the finished state, taking out a BVH result generated by the Worker and executing the step D; otherwise, directly executing the step D;
D. judging whether the scene changes or not; if the change occurs, executing the step E; otherwise, entering the step 2;
E. judging whether the current Worker is constructing the BVH or not; if the building is being carried out, entering the step 2; otherwise, executing the step F;
F. collecting scene information, requesting a Worker to generate a BVH, and entering the step 2;
step 2: progressive scene rendering, comprising the steps of:
a. a user scene description layer, which is used for sorting out data combinations (namely rendering descriptions) of rendering information required by each completed webdrawcall, wherein the data comprise the data for completing the drawcall, required shaders, unifonm, attenbuffer and necessary state settings;
b. maintaining a linear intermediate data structure related to rendering description, and improving the conversion performance of the nonlinear scene description (scene tree/scene graph) of a user to linear rendering data;
c. using the BVH information generated in the step (1), obtaining a certain amount of rendering descriptions sorted according to the removal strategy from the intermediate data structure in the step (b) and storing the rendering descriptions in a rendering queue by using the removal strategy of the BVH, wherein due to the spatial division characteristic of the BVH, the removal strategies such as optimized hierarchical view cone removal and the like can be used;
d. calculating more additional information for the objects in the rendering queue, and performing additional optimized sequencing;
e. rendering the objects in the rendering queue;
f. c, checking whether the frame time-consuming budget exceeds the standard or not, and if not, repeating the step c;
g. in the next frame, if the object in the BVH has not acquired all the objects, or the scene has no observable change, or the camera has no change; continuing to draw the next frame from the step c; otherwise, the next frame completes the corresponding scene update, resets the current acquisition position of the BVH, and continues to execute the process from step a.
The following table shows the frame rate comparison before and after rendering by applying the method of the present invention in two actual scenes, table 1 actual scene application comparison table
In an actual test data scheme, three-dimensional rendering is performed by adopting a traditional method, and due to the fact that the number of patches is too high and the DrawCall is too high, the frame rate is reduced to the extent that the patches cannot be used. When the method is used for rendering, the rendering frame rate of the same data is always kept at high performance, and the interactive fluency is ensured.
The technical solution of the present invention consists of two main steps. The method is suitable for dynamically editing scenes and based on the hierarchical spatial relationship management of a BVH spatial structure. The method establishes and maintains spatial layer level information with low calculation overhead and extremely low runtime delay influence. This information is organized as a spatially-scoped aggregate of discrete, large numbers of scene objects, whose hierarchical information provides a hierarchical level of detail of the hierarchical information role in grouping. And according to the information aggregation, the detail degree and the importance of the object, the multi-frame progressive overlaying rendering drawing is carried out on the scene by combining the second step, so that the stable high frame rate and the rendering picture with the minimum visual influence are achieved, and the drawing rendering of the whole amount of three-dimensional scene contents is gradually completed by 1-N frames.
The optimization idea of the progressive scene drawing whole is as follows: for very large-scale scenes and already very complex scenes, the drawing can be dispersed in multiple frames without completing all the drawing within one frame, and the drawing time of each frame is controlled, so that the frame rate performance is improved.
It should be understood that equivalent substitutions and changes to the technical solution and the inventive concept of the present invention should be made by those skilled in the art to the protection scope of the appended claims.
Claims (3)
1. A WebGL-based editable large scene progressive real-time rendering method is characterized by comprising the following steps:
step 1: the hierarchical spatial relationship management based on the BVH spatial structure comprises the following steps:
A. balancing the BVH, and constructing the BVH in a way of averagely distributing the child nodes;
B. BVH generation based on WebWorker, and the generation logic of the BVH spatial structure is transferred to the WebWorker to be executed by adopting the WebWorker technology;
C. checking whether the Worker is in a finished state; if the BVH is in the finished state, taking out a BVH result generated by the Worker and executing the step D; otherwise, directly executing the step D;
D. judging whether the scene changes or not; if the change occurs, executing the step E; otherwise, entering the step 2;
E. judging whether the current Worker is constructing the BVH or not; if the building is being carried out, entering the step 2; otherwise, executing the step F;
F. collecting scene information, requesting a Worker to generate a BVH, and entering the step 2;
step 2: progressive scene rendering, comprising the steps of:
a. a user scene description layer, wherein each data combination of rendering information required by completion of webgldrawcall, namely rendering description, is sorted out;
b. maintaining a linear intermediate data structure related to rendering description, and improving the conversion performance from the nonlinear scene description of a user to linear rendering data;
c. b, obtaining a certain amount of rendering descriptions sorted according to the removal strategy from the intermediate data structure in the step b and storing the rendering descriptions in a rendering queue by using the BVH information generated in the step 1 and the removal strategy of the BVH;
d. calculating more additional information for the objects in the rendering queue, and performing additional optimized sequencing;
e. rendering the objects in the rendering queue;
f. c, checking whether the frame time-consuming budget exceeds the standard or not, and if not, repeating the step c;
g. in the next frame, if the object in the BVH has not acquired all the objects, or the scene has no observable change, or the camera has no change; continuing to draw the next frame from the step c; otherwise, the next frame completes the corresponding scene update, resets the current acquisition position of the BVH, and continues to execute the process from step a.
2. The WebGL-based editable large scene progressive real-time rendering method of claim 1, wherein: the data combination in step a in step 2 includes the need to complete the drawcall, the needed shader, uniform, attribute buffer, and the necessary state settings.
3. The WebGL-based editable large scene progressive real-time rendering method of claim 1, wherein: and in the step 2, an optimized hierarchical cone elimination strategy is used in the step c.
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010141839.2A CN111369656B (en) | 2020-03-04 | 2020-03-04 | WebGL-based editable large-scene progressive real-time rendering method |
| PCT/CN2020/088161 WO2021174659A1 (en) | 2020-03-04 | 2020-04-30 | Webgl-based progressive real-time rendering method for editable large scene |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010141839.2A CN111369656B (en) | 2020-03-04 | 2020-03-04 | WebGL-based editable large-scene progressive real-time rendering method |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111369656A CN111369656A (en) | 2020-07-03 |
| CN111369656B true CN111369656B (en) | 2021-08-27 |
Family
ID=71210240
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010141839.2A Active CN111369656B (en) | 2020-03-04 | 2020-03-04 | WebGL-based editable large-scene progressive real-time rendering method |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN111369656B (en) |
| WO (1) | WO2021174659A1 (en) |
Families Citing this family (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111599011B (en) * | 2020-07-15 | 2023-08-04 | 杭州电力设备制造有限公司 | Power system scene rapid construction method and system based on WebGL technology |
| CN113793415B (en) * | 2021-09-15 | 2023-10-31 | 云南建投第一勘察设计有限公司 | Processing system and method for converting 2D drawing into 3D effect |
| CN114241101A (en) * | 2021-11-05 | 2022-03-25 | 江西博微新技术有限公司 | Three-dimensional scene rendering method, system, device and storage medium |
| CN114187430B (en) * | 2021-11-19 | 2024-09-24 | 中国直升机设计研究所 | Three-dimensional model conversion method |
| CN114332322A (en) * | 2021-11-30 | 2022-04-12 | 合肥火星科技有限公司 | Big data rendering method of monomer model in three-dimensional scene |
| CN114513520B (en) * | 2021-12-27 | 2023-06-30 | 浙江中测新图地理信息技术有限公司 | Web three-dimensional visualization method based on synchronous rendering of client and server |
| CN114494553B (en) * | 2022-01-21 | 2022-08-23 | 杭州游聚信息技术有限公司 | Real-time rendering method, system and equipment based on rendering time estimation and LOD selection |
| CN114202634B (en) * | 2022-02-17 | 2022-06-14 | 深圳消安科技有限公司 | Lightweight method applied to urban three-dimensional model data |
| CN115631293A (en) * | 2022-08-18 | 2023-01-20 | 中通服慧展科技有限公司 | 3D large scene visual editing method and device, electronic equipment and medium |
| CN115578498A (en) * | 2022-10-28 | 2023-01-06 | 齐丰科技股份有限公司 | Highlight stroking method for Unity3D |
| CN116366827B (en) * | 2023-01-13 | 2024-02-06 | 北京航空航天大学云南创新研究院 | High-precision large-scene image processing and transmitting method and device facing web end |
| CN115983047B (en) * | 2023-03-14 | 2023-05-26 | 北京科技大学 | Cross-platform simulation system suitable for multiple graphic interfaces |
| CN116972913B (en) * | 2023-09-22 | 2023-12-01 | 南通百源制冷设备有限公司 | On-line monitoring method and system for running state of cold chain equipment |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107330962A (en) * | 2017-06-19 | 2017-11-07 | 杭州群核信息技术有限公司 | A kind of scene generating method and device |
| CN110443893A (en) * | 2019-08-02 | 2019-11-12 | 广联达科技股份有限公司 | Extensive building scene rendering accelerated method, system, device and storage medium |
Family Cites Families (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10324736B2 (en) * | 2017-01-13 | 2019-06-18 | Zspace, Inc. | Transitioning between 2D and stereoscopic 3D webpage presentation |
| CN110309458B (en) * | 2018-03-30 | 2021-03-30 | 北京东晨工元科技发展有限公司 | BIM model display and rendering method based on WebGL |
| CN109448089B (en) * | 2018-10-22 | 2023-04-18 | 美宅科技（北京）有限公司 | Rendering method and device |
-
2020
- 2020-03-04 CN CN202010141839.2A patent/CN111369656B/en active Active
- 2020-04-30 WO PCT/CN2020/088161 patent/WO2021174659A1/en active Application Filing
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107330962A (en) * | 2017-06-19 | 2017-11-07 | 杭州群核信息技术有限公司 | A kind of scene generating method and device |
| CN110443893A (en) * | 2019-08-02 | 2019-11-12 | 广联达科技股份有限公司 | Extensive building scene rendering accelerated method, system, device and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| WO2021174659A1 (en) | 2021-09-10 |
| CN111369656A (en) | 2020-07-03 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111369656B (en) | WebGL-based editable large-scene progressive real-time rendering method | |
| CN107193911B (en) | BIM model-based three-dimensional visualization engine and WEB application program calling method | |
| WO2021174660A1 (en) | Cloud-based general parameterized model parsing method and design system | |
| US10733691B2 (en) | Fragment shaders perform vertex shader computations | |
| WO2021164150A1 (en) | Web terminal real-time hybrid rendering method and apparatus in combination with ray tracing, and computer device | |
| CN112270756A (en) | Data rendering method applied to BIM model file | |
| CN110309458B (en) | BIM model display and rendering method based on WebGL | |
| Boubekeur et al. | A flexible kernel for adaptive mesh refinement on GPU | |
| KR20120092926A (en) | Ray tracing core and processing mehtod for ray tracing | |
| Zhai et al. | GPU-based real-time terrain rendering: Design and implementation | |
| CN108305208A (en) | A kind of optimization of model dynamic analysis and three-dimension interaction processing method | |
| Zielasko et al. | Interactive 3D force‐directed edge bundling | |
| Chen et al. | An improved texture-related vertex clustering algorithm for model simplification | |
| Scholz et al. | Real‐time isosurface extraction with view‐dependent level of detail and applications | |
| CN113486415B (en) | Model perspective method, intelligent terminal and storage device | |
| CN114549688A (en) | Two-dimensional floor dial table generation method | |
| Chai et al. | Cultural heritage assets optimization workflow for interactive system development | |
| CN113486416A (en) | Method for realizing 3D building floor layering | |
| Wang et al. | 3D Scene Management Method Combined with Scene Graphs. | |
| CN113076574B (en) | Lightweight cross-platform online parameterized modeling method | |
| Bui et al. | Height-field construction using cross contours | |
| Yang et al. | Dynamic Load Balancing Algorithm Based on Per-pixel Rendering Cost Estimation for Parallel Ray Tracing on PC Clusters | |
| Shakaev et al. | View-Dependent Level of Detail for Real-Time Rendering of Large Isosurfaces | |
| Yan et al. | 3D visual design for mobile search result on 3G mobile phone | |
| KR20120106930A (en) | Ray tracing core and processing mehtod for ray tracing |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |