A 3D inspection method and system based on web technology and internet of things devices

Abstract

This invention proposes a 3D inspection method and system based on web technology and IoT devices, involving automated inspection technology for oilfields. It enables users to browse and operate a 3D scene of the plant area using only a browser, improving the system's usability and cross-platform adaptability. The invention uses Babylon.js to load and dynamically render a 3D model of an oilfield transfer station on the web front end, then interacts with and displays data collected by IoT devices in real time. Real-time camera images are embedded in the web page, and the cameras are bound to device nodes in the 3D scene. Click events in the scene allow users to click on devices or pipe sections to retrieve corresponding video streams. Finally, device status labels in the 3D scene dynamically render operational data and alarm information. This invention is applicable to the digital inspection and management of oilfield transfer station areas.

Description

Technical Field

[0001] This invention relates to automated inspection technology for oilfields, and in particular to an inspection simulation method and system based on Web technology and IoT devices, which is applicable to the digital inspection and management of oilfield transfer station areas. Background Technology

[0002] Traditional oilfield transfer stations are mostly inspected manually on-site, which has 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 technology, combining monitoring equipment with 3D visualization technology to achieve remote, real-time, and visualized intelligent inspection has become a development trend. However, existing systems are mostly closed structures, making flexible expansion difficult, and lack intuitive 3D displays of the factory environment and detailed fault detection capabilities. Furthermore, traditional inspection systems are limited by the need to install local software or use heavyweight 3D engines. Summary of the Invention

[0004] The purpose of this invention is to provide a 3D inspection method based on web technology and IoT devices, which allows users to browse and operate the 3D scene of the factory area through a browser, greatly improving the system's ease of use and cross-platform adaptability.

[0005] To achieve the above objectives, the present invention provides the following technical solution:

[0006] This invention proposes a 3D inspection method based on web technology and IoT devices, the method comprising the following steps:

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

[0008] Step S2: Use WebSocket and MQTT protocols to enable real-time data interaction and display between the data collected by the IoT device and the front end;

[0009] Step S3: Stream via RTSP protocol and use WebSocket to embed a real-time camera to capture images on a web page;

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

[0011] Step S5: The device status labels in the 3D scene are displayed using dynamic rendering to show operating data and alarm information.

[0012] Furthermore, before loading the 3D model, model preprocessing techniques and a 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, the data is cached in batches and refreshed at intervals on the receiving end, and the received data is processed in combination with a key data priority filtering strategy.

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

[0015] The aforementioned interval refresh specifically refers to: adopting an interval refresh mechanism to dynamically adjust the UI refresh frequency based on data priority.

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

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

[0018] Furthermore, an independent rendering mechanism for the label layer is adopted to draw the status label as a 2D Overlay layer and decouple it from the 3D scene rendering, thereby avoiding triggering the main scene redraw.

[0019] Furthermore, step S5 above specifically includes:

[0020] The device status label is converted into a 2D Canvas layer, which is then overlaid on top of the 3D scene using absolute positioning. The label coordinates are dynamically calculated based on the device position, and the label content is updated using off-screen rendering technology to avoid triggering a 3D scene redraw.

[0021] The 3D inspection method based on web technology and IoT devices described in this invention can be entirely implemented using computer software. Therefore, correspondingly, this invention also provides a 3D inspection system based on web technology and IoT devices. The system includes a storage device, which is used to execute the 3D inspection method and steps based on web technology and IoT devices proposed above.

[0022] The present invention also proposes a computer-readable storage medium storing a computer program, which, when executed by a processor, performs the 3D inspection method based on web technology and Internet of Things devices described above.

[0023] The present invention also proposes a computer device, which includes a memory and a processor. The memory stores a computer program. 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 above.

[0024] The beneficial effects of this invention are as follows:

[0025] 1. This invention innovatively uses Babylon.js to render 3D scenes of oilfield plant areas in the browser, getting rid of the limitations of traditional methods that require the installation of local software or the use of heavyweight 3D engines. Users can browse and operate the 3D scene of the plant area simply through a browser, which greatly improves the ease of use and cross-platform adaptability of the system.

[0026] Furthermore, compared to existing systems that only provide data display or separate monitoring functions, this invention directly maps real-time data (such as temperature, pressure, flow rate, etc.) collected by IoT hardware onto corresponding devices in a 3D scene, achieving a combination of data visualization and spatial positioning, thus improving inspection efficiency and the intuitiveness of information perception. Simultaneously, this invention integrates high-definition video streams into a web interface, allowing users to click on the camera model location in the 3D scene to view camera images in real time. Combined with manual identification, this allows for the determination of abnormalities such as perforations, corrosion, and leaks in pipelines, replacing most manual on-site inspection tasks and effectively improving safety and response speed.

[0027] 2. This invention, by employing advanced Web technology and a 3D rendering engine, significantly improves the loading efficiency and visualization effect of 3D scenes in oilfield transfer stations, enabling dynamic binding and display of equipment status and IoT data, and optimizing the interactive operation between camera images and 3D models. This technical solution greatly 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 technical implementation but also demonstrates excellent results in practical industrial applications, possessing broad prospects for promotion and application and commercial value.

[0028] This invention is applicable to the digital inspection and management of oilfield transfer station areas. Attached Figure Description

[0029] To more clearly illustrate the specific embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0030] Figure 1 This is a flowchart of a 3D inspection method based on web technology and IoT devices proposed in this invention;

[0031] Figure 2 This is a flowchart of a preferred embodiment of the present invention. Detailed Implementation

[0032] In the following description, specific details such as particular system architectures and techniques are set forth for illustrative purposes and not for limitation, in order to provide a thorough understanding of the embodiments of this application. However, those skilled in the art will understand that this application may also be implemented in other embodiments without these specific details. In other instances, detailed descriptions of well-known systems, apparatuses, circuits, and methods are omitted so as not to obscure the description of this application with unnecessary detail.

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

[0034] The specific embodiments of the present invention will be further described in detail below with reference to the accompanying drawings. These embodiments will help those skilled in the art to further understand the present invention, but do not limit the invention in any way. It should be noted that those skilled in the art can make several changes and improvements without departing from the concept of the present invention, and these all fall within the protection scope 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, designed to allow users to browse and operate a 3D scene of a factory using only a browser. Figure 1 As shown, it includes the following steps:

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

[0037] Step S2: Use WebSocket and MQTT protocols to enable real-time data interaction and display between the data collected by the IoT device and the front end;

[0038] Step S3: Stream via RTSP protocol and use WebSocket to embed a real-time camera to capture images on a web page;

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

[0040] Step S5: The device status labels in the 3D scene are displayed using dynamic rendering to show operating data and alarm information.

[0041] Implementation Method 2: This implementation method provides a detailed description of a 3D inspection method based on web technology and IoT devices proposed in Implementation Method 1 above.

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

[0043] Specifically:

[0044] This implementation uses Babylon.js on the web to load 3D models of the plant area, enabling the visualization of the 3D scene in the browser. Since oilfield transfer station models are generally large, containing complex building structures and numerous equipment nodes, direct loading can cause browser lag or crashes. Therefore, this implementation uses model preprocessing techniques and a lazy loading mechanism to simplify the 3D model, including Level of Detail (LOD) and multi-texture splitting, and dynamically loads key area models in the scene based on the camera position.

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

[0046] Step S2: Use WebSocket and MQTT protocols to enable real-time data interaction and display between the data collected by the IoT device and the front end;

[0047] Specifically:

[0048] First, data collected by IoT devices is received via WebSocket. Then, the data is 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 tags, changing tag styles based on device status, and ensuring tag positions follow the device's 3D model. By recalculating tag positions during each rendering, real-time interactive data display is achieved by ensuring tags always follow the device model.

[0049] In scenarios where multiple devices simultaneously report data, the browser frontend experiences message delays and UI refresh stuttering. Therefore, this implementation employs a data caching queue and a throttling update mechanism. Data is cached in batches and refreshed at intervals on the receiving end, combined with a key data priority filtering strategy, ensuring that the page can still display key indicators in real-time and stably under high-frequency data flow.

[0050] Specifically, batch caching involves establishing a data cache queue at the receiving end and caching data in batches according to 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: Stream via RTSP protocol and use WebSocket to embed a real-time camera to capture images on a web page;

[0052] Specifically:

[0053] First, a webRTC-based camera stream display function is implemented using code. Then, the RTSP protocol is used for streaming, and the camera image is embedded in the web page via 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 connection stability.

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

[0060] This step involves streaming real-time camera images using the RTSP protocol and embedding the playback within a web page using WebSocket technology. This technique balances compatibility and real-time performance, enhancing the user experience of viewing live video streaming.

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

[0062] Specifically:

[0063] First, iterate through the device nodes in the 3D scene to check if the device is bound to a camera. Then, create an action manager for the device bound to the camera and register a click event to be triggered when the user clicks on the device.

[0064] The specific process for retrieving camera video when a device is clicked is as follows: When the user clicks the device, the `openCameraFeed` function is called, passing in the device's `cameraId`. Within the `openCameraFeed` function, a URL for the video stream is constructed based on the passed `cameraId`. This video stream URL is then set as the source of the video element (`cameraView`) on the page, thereby displaying the corresponding video.

[0065] After the camera images are connected, users can click on device nodes in the 3D scene to view the real-time images of the corresponding cameras. However, due to the large number of oilfield pipelines and the complex coverage of cameras, it is difficult for users to quickly locate the image position. This implementation method implements a binding mechanism between images and 3D device nodes in the system. When a user clicks on a device or pipe section in the 3D model, the corresponding camera image will be automatically opened, assisting in manual observation of whether there are abnormalities such as perforations or leaks in the pipeline, significantly improving the efficiency and positioning accuracy of image viewing.

[0066] Specifically, by binding a unique identifier to each camera device in the 3D model, a mapping relationship between device nodes and video stream URLs is established; by parsing the device identifier and calling the corresponding video stream interface, real-time images are displayed in a floating layer or independent window to respond to click events in the scene.

[0067] Step S5: The device status labels in the 3D scene are displayed using dynamic rendering to show operating data and alarm information.

[0068] Specifically:

[0069] Device status labels in the 3D scene use dynamic rendering to display operating data and alarm information. Due to the large number of labels and frequent changes, performance degradation occurs. This implementation introduces an independent rendering mechanism for label layers, drawing status labels as 2D overlay layers and decoupling their rendering from the 3D scene. This avoids triggering main scene redrawing and effectively improves the overall system frame rate.

[0070] Specifically:

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

[0072] In practical applications, device status labels can be converted into 2D Canvas layers, overlaid on top of a 3D scene using absolute positioning, and the label coordinates can be dynamically calculated based on the device position. Off-screen rendering technology can be used to update the label content, avoiding triggering a redraw of the 3D scene.

[0073] This implementation method constructs a 3D simulation scene of the oilfield transfer station on the Web platform, realizing an integrated spatial display of equipment and plant layout. It eliminates the complex deployment of traditional local installation and operation, and features cross-platform compatibility, lightweight design, and easy accessibility.

[0074] Furthermore, this implementation method achieves dynamic binding between the 3D model and real-time IoT data, that is, binding key parameters such as pressure, flow rate, and temperature collected by sensors to the corresponding equipment locations in the 3D model in real time, and displaying the operating status through labels, thus realizing a fusion inspection interface of "visual + data" for the first time.

[0075] Furthermore, this implementation also realizes the linkage preview technology between images and three-dimensional space, that is, the real-time images captured by the high-definition camera correspond one-to-one with the 3D scene nodes. Users can click on any pipeline or device in the three-dimensional view to retrieve the associated video stream, which helps to manually identify problems such as perforation and leakage, and improves the intuitiveness and response efficiency of on-site monitoring.

[0076] Furthermore, this implementation also achieves multi-terminal accessibility and dynamic performance optimization mechanisms: innovatively introducing Web optimization technologies such as delayed loading, layer decoupling, and data throttling to ensure that the system can run smoothly on different browsers and realize real-time 3D visualization of complex industrial scenes in resource-constrained environments.

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

[0078] like Figure 2 As shown, specifically:

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

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

[0081] Specifically:

[0082] 1. Initialize the main scene and minimap scene: The main scene and minimap scene are rendered using the BABYLON.js engine respectively.

[0083] 1.1 Initialize the main scene:

[0084] To retrieve the canvas element of the main scene: use document.querySelector to retrieve the canvas element with the ID "container" on the page.

[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: Start the rendering loop and continuously render the main scene.

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

[0089] 1.2 Initialize the minimap scene:

[0090] To get the canvas element of the minimap: 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 minimap scene: Call the CreateScene2 method to initialize the minimap scene.

[0093] Start rendering loop: Start the rendering loop to continuously render the small map scene.

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

[0095] 2. Create the main scene

[0096] 2.1 Create the camera for the main scene: Create a free camera, set its position, target, collision detection and other attributes, and set the camera's gravity and collision to make it respond to the physical environment.

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

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

[0099] 2.4 Load Environment Texture: Load environment texture and create the default skybox.

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

[0101] 3. Create a minimap scene

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

[0103] 3.2 Add a light source: Add a hemispherical light to illuminate the minimap 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 minimap scene of the oilfield transfer station model have been created.

[0108] 4. Dynamically switch between minimaps

[0109] 4.1 Toggle the full-screen state of the minimap: Toggle the full-screen state by adjusting the size of the minimap container. Simultaneously control the visibility of the minimap's container and its child elements.

[0110] 4.2 Show or hide minimap: Show or hide the minimap and adjust the engine size.

[0111] This completes the feature that enables full-screen switching and position adjustment for the minimap.

[0112] 5. Keyboard control for character animation

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

[0114] 6. Handle minimap click events: Adjust the position of the main scene camera based on the click location.

[0115] 7. Load More 3D Models: Load multiple 3D models and set their scaling and rotation. Create the ground and set its collision and materials.

[0116] This concludes the implementation of the 3D scene rendering and interaction system based on BABYLON.js, including the initialization of the main scene and minimap scene, loading of 3D models, implementation of animation effects, keyboard-controlled character animation, and dynamic switching of the minimap. Through these steps, a fully functional 3D scene rendering and interaction system can be achieved.

[0117] Step S2: Use WebSocket and MQTT protocols to enable real-time data interaction and display between the data collected by the IoT device and the front end;

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

[0119] Specifically:

[0120] WebSocket connection for device data: Sends data collected by IoT devices to the server via the WebSocket protocol. When the server sends device data, the onmessage event is triggered.

[0121] Processing device data: When device data is received, it is parsed into JSON format, and device information (such as device ID, temperature, pressure, status, etc.) is extracted. Then, the updateDeviceUI function is called to update the device data to the front-end interface.

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

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

[0124] The process includes updating label content, which includes the device ID, temperature, pressure, and status. The label background color is dynamically updated based on the device status (alarm or normal): red for alarm status and green for normal status.

[0125] Dynamic label positioning: The 3D engine (BABYLON.js) calculates the projected position of the device's 3D model on the screen. The label is positioned above the device's 3D model (offset by 30 pixels). The label position is recalculated on each render to ensure the label always follows the device's 3D model.

[0126] Streaming via RTSP protocol and capturing images from a real-time camera embedded in a web page using WebSocket;

[0127] Step S3: Specifically:

[0128] 1. Initialization: Create a WHEPClient instance, passing 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. Send the candidates to the server.

[0131] 4. Connection Status Monitoring: Listens for changes in the ICE connection status. If the connection is lost, plans to reconnect.

[0132] 5. Video Stream Display: When media tracks are available, set the video stream as the source of the video element.

[0133] Step S4: Bind the camera to each device node in the 3D scene, and support user clicks on devices or segments to retrieve the corresponding video stream by responding to click events in the scene. This step involves iterating through the devices in the 3D scene and checking whether each device is bound to a camera. Then, add a click event to the device with the bound camera: when the user clicks the device, video retrieval is triggered. Finally, retrieve the video stream: obtain the video stream based on the device's camera ID and display it on the page.

[0134] Specifically:

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

[0136] Iterate through all the meshes in the 3D scene, each mesh representing a device or object.

[0137] 2. Check if the device is paired with a camera:

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

[0139] If a cameraId exists, it means that the device is already paired with a camera.

[0140] 3. Add click events to devices paired with cameras:

[0141] Create an ActionManager for the device with the camera attached.

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

[0143] 4. When clicking on the device, retrieve the camera video:

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

[0145] 5. Open the camera video stream:

[0146] Step S5: In the openCameraFeed function, construct the URL of the video stream based on the passed-in cameraId.

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

[0148] The device 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 `createStatusLabel` that accepts two parameters: `deviceMesh`: the device's mesh object in the 3D scene; and `data`: the device's operational 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 tag style: Set the tag's positioning to absolute. Add the tag to the page's body.

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

[0154] 5. Dynamic color-changing alarm indication: The label's background color dynamically changes based on the device's temperature data: if the temperature exceeds 90℃, the label background turns red, indicating an alarm. Otherwise, the label background is green, indicating normal operation.

[0155] In summary, this implementation method, by employing advanced Web technology and a 3D rendering engine, significantly improves the loading efficiency and visualization effect of the 3D scene in the oilfield transfer station area, achieves dynamic binding and display of equipment status and IoT data, and optimizes the interactive operation between camera images and 3D models. This technical solution greatly 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 a breakthrough in technical implementation but also demonstrates excellent results in practical industrial applications, possessing broad prospects for promotion and application and commercial value.

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

[0157] Storage device used for loading and dynamically rendering 3D models of oilfield transfer stations using Babylon.js in the web front end;

[0158] Storage device used to enable real-time data interaction and display between IoT devices and the front end using WebSocket and MQTT protocols;

[0159] Storage device used for streaming via the RTSP protocol and embedding real-time camera images into web pages using WebSocket;

[0160] Storage devices used to bind cameras to device nodes in a 3D scene and to allow users to access the corresponding video stream by clicking on devices or segments in response to click events in the scene.

[0161] The device status labels used in 3D scenes are storage devices that display operating data and alarm information using dynamic rendering.

[0162] Implementation Method 5: This implementation method proposes a computer-readable storage medium storing a computer program, which, when executed by a processor, performs a 3D inspection method based on web technology and IoT devices as described in any of the above implementation methods.

[0163] Implementation Method Six: This implementation method proposes a computer device, which includes a memory and a processor. The memory stores a computer program. 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 of the above implementation methods.

[0164] This embodiment provides a computer device. The hardware device in this part is a general model and is not shown in the figure. The system includes a processor and a memory. The processor and the memory can be connected by a bus or other means. The memory, as a non-transitory computer-readable storage medium, can be used to store non-transitory software programs, non-transitory computer-executable programs and modules, as well as corresponding program instructions / modules. The processor executes various functional applications and data processing 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 above description is merely an embodiment of the present invention and is not intended to limit the invention. Various modifications and variations can be made to the present invention by those skilled in the art. Any modifications, equivalent substitutions, or improvements made within the spirit and principles of the present invention should be included within the scope of the claims of the present invention.

Claims

1. A 3D inspection method based on web technology and IoT devices, characterized in that, The method is as follows: S1: Use Babylon.js in the web front-end to load and dynamically render the 3D model of the oilfield transfer station; Before loading the 3D model, model preprocessing technology and a lazy 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; among them, LOD is multi-level detail optimization, and the model precision is dynamically switched according to the viewing distance; multi-texture map splitting is used to reduce the amount of resources loaded at one time, and model components are loaded in steps through asynchronous loading technology. S2: Uses WebSocket and MQTT protocols to enable real-time data interaction and display between IoT devices and the front end; Specifically: 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 tags, changing tag styles based on device status, and ensuring tag positions follow the device's 3D model. Tag positions are recalculated with each render to ensure tags always follow the device model, enabling real-time interactive data display. During real-time interactive display, data is cached in batches and refreshed at intervals on the receiving end, and processed using a key data priority filtering strategy. Specifically, batch caching involves establishing a data cache queue on the receiving end and caching data in batches according to timestamps or device types. Interval refreshing uses an interval refresh mechanism to dynamically adjust the UI refresh frequency based on data priority. S3: Stream via RTSP protocol and use WebSocket to embed a real-time camera to capture images in a web page; S4: Bind the camera to the device nodes in the 3D scene one by one, and support users to click on the device or segment to retrieve the corresponding video stream by responding to click events in the scene; Specifically: By binding a unique identifier to each camera device in the 3D model, a mapping relationship between device nodes and video stream URLs is established; By parsing the device identifier and calling the corresponding video stream interface, real-time images can be displayed in a floating layer or a separate window to respond to click events in the scene. S5: Device status labels in the 3D scene use dynamic rendering to display operating data and alarm information.

2. The 3D inspection method based on web technology and IoT devices according to claim 1, characterized in that, A label layer independent rendering mechanism is adopted to draw status labels as 2D overlay layers and decouple them from the 3D scene rendering, thereby avoiding triggering the main scene redraw.

3. The 3D inspection method based on web technology and IoT devices according to claim 1, characterized in that, S5 specifically refers to: The device status label is converted into a 2D Canvas layer, which is then overlaid on top of the 3D scene using absolute positioning. The label coordinates are dynamically calculated based on the device position, and the label content is updated using off-screen rendering technology to avoid triggering a 3D scene redraw.

4. A 3D inspection system based on web technology and IoT devices, characterized in that, The system includes a storage device for performing the method and steps of claim 1.

5. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, performs the 3D inspection method based on web technology and Internet of Things devices as described in any one of claims 1-3.

6. A computer device, characterized in that, The device includes a memory and a processor. The memory stores a computer program. 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 claims 1-3.

Images