Communication method and system based on JavaScript environment and unreal engine 5

Abstract

The invention relates to the technical field of computer software, in particular to a communication method and system based on a JavaScript environment and an unreal engine 5, and the method comprises the following steps: using Vue3 as a front-end interface core, capturing user interaction behaviors by monitoring user input events, and managing states by using a combined API (Application Program Interface) to ensure the consistency and predictability of the states; state management is carried out in the Vue3 by using an API provided by Pinia, and the view state is ensured to be updated in time through a response type system; the communication method and system based on the JavaScript environment and the unreal engine 5 have the beneficial effects that the front-end Vue3 application can process user interaction logic and communicate with the unreal engine 5 through an asynchronous event broadcasting and monitoring mechanism. And the unreal engine 5 is responsible for rendering the three-dimensional model, receiving a front-end message through the mechanism and making a response, so that the consistency of a front-end interface and a three-dimensional model scene state is ensured, and smooth user experience is provided.

Description

Technical Field

[0001] The present invention relates to the field of computer software technology, and in particular to a communication method and system based on a JavaScript environment and Unreal Engine 5. Background Art

[0002] With the development of Web technology, it is becoming more and more important to integrate complex 3D models into the Web environment. Vue3 is a popular front-end framework for building user interfaces, while Unreal Engine 5 is a powerful tool for developing high-quality 3D models and games.

[0003] However, there are still many challenges in achieving efficient communication between the front-end JavaScript environment and Unreal Engine 5, especially for application scenarios of real-time 3D model rendering. Summary of the invention

[0004] The purpose of the present invention is to provide a communication method and system based on JavaScript environment and Unreal Engine 5 to solve the problems raised in the above background technology.

[0005] To achieve the above object, the present invention provides the following technical solution: a method for communicating with Unreal Engine 5 based on a JavaScript environment, the method comprising the following steps:

[0006] Use Vue3 as the core of the front-end interface, capture user interaction behaviors by listening to user input events, and use the combined API to manage the state to ensure the consistency and predictability of the state;

[0007] Use the API provided by Pinia to manage state in Vue3 and ensure that the view state is updated in time through the responsive system;

[0008] Use Vue3's event bus to realize communication between components and improve the efficiency of information transmission;

[0009] Build a custom event system through which the Vue3 application sends messages containing unique function names and function parameters to Unreal Engine 5. The parameter format supports string, JSON string, and Boolean value types.

[0010] Preferably, it also includes: Unreal Engine 5 uses advanced rendering technology to achieve realistic rendering of three-dimensional models, including global illumination, level of detail LOD and screen space reflection technology; Unreal Engine 5 receives messages from Vue3 applications through a custom event system, and performs corresponding operations according to the content of the message, such as model transformation and animation playback, to achieve synchronous updates between the front end and the back end.

[0011] Preferably, the custom event system also includes an asynchronous event broadcasting and monitoring mechanism, specifically: generating a unique identifier for each event to ensure the traceability and uniqueness of the event; broadcasting events asynchronously and monitoring these events in Unreal Engine 5, and processing them immediately once they are received; selecting a communication method based on the state of ue.interface, if ue.interface is not initialized or its broadcast method is not available, passing messages by modifying the hash value of the browser URL; if it has been initialized, directly calling the broadcast method.

[0012] Preferably, the asynchronous event broadcast and monitoring mechanism also has compatibility and scalability, specifically: supporting consistent communication behavior in different environments; identifier-based event management, which facilitates future expansion and maintenance.

[0013] Preferably, an exception handling mechanism is also included, specifically: when an exception such as message transmission failure occurs during the communication process, the system retries the operation several times; if it still fails after the retries, the exception information is thrown for capture to ensure the reliability and stability of the communication process.

[0014] A communication system based on a JavaScript environment and Unreal Engine 5 is applied to a communication method based on a JavaScript environment and Unreal Engine 5, the method comprising the following steps:

[0015] A Vue3 application, as the core of the front-end interface, is responsible for handling all user interaction logic, organizing and managing states through a composite API, and using a responsive system to ensure that the view state is updated in a timely manner;

[0016] The Vue3 application contains a user input processing module, which is used to monitor user input events and trigger corresponding business logic;

[0017] Vue3 applications use the API provided by Pinia for state management to ensure consistency and predictability of the state;

[0018] The Vue3 application sends a message to Unreal Engine 5 through the custom event system. The message content contains a unique function name and function parameters. The parameter format supports string, JSON string, and Boolean value types.

[0019] Preferably, it also includes: Unreal Engine 5 as a back-end rendering engine, responsible for generating high-quality three-dimensional models and scenes, and using advanced rendering technology to achieve realistic three-dimensional scene rendering; Unreal Engine 5 receives messages from Vue3 applications through a custom event system, and performs corresponding operations according to the message content, such as model transformation and animation playback; Unreal Engine 5 uses multi-threaded rendering and asynchronous computing technologies to ensure the efficiency of the rendering process and reduce the impact on the performance of the front-end application.

[0020] Preferably, the custom event system also includes an asynchronous event broadcasting and monitoring mechanism, specifically: generating a unique identifier for each event to ensure the traceability and uniqueness of the event; broadcasting events asynchronously and monitoring these events in Unreal Engine 5, and processing them immediately once they are received; selecting a communication method based on the state of ue.interface, if ue.interface is not initialized or its broadcast method is not available, passing messages by modifying the hash value of the browser URL; if it has been initialized, directly calling the broadcast method to implement message delivery.

[0021] Preferably, the asynchronous event broadcast and monitoring mechanism also has the following characteristics: supporting consistent communication behavior in different environments to ensure the compatibility and stability of the system; identifier-based event management facilitates system expansion and maintenance, and can flexibly respond to new event types that may be added in the future.

[0022] Preferably, it also includes an exception handling module, specifically: when a message transmission failure exception occurs during the communication process, the exception handling module retries the operation several times; if it still fails after the retries, the exception handling module throws out exception information for the developer to capture and process, thereby ensuring the reliability and stability of the communication process.

[0023] Compared with the prior art, the present invention has the following beneficial effects:

[0024] The communication method and system based on JavaScript environment and Unreal Engine 5 proposed in the present invention can process user interaction logic and communicate with Unreal Engine 5 through asynchronous event broadcasting and monitoring mechanism. Unreal Engine 5 is responsible for rendering the three-dimensional model, and receives and responds to the front-end message through this mechanism, so as to ensure the consistency between the front-end interface and the three-dimensional model scene state, and provide a smooth user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] Figure 1 is a flow chart of the method of the present invention;

[0026] Figure 2 This is a flow chart of the event broadcasting and monitoring mechanism of the present invention. DETAILED DESCRIPTION

[0027] In order to make the purpose and technical solution of the present invention clearly and completely described, and the advantages more clearly understood, the embodiments of the present invention are further described in detail with reference to the accompanying drawings. It should be understood that the specific embodiments described herein are part of the embodiments of the present invention, rather than all of the embodiments, and are only used to explain the embodiments of the present invention, and are not used to limit the embodiments of the present invention. All other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0028] For example, see Figure 1 to Figure 2 The present invention provides a technical solution: a method for communicating with Unreal Engine 5 based on a JavaScript environment, the method comprising the following steps:

[0029] (1) Build a Vue3 application to handle user interactions and send messages

[0030] As the core of the front-end interface, the Vue3 application is responsible for handling all user interaction logic. It organizes and manages states through a combined API, making state management and component logic more modular and reusable. Vue3's responsive system ensures that when the state changes, the view can be updated in time, providing a smooth user experience.

[0031] (a) User input processing: Vue3 applications capture user interaction behaviors and trigger corresponding business logic by monitoring user input events such as clicks and slides.

[0032] (b) State management: Use the API provided by Pinia to manage state and ensure the consistency and predictability of the state.

[0033] (c) Component communication: Use Vue3's event bus to achieve communication between components and ensure efficient information transmission.

[0034] (d) Message processing mechanism: Vue3 application sends messages to Unreal Engine 5 through a custom event system. The message content must contain a unique function name and function parameters. The parameter format supports string, JSON string, Boolean value and other types. In order to respond to the operation of Unreal Engine 5, Vue3 needs to listen to the function from Unreal Engine 5. The function name to be listened to must be consistent with the definition of Unreal Engine 5. Similarly, this function receives a parameter, which comes from Unreal Engine 5. According to the parameter type, Vue3 application makes corresponding interactions and feedback. Synchronous updates are achieved.

[0035] (2) Build Unreal Engine 5 application to handle 3D model rendering and message response

[0036] As a backend rendering engine, Unreal Engine 5 is responsible for generating high-quality 3D models and scenes. It brings users a realistic visual experience through an efficient graphics rendering pipeline and physical simulation.

[0037] (a) 3D model rendering: Unreal Engine 5 uses its advanced rendering technologies, such as global illumination, level of detail (LOD), and screen space reflection, to achieve realistic 3D scene rendering.

[0038] (b) Message response mechanism: Unreal Engine 5 receives messages from Vue3 applications through a custom event system and performs corresponding operations based on the message content, such as model transformation, animation playback, etc.

[0039] (c) Performance optimization: Unreal Engine 5 uses technologies such as multi-threaded rendering and asynchronous computing to ensure the efficiency of the rendering process and reduce the impact on front-end application performance.

[0040] (3) Implementation of asynchronous event broadcasting and monitoring mechanism

[0041] The custom event system provides an asynchronous event broadcasting and monitoring mechanism, ensuring that the communication between the front-end and the back-end is both efficient and reliable.

[0042] (a) Event identifier generation: Generate a unique identifier for each event to ensure event traceability and uniqueness.

[0043] (b) Broadcast and Listen: Broadcast events asynchronously and listen to these events in Unreal Engine 5. Once an event is received, it is processed immediately.

[0044] (c) Communication method selection: Select the communication method according to the status of ue.interface. If ue.interface is not initialized or its broadcast method is not available, the message is delivered by modifying the hash value of the browser URL; if it is initialized, the broadcast method is called directly.

[0045] (d) Compatibility and scalability: The mechanism supports consistent communication behavior in different environments and facilitates future expansion and maintenance due to its identifier-based event management.

[0046] (4) Exception handling

[0047] When an exception occurs during the communication process, such as message delivery failure, the system will retry the operation several times. If it still fails, an exception message will be thrown for capture.

[0048] The invention realizes efficient communication between the front-end Vue3 application and Unreal Engine 5 through a customized event system, ensuring the consistency of the front-end interface and the state of the 3D model scene. The system adopts an asynchronous event broadcast and monitoring mechanism, and tracks each message by generating a unique identifier, thereby ensuring the accuracy and timeliness of the message.

[0049] Embodiment 2, based on embodiment 1, proposes a communication system based on JavaScript environment and Unreal Engine 5, which is applied to a communication method based on JavaScript environment and Unreal Engine 5, and the method comprises the following steps:

[0050] A Vue3 application, as the core of the front-end interface, is responsible for handling all user interaction logic, organizing and managing states through a composite API, and using a responsive system to ensure that the view state is updated in a timely manner;

[0051] The Vue3 application contains a user input processing module, which is used to monitor user input events and trigger corresponding business logic;

[0052] Vue3 applications use the API provided by Pinia for state management to ensure consistency and predictability of the state;

[0053] The Vue3 application sends a message to Unreal Engine 5 through the custom event system. The message content contains a unique function name and function parameters. The parameter format supports string, JSON string, and Boolean value types.

[0054] It also includes: Unreal Engine 5 as a back-end rendering engine, responsible for generating high-quality 3D models and scenes, and using advanced rendering technology to achieve realistic 3D scene rendering; Unreal Engine 5 receives messages from Vue3 applications through a custom event system, and performs corresponding operations based on the content of the message, such as model transformation and animation playback; Unreal Engine 5 uses multi-threaded rendering and asynchronous computing technologies to ensure the efficiency of the rendering process and reduce the impact on the performance of front-end applications.

[0055] The custom event system also includes an asynchronous event broadcast and monitoring mechanism, which is as follows: a unique identifier is generated for each event to ensure the traceability and uniqueness of the event; events are broadcast asynchronously and monitored in Unreal Engine 5, and once an event is received, it is processed immediately; the communication method is selected according to the status of ue.interface. If ue.interface is not initialized or its broadcast method is not available, the message is passed by modifying the hash value of the browser URL; if it is initialized, the broadcast method is directly called to implement message delivery.

[0056] The asynchronous event broadcast and monitoring mechanism also has the following features: it supports consistent communication behavior in different environments to ensure the compatibility and stability of the system; identifier-based event management facilitates system expansion and maintenance, and can flexibly respond to new event types that may be added in the future.

[0057] It also includes an exception handling module, specifically: when a message transmission failure exception occurs during the communication process, the exception handling module retries the operation several times; if it still fails after the retries, the exception handling module throws out exception information for the developer to capture and process, ensuring the reliability and stability of the communication process.

[0058] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A method for communicating with Unreal Engine 5 based on a JavaScript environment, characterized in that: The method comprises the following steps: Use Vue3 as the core of the front-end interface, capture user interaction behaviors by listening to user input events, and use the combined API to manage the state to ensure the consistency and predictability of the state; Use the API provided by Pinia to manage state in Vue3 and ensure that the view state is updated in time through the responsive system; Use Vue3's event bus to realize communication between components and improve the efficiency of information transmission; Build a custom event system through which the Vue3 application sends messages containing unique function names and function parameters to Unreal Engine 5. The parameter format supports string, JSON string, and Boolean value types.

2. The method for communicating between a JavaScript environment and Unreal Engine 5 according to claim 1, characterized in that: Also includes: Unreal Engine 5 uses advanced rendering technology to achieve realistic rendering of three-dimensional models, including global illumination, level of detail (LOD), and screen space reflection technology; Unreal Engine 5 receives messages from Vue3 applications through a custom event system, and performs corresponding operations based on the content of the message, such as model transformation and animation playback, to achieve synchronous updates between the front-end and back-end.

3. The method for communicating between a JavaScript environment and Unreal Engine 5 according to claim 1, characterized in that: The custom event system also includes an asynchronous event broadcast and monitoring mechanism, which is as follows: a unique identifier is generated for each event to ensure the traceability and uniqueness of the event; events are broadcast asynchronously and monitored in Unreal Engine 5, and once an event is received, it is processed immediately; the communication method is selected according to the state of ue.interface. If ue.interface is not initialized or its broadcast method is not available, the message is delivered by modifying the hash value of the browser URL; If it has been initialized, the broadcast method is called directly.

4. The method for communicating between a JavaScript environment and Unreal Engine 5 according to claim 1, characterized in that: The asynchronous event broadcast and monitoring mechanism also has compatibility and scalability, specifically: supporting consistent communication behavior in different environments; identifier-based event management to facilitate future expansion and maintenance.

5. The method for communicating between a JavaScript environment and Unreal Engine 5 according to claim 1, characterized in that: It also includes an exception handling mechanism, specifically: when an exception such as message transmission failure occurs during the communication process, the system retries the operation several times; if it still fails after the retries, the exception information is thrown for capture to ensure the reliability and stability of the communication process.

6. A communication system based on JavaScript environment and Unreal Engine 5, applied to a communication method based on JavaScript environment and Unreal Engine 5 as claimed in any one of claims 1 to 5, characterized in that: The method comprises the following steps: A Vue3 application, as the core of the front-end interface, is responsible for handling all user interaction logic, organizing and managing states through a composite API, and using a responsive system to ensure that the view state is updated in a timely manner; The Vue3 application contains a user input processing module, which is used to monitor user input events and trigger corresponding business logic; Vue3 applications use the API provided by Pinia for state management to ensure consistency and predictability of the state; The Vue3 application sends a message to Unreal Engine 5 through the custom event system. The message content contains a unique function name and function parameters. The parameter format supports string, JSON string, and Boolean value types.

7. The communication system based on JavaScript environment and Unreal Engine 5 according to claim 6, characterized in that: Also includes: As a back-end rendering engine, Unreal Engine 5 is responsible for generating high-quality 3D models and scenes, and using advanced rendering technology to achieve realistic 3D scene rendering; Unreal Engine 5 receives messages from Vue3 applications through a custom event system, and performs corresponding operations based on the message content, such as model transformation and animation playback; Unreal Engine 5 uses multi-threaded rendering and asynchronous computing technologies to ensure the efficiency of the rendering process and reduce the impact on the performance of front-end applications.

8. The communication system based on JavaScript environment and Unreal Engine 5 according to claim 6, characterized in that: The custom event system also includes an asynchronous event broadcast and monitoring mechanism, which is as follows: a unique identifier is generated for each event to ensure the traceability and uniqueness of the event; events are broadcast asynchronously and monitored in Unreal Engine 5, and once an event is received, it is processed immediately; the communication method is selected according to the state of ue.interface. If ue.interface is not initialized or its broadcast method is not available, the message is delivered by modifying the hash value of the browser URL; If it has been initialized, the broadcast method is called directly to implement message delivery.

9. The communication system based on JavaScript environment and Unreal Engine 5 according to claim 6, characterized in that: The asynchronous event broadcast and monitoring mechanism also has the following features: it supports consistent communication behavior in different environments to ensure the compatibility and stability of the system; identifier-based event management facilitates system expansion and maintenance, and can flexibly respond to new event types that may be added in the future.

10. The communication system based on JavaScript environment and Unreal Engine 5 according to claim 6, characterized in that: It also includes an exception handling module, specifically: when a message transmission failure exception occurs during the communication process, the exception handling module retries the operation several times; if it still fails after the retries, the exception handling module throws out exception information for the developer to capture and process, ensuring the reliability and stability of the communication process.

Images