A method for implementing real-time data synchronization of a 3D digital twin based on a Web rendering component

Abstract

The present invention discloses a method for realizing real-time data synchronization of 3D digital twins based on Web rendering components, which relates to the technical fields of digital twin Web rendering and real-time data. Step 1: Package lightweight Web 3D rendering components to build a 3D rendering carrier that can be directly embedded in Web pages without plugins. Step 2: Build a JavaScript SDK supporting the Web 3D rendering components, define a standardized 3D element state control interface system, and establish a mapping channel between 3D twin elements and business data. Step 3: Design a multi-data source custom adaptation protocol, build a configurable heterogeneous data adapter, and achieve unified parsing and format conversion of multi-source business data. By setting lightweight Web 3D rendering components with cropping and encapsulation, the present invention solves the problems of traditional digital twin platforms relying on heavy engines and special plugins, high deployment costs, and great integration difficulties, realizes native operation of browsers without plugins, and achieves the lightweight deployment effect of plug-and-play.

Description

Technical Field

[0001] This invention relates to the field of digital twin web rendering and real-time data technology, specifically to a method for real-time data synchronization of 3D digital twins based on web rendering components. Background Technology

[0002] As digital twin technology is increasingly adopted and popularized in areas such as smart data centers, industrial equipment monitoring, park management, and urban governance, the industry is placing increasingly stringent demands on the rapid integration and lightweight deployment capabilities of digital twin systems with existing web business systems. Traditional 3D digital twin platforms are mostly developed based on heavy-duty desktop-level 3D engines, relying on dedicated clients, proprietary browser plugins, or high-performance rendering clusters to complete the rendering and operation of 3D scenes. They generally suffer from core drawbacks such as complex deployment architecture, high hardware investment and maintenance costs, and difficulty in integrating with existing web business systems. They cannot achieve "plug-and-play" rapid deployment and lightweight implementation, which greatly limits the large-scale application of digital twin technology in general web business scenarios and small-to-medium-scale projects.

[0003] At the same time, existing digital twin platforms generally suffer from poor data adaptation and compatibility and insufficient virtual-real linkage capabilities. On the one hand, existing platforms mostly adopt fixed data access protocols and docking logic, which are difficult to be compatible with heterogeneous data sources from different manufacturers, different types of monitoring systems, IoT devices and business management systems. Their custom adaptation and expansion capabilities are weak, and data docking modules need to be repeatedly developed for different application scenarios, resulting in long adaptation cycles and high costs. On the other hand, existing solutions have not formed a standardized and universal 3D element state control interface system. The linkage between 3D twin scenes and business data requires writing a lot of customized code. The state synchronization delay between data and 3D scenes is high and the consistency between virtual and real is difficult to guarantee. It is impossible to achieve efficient and real-time bidirectional linkage between business data and 3D twin elements, and it is difficult to meet the core requirement of real-time data synchronization in digital twin scenes. Therefore, this paper proposes a method for real-time data synchronization of 3D digital twins based on Web rendering components to solve these problems. Summary of the Invention

[0004] Technical problems to be solved To address the shortcomings of existing technologies, this invention provides a method for real-time data synchronization of 3D digital twins based on Web rendering components, which solves the problems mentioned in the background.

[0005] Technical solution

[0006] To achieve the above objectives, the present invention provides the following technical solution: a method for real-time data synchronization of 3D digital twins based on Web rendering components, comprising the following steps: Step 1: Package a lightweight Web 3D rendering component to build a 3D rendering carrier that can be directly embedded in a Web page without plugins. Step 2: Build a JavaScript SDK配套 with the Web 3D rendering component, define a standardized 3D element state control interface system, and establish a mapping channel between 3D twin elements and business data. Step 3: Design a multi-data source custom adaptation protocol, build a configurable heterogeneous data adapter, and实现 unified parsing and format conversion of multi-source business data. Step 4: Based on the heterogeneous data adapter and JavaScript SDK, build a real-time data synchronization and virtual-real state consistency guarantee mechanism to实现 low-latency synchronization of business data to the state of 3D twin elements. Step 5: Complete the two-way linkage between the Web 3D rendering component and the Web business system through the JavaScript SDK to实现 a real-time mapping closed-loop between the physical entity state and the virtual twin.

[0007] Preferably, the specific steps for packaging the lightweight Web 3D rendering component are as follows: Build a lightweight rendering kernel based on the WebGL standard裁剪,剔除 redundant and unnecessary rendering functions, and only保留 the core capabilities of 3D model loading, basic material rendering, camera control, and interaction event response; Adopt a graph-attribute separation architecture to store and manage the geometric graphics data and business attribute data of the 3D model separately, perform lightweight compression and hierarchical on-demand loading on the graphics data; Package the rendering capabilities into a standard Web component compatible with mainstream front-end frameworks such as native HTML, Vue, and React, and实现 page non-invasive embedding through an independent DOM container.

[0008] Preferably, the specific steps for building the 3D rendering carrier that can be directly embedded in a Web page without plugins are as follows: Allocate an independent DOM rendering container for the rendering carrier to隔离 the native page elements of the Web business system from the 3D rendering context; Configure the full-life cycle management rules of the rendering carrier to实现 automatic initialization when the page is loaded and automatic release of rendering resources when the page is destroyed; Preset rendering degradation rules compatible with different browsers to ensure the normal operation of the carrier in various mainstream browsers.

[0009] Preferably, the specific steps for building the JavaScript SDK配套 with the Web 3D rendering component are as follows: Complete the lifecycle binding between the SDK and the Web 3D rendering component, and realize the automatic management of the entire process of SDK instance initialization, loading, refresh, and destruction; assign a globally unique identity ID to each twin element in the 3D scene, establish a one-to-one binding relationship between the identity ID and the twin element, and automatically synchronize to the heterogeneous data adapter when the twin element ID is added, deleted, or changed; encapsulate standardized calling interfaces based on the binding relationship to realize full-state controllable management of 3D twin elements.

[0010] Preferably, the specific steps for defining the standardized 3D element state control interface system are as follows: It encapsulates basic attribute control interfaces, covering the visibility, position, scaling, rotation, color, and transparency status control of twin elements; it also encapsulates business-specific control interfaces, covering alarm flashing, animation triggering, and pop-up linkage business scenario control of twin elements; and it encapsulates event subscription interfaces, supporting real-time listening and callback of interactive events and state change events of twin elements.

[0011] Preferably, the specific steps for designing the multi-data source custom adaptation protocol are as follows: A unified standard data format that can be recognized by the JavaScript SDK is predefined. The unified standard data format includes at least the unique identifier ID of the twin element, the name of the attribute to be updated, the target attribute value, and the timestamp. Multi-protocol compatibility rules are formulated to cover mainstream data transmission protocols such as HTTP, WebSocket, and MQTT. Field mapping rules are formulated to support one-to-one correspondence between heterogeneous data source fields and unified standard data format fields. Custom extension rules are formulated to reserve adaptation entry points for private protocols and special data formats.

[0012] Preferably, the specific steps for constructing the configurable heterogeneous data adapter are as follows: The core framework of the adapter is built based on a custom adaptation protocol for multiple data sources, realizing the functions of establishing connections with various data sources, receiving data, and keeping the link alive; it provides a field mapping configuration entry point, allowing users to automatically convert heterogeneous data to a unified standard data format through configuration; and it reserves a custom parsing extension interface, allowing users to complete the access of private protocol data by writing custom parsing functions without modifying the rendering component and the underlying SDK code.

[0013] Preferably, the specific steps for constructing the real-time data synchronization and virtual-real state consistency guarantee mechanism are as follows: A persistent connection between the data source and the adapter is established using a long-connection transmission protocol to enable proactive incremental push when data changes. A data buffer queue and anti-jitter merging rule are established to ensure stable data processing in high-concurrency scenarios. Data priority scheduling rules are set to ensure priority processing of high-priority business data. State consistency verification and recovery rules are established to ensure the state consistency between the twin and the physical entity. Rendering degradation and recovery rules are configured to ensure the synchronous and normal operation of core data under weak network and low-performance devices.

[0014] Preferably, the specific steps for implementing the bidirectional interaction between the Web 3D rendering component and the Web business system are as follows: The Web 3D rendering component and JavaScript SDK are introduced into the target Web business system as static resources, completing the binding of SDK instances and rendering components; the connection parameters and data linkage rules of the data source adapter are configured to realize the forward drive from business data to 3D twin elements; the callback rules of 3D interactive events are configured to realize the reverse transmission of 3D scene interactive data to the Web business system, completing bidirectional linkage.

[0015] Preferably, the specific steps for implementing the real-time mapping closed loop between the physical entity state and the virtual twin are as follows: The heterogeneous data adapter acquires real-time business operation data of physical entities, converts the data into a format, and then drives the 3D twin elements to synchronize and update their status via the JavaScript SDK. User interactions initiated through the 3D rendering carrier are sent back to the Web business system via the JavaScript SDK, and then distributed to the corresponding physical entities via the Web business system. When the status of a physical entity changes, a new round of data collection and push is automatically triggered by the heterogeneous data adapter, continuously looping the status synchronization process. Through forward data driving and reverse instruction feedback, a closed loop of real-time mapping between physical entities and virtual twins is achieved.

[0016] Beneficial effects

[0017] The present invention has the following beneficial effects: (1) The method for real-time data synchronization of 3D digital twin based on Web rendering component solves the problems of traditional digital twin platform relying on heavy engine and special plugin, high deployment cost and difficult integration by setting up a lightweight Web 3D rendering component with trimmed encapsulation. It realizes native browser operation without plugins and achieves a plug-and-play lightweight deployment effect.

[0018] (2) This method for real-time data synchronization of 3D digital twins based on Web rendering components solves the problems of no universal interface for 3D element control and large workload of customized development in existing solutions by setting up a matching standardized JavaScript SDK and bidirectional data mapping channel, realizing standardized one-click control of 3D twin elements and greatly shortening the business adaptation cycle.

[0019] (3) This method for real-time data synchronization of 3D digital twin based on Web rendering components solves the problems of poor compatibility of heterogeneous data sources on existing platforms and long adaptation cycle of new data sources by setting custom adaptation protocols for multiple data sources and configurable heterogeneous data adapters, and realizes the plug-and-play and unified standardized conversion of multiple protocol data sources.

[0020] (4) This method for real-time data synchronization of 3D digital twin based on Web rendering components solves the problems of high data synchronization latency, easy lag and packet loss in high-concurrency scenarios, and mismatch between virtual and real states in existing solutions by setting up a long-connection real-time data synchronization and virtual-real state consistency guarantee mechanism, and achieves millisecond-level synchronization of business data and accurate consistency between virtual and real states.

[0021] (5) This method for real-time data synchronization of 3D digital twin based on Web rendering components solves the problems of low integration between traditional platforms and existing Web business systems and high implementation difficulty through an integrated full-process architecture design. It realizes non-intrusive integration of digital twin capabilities and can be widely adapted to various digital twin application scenarios. Attached Figure Description

[0022] Figure 1 This is a flowchart illustrating a method for real-time data synchronization of 3D digital twins based on a Web rendering component, according to the present invention. Detailed Implementation

[0023] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0024] This invention provides a technical solution: a method for real-time data synchronization of 3D digital twins based on Web rendering components, such as... Figure 1 As shown, it includes the following steps: Step 1: Encapsulate a lightweight Web 3D rendering component to build a 3D rendering platform that can be directly embedded into a web page without plugins. The specific steps for encapsulating the lightweight Web 3D rendering component are as follows: Based on the WebGL 2.0 standard, the system uses the industry-standard Three.js R158 stable version for secondary trimming and encapsulation. Unnecessary functional modules for digital twin scenes, such as physics engine, film-level post-production effects, offline baking, and complex skeletal animation, are removed from the native library. Only four core capability modules are retained: 3D model loading, basic PBR material rendering, track camera control, and mouse touch interaction event response. The component package size is compressed to less than 300KB, and after gzip compression, it is only 5% of the traditional 3D engine package size, significantly reducing the browser loading and running pressure.

[0025] A graph-attribute separation architecture is adopted, storing and managing the geometric mesh data and business attribute data of the 3D model separately. The geometric mesh data is in glb format, and the business attribute data is in JSON format. For the geometric data, the Draco mesh compression algorithm is used, achieving a compression ratio of over 1:10 and reducing the size of a single model file by more than 90%.

[0026] Simultaneously, a Level of Detail (LOD) hierarchical on-demand loading strategy is adopted, dividing a single model into three precision levels. When the distance between the camera and the model is greater than 20 meters, a low-precision model is loaded with no more than 500 faces per model. In the 10-20 meter range, a medium-precision model is loaded with no more than 2,000 faces per model. When the distance is less than 10 meters, a high-precision model is loaded with no more than 8,000 faces per model. Combined with view frustum culling technology, only the model within the camera's visible range is rendered, and models in non-visible areas are not loaded or rendered. Ultimately, the browser's GPU usage is stably controlled to within 30%, allowing for smooth operation on ordinary office computers.

[0027] The specific steps for constructing the plugin-free 3D rendering carrier that can be directly embedded into a web page are as follows: Based on the W3C standard Web Components specification, the trimmed rendering capabilities are encapsulated into a custom HTML tag named twins-3d-render. It is natively compatible with all mainstream front-end frameworks, including native HTML, Vue2, Vue3, and React16 and above. No additional environment configuration or plugins are required. Users only need to insert this custom tag into the web page and set the three basic attributes: width, height, and model-url to complete the initialization of the 3D rendering carrier.

[0028] An independent Shadow DOM container is allocated to the rendering carrier, completely isolating the 3D rendering context from the native DOM elements of the web business system, avoiding issues such as style pollution and rendering context conflicts. Simultaneously, full lifecycle management rules are configured: the rendering carrier is automatically initialized with the page's DOMContentLoaded event, and automatically releases the WebGL context, destroys the rendering loop, and releases model memory resources with the page's beforeunload event, preventing memory leaks.

[0029] The system has preset browser compatibility downgrade rules. It automatically downgrades to WebGL 1.0 rendering for browsers that do not support WebGL 2.0. During the downgrade, it automatically switches PBR materials to basic Phong materials and disables unnecessary features such as real-time shadows and anti-aliasing to ensure that basic rendering capabilities run normally. Ultimately, it achieves 100% compatibility with mainstream browsers such as Chrome, Firefox, Edge, and Safari.

[0030] Step 2: Build a JavaScript SDK to support the Web 3D rendering component, define a standardized 3D element state control interface system, and establish a mapping channel between 3D twin elements and business data. The specific steps for building the JavaScript SDK that accompanies the Web 3D rendering component are as follows: The SDK is packaged using the UMD modular specification and supports three import methods: ESModule, CommonJS, and direct import via script tags. The package size is kept under 100KB and is loaded synchronously with the rendering components after gzip compression without any delay.

[0031] SDK instances and rendering carriers are deeply bound to each other through custom events. When the SDK is initialized, it automatically obtains the rendering context of the twins-3d-render tag, realizing synchronous management of the entire process of initialization, model loading, state refresh, and instance destruction. When the SDK instance is destroyed, the resource release of the rendering carrier is triggered synchronously, without manual intervention.

[0032] After the SDK instance is initialized, it continuously listens for the model loading completion event of the rendering component. It only grants API call permissions after the model is loaded. If the loading is not completed, it intercepts the API request and returns an exception message to avoid program errors caused by invalid calls.

[0033] After the 3D scene model is loaded, the SDK automatically traverses all twin elements in the scene, including servers, UPS, precision air conditioners, access control, etc., and assigns a globally unique distributed ID to each element. The ID format is uniformly the device type plus the device's unique code, such as server_001 and ups_003. A memory Map mapping table between the ID and the 3D model object is established synchronously. The query response latency of the mapping table is no more than 1ms, providing a foundation for subsequent precise control.

[0034] When twin elements are added, deleted, or have their IDs changed, the SDK automatically synchronizes the change information to the heterogeneous data adapter, and updates the matching relationship of field mapping rules to avoid data and model matching failure.

[0035] The specific steps for defining the standardized 3D element state control interface system are as follows: The SDK encapsulates a three-layer standardized interface system for all scenarios, eliminating the need for users to write any underlying rendering code. Users can achieve full state control of 3D twin elements simply by calling the interfaces: The first layer is the basic attribute control interface, covering all basic state management of twin elements, including the setVisible visibility control interface, the setPosition, setRotation, and setScale position rotation and scaling control interfaces, and the setColor and setOpacity color transparency control interfaces. All interface input parameters are uniformly the element's unique ID and the target attribute value. For example, calling the setColor interface and passing in the two parameters server_001 and #ff0000 will set the server model with ID server_001 to red with one click.

[0036] The second layer consists of dedicated business control interfaces, customized for core digital twin business scenarios. These include the `setAlarm` alarm blinking control interface, supporting custom blinking frequency, alarm level, and blinking duration; the `setProgress` progress bar visualization interface, corresponding to numerical data such as CPU, memory, and load rate; and the `openPopup` details pop-up linkage interface. For example, calling the `setAlarm` interface and passing in the three parameters `server_001`, `2`, and `500` will trigger a level-two alarm for that server, with alternating red and white blinking at 500-millisecond intervals. The third layer is an event subscription interface, including `onClick`, `onHover`, and `onStateChange` interfaces. This supports real-time listening and callback of interactive events and state change events of the twin elements. When an event is triggered, the callback function automatically returns the element ID, event object, and full data of the current attributes, eliminating the need for users to manually bind DOM events.

[0037] The specific steps for establishing the mapping channel between the 3D twin elements and business data are as follows: Establish a two-way mapping channel to achieve fully automatic linkage between business data and 3D scenes without the need for manual writing of business logic code: Forward driving channel: The SDK has a built-in independent data listening center. After the heterogeneous data adapter completes the data conversion, it dispatches standard format data to the data listening center through custom events. After the data is pushed to the listening center, it automatically parses the element ID, the attribute to be updated, and the target value. It matches the corresponding 3D model object through the memory map mapping table and automatically calls the corresponding interface to complete the model state update, realizing fully automatic forward driving from business data changes to 3D view updates.

[0038] Reverse feedback channel: When users perform interactive operations such as clicking or hovering on 3D twin elements, the SDK automatically captures the interactive events and dispatches the element ID, event type, and full model attribute data to the Web business system through custom events. The business system can directly obtain the data through preset callback functions to complete operations such as displaying device details and issuing control commands, realizing the reverse feedback from 3D scene interaction to the business system and completing the construction of a two-way mapping channel.

[0039] Step 3: Design a custom adaptation protocol for multiple data sources, build a configurable heterogeneous data adapter, and realize unified parsing and format conversion of multi-source business data. The specific steps for designing the custom adaptation protocol for multiple data sources are as follows: A unified standard data format is predefined to be uniquely identifiable by the JavaScript SDK. The fixed structure contains five core fields: the globally unique ID of the twin element, the name of the attribute to be updated, the target attribute value, a 13-bit millisecond-level data collection timestamp, and data priority. The data priority is divided into 1 to 3 levels, with level 1 being the highest priority. This ensures that all heterogeneous data is eventually converted to this format, achieving complete decoupling between the SDK and the data source.

[0040] Based on this standard format, four core rules for the adaptation protocol are formulated to cover data access needs across all scenarios: First, multi-protocol compatibility rules natively support mainstream data transmission protocols such as HTTP and HTTPS, WebSocket, MQTT 3.1.1, MQTT 5.0, and Modbus TCP, which can cover more than 95% of data source types for data center environmental monitoring systems, IoT device platforms, and business management systems.

[0041] Secondly, the field mapping rules support visual configuration of the one-to-one correspondence between the original data source fields and the standard format fields. For example, the dev_code field of the environmental monitoring system can be mapped to the standard format id field, cpu_usage to the property field, and cpu_value to the value field.

[0042] Third, data validation rules are provided, including preset rules for validating required fields, data types, and numerical ranges. Invalid and abnormal data are automatically filtered to prevent dirty data from causing 3D rendering errors. Fourth, custom extension rules are provided, with reserved hook functions for custom protocol adaptation. This allows users to extend the adaptation capabilities for private protocols and non-standard data formats without modifying the underlying code of the SDK and rendering components.

[0043] The specific steps for constructing the configurable heterogeneous data adapter are as follows: Based on a custom adaptation protocol for multiple data sources, a three-layer configurable heterogeneous data adapter is built to enable plug-and-play functionality for multi-source data: The first layer is the connection layer, which is responsible for establishing stable connections with various data sources. It supports visual configuration of data source address, port, account password, heartbeat interval, and reconnection count. The default heartbeat interval is 30 seconds, the maximum number of reconnections after network disconnection is 10, and the reconnection interval is 5 seconds. It supports simultaneous access to no less than 10 data sources of different types and protocols.

[0044] The second layer is the parsing layer, which has a built-in visual field mapping engine. After the user completes the field mapping rule configuration through the configuration interface, the parsing layer automatically converts the original JSON, XML, and binary data into a unified standard format that the SDK can recognize. The conversion delay for a single data item is no more than 5 milliseconds.

[0045] The third layer is the extension layer, which reserves the entry point for the customParse function. It explicitly states that the function input parameter is the full data of the original data source, and the output parameter is structured data in a standard format. It has a built-in exception handling mechanism, so that when the custom function execution encounters an error, it will not affect the operation of the adapter's core framework. Users can write custom parsing logic to complete the conversion and access of private protocols and special format data without modifying the underlying code of the SDK and rendering components. This shortens the adaptation cycle of new data sources from the traditional 7 days to less than 4 hours.

[0046] Step 4: Based on the heterogeneous data adapter and JavaScript SDK, construct a real-time data synchronization and virtual-physical state consistency guarantee mechanism to achieve low-latency synchronization of business data to the state of 3D twin elements. The specific steps for constructing the real-time data synchronization mechanism are as follows: WebSocket and MQTT long-connection transmission protocols are preferred to replace the traditional HTTP short-polling scheme. A persistent full-duplex connection is established between the data source and the adapter. When the data changes, the data source actively pushes incremental data to the adapter. Only the changed field data is pushed, and static and unchanging basic device information is not repeatedly transmitted. The data transmission volume is reduced by more than 80%.

[0047] Simultaneously, a heartbeat keep-alive and network disconnection reconnection mechanism is configured. The adapter sends a heartbeat packet to the data source every 30 seconds. If no heartbeat response is received within 10 seconds, the link is determined to be interrupted, and the reconnection process is automatically triggered. The reconnection interval is 5 seconds, and the maximum number of reconnections is 10, ensuring the continuous stability of the data transmission link and ultimately achieving an end-to-end data transmission latency of no more than 50 milliseconds.

[0048] The specific steps for implementing the high-concurrency data optimization processing logic are as follows: To address high-concurrency data push scenarios, a three-layer optimization mechanism is established to ensure smooth and lag-free browser operation: First, a circular data buffer queue with a length of 1000 is established. All business data pushed to the adapter enters the queue in the order of its received timestamp and is processed sequentially using a first-in-first-out rule to avoid data packet loss and browser main thread blocking under high concurrency.

[0049] Secondly, configure debouncing merging rules, preset a 100-millisecond time window, merge multiple state change data of the same twin element within the time window, and only retain the latest data in the window for rendering, avoiding browser lag caused by frequent rendering in a short period of time.

[0050] Third, set data priority scheduling rules. Level 1 priority is alarm data. When received, it is inserted into the head of the data buffer queue first, and the rendering of low-priority data is paused. The processing of low-priority data is resumed after the rendering of high-priority data is completed. Level 2 priority data consists of critical equipment operation data, including server CPU and memory usage, and is processed once per frame rendering cycle. Level 3 priority data includes routine environmental data, such as data center temperature and humidity. This data is processed via callback API during browser idle periods. Ultimately, this ensures that in high-concurrency scenarios, when no less than 1,000 data entries are pushed per second, the browser rendering frame rate remains stable at 60fps, without any stuttering or packet loss.

[0051] The specific steps for constructing the virtual-real state consistency guarantee mechanism are as follows: Establish a closed-loop consistency guarantee mechanism for rendering verification and feedback to ensure that the virtual twin and the physical entity are 100% consistent: After each state update of the 3D twin element is completed, the SDK automatically reads the current rendering state of the twin element at the end of the current rendering frame and compares and verifies it with the latest target state pushed by the data source.

[0052] If the verification finds an inconsistency in the status, or the difference in data timestamps is greater than 500 milliseconds, a status recovery request is immediately triggered to pull the latest status data of the element from the data source and re-execute the status update to ensure that the virtual and real statuses are completely matched. If the status data of the corresponding twin element is not received for more than 3 heartbeat cycles, a full status synchronization request is automatically triggered. If there is still no response, the twin element is set to offline status and synchronized to the Web business system to complete the fallback of abnormal scenarios.

[0053] Simultaneously configure rendering degradation and recovery rules. The SDK monitors the browser frame rate and GPU utilization in real time. When the frame rate is consistently below 30fps for more than 3 seconds, or the GPU utilization is greater than 70% for more than 5 seconds, the degradation strategy is automatically triggered, turning off real-time shadows, anti-aliasing, and unnecessary alarm animations, reducing the rendering frame rate to 30fps, and pausing the real-time update of the model in the non-visible area to ensure that the synchronization of core alarm data and critical device data is uninterrupted. When the browser frame rate remains above 30fps and the GPU utilization rate remains below 50% for more than 5 seconds, normal rendering parameters and full functionality are automatically restored, forming a complete degradation and recovery loop.

[0054] Step 5: Through the JavaScript SDK, complete the bidirectional linkage between the Web 3D rendering component and the Web business system to achieve a real-time mapping loop between the physical entity state and the virtual twin. The specific steps for implementing the two-way interaction between the Web 3D rendering component and the Web business system are as follows: By deploying the Web 3D rendering component and JavaScript SDK as static resources to the CDN, users in existing web data center monitoring systems only need to include the CDN resources via script tags, without modifying the underlying core code of the existing system. Simply insert the custom `twins-3d-render` tag into the business page, setting its width and height to 100% and the model address to the CDN address of the data center 3D model, and the rendering carrier will be embedded in the page.

[0055] Instance initialization is completed through the SDK's init initialization method. By passing in the adapter configuration parameters, including the MQTT data source address of the environmental monitoring system, the HTTP interface address of the device monitoring platform, and the field mapping rule configuration file, multiple data source access can be completed.

[0056] Finally, the data and 3D status linkage rules are configured through a visual configuration interface. For example, when the CPU utilization is greater than or equal to 80%, the setColor interface is automatically called to set the model to yellow, and when it is greater than or equal to 95%, the setAlarm interface is automatically called to trigger a red alarm flashing. There is no need to write complex rendering and docking code throughout the process, and the integration and deployment cycle is shortened from the traditional 15 days to less than 1 day, achieving true plug and play.

[0057] The specific steps for implementing the real-time mapping closed loop between the physical entity state and the virtual twin are as follows: Through the heterogeneous data adapter, the operation data and alarm data of physical servers, UPS and precision air conditioners in the data center are acquired in real time. After being converted into a standard format by the adapter, the data is pushed to the data monitoring center of the SDK. The SDK automatically drives the 3D twin elements to update their status synchronously, realizing a positive real-time mapping from the physical entity's operating status to the virtual twin.

[0058] When a user clicks on a server model in a 3D scene, the SDK automatically sends the server's unique ID back to the web business system. The business system then displays a real-time operation details panel for that server. Users can issue control commands such as restart or shutdown through the panel. These commands are then sent to the corresponding physical server via the business system. After the server's status changes, a new round of data collection and push is automatically triggered by the heterogeneous data adapter. The status synchronization process is continuously executed in a loop, completing the reverse command closed loop.

[0059] By driving data forward and sending back instructions in reverse, a closed loop of real-time mapping between physical entities and virtual twins is achieved, with an end-to-end state synchronization delay of no more than 100 milliseconds, which fully meets the real-time requirements of scenarios such as data center monitoring and industrial equipment management.

[0060] It should be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, method, article, or apparatus.

[0061] The preferred embodiments of the present invention disclosed above are merely illustrative of the invention. These preferred embodiments do not exhaustively describe all details, nor do they limit the invention to the specific implementations described. Clearly, many modifications and variations can be made based on the content of this specification. This specification selects and specifically describes these embodiments to better explain the principles and practical applications of the invention, thereby enabling those skilled in the art to better understand and utilize the invention. The invention is limited only by the claims and their full scope and equivalents.

Claims

1. A method for real-time data synchronization of 3D digital twins based on Web rendering components, characterized in that, Includes the following steps: Step 1: Encapsulate a lightweight Web 3D rendering component to build a 3D rendering carrier that can be directly embedded into a web page without plugins; Step 2: Build a JavaScript SDK to support the Web 3D rendering component, define a standardized 3D element state control interface system, and establish a mapping channel between 3D twin elements and business data. Step 3: Design a custom adaptation protocol for multiple data sources, build a configurable heterogeneous data adapter, and realize unified parsing and format conversion of multi-source business data; Step 4: Based on the heterogeneous data adapter and JavaScript SDK, build a real-time data synchronization and virtual-real state consistency guarantee mechanism to achieve low-latency synchronization of business data to the state of 3D twin elements; Step 5: Use the JavaScript SDK to complete the bidirectional linkage between the Web 3D rendering component and the Web business system, and realize the real-time mapping closed loop between the physical entity state and the virtual twin.

2. The method for real-time data synchronization of 3D digital twins based on Web rendering components according to claim 1, characterized in that, The specific steps for encapsulating the lightweight Web 3D rendering component are as follows: A lightweight rendering kernel is built based on WebGL standard trimming, eliminating redundant and unnecessary rendering functions, and retaining only the core capabilities of 3D model loading, basic material rendering, camera control and interactive event response. The architecture of separating geometric data and business attribute data of 3D models is adopted, and the geometric data and business attribute data of 3D models are stored and managed separately. Lightweight compression and hierarchical on-demand loading are performed on the graphic data. The rendering capabilities are encapsulated into standard Web components that are compatible with mainstream front-end frameworks such as native HTML, Vue, and React, and are embedded into the page non-intrusively through an independent DOM container.

3. The method for real-time data synchronization of 3D digital twins based on Web rendering components according to claim 2, characterized in that, The specific steps for constructing the plugin-free 3D rendering carrier that can be directly embedded into a web page are as follows: Allocate an independent DOM rendering container to the rendering medium, isolating the native page elements of the web business system from the 3D rendering context; Configure the full lifecycle management rules for the rendering carrier to achieve automatic initialization when the page is loaded and automatic release of rendering resources when the page is destroyed; It presets rendering degradation rules compatible with different browsers, ensuring that the platform runs normally in various mainstream browsers.

4. The method for real-time data synchronization of 3D digital twins based on Web rendering components according to claim 1, characterized in that, The specific steps for building the JavaScript SDK that accompanies the Web 3D rendering component are as follows: Complete the lifecycle binding between the SDK and the Web 3D rendering component, and realize the automatic management of the entire process of SDK instance initialization, loading, refresh, and destruction; Assign a globally unique identity ID to each twin element in the 3D scene, establish a one-to-one binding relationship between the identity ID and the twin element, and automatically synchronize the twin element ID to the heterogeneous data adapter when the twin element ID is added, deleted, or changed. Based on the binding relationship, a standardized calling interface is encapsulated to achieve full-state controllable management of 3D twin elements.

5. The method for real-time data synchronization of 3D digital twins based on Web rendering components according to claim 4, characterized in that, The specific steps for defining the standardized 3D element state control interface system are as follows: It encapsulates basic attribute control interfaces, covering the visibility, position, scaling, rotation, color, and transparency state control of twin elements; Encapsulate business-specific control interfaces to cover alarm flashing, animation triggering, and pop-up linkage business scenario control for twin elements; It encapsulates an event subscription interface, supporting real-time listening and callback of interactive events and state change events of twin elements.

6. The method for real-time data synchronization of 3D digital twins based on Web rendering components according to claim 1, characterized in that, The specific steps for designing the custom adaptation protocol for multiple data sources are as follows: A unified standard data format that can be recognized by the JavaScript SDK is predefined. The unified standard data format includes at least the unique identifier ID of the twin element, the name of the attribute to be updated, the target attribute value, and the timestamp. Establish multi-protocol compatibility rules to cover mainstream data transmission protocols such as HTTP, WebSocket, and MQTT; Define field mapping rules to support one-to-one correspondence configuration between fields from heterogeneous data sources and fields in a unified standard data format; Define custom extension rules and reserve entry points for adapting to private protocols and special data formats.

7. The method for real-time data synchronization of 3D digital twins based on Web rendering components according to claim 6, characterized in that, The specific steps for constructing the configurable heterogeneous data adapter are as follows: The core framework of the adapter is built based on a custom adaptation protocol for multiple data sources, which realizes the functions of establishing connections with various data sources, receiving data, and keeping links alive. It provides a field mapping configuration entry point, allowing users to automatically convert heterogeneous data to a unified standard data format through configuration; A custom parsing extension interface is reserved, allowing users to access private protocol data by writing custom parsing functions without modifying the rendering component and the underlying SDK code.

8. The method for real-time data synchronization of 3D digital twins based on Web rendering components according to claim 7, characterized in that, The specific steps for constructing the real-time data synchronization and virtual-real state consistency guarantee mechanism are as follows: A persistent connection between the data source and the adapter is established using a long-connection transmission protocol to enable proactive incremental push when data changes. Establish rules for merging data buffer queues and debouncing to ensure stable data processing in high-concurrency scenarios; Set data priority scheduling rules to ensure that high-priority business data is processed first. Establish state consistency verification and recovery rules to ensure the state consistency between the twin and the physical entity; Configure rendering degradation and recovery rules to ensure the synchronous and normal operation of core data under weak network and low-performance devices.

9. A method for real-time data synchronization of 3D digital twins based on Web rendering components according to claim 1, characterized in that, The specific steps for implementing the two-way interaction between the Web 3D rendering component and the Web business system are as follows: The Web 3D rendering component and JavaScript SDK are introduced into the target Web business system as static resources, completing the binding of the SDK instance and the rendering component; Configure the connection parameters and data linkage rules of the data source adapter to achieve a positive drive from business data to 3D twin elements; Configure callback rules for 3D interactive events to enable reverse transmission of 3D scene interactive data to the Web business system, thus achieving two-way linkage.

10. A method for real-time data synchronization of 3D digital twins based on a Web rendering component according to claim 9, characterized in that, The specific steps for implementing the real-time mapping closed loop between the physical entity state and the virtual twin are as follows: The business operation data of physical entities is obtained in real time through a heterogeneous data adapter, and after format conversion, the 3D twin elements are synchronously updated with the status driven by the JavaScript SDK. User-initiated interactive operations via 3D rendering carrier are sent back to the Web business system via JavaScript SDK, and then distributed to the corresponding physical entity via the Web business system; After the physical entity's state changes, a new round of data collection and push is automatically triggered by the heterogeneous data adapter. The state synchronization process is continuously executed in a loop. Through positive data drive and reverse instruction feedback, a real-time mapping closed loop between the physical entity and the virtual twin is achieved.

Images