A webgl-based device three-dimensional visualization method and system

Abstract

The application discloses a device three-dimensional visualization method and system based on WebGL, and the method comprises the following steps: obtaining a visualization parameter of a target device; establishing a device three-dimensional model corresponding to the target device through WebGL based on the visualization parameter; making an animation action of the target device under a preset running condition, and collecting running data corresponding to the target device under the preset running condition; and performing real-time rendering on the device three-dimensional model based on the animation action and the running data, and performing visualization. Through the technical scheme, the visualization degree can be improved, and it is more intuitive for a user to check data.

Description

Technical Field

[0001] This invention relates to the field of equipment management technology, and in particular to a WebGL-based method and system for 3D visualization of equipment. Background Technology

[0002] 3D visualization simulation is a technology that comprehensively utilizes computer graphics, image processing, and network programming to display graphical information on a screen and enable interactive processing. 3D visualization simulation technology provides users with a good sense of interactivity and immersion, overcoming the shortcomings of traditional two-dimensional tables and text. The ultimate goal of 3D visualization simulation is to allow users to experience a near-realistic physical world in a virtual environment. Currently, 3D visualization simulation is increasingly widely used, especially in scientific research and teaching, urban planning, e-commerce, tourism landscapes, virtual healthcare, and military virtual simulation. However, current technology transmits device data over the network and then displays it in charts or text, resulting in low visualization levels and making the data viewing experience less intuitive for users. Summary of the Invention

[0003] To address the aforementioned problems, this invention provides a WebGL-based method and system for 3D device visualization, which solves the problem mentioned in the background art of transmitting device data over a network and then displaying it in the form of charts or text, resulting in low visualization quality and insufficient intuitiveness for users.

[0004] A WebGL-based method for 3D device visualization includes the following steps:

[0005] Obtain the visual parameters of the target device;

[0006] Based on the visualization parameters, a 3D model of the target device is built using WebGL.

[0007] Create animations of the target device under preset operating conditions, and collect corresponding operating data of the target device under preset operating conditions;

[0008] The device's 3D model is rendered in real time and visualized based on the animation actions and operational data.

[0009] Preferably, based on the visualization parameters, a 3D model of the target device is established using WebGL, including:

[0010] Based on the visualization parameters, an original 3D model of the target device is established using WebGL.

[0011] Extract the structural and component information of the original 3D model;

[0012] The structural and component information is traversed in the original 3D model to identify identical components in the original 3D model. Components that are the same type but have different spatial locations are removed to obtain a 3D model after removing duplicates.

[0013] The three-dimensional model after removing the homogeneity is simplified by triangular meshing to obtain the three-dimensional model of the device.

[0014] Preferably, after simplifying the de-identified 3D model into a triangular mesh to obtain the 3D model of the device, the method further includes:

[0015] Traverse each component in the 3D model of the device;

[0016] Determine the attribute information of each component, wherein the attribute information includes: component number, component name, component model and component type;

[0017] Create the original main document file and the original attachment document file;

[0018] The component number from the attribute information is stored in the original main document file to generate the current main document file;

[0019] The component name, component model, and component type from the attribute information are stored sequentially in the original attached document file to generate the current attached document file.

[0020] The current attached document file is compressed to obtain a compressed attached document file;

[0021] Save the current main document file and the compressed attached document file.

[0022] Preferably, the structural and component information of the original 3D model is extracted, including:

[0023] The original 3D model is preprocessed to obtain a preprocessed 3D model;

[0024] Generate the original scene tree by analyzing the relationships between the component structures and assemblies in the preprocessed 3D model.

[0025] Display geometric parameters, attribute data, material data, and assembly-related information in the original scene tree;

[0026] Remove information irrelevant to the model display from the original scene tree to obtain the current scene tree, wherein the information irrelevant to the model display includes: product manufacturing information and historical information;

[0027] The current scene tree is traversed to obtain the structural information and component information.

[0028] Preferably, the animation of the target device under preset operating conditions is generated, and the corresponding operating data of the target device under preset operating conditions is collected, including:

[0029] The target device is captured by setting the capture time using the target camera, thereby obtaining a video of the target device operating under preset operating conditions;

[0030] The running video is subjected to preset running condition start frame identification and preset running condition end frame identification, and the frame video between the start frame and the end frame is extracted;

[0031] Animation is created on the frame video between the start and end frames to obtain the animated actions of the target device under preset operating conditions;

[0032] Receive data acquisition instructions and set the target device to a preset operating state using the data acquisition instructions;

[0033] Under the preset operating conditions, operating data is collected and saved.

[0034] Preferably, the device's 3D model is rendered and visualized in real time based on the animation actions and operational data, including:

[0035] Create the original virtual scene;

[0036] Configure a virtual renderer, virtual camera, and virtual light source in the original virtual scene, and set the virtual renderer, virtual camera, and virtual light source according to preset requirements to generate the current virtual scene;

[0037] Obtain a model request instruction, and load the 3D model of the device into the current virtual scene according to the model request instruction;

[0038] Determine whether the 3D model of the device is complex. If it is not complex, then render the 3D model of the device in real time based on the animation actions and running data, and visualize it.

[0039] If the process is complex, the corresponding current main document file and compressed additional document file are extracted from the device's 3D model. The compressed additional document file is then decompressed to obtain the decompression result. Based on the animation actions, running data, the current main document file, and the decompression result, the device's 3D model is rendered in real time and visualized.

[0040] Preferably, after rendering and visualizing the 3D model of the device in real time based on the animation actions and running data, the method further includes:

[0041] Obtain a fault query command, and obtain the operating parameters of the target device based on the fault query command;

[0042] Based on the operating parameters of the target device, multiple different fault states are determined, and the cause of each fault state is determined.

[0043] Obtain the fault time corresponding to each fault state;

[0044] The multiple different fault states are classified into fault levels according to the fault cause corresponding to each fault state, and different color labels are set for each fault level.

[0045] The fault status is visualized based on the color representation corresponding to the fault time and fault status.

[0046] The present invention also provides a WebGL-based 3D device visualization system, the system comprising:

[0047] The determination module is used to identify the target device that needs to be visualized.

[0048] A module is used to create a 3D model of the target device.

[0049] The production module is used to produce animations of the target device under preset operating conditions and to collect the corresponding operating data of the target device under preset operating conditions.

[0050] The rendering module is used to render and visualize the 3D model of the device in real time based on the animation actions and running data.

[0051] Other features and advantages of the invention will be set forth in the following description, and will be apparent in part from the description, or may be learned by practicing the invention. The objects and other advantages of the invention may be realized and obtained by means of the structures particularly pointed out in the written description and the accompanying drawings.

[0052] The technical solution of the present invention will be further described in detail below with reference to the accompanying drawings and embodiments. Attached Figure Description

[0053] The accompanying drawings are provided to further illustrate the invention and form part of the specification. They are used together with the embodiments of the invention to explain the invention and do not constitute a limitation thereof.

[0054] Figure 1 A flowchart illustrating the workflow of a WebGL-based 3D device visualization method provided by this invention;

[0055] Figure 2Another flowchart of a WebGL-based device 3D visualization method provided by the present invention;

[0056] Figure 3 Another flowchart of a WebGL-based device 3D visualization method provided by the present invention;

[0057] Figure 4 This is a schematic diagram of the structure of a WebGL-based 3D visualization system for devices provided by the present invention. Detailed Implementation

[0058] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numerals in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this disclosure. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this disclosure as detailed in the appended claims.

[0059] 3D visualization simulation is a technology that comprehensively utilizes computer graphics, image processing, and network programming techniques to display graphical information on a screen and enable interactive processing. 3D visualization simulation technology provides users with a good sense of interactivity and immersion, overcoming the shortcomings of traditional two-dimensional tables and text. The ultimate goal of 3D visualization simulation is to allow users to experience a near-real physical world in a virtual environment. Currently, 3D visualization simulation applications are increasingly widespread, especially in scientific research and teaching, urban planning, e-commerce, tourism landscapes, virtual healthcare, and military virtual simulation. However, current technologies transmit device data over the network and then display it in charts or text, resulting in low visualization levels and making the data viewing less intuitive for users. To address these issues, this embodiment discloses a WebGL-based 3D device visualization method.

[0060] A WebGL-based method for 3D device visualization, such as Figure 1 As shown, it includes the following steps:

[0061] Step S101: Obtain the visualization parameters of the target device;

[0062] Step S102: Based on the visualization parameters, establish the 3D model of the target device using WebGL;

[0063] Step S103: Create animation of the target device under preset operating conditions and collect the corresponding operating data of the target device under preset operating conditions;

[0064] Step S104: Render the 3D model of the device in real time based on the animation and running data, and visualize it.

[0065] In this embodiment, the visualization parameters include the overall size of the target device, the parameters of each wall inside the target device, and the parameters of each internal component.

[0066] The working principle of the above technical solution is as follows: obtain the visualization parameters of the target device, establish the corresponding 3D model of the target device through WebGL based on the visualization parameters, create the animation action of the target device under the preset operating conditions, collect the corresponding operating data of the target device under the preset operating conditions, and render and visualize the 3D model of the device in real time based on the animation action and operating data.

[0067] The beneficial effects of the above technical solution are as follows: First, the visualization parameters of the target device are obtained. Then, based on the visualization parameters, a 3D model of the target device is established using WebGL. Animation of the target device under preset operating conditions is created, and the corresponding operating data of the target device under preset operating conditions is collected. Finally, the 3D model of the device is rendered in real time based on the animation and operating data, and then visualized. This improves the visualization level and makes it easier for users to view the data. It solves the problem in the existing technology that the visualization level is not high when transmitting device data over the network and then displaying it in the form of charts or text, and the data is not intuitive for users to view.

[0068] In one embodiment, such as Figure 2 As shown, a 3D model of the target device is built using WebGL based on visualization parameters, including:

[0069] Step S201: Based on the visualization parameters, establish the original 3D model of the target device using WebGL;

[0070] Step S202: Extract the structural and component information of the original 3D model;

[0071] Step S203: Traverse the structural information and component information in the original three-dimensional model, identify the same components in the original three-dimensional model, remove the components that are different in spatial position but the same in type, and obtain the three-dimensional model after removing the duplicates.

[0072] Step S204: Simplify the three-dimensional model after removing the homogeneity by performing triangular meshing to obtain the three-dimensional model of the device.

[0073] In this embodiment, the structural information includes the size information inside the original 3D model, the number and size information of the cavities, the position and structural information of each component, and the component information includes the size, model and other information of the component; 3D mesh simplification refers to the fact that the 3D model after deduplication is a high-standard, high-resolution model, so the standard of a single component is also very high. Therefore, 3D mesh simplification is performed to reduce the geometric data information of a single component while ensuring the features.

[0074] The beneficial effects of the above technical solution are as follows: First, based on the visualization parameters, the original three-dimensional model of the target device is established through WebGL. Then, the structural information and component information in the model are extracted. Then, the same components are identified and components with different positions but the same type are removed, which facilitates later storage and improves the rendering speed. The three-dimensional model after removing the same components is obtained. Then, the triangular mesh is simplified to reduce the geometric data information and obtain a relatively small three-dimensional model of the device.

[0075] In one embodiment, after simplifying the de-identified 3D model by triangulation to obtain the 3D model of the device, the method further includes:

[0076] Traverse each component in the 3D model of the device;

[0077] Determine the attribute information of each component, wherein the attribute information includes: component number, component name, component model and component type;

[0078] Create the original main document file and the original attachment document file;

[0079] The component number from the attribute information is stored in the original main document file to generate the current main document file;

[0080] The component name, component model, and component type from the attribute information are stored sequentially in the original attached document file to generate the current attached document file.

[0081] The current attached document file is compressed to obtain a compressed attached document file;

[0082] Save the current main document file and the compressed attached document file.

[0083] In this embodiment, the original main document file and the original supplementary document file refer to a storage structure used in the model creation process to parse and convert the original format model, thereby achieving lightweighting of the model data and reducing the space occupied by the 3D model.

[0084] The beneficial effects of the above technical solution are: generating the current main document file and the compressed additional document file based on the attribute information of each component facilitates its use in various scenarios later, while the compressed additional document file helps reduce storage space.

[0085] In one embodiment, such as Figure 3 As shown, the structural and component information of the original 3D model is extracted, including:

[0086] Step S301: Preprocess the original 3D model to obtain the preprocessed 3D model;

[0087] Step S302: Generate the original scene tree by analyzing the relationships between the assembly structures and assemblies in the preprocessed 3D model;

[0088] Step S303: Display the geometric parameters, attribute data, material data, and assembly-related information in the original scene tree;

[0089] Step S304: Remove information that is irrelevant to the model display from the original scene tree to obtain the current scene tree. The information that is irrelevant to the model display includes: product manufacturing information and historical information.

[0090] Step S305: Traverse the current scene tree to obtain the structural information and component information.

[0091] In this embodiment, preprocessing includes leveling the original 3D model, because it would be more troublesome to proceed without leveling, and the coordinate position of the model would not be cleared.

[0092] In this embodiment, the scene tree refers to the tree-like structure representing the relationship between the assembly structure and the assembly problem.

[0093] The beneficial effects of the above technical solution are as follows: the original 3D model is preprocessed to remove some unnecessary things, making the model more accurate. Then, the relationship between the assembly structure and the assembly in the preprocessed 3D model is used to generate the original scene book. After that, various information is displayed and useless information is removed to obtain the current scene tree. Based on this tree, the structural information and construction information are accurately obtained.

[0094] In one embodiment, creating animated actions of the target device under preset operating conditions and collecting corresponding operating data of the target device under preset operating conditions includes:

[0095] The target device is captured by setting the capture time using the target camera, thereby obtaining a video of the target device operating under preset operating conditions;

[0096] The running video is subjected to preset running condition start frame identification and preset running condition end frame identification, and the frame video between the start frame and the end frame is extracted;

[0097] Animation is created on the frame video between the start and end frames to obtain the animated actions of the target device under preset operating conditions;

[0098] Receive data acquisition instructions and set the target device to a preset operating state using the data acquisition instructions;

[0099] Under the preset operating conditions, operating data is collected and saved.

[0100] The beneficial effects of the above technical solution are as follows: acquire the running video of the target device under preset operating conditions, then extract the frame video between the start frame and the end frame to reduce the interference of useless frames, create animation actions, and then collect and save the running data to prevent loss.

[0101] In one embodiment, the real-time rendering and visualization of the device's 3D model based on the animation actions and runtime data includes:

[0102] Create the original virtual scene;

[0103] Configure a virtual renderer, virtual camera, and virtual light source in the original virtual scene, and set the virtual renderer, virtual camera, and virtual light source according to preset requirements to generate the current virtual scene;

[0104] Obtain a model request instruction, and load the 3D model of the device into the current virtual scene according to the model request instruction;

[0105] Determine whether the 3D model of the device is complex. If it is not complex, then render the 3D model of the device in real time based on the animation actions and running data, and visualize it.

[0106] If the process is complex, the corresponding current main document file and compressed additional document file are extracted from the device's 3D model. The compressed additional document file is then decompressed to obtain the decompression result. Based on the animation actions, running data, the current main document file, and the decompression result, the device's 3D model is rendered in real time and visualized.

[0107] The beneficial effects of the above technical solution are: to determine whether the device dimension model is complex, if it is not complex, to render it directly; if it is complex, to decompress the additional document files and then render it, thereby improving the rendering efficiency.

[0108] In one embodiment, after rendering and visualizing the 3D model of the device in real time based on the animation actions and runtime data, the method further includes:

[0109] Obtain a fault query command, and obtain the operating parameters of the target device based on the fault query command;

[0110] Based on the operating parameters of the target device, multiple different fault states are determined, and the cause of each fault state is determined.

[0111] Obtain the fault time corresponding to each fault state;

[0112] The multiple different fault states are classified into fault levels according to the fault cause corresponding to each fault state, and different color labels are set for each fault level.

[0113] The fault status is visualized based on the color representation corresponding to the fault time and fault status.

[0114] In this embodiment, the fault query command refers to the command issued by the user to perform a fault search query.

[0115] The beneficial effects of the above technical solution are as follows: obtain fault query instructions, obtain the operating parameters of the target device according to the fault query instructions, determine multiple different fault states according to the operating parameters of the target device, and determine the fault cause corresponding to each fault state, so as to facilitate troubleshooting. Then, classify the fault level and set different color labels to facilitate different levels of alarms. Then, visualize the fault state based on the fault time and the color representation corresponding to the fault state, which can display more information.

[0116] This embodiment also discloses a WebGL-based device 3D visualization system, such as Figure 4 The system shown includes:

[0117] Module 401 is used to determine the target device that needs to be visualized;

[0118] Module 402 is used to create a 3D model of the target device;

[0119] The production module 403 is used to produce animation actions of the target device under preset operating conditions and to collect the corresponding operating data of the target device under preset operating conditions;

[0120] The rendering module 404 is used to render and visualize the three-dimensional model of the device in real time based on the animation actions and running data.

[0121] The working principle and beneficial effects of the above technical solution have been explained in the method claims, and will not be repeated here.

[0122] Those skilled in the art should understand that the "first" and "second" in this invention simply refer to different application stages.

[0123] Other embodiments of this disclosure will readily occur to those skilled in the art upon consideration of the specification and practice of the disclosure herein. This application is intended to cover any variations, uses, or adaptations of this disclosure that follow the general principles of this disclosure and include common knowledge or customary techniques in the art not disclosed herein. The specification and examples are to be considered exemplary only, and the true scope and spirit of this disclosure are indicated by the following claims.

[0124] It should be understood that this disclosure is not limited to the precise structures described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this disclosure is limited only by the appended claims.

Claims

1. A WebGL-based device three-dimensional visualization method, characterized in that, Includes the following steps: Obtain the visual parameters of the target device; The process of establishing a 3D model of the target device using WebGL based on the visualization parameters includes: establishing an original 3D model of the target device using WebGL based on the visualization parameters; extracting structural and component information from the original 3D model; traversing the structural and component information in the original 3D model to identify identical components, removing components of the same type but different spatial locations to obtain a 3D model after removing duplicates; and simplifying the 3D model by performing triangular meshing to obtain the 3D model of the device. The process of creating an animated sequence of the target device under a preset operating condition and collecting corresponding operating data of the target device under the preset operating condition includes: capturing the target device using a target camera with a set capture time to obtain an operating video of the target device under the preset operating condition; identifying the start frame and end frame of the preset operating condition in the operating video and extracting the video frames between the start and end frames; creating an animation from the video frames between the start and end frames to obtain the animated sequence of the target device under the preset operating condition; receiving a data acquisition command and setting the target device to the preset operating condition using the data acquisition command; collecting operating data under the preset operating condition and saving the operating data. The device's 3D model is rendered in real time and visualized based on the animation actions and operational data. Obtain a fault query command and obtain the operating parameters of the target device according to the fault query command; determine multiple different fault states according to the operating parameters of the target device and determine the fault cause corresponding to each fault state; obtain the fault time corresponding to each fault state; classify the multiple different fault states into fault levels according to the fault cause corresponding to each fault state, and set different color labels for each fault level; visualize the fault state based on the fault time and the color representation corresponding to the fault state.

2. The WebGL-based device 3D visualization method of claim 1, wherein, After simplifying the de-identified 3D model into a triangular mesh to obtain the 3D model of the device, the process further includes: Traverse each component in the 3D model of the device; Determine the attribute information of each component, wherein the attribute information includes: component number, component name, component model and component type; Create the original main document file and the original attachment document file; The component number from the attribute information is stored in the original main document file to generate the current main document file; The component name, component model and component type from the attribute information are stored sequentially into the original attachment document file to generate the current attachment document file; The current attached document file is compressed to obtain a compressed attached document file; Save the current main document file and the compressed attached document file.

3. The WebGL-based device 3D visualization method of claim 1, wherein, Extracting the structural and component information of the original 3D model, including: The original 3D model is preprocessed to obtain a preprocessed 3D model; Generate the original scene tree by analyzing the relationships between the component structures and assemblies in the preprocessed 3D model. Display geometric parameters, attribute data, material data, and assembly-related information in the original scene tree; Remove information irrelevant to the model display from the original scene tree to obtain the current scene tree, wherein the information irrelevant to the model display includes: product manufacturing information and historical information; The current scene tree is traversed to obtain the structural information and component information.

4. The WebGL-based device 3D visualization method of claim 1, wherein, Based on the animation actions and operational data, the 3D model of the device is rendered in real time and visualized, including: Create the original virtual scene; Configure a virtual renderer, virtual camera, and virtual light source in the original virtual scene, and set the virtual renderer, virtual camera, and virtual light source according to preset requirements to generate the current virtual scene; Obtain a model request instruction, and load the 3D model of the device into the current virtual scene according to the model request instruction; Determine whether the 3D model of the device is complex. If it is not complex, then render the 3D model of the device in real time based on the animation actions and running data, and visualize it. If the process is complex, the corresponding current main document file and compressed additional document file are extracted from the device's 3D model. The compressed additional document file is then decompressed to obtain the decompression result. Based on the animation actions, running data, the current main document file, and the decompression result, the device's 3D model is rendered in real time and visualized.

5. A device three-dimensional visualization system for the device three-dimensional visualization method based on WebGL according to any one of claims 1 to 4, characterized in that, The system includes: The determination module is used to identify the target device that needs to be visualized. A module is established to create a 3D model of the target device, including: establishing an original 3D model of the target device using WebGL based on the visualization parameters; extracting structural and component information from the original 3D model; traversing the structural and component information in the original 3D model, identifying identical components in the original 3D model, removing components of the same type but different spatial locations to obtain a duplicate-free 3D model; and simplifying the duplicate-free 3D model by performing triangular meshing to obtain the device 3D model. The production module is used to produce animated actions of the target device under preset operating conditions and to collect operating data of the target device under preset operating conditions. This includes: capturing the target device using a target camera with a set capture time to obtain an operating video of the target device under preset operating conditions; identifying the start frame and end frame of the preset operating conditions in the operating video and extracting the video frames between the start and end frames; producing animation from the video frames between the start and end frames to obtain the animated actions of the target device under preset operating conditions; receiving a data acquisition command and setting the target device to the preset operating conditions using the data acquisition command; collecting operating data under the preset operating conditions and saving the operating data. The rendering module is used to render and visualize the 3D model of the device in real time based on the animation actions and running data; Obtain a fault query command and obtain the operating parameters of the target device according to the fault query command; determine multiple different fault states according to the operating parameters of the target device and determine the fault cause corresponding to each fault state; obtain the fault time corresponding to each fault state; classify the multiple different fault states into fault levels according to the fault cause corresponding to each fault state, and set different color labels for each fault level; visualize the fault state based on the fault time and the color representation corresponding to the fault state.

Images