A Method for Lightweight Rendering and Display of CAD Models Based on Open Cascade on the Web

Abstract

The present invention provides a method for lightweight rendering and display of CAD models based on Open Cascade, belonging to the technical fields of the three-dimensional software development platform Open Cascade, three-dimensional visualization, and CAD model rendering. The present invention solves the practical engineering problems such as problems occurring after mesh generation and rendering display of certain models in manufacturing using Open Cascade, and the need to install complex software for viewing complex CAD models, which occupies a large amount of system resources.

Description

Technical Field

[0001] The present invention belongs to the technical fields of the 3D software development platform Open Cascade, 3D visualization, and CAD model rendering, and particularly relates to a method for lightweight rendering and display of CAD models on web pages based on Open Cascade and WebGL technologies. Background Art

[0002] Digitalization, networking, and intelligence are the main features of Industry 4.0. Enabling the display of digitized CAD models in mechanical design on the website can make product design, production, and application more flexible, convenient, and effective. Traditional CAD-based demonstrations require the configuration of a large number of complex CAD software, with cumbersome operations and high costs. At the same time, with the continuous progress of productivity and production requirements, image construction has become increasingly complex, and traditional two-dimensional plane data diagrams can no longer meet the needs of the public. The data 3D visualization technology constructs a 3D digital scene based on reality, making data presentation more intuitive and user-friendly.

[0003] Open Cascade is a software development platform that provides services for solid modeling, data exchange, and model visualization. Due to its open-source nature and powerful functions, it has been widely used in many fields such as vehicles, architecture, aerospace, etc. The 3D visualization technology can enhance the user's intuitive experience and provide accurate data models, enabling users to interact with products on the web client. At the level of simulation technology, the 3D visualization technology can intuitively display the simulation effects, which is helpful for better product development. The processing process of 3D visualization involves a large amount of graphics rendering and interactive control, requiring browser plugins for support and having certain requirements for computer configuration, depending on the core rendering speed of the CPU and occupying a large amount of system memory during use.

[0004] WebGL is an open-source cross-platform API used to create real-time interactive graphics in browsers. By writing WebGL programs, 3D animations can be made without the need for plugins. At the same time, it uses the underlying graphics hardware acceleration function to perform image rendering, which can vividly display 3D effects and provide a guarantee for showing complex mechanical structures. Summary of the Invention

[0005] In view of the problems existing in the rendering of some existing models and the complex operation of viewing CAD models, the present invention proposes a method for rendering and displaying CAD models on web pages based on Open Cascade and WebGL technologies, solving practical engineering problems such as problems occurring after mesh generation and rendering display of certain models in manufacturing using Open Cascade, and the need to install complex software for viewing complex CAD models, which occupies a large amount of system resources.

[0006] The technical solution of the present invention is as follows:

[0007] A method for lightweight rendering and display of CAD models based on Open Cascade on web pages. This method uses Open Cascade for model reading and mesh generation, and performs web display based on WebGL. Specifically, it includes the following steps:

[0008] S1: Export the complex CAD model file into a specific format

[0009] Use a third-party CAD modeling software to export the CAD model into STEP or IGES format.

[0010] S2: Based on the data exchange module and modeling algorithm module of Open Cascade, read the CAD model and implement mesh generation

[0011] The open-source software development platform Open Cascade (abbreviated as OCC) has a total of six modules. Among them, the data exchange module provides interfaces that conform to various CAD formats, such as IGES, STEP, STL, VRML, etc. These interfaces allow software based on Open Cascade to exchange data with various CAD software, and can query and check the input file, convert its content into a CAD model, and check the converted data file.

[0012] For the STEP and IGES files exported in step S1, Open Cascade provides specific methods and functions to implement reading and writing. When executing, first call the Control_Reader function to load the file; secondly, perform a consistency check on the file; then set the conversion parameters, including user-defined precision (precision.val), maximum allowable tolerance of the shape (maxprecision.val), shape unit (cascade.unit), representation type of the product shape (step.shape.repr), etc.; finally, execute the conversion, and check whether the conversion is correctly executed by calling Transfer or TransferRoots, and obtain the final results - topological shape and geometric shape.

[0013] Based on Open Cascade, mesh generation is performed on the obtained topology and geometry. During the meshing process, first, all the surfaces of the model are traversed. For each surface, all its lines are traversed, and for each line, all its edges are traversed; then, the required parametric space curves are obtained based on the edges and surfaces. Next, triangular meshing is performed on the parametric region enclosed by the parametric space curves. The accuracy of the triangular meshing is controlled by setting the magnitudes of the linear deviation and angular deviation. The meshing result is mapped to the three-dimensional space through the surface equation, and finally, the mesh generation for each surface is generated to obtain the mesh data.

[0014] Cloud-based display requires fewer meshes. Therefore, in order to achieve lightweight model meshes and smooth web display, the number of meshes needs to be reduced. The present invention improves on the basis of the default meshing algorithm BRepMesh_IncrementalMesh of Open Cascade. The specific meshing process is as follows:

[0015] First, the default meshing algorithm is used to traverse the topology and geometry of the model to obtain parametric space curves;

[0016] Secondly, when performing mesh generation on the region enclosed by the parametric space curves, internal node control is added. The specific implementation is as follows:

[0017] 1) Create a Mesher and specify the region to be meshed for the Mesher;

[0018] 2) Create mesh generation control parameters. The mesh generation control parameters include the overall linear deviation and angular deviation (i.e., the linear deviation and angular deviation of the default meshing algorithm), the linear deviation and angular deviation of the added internal nodes, and considering the model size, using parallel computing to control the surface deviation simultaneously; among them, the angular deviation of the internal nodes is relatively simple and uses the default value (12 - 20 degrees); in order to reduce the number of meshes, the linear deviation of the internal nodes should be greater than the overall linear deviation. Setting it too small will result in an insignificant reduction in the number of meshes, and setting it too large will deteriorate the mesh quality. Through a large number of experiments, it is found that when the linear deviation of the internal nodes is set to 10 - 20 times the overall linear deviation, the effect is better, and the number of meshes is significantly reduced without affecting the rendering quality;

[0019] 3) Pass the set mesh generation control parameters to the Mesher;

[0020] 4) Create a mesh generation environment according to the Mesher and perform mesh generation.

[0021] S3: Write a mesh data conversion interface to build a bridge between Open Cascade and WebGL

[0022] Write a conversion program to convert the mesh data obtained from Open Cascade into a JSON - formatted file that is convenient for computer parsing and generation, and then transfer it to WebGL for rendering and display. The process of writing the conversion program is as follows: First, add the third - party dependency libraries, the Boost library and the rapidjson library; Second, create a tree structure in the program to store data, and add labels (Lable) and attributes (Attribute) to each node in the tree structure. The label is convenient for viewing the parent, and the attribute is used to store information; Then, call the stream processing framework of IOStream in the Boost library to parse the Open Cascade mesh data obtained in step S2. First, traverse the Compound of the model, then traverse the Solid, followed by the Shell, and so on layer by layer until all Vertices are traversed. Store the obtained points, lines, faces, normal vectors of the faces, and topological and geometric information into the tree structure through the TDF_Label::Add function of Open Cascade; Finally, obtain a JSON - formatted file by calling the Writer function in the rapidjson library to complete the conversion of the mesh data.

[0023] S4: Build the web display environment for the CAD model

[0024] S4.1: Use the Three.js framework under open - source WebGL to set up the scene, lighting, camera, renderer, etc.: Create a scene through THREE.Scene; Use parallel light for lighting to make the rendering effect more realistic; Set the camera as a perspective projection camera close to reality; Use the WebGL renderer as the renderer. To facilitate the observation and distinction of parts, set different colors for different parts under the assembly.

[0025] S4.2: Write the web display program

[0026] (1) Create a blank html web page, use UTF - 8 character encoding, import the Three.js framework, and at the same time introduce Vue.js and Vite.js to optimize the web page;

[0027] (2) Write JS statements to call the scene, lighting, camera, renderer set in step S4.1 and add interactions, such as rotating with the left mouse button and moving with the right mouse button; Use the ParseBuffer function to write a program for parsing JSON data, parse the JSON string into a CJSON structure, and extract information from it, including name, material, color, points, lines, faces, etc., to achieve the final web display;

[0028] (3) Write HTML statements to design the web page content, add text to the web page such as centering the project title above, displaying the number of geometric bodies and the number of grids on the left, using the canvas in the center for display, and some buttons on the left to implement specific functions such as showing / hiding wireframes, showing / hiding shading, viewing the model display results from different angles, and taking pictures. At the same time, set the font, size, color, etc. to make it more beautiful.

[0029] S5: Check the web page display effect of the CAD model

[0030] Check whether the model display is complete and whether the functions are normal, take pictures of each angle of the model, use the MobileNet deep neural network to extract image features, and compare the similarity with the image results with a larger grid density before improvement to verify whether the present invention guarantees the rendering quality and complete the entire web page display process.

[0031] The beneficial effects of the present invention are as follows:

[0032] 1. The present invention can realize the rendering and display of complex CAD models without installing complex modeling software and web page plugins. Through cloud display, designers can achieve collaborative design between multiple terminals and the cloud, manufacturers can view the design model in the factory workshop and carry out production and manufacturing, and users can browse products on the mobile terminal at any time and anywhere to understand product-related information, improving people's work efficiency;

[0033] 2. The present invention only needs to use a compatible browser to view complex CAD models, greatly reducing the system resources occupied compared with traditional methods, significantly improving the loading and display speed, while reducing energy consumption, being more power-saving, increasing the usage time of battery-powered electronic products, and to a certain extent improving equipment reliability, achieving energy conservation, emission reduction, and environmental protection;

[0034] 3. The present invention is improved and optimized on the basis of the Open Cascade source program. By means of dynamic detection based on the bounding box and setting internal node control, the problem of incorrect rendering of some models is solved. While ensuring the rendering quality, the number of grids is reduced, and more settable parameters are provided for users. Users can generate grids with different precisions according to their needs. Description of the Drawings

[0035] Figure 1 It is the display result of the "camera" model in SolidWorks.

[0036] Figure 2 It is the rendering result of the "camera" model after mesh generation by Open Cascade.

[0037] Figure 3The display result of the "Hub" model in SolidWorks.

[0038] Figure 4 The rendering result of the "Hub" model after mesh generation by Open Cascade.

[0039] Figure 5 The rendering result of the "Camera" model under the optimization algorithm.

[0040] Figure 6 For starting the web service and the web display URL.

[0041] Figure 7 The web display interface diagram of the "Hub" model.

[0042] Figure 8 The web display interface diagram of the "Camera" model.

[0043] Figure 9 The wireframe display diagram of the "Hub" model.

[0044] Figure 10 The wireframe display diagram of the "Camera" model.

[0045] Figure 11 The display diagrams of different angles of the "Camera" model for similarity comparison. Detailed implementation manners

[0046] To further understand and recognize the purpose, content and advantages of the present invention, the following combines examples and drawings to make a further detailed description of the specific implementation manners of the present invention.

[0047] In this embodiment, the web display of the handle pressing tool model is performed. This display method can ensure the rendering quality of the model while greatly reducing the number of model mesh units, reduce the occupation of system resources, and eliminate the need to install complex software and plugins. The specific steps of this display method are as follows;

[0048] S1: Establish a 3D model

[0049] Using a third-party CAD modeling software, create models named "Camera" and "Hub". There will be problems in the rendering results of the above two models after mesh division by Open Cascade: the "Camera" model will have the phenomenon of "broken faces", such as Figure 1 、 2 shown; the "Hub" model generates an extra circular surface in the middle, such as Figure 3 、 4 shown.

[0050] S2: Export the model file

[0051] Export the model as STEP and IGES format files using a third - party CAD modeling software.

[0052] S3: Read the model and perform mesh generation based on Open Cascade

[0053] Based on the STEP and IGES interfaces of the Open Cascade data exchange module, call the STEPControl_Reader and IGESControl_Reader functions to read and convert the STEP and IGES formats of the handle pressing tool. The conversion parameters use the Open Cascade default parameters, so as to obtain the topological and geometric models of the "camera" and "Hub".

[0054] For the obtained model data, on the basis of using the source program, add an optimization algorithm for dynamically detecting and setting internal nodes based on the bounding box. Through a large number of experiments, obtain the reasonable range of the initial values. In this example, set the initial value of the linear deviation to 0.01, the initial value of the angular deviation to π / 12, the linear deviation coefficient of the internal nodes to 10, and the angular deviation coefficient to 2. At the same time, consider the model size and control the surface deviation to perform mesh generation to obtain the mesh data of the model.

[0055] Using the improved algorithm for mesh generation and rendering display, the "broken surface" phenomenon of the "camera" model is solved, and the model is complete, as Figure 5 shown; the extra circular surface of the "Hub" model also disappears, as shown in

[0056] S4: Implement web display based on WebGL

[0057] First, pass the mesh data obtained by Open Cascade into the conversion program. After reading the mesh data, a JSON - format file will be obtained; secondly, call the built - in CAD model web rendering display environment, parse the JSON string, use the Three.js component, then navigate to the installation folder and start the web server from it; then open a compatible web browser and enter the path http: / / localhost:3000 / to obtain the created web page, select the file to open, and realize the rendering display of the model on the web page. The display results of the "Hub" model and the "camera" model are respectively as Figure 7 and Figure 8 shown. Click the wireframe display button on the left to get the wireframe display result, as Figure 9 and Figure 10 shown. Click other view buttons to get views at different angles.

[0058] S5: Check the web display result of the model

[0059] Observe whether the model is displayed normally, and at the same time check whether the functions are normal. For example, the left mouse button controls the rotation of the model, the right mouse button drags the model to move, and the scroll wheel is used to zoom in and out, so as to complete the rendering and display of the model on the web page.

[0060] The number of meshes of the "camera" model obtained after the dissection of the method of the present invention is 181,780, which is greatly reduced compared with 401,060 obtained by the algorithm before modification. At the same time, the algorithm before modification and the method of the present invention are respectively used for web page rendering and display. After using the photographing function to intercept images of each angle of the model, the deep neural network is used to compare the image similarities. As Figure 11 shown, through comparison, the similarity of the rendering effects of the two is more than 99.9%, it is considered that there is no difference in the rendering quality, and it is verified that the present invention realizes the lightweight of the meshes.

[0061] The above embodiments describe the basic principles, main features and advantages of the present invention. Those skilled in the art should understand that the present invention is not limited by the above embodiments. Without departing from the technical principles of the present invention, the present invention can also be made with several modifications and improvements, and these modifications and improvements all fall within the protection scope of the present invention.

Claims

1. A method for lightweight rendering and display of CAD models based on Open Cascade, characterized in that, The method includes the following steps: S1: Export the complex CAD model file in a specific format Use a third-party CAD modeling software to export the CAD model in STEP or IGES format; S2: Based on the data exchange module and modeling algorithm module of Open Cascade, perform CAD model reading and mesh generation S2.1: Model reading For the STEP and IGES files exported in step S1, Open Cascade first calls the Control_Reader function to load the files; secondly, perform a consistency check on the files; then set the conversion parameters; finally, execute the conversion, and check whether the conversion is correctly executed by calling Transfer or TransferRoots, and obtain the final topological shape and geometric shape; S2.2: Mesh generation First, traverse the topology and geometric shape of the model to obtain parametric space curves; Secondly, when performing mesh generation on the region enclosed by the parametric space curves, increase the internal node control; S3: Write a mesh data conversion interface to build a bridge between Open Cascade and WebGL Write a conversion program to convert the mesh data obtained by Open Cascade into a JSON format file that is convenient for computer parsing and generation, and then transfer it to WebGL for rendering and display; S4: Build a web display environment for the CAD model S5: Check the web display effect of the CAD model Check whether the model is completely displayed and whether the functions are normal, take pictures of each angle of the model, use the MobileNet deep neural network to extract image features, and compare the similarity with the image results with a larger mesh density before improvement to verify whether the rendering quality is guaranteed, and complete the entire web display process.

2. The method according to claim 1, characterized in that, The process of increasing the internal node control in step S2.2 is specifically implemented as follows: 1) Create a Mesher and specify the region to be meshed for the Mesher; 2) Create mesh generation control parameters, which include the overall linear deviation and angular deviation, the linear deviation and angular deviation of the added internal nodes, and consider the model size, use parallel computing to control the surface deviation at the same time; 3) Pass the set mesh generation control parameters to the Mesher; 4) Create a mesh generation environment according to the Mesher and perform mesh generation.

3. The method according to claim 2, characterized in that, In step S2.2, the angular deviation of the internal nodes uses the default value; the linear deviation of the internal nodes is set to 10-20 times the overall linear deviation.

4. The method according to claim 1, 2 or 3, characterized in that, In step S3, the process of writing the conversion program is as follows: First, add the third-party dependency libraries, namely the Boost library and the rapidjson library. Second, create a tree structure in the program to store data, and add labels and attributes to each node in the tree structure. The labels facilitate viewing the parent nodes, and the attributes are used to store information. Then, call the stream processing framework of IOStream in the Boost library to parse the Open Cascade mesh data obtained in step S2. First, traverse the Compound of the model, then traverse the Solid, followed by the Shell, and so on layer by layer until all the Vertex are traversed. Store the obtained points, lines, faces, normal vectors of the faces, as well as the topological and geometric information into the tree structure through the TDF_Label::Add function of OpenCascade. Finally, call the Writer function in the rapidjson library to obtain a JSON-format file, completing the conversion of the mesh data.

5. The method according to claim 1, 2 or 3, characterized in that, The specific steps of step S4 are as follows: S4.1: Use the Three.js framework under open-source WebGL to set the scene, lighting, camera, and renderer: Create the scene through THREE.Scene; use parallel light for lighting; set the camera as a perspective projection camera; use the WebGL renderer as the renderer. S4.2: Write a web page display program (1) Create a blank html web page, use UTF-8 character encoding, import the Three.js framework, and at the same time introduce Vue.js and Vite.js to optimize the web page. (2) Write JS statements to call the scene, lighting, camera, and renderer set in step S4.1 and add interactions. Use the ParseBuffer function to write a program for parsing JSON data, parse the JSON string into a CJSON structure, and extract information from it to achieve the final web page display. (3) Write HTML statements to design the content of the web page and add text to the web page.

6. The method according to claim 4, characterized in that, The specific steps of step S4 are as follows: S4.1: Use the Three.js framework under open-source WebGL to set the scene, lighting, camera, and renderer: Create the scene through THREE.Scene; use parallel light for lighting; set the camera as a perspective projection camera; use the WebGL renderer as the renderer. S4.2: Write a web page display program (1) Create a blank html web page, use UTF-8 character encoding, import the Three.js framework, and at the same time introduce Vue.js and Vite.js to optimize the web page. (2) Write JS statements to call the scene, lighting, camera, and renderer set in step S4.1 and add interactions. Use the ParseBuffer function to write a program for parsing JSON data, parse the JSON string into a CJSON structure, and extract information from it to achieve the final web page display. (3) Write HTML statements to design the content of the web page and add text to the web page.

7. According to the method described in claim 1, 2, 3 or 6, characterized in that, In the step S2.1, the conversion parameters include the user-defined precision precision.val, the maximum allowable tolerance of the shape maxprecision.val, the shape unit cascade.unit, and the representation type of the product shape step.shape.repr.

Images