3D inspection method and system based on web technology and Internet of Things equipment

Abstract

The invention provides a 3D inspection method and system based on a web technology and Internet of Things equipment, and relates to an oilfield automatic inspection technology, so that a user can browse and operate a factory three-dimensional scene only through a browser, and the usability and cross-platform adaptive capacity of the system are improved. According to the method, Babylon.js is adopted at a Web front end to load and dynamically render a 3D model of an oil transfer station of an oil field, and then data collected by Internet of Things equipment and the front end are subjected to data real-time interactive display; real-time cameras are embedded in a Web page to collect images, the cameras are bound with device nodes in a 3D scene one by one, and a user is supported to click a device or a pipe segment to call a corresponding video stream by responding to a click event in the scene; and finally, displaying the operation data and the alarm information by adopting a dynamic rendering mode on the equipment state label in the three-dimensional scene. The system is suitable for digital inspection and management of the oil transfer station plant area of the oil field.

Description

Technical Field

[0001] The present invention relates to oilfield automated inspection technology, in particular to an inspection simulation method and system based on the integration of Web technology and Internet of Things devices, which are suitable for digital inspection and management of oilfield transfer stations. Background Art

[0002] Inspections of traditional oilfield transfer stations mostly rely on manual on-site inspections, which have problems such as high cost, low efficiency, and poor real-time performance.

[0003] In recent years, with the development of the Internet of Things (IoT) and Web 3D graphics, the integration of monitoring equipment with 3D visualization technology to achieve remote, real-time, and visual intelligent inspections has become a growing trend. However, existing systems are mostly closed structures, making them difficult to scale flexibly. They also lack intuitive 3D visualization of the factory environment and detailed fault detection capabilities. Furthermore, traditional inspection systems require the installation of local software or the use of heavyweight 3D engines. Summary of the Invention

[0004] The purpose of the present invention is to provide a 3D inspection method based on web technology and Internet of Things devices, so that users can browse and operate the three-dimensional scene of the factory area only through a browser, greatly improving the system's usability and cross-platform adaptability.

[0005] To achieve the above object, the present invention provides the following technical solutions:

[0006] The present invention proposes a 3D inspection method based on web technology and Internet of Things devices, the method comprising the following steps:

[0007] Step S1: Use Babylon.js on the web front end to load and dynamically render the 3D model of the oil field transfer station;

[0008] Step S2: Use WebSocket and MQTT protocols to interactively display the data collected by IoT devices with the front end in real time;

[0009] Step S3: Push the stream via RTSP protocol and use WebSocket to embed the real-time camera to collect images in the web page;

[0010] Step S4: Bind the camera to the device nodes in the 3D scene one by one, and support the user to click on the device or pipe segment to call the corresponding video stream by responding to the click event in the scene;

[0011] Step S5: The device status labels in the three-dimensional scene use dynamic rendering to display operating data and alarm information.

[0012] Furthermore, before loading the 3D model, model preprocessing technology and delayed loading mechanism are used to simplify the 3D model, including LOD and multi-texture splitting, and key area models are dynamically loaded in the scene according to the camera position.

[0013] Furthermore, during real-time interactive display, data is cached in batches and refreshed at intervals at the receiving end, and the received data is processed in combination with a key data priority screening strategy.

[0014] Furthermore, the batch caching mentioned above specifically includes: establishing a data cache queue at the receiving end, and caching the data in batches according to timestamps or device types;

[0015] The above interval refresh is specifically: using an interval refresh mechanism to dynamically adjust the UI refresh frequency according to data priority.

[0016] Furthermore, by binding a unique identifier for each camera device in the 3D model, a mapping relationship between the device node and the video stream URL is established;

[0017] By parsing the device identifier and calling the corresponding video stream interface, the real-time image is displayed in a floating layer or independent window to respond to click events in the scene.

[0018] Furthermore, a label layer independent rendering mechanism is used to draw the status label as a 2D Overlay layer and decouple the rendering from the 3D scene, so as to avoid triggering the redrawing of the main scene.

[0019] Furthermore, the above step S5 is specifically as follows:

[0020] Convert the device status label into a 2D Canvas layer, overlay it on the 3D scene through absolute positioning, dynamically calculate the label coordinates based on the device position, and update the label content through off-screen rendering technology to avoid triggering 3D scene redrawing.

[0021] The 3D inspection method based on web technology and Internet of Things devices described in the present invention can be fully implemented using computer software. Therefore, correspondingly, the present invention also provides a 3D inspection system based on web technology and Internet of Things devices. The system includes a storage device, which is used to execute the above-mentioned 3D inspection method and steps based on web technology and Internet of Things devices.

[0022] The present invention also proposes a computer-readable storage medium, which stores a computer program. When the computer program is run by a processor, it executes any one of the above-mentioned 3D inspection methods based on web technology and Internet of Things devices.

[0023] The present invention also proposes a computer device, which includes a memory and a processor, wherein a computer program is stored in the memory. When the processor runs the computer program stored in the memory, the processor executes any one of the above-mentioned 3D inspection methods based on web technology and Internet of Things devices.

[0024] The beneficial effects of the present invention are:

[0025] 1. This invention innovatively uses Babylon.js to render the 3D scene of the oilfield plant in the browser, breaking away from the traditional restrictions of installing local software or using heavyweight 3D engines. Users can browse and operate the 3D scene of the plant only through the browser, greatly improving the system's usability and cross-platform adaptability.

[0026] Furthermore, compared to existing systems that only provide data display or separate monitoring functions, this invention maps real-time data (such as temperature, pressure, and flow) collected by IoT hardware directly to the corresponding devices in the 3D scene, combining data visualization with spatial positioning, improving inspection efficiency and intuitive information perception. At the same time, this invention integrates high-definition video streaming into the web interface. Users can click the camera model location in the 3D scene to view the camera image in real time. Combined with manual recognition, it can determine whether the pipeline has abnormal problems such as perforation, rust, and leakage, replacing most manual on-site inspection tasks, effectively improving safety and response speed.

[0027] 2. By utilizing advanced Web technology and a 3D rendering engine, this invention significantly improves the loading efficiency and visualization of the three-dimensional scene at the oilfield transfer station, enables dynamic binding and display of equipment status and IoT data, and optimizes the interactive operation between camera images and three-dimensional models. This technical solution significantly improves the work efficiency and on-site response speed of inspection personnel. Through seamless integration with existing equipment systems, this invention achieves real-time and accurate equipment monitoring, effectively improving the automation level of oilfield inspections. This invention not only achieves breakthroughs in technological implementation but also demonstrates excellent results in actual industrial applications, possessing broad prospects for promotion and application and commercial value.

[0028] The present invention is applicable to the digital inspection and management of oil field oil transfer station plant areas. BRIEF DESCRIPTION OF THE DRAWINGS

[0029] In order to more clearly illustrate the specific embodiments of the present invention or the technical solutions in the prior art, the following is a brief introduction to the drawings required for use in the specific embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0030] Figure 1 This is a flow chart of a 3D inspection method based on web technology and Internet of Things devices proposed in the present invention;

[0031] Figure 2 It is a flow chart of a preferred embodiment of the present invention. DETAILED DESCRIPTION

[0032] In the following description, specific details such as specific system structures and technologies are provided for illustration rather than limitation to facilitate a thorough understanding of the embodiments of the present application. However, it should be clear to those skilled in the art that the present application may be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to avoid obstructing the description of the present application with unnecessary details.

[0033] It will be understood that when used in this specification and the appended claims, the term "comprising" indicates the presence of described features, integers, steps, operations, elements and / or components, but does not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components and / or groups thereof.

[0034] The specific embodiments of the present invention are further described in detail below with reference to the accompanying drawings. The following embodiments will help those skilled in the art to further understand the present invention, but are not intended to limit the present invention in any form. It should be noted that those skilled in the art may make various changes and improvements without departing from the scope of the present invention, and these are all within the scope of protection of the present invention.

[0035] Implementation method 1, see Figure 1 This embodiment describes a 3D inspection method based on web technology and IoT devices in order to enable users to browse and operate the three-dimensional scene of the factory area only through a browser. Figure 1 As shown, the following steps are included:

[0036] Step S1: Use Babylon.js on the web front end to load and dynamically render the 3D model of the oil field transfer station;

[0037] Step S2: Use WebSocket and MQTT protocols to interactively display the data collected by IoT devices with the front end in real time;

[0038] Step S3: Push the stream via RTSP protocol and use WebSocket to embed the real-time camera to collect images in the web page;

[0039] Step S4: Bind the camera to the device nodes in the 3D scene one by one, and support the user to click on the device or pipe segment to call the corresponding video stream by responding to the click event in the scene;

[0040] Step S5: The device status labels in the three-dimensional scene use dynamic rendering to display operating data and alarm information.

[0041] Implementation 2: This implementation specifically describes a 3D inspection method based on web technology and IoT devices proposed in Implementation 1 above.

[0042] Step S1: Use Babylon.js on the web front end to load and dynamically render the 3D model of the oil field transfer station;

[0043] Specifically:

[0044] Using Babylon.js on the web, the 3D factory model is loaded, enabling a visual display of the factory scene in the browser. Because oilfield transfer station models are typically large, contain complex architectural structures, and contain numerous device nodes, direct loading can cause browser lag or crashes. This implementation uses model preprocessing techniques and a lazy loading mechanism to simplify the 3D model, including LOD and multi-texture splitting, and dynamically loads key area models based on the camera's position within the scene.

[0045] Among them, LOD is a multi-level detail optimization that dynamically switches the model accuracy according to the viewing distance; splits multiple texture maps to reduce the amount of resources loaded at a single time, and loads model components in steps through asynchronous loading technology.

[0046] Step S2: Use WebSocket and MQTT protocols to interactively display the data collected by IoT devices with the front end in real time;

[0047] Specifically:

[0048] First, data collected by IoT devices is received via WebSocket. The data is then parsed, including extracting device information (such as device ID, temperature, pressure, and status). Finally, the device UI is updated based on the parsed data. UI updates include dynamically creating or updating device labels, changing label styles based on device status, and ensuring that label positions follow the device's 3D model. Label positions are recalculated during each rendering, ensuring that labels always follow the device model, enabling real-time interactive display of data.

[0049] When multiple devices report data simultaneously, browsers can experience message delays and UI refresh lag. Therefore, this implementation utilizes a data cache queue and throttling update mechanism to cache data in batches and refresh it at intervals on the receiving end. This, combined with a key data priority screening strategy, ensures that the page can still display key indicators in real time and stably despite high-frequency data flows.

[0050] Batch caching involves establishing a data cache queue at the receiving end and caching data in batches based on timestamps or device types. Interval refresh involves using an interval refresh mechanism to dynamically adjust the UI refresh frequency based on data priority.

[0051] Step S3: Push the stream via RTSP protocol and use WebSocket to embed the real-time camera to collect images in the web page;

[0052] Specifically:

[0053] First, implement the WebRTC-based camera stream display function using code, then use the RTSP protocol to push the stream and embed the camera image in the web page using the WHEP (WebRTC Home Entertainment Protocol). The main steps include:

[0054] 1. Initialize the WebRTC connection and obtain the ICE server configuration.

[0055] 2. Create and send an SDP offer.

[0056] 3. Process the SDP answer returned by the server.

[0057] 4. Collect and send ICE candidates.

[0058] 5. Monitor the connection status to ensure the stability of the connection.

[0059] 6. Display the camera stream in the video element of the page.

[0060] This step involves connecting the real-time camera image stream to the web page using the RTSP protocol and embedding it in the web page using WebSocket playback technology. This technology balances compatibility and real-time performance, improving the user experience of viewing real-time video streaming.

[0061] Step S4: Bind the camera to the device nodes in the 3D scene one by one, and support the user to click on the device or pipe segment to call the corresponding video stream by responding to the click event in the scene;

[0062] Specifically:

[0063] First, traverse the device nodes in the 3D scene to detect whether the device is bound to a camera. Then, create an action manager for the device bound to the camera and register a click event that is triggered when the user clicks the device.

[0064] To retrieve the camera video when a device is clicked, the following steps are performed: When the user clicks the device, the openCameraFeed function is called, passing in the device's cameraId. In openCameraFeed, the URL of the video stream is constructed based on the passed cameraId. The video stream URL is set as the source of the video element (cameraView) on the page, displaying the corresponding video.

[0065] Once the camera image is connected, users can click on a device node in the 3D scene to view the corresponding camera's real-time image. However, due to the large number of oilfield pipelines and the complex camera coverage, it is difficult for users to quickly locate the image location. This implementation implements a binding mechanism between images and 3D device nodes in the system. When users click on a device or pipe segment in the 3D model, the corresponding camera image automatically opens, assisting in visually inspecting the pipeline for abnormalities such as perforations, leaks, and punctures, significantly improving image review efficiency and positioning accuracy.

[0066] Among them, by binding a unique identifier for each camera device in the 3D model, a mapping relationship between the device node and the video stream URL is established; by parsing the device identifier and calling the corresponding video stream interface, the real-time image is displayed in a floating layer or an independent window to respond to click events in the scene.

[0067] Step S5: The device status labels in the three-dimensional scene use dynamic rendering to display operating data and alarm information.

[0068] Specifically:

[0069] Device status labels in the 3D scene use dynamic rendering to display operational data and alarm information. Due to the large number of labels and their frequent changes, performance degradation can occur. This implementation introduces a separate label layer rendering mechanism, rendering the status labels as 2D overlay layers and decoupling their rendering from the 3D scene. This avoids triggering a redraw of the main scene and effectively improves the overall system frame rate.

[0070] Specifically:

[0071] In the 3D scene, create a status label for each device to display its operating data (such as temperature and pressure). The label dynamically follows the position of the device model. Based on the device's temperature, the label's background color changes dynamically, displaying red (alarm) when the temperature exceeds 90°C and green (normal) otherwise.

[0072] In actual application, the device status label can be converted into a 2D Canvas layer, superimposed on the 3D scene through absolute positioning, and the label coordinates can be dynamically calculated according to the device position. The label content can be updated through off-screen rendering technology to avoid triggering 3D scene redrawing.

[0073] This implementation method builds a 3D simulation scene of the oilfield transfer station plant on the Web to achieve a spatially integrated display of equipment and plant layout, eliminating the complex deployment of traditional local installation and operation, and has the characteristics of cross-platform, lightweight, and easy access.

[0074] Furthermore, this embodiment realizes the dynamic binding of the three-dimensional model and the real-time data of the Internet of Things, that is, the key parameters such as pressure, flow, temperature collected by the sensor are bound to the corresponding equipment positions in the 3D model in real time, and the operating status is displayed in the form of labels, realizing the "visual + data" integrated inspection interface for the first time.

[0075] Furthermore, this embodiment also realizes the linkage preview technology of images and three-dimensional space, that is, the real-time images captured by the high-definition camera are matched one-to-one with the 3D scene nodes. The user can click on any pipeline or equipment in the three-dimensional perspective to call up the associated video stream, assisting manual identification of problems such as perforations and drips, thereby improving the intuitiveness and response efficiency of on-site monitoring.

[0076] Furthermore, this embodiment also realizes multi-terminal accessibility and dynamic performance optimization mechanism: innovatively introduces Web optimization technologies such as lazy loading, layer decoupling, and data throttling to ensure that the system can run smoothly on different browsers and realize three-dimensional real-time visualization of complex industrial scenes in resource-constrained environments.

[0077] Implementation method three, see Figure 2 This embodiment describes the practical application of a 3D inspection method based on web technology and IoT devices proposed in the above embodiment.

[0078] like Figure 2 As shown, specifically:

[0079] This example describes a 3D scene rendering and interaction system based on BABYLON.js. The system includes a main scene and a mini-map scene, supports dynamic switching, showing and hiding the mini-map, and keyboard control of character animation. The following are the detailed implementation steps:

[0080] Step S1: Use Babylon.js on the web front end to load and dynamically render the 3D model of the oil field transfer station;

[0081] Specifically:

[0082] 1. Initialize the main scene and small map scene: The main scene and small map scene are rendered by the BABYLON.js engine respectively.

[0083] 1.1 Initialize the main scene:

[0084] Get the canvas element of the main scene: Get the canvas element with the ID container on the page through document.querySelector.

[0085] Create a rendering engine: Use BABYLON.Engine to create a rendering engine and pass the canvas element as a parameter.

[0086] Create the main scene: Call the CreateScene method to initialize the main scene.

[0087] Start Rendering Loop: Starts the rendering loop and continuously renders the main scene.

[0088] Add a window resize event listener: When the window size changes, call the engine.resize() method to adjust the size of the canvas.

[0089] 1.2 Initialize the small map scene:

[0090] Get the canvas element of the mini-map: Use document.querySelector to get the canvas element with ID container2 on the page.

[0091] Create a rendering engine: Use BABYLON.Engine to create a rendering engine and pass the canvas2 element as a parameter.

[0092] Create a small map scene: call the CreateScene2 method to initialize the small map scene.

[0093] Start rendering loop: Start the rendering loop and continuously render the mini-map scene.

[0094] Add a window resize event listener: When the window size changes, call the engine2.resize() method to adjust the size of canvas2.

[0095] 2. Create the main scene

[0096] 2.1 Create the camera of the main scene: Create a free camera, set its properties such as position, target, collision detection, and set the camera's gravity and collision so that it can respond to the physical environment.

[0097] 2.2 Add light source: Add hemispherical light and directional light to illuminate the scene.

[0098] 2.3 Create a shadow generator: Create a shadow generator to generate shadow effects.

[0099] 2.4 Loading environment texture: Loading environment texture and creating a default skybox.

[0100] 2.5 Loading 3D model: Use BABYLON.SceneLoader.ImportMesh to load the 3D model and set the scale, position and initial position of the camera.

[0101] 3. Create a small map scene

[0102] 3.1 Create a camera for the minimap: Create a general camera and set its position and target.

[0103] 3.2 Add light source: Add hemispherical light to illuminate the small map scene.

[0104] 3.3 Set scene background and ambient light: Set the background color and ambient light of the scene.

[0105] 3.4 Load 3D model: Load the main model of the minimap and use it as the box of the minimap.

[0106] 3.5 Create a ring and add animation: Create a ring object and add a scaling animation to it. Attach the ring to the box of the minimap.

[0107] At this point, the main scene and small map scene of the oil field transfer station model have been created.

[0108] 4. Dynamically switch the minimap

[0109] 4.1 Switching the minimap to full screen: Toggle the minimap to full screen by adjusting the size of the minimap container. Also control the visibility of the minimap's box and sub-elements.

[0110] 4.2 Show or hide mini-map: Show or hide the mini-map and adjust the engine size.

[0111] At this point, the minimap supports full-screen switching and position adjustment.

[0112] 5. Keyboard control character animation

[0113] 5.1 Initialize the keyboard listener: First, create an input map to record the key status; then register event listeners for keyboard presses and releases, and finally implement key status detection in the rendering loop of the minimap scene to play or stop character animation.

[0114] 6. Handle the mini-map click event: adjust the position of the main scene camera according to the click location.

[0115] 7. Load more 3D models: Load multiple 3D models and set their scale and rotation. Create the ground and set its collision and material.

[0116] At this point, we've completed the implementation of a BABYLON.js-based 3D scene rendering and interaction system, including initializing the main scene and mini-map scenes, loading 3D models, implementing animation effects, keyboard-controlled character animation, and dynamically switching between mini-maps. By following these steps, we can achieve a fully functional 3D scene rendering and interaction system.

[0117] Step S2: Use WebSocket and MQTT protocols to interactively display the data collected by IoT devices with the front end in real time;

[0118] This step receives real-time device data via WebSocket and dynamically updates the front-end interface. Each device is assigned a label that displays its real-time data (such as temperature, pressure, and status). The label changes color based on the device's status (alarm or normal) and always follows the device's 3D model position.

[0119] Specifically:

[0120] WebSocket connection device data: Send the data collected by the IoT device to the server, connect to the server through the WebSocket protocol, and trigger the onmessage event when the server sends the device data.

[0121] Processing device data: When receiving device data, parse it into JSON format and extract device information (such as device ID, temperature, pressure, status, etc.). Then call the updateDeviceUI function to update the device data to the front-end interface.

[0122] Update the device UI: Extract the device ID from the device data, and then find the 3D model corresponding to the device ID in the 3D scene.

[0123] Create or update device tags: Check whether a tag corresponding to the device ID already exists on the page. If not, dynamically create a tag and set the style (such as background color, font size, position, etc.); if it already exists, directly update the tag content.

[0124] The label content is updated: the label content includes the device ID, temperature, pressure, and status. Based on the device status (alarm or normal), the label background color is dynamically updated: if the status is alarm, the background color is red; if the status is normal, the background color is green.

[0125] Dynamically position the label: Use the 3D engine (BABYLON.js) to calculate the projected position of the device's 3D model on the screen. Position the label above the device's 3D model (offset by 30 pixels). Recalculate the label position each time you render to ensure it always follows the device's 3D model.

[0126] Push the stream via RTSP protocol and use WebSocket to embed the real-time camera to collect images in the web page;

[0127] Step S3: specifically:

[0128] 1. Initialization: Create a WHEPClient instance, pass in the URL of the WebRTC stream and the video element ID. Start the connection process and obtain the ICE server configuration.

[0129] 2. Create a WebRTC connection: Initialize RTCPeerConnection using the ICE server configuration. Create and send an SDP offer. Process the SDP answer returned by the server.

[0130] 3. ICE candidate processing: Collect local ICE candidates and send them to the server.

[0131] 4. Connection status monitoring: Monitor ICE connection status changes. If the connection is disconnected, plan to reconnect.

[0132] 5. Video stream presentation: When the media track is available, set the video stream as the source of the video element.

[0133] Step S4: Bind the cameras to the device nodes in the 3D scene one by one. By responding to click events in the scene, users can click on a device or pipe segment to retrieve the corresponding video stream. This step iterates through the devices in the 3D scene, checking whether each device is bound to a camera. Then, a click event is added to each device bound to a camera: when the user clicks the device, the video is retrieved. Finally, the video stream is retrieved: the video stream is obtained based on the device's camera ID and displayed on the page.

[0134] Specifically:

[0135] 1. Traverse the device nodes in the 3D scene:

[0136] Traverse all meshes in the 3D scene, each mesh represents a device or object.

[0137] 2. Check whether the device is bound to the camera:

[0138] For each mesh, check if its metadata contains a cameraId.

[0139] If cameraId exists, it means that the device has been bound to a camera.

[0140] 3. Add a click event for the device bound to the camera:

[0141] Create an action manager (ActionManager) for the device that is bound to the camera.

[0142] Register a click event (OnPickTrigger) that is triggered when the user clicks the device.

[0143] 4. Click on the device to retrieve the camera video:

[0144] When the user clicks on the device, the openCameraFeed function is called and the cameraId of the device is passed in.

[0145] 5. Open the camera video stream:

[0146] Step S5: In the openCameraFeed function, construct the URL of the video stream according to the passed cameraId.

[0147] Set the URL of the video stream as the source of the video element (cameraView) in the page to display the corresponding video.

[0148] The equipment status labels in the 3D scene use dynamic rendering to display operating data and alarm information.

[0149] Specifically:

[0150] 1. Create a device status label: Define a function called createStatusLabel that accepts two parameters: deviceMesh: the mesh object of the device in the 3D scene; data: the device's operating data, including temperature and pressure.

[0151] 2. Create a label element: Create a div element as the device status label. Set the label's class name to device-label. Set the label's text content to display the device's temperature and pressure.

[0152] 3. Set the label style: Set the label positioning mode to absolute. Add the label to the body of the page.

[0153] 4. Dynamically update the label position: Register a function in the 3D scene's rendering loop to update the label position before each rendering. Use the BABYLON.Vector3.Project method to project the device's 3D model's position into 2D screen coordinates. Update the label's left and top style properties based on the projected coordinates so that the label always follows the device model.

[0154] 5. Dynamic color change indicates alarm: The label background color changes dynamically according to the device's temperature data: If the temperature exceeds 90°C, the label background color turns red, indicating an alarm. Otherwise, the label background color is green, indicating normal.

[0155] In summary, this embodiment significantly improves the loading efficiency and visualization of the three-dimensional scene of the oilfield transfer station plant by adopting advanced Web technology and a 3D rendering engine, realizes the dynamic binding display of equipment status and IoT data, and optimizes the interactive operation between camera images and three-dimensional models. This technical solution greatly improves the work efficiency and on-site response speed of inspection personnel. Through seamless integration with existing equipment systems, the present invention achieves real-time and accurate equipment monitoring, effectively improving the automation level of oilfield inspections. The present invention not only achieves breakthroughs in technical implementation, but also demonstrates excellent results in actual industrial applications, and has broad prospects for promotion and application and commercial value.

[0156] Implementation 4: The 3D inspection method based on web technology and IoT devices proposed in the above implementation can be implemented entirely using computer software. Therefore, correspondingly, this implementation proposes a 3D inspection system based on web technology and IoT devices, the system comprising:

[0157] A storage device for loading and dynamically rendering a 3D model of an oilfield transfer station using Babylon.js on the web front end;

[0158] A storage device used to display data collected by IoT devices in real-time interaction with the front end using WebSocket and MQTT protocols;

[0159] A storage device for real-time camera image acquisition using RTSP protocol and WebSocket embedded in a web page;

[0160] It is used to bind the camera to the device nodes in the 3D scene one by one, and support the user to click on the device or pipe segment to call the storage device of the corresponding video stream by responding to the click event in the scene;

[0161] The device status tags used in three-dimensional scenes use dynamic rendering to display the storage device of operating data and alarm information.

[0162] Implementation method 5: This implementation method proposes a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, it executes a 3D inspection method based on web technology and Internet of Things devices as described in any one of the above implementation methods.

[0163] Implementation method six. This implementation method proposes a computer device, which includes a memory and a processor, wherein a computer program is stored in the memory. When the processor runs the computer program stored in the memory, the processor executes a 3D inspection method based on web technology and Internet of Things devices as described in any one of the above implementation methods.

[0164] This embodiment provides a computer device, the hardware device of this part is a general model and is not shown in the form of a diagram. The system includes a processor and a memory, wherein the processor and the memory can be connected via a bus or other means. The memory is a non-transitory computer-readable storage medium that can be used to store non-transitory software programs, non-transitory computer executable programs and modules, and corresponding program instructions / modules. The processor executes various functional applications and data processing of the processor by running the non-transitory software programs, instructions and modules stored in the memory, so as to realize the 3D inspection method and steps based on web technology and Internet of Things devices in the above method embodiment.

[0165] The foregoing description is merely an embodiment of the present invention and is not intended to limit the present invention. Those skilled in the art will readily appreciate that the present invention is susceptible to various modifications and variations. Any modifications, equivalent substitutions, or improvements made within the spirit and principles of the present invention shall be included within the scope of the claims.

Claims

1. A 3D inspection method based on web technology and Internet of Things devices, characterized in that: The method is: S1: Use Babylon.js on the web front end to load and dynamically render the 3D model of the oil field transfer station; S2: Use WebSocket and MQTT protocols to interact and display data collected by IoT devices with the front end in real time; S3: Pushes streams via the RTSP protocol and uses WebSocket to embed real-time camera images in web pages; S4: Bind the camera to the device nodes in the 3D scene one by one, and support the user to click on the device or pipe segment to call the corresponding video stream by responding to click events in the scene; S5: The equipment status labels in the 3D scene use dynamic rendering to display operating data and alarm information.

2. A 3D inspection method based on web technology and Internet of Things devices according to claim 1, characterized in that: Before loading the 3D model, model preprocessing technology and delayed loading mechanism are used to simplify the 3D model, including LOD and multi-texture splitting, and key area models are dynamically loaded in the scene according to the camera position.

3. The 3D inspection method based on web technology and Internet of Things devices according to claim 1, characterized in that: During real-time interactive display, data is cached in batches and refreshed at intervals at the receiving end, and the received data is processed in combination with key data priority screening strategies.

4. The 3D inspection method based on web technology and Internet of Things devices according to claim 3 is characterized in that: Batch caching specifically involves: establishing a data cache queue at the receiving end and caching data in batches based on timestamps or device types; Interval refresh specifically means: using an interval refresh mechanism to dynamically adjust the UI refresh frequency based on data priority.

5. The 3D inspection method based on web technology and Internet of Things devices according to claim 1, characterized in that: By binding a unique identifier for each camera device in the 3D model, a mapping relationship between the device node and the video stream URL is established; By parsing the device identifier and calling the corresponding video stream interface, the real-time image is displayed in a floating layer or independent window to respond to click events in the scene.

6. The 3D inspection method based on web technology and Internet of Things devices according to claim 1, characterized in that: The label layer independent rendering mechanism is used to draw the status label as a 2D Overlay layer and decouple the rendering from the 3D scene to avoid triggering the redraw of the main scene.

7. The 3D inspection method based on web technology and Internet of Things devices according to claim 1, characterized in that: S5 is specifically: Convert the device status label into a 2D Canvas layer, overlay it on the 3D scene through absolute positioning, dynamically calculate the label coordinates based on the device position, and update the label content through off-screen rendering technology to avoid triggering 3D scene redrawing.

8. A 3D inspection system based on web technology and Internet of Things devices, characterized by: The system includes a storage device, which is used to execute the method and steps described in claim 1.

9. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, which is used by a processor to execute the 3D inspection method based on web technology and Internet of Things devices according to any one of claims 1 to 7.

10. A computer device, characterized in that: The device includes a memory and a processor, wherein a computer program is stored in the memory. When the processor runs the computer program stored in the memory, the processor executes the 3D inspection method based on web technology and Internet of Things devices according to any one of claims 1 to 7.

Images