Method, medium and device for interactive linkage between browser chart and UE4 three-dimensional scene based on webrtc

Abstract

The present invention provides a method, medium and device for interactive linkage between a browser chart and a UE4 three-dimensional scene based on webrtc. The method comprises: implementing an event dispatch center on the browser side according to a publish-subscribe mode; the functions of the event dispatch center include event publishing, event registration, event dispatch and event list query, so that the browser side can publish and register events for the js interface exposed, and the webrtc interface exposed by UE4 can publish and register events; and the event dispatch center is used to interactively link the browser chart with the UE4 three-dimensional scene. The present invention adopts a publish-subscribe mode to manage all browser chart components and UE4 three-dimensional scenes, so that the events of the browser chart components and the UE4 three-dimensional scene are decoupled, and other event logics will not be affected when adding or deleting events, which can solve the problems existing in the method for interactive linkage between the browser and the UE4 three-dimensional scene implemented in the prior art.

Description

Technical Field

[0001] The present invention relates to the field of software and information technology, and in particular to a method, medium and device for interactive linkage between a browser chart and a UE4 three-dimensional scene based on webrtc. Background Art

[0002] like Figure 1 As shown, the method for interactive linkage between a browser chart and a UE4 three-dimensional scene implemented in the prior art includes the following steps:

[0003] The first step is to develop control interfaces on the browser side and the UE4 3D scene side respectively;

[0004] The second step is to develop code that calls the UE4 interface on the browser side;

[0005] The third step is to develop the code that calls the browser chart component on the UE4 3D scene side;

[0006] The fourth step is to run the UE4 3D scene and browser;

[0007] The fifth step is to trigger an event that controls the UE4 3D scene in the browser's chart component, or to trigger an event that controls the browser's chart component in the UE4 3D scene.

[0008] When there are too many browser chart components and UE4 3D scenes, or the interaction logic is complex, a lot of custom development is required. Or when the interaction logic changes, both the browser and the UE4 3D scene need to change the code. In addition, the browser cannot perceive the interface status of the UE4 3D scene, which is not conducive to interface management. Summary of the invention

[0009] The present invention aims to provide a method, medium and device for interactive linkage between browser charts and UE4 three-dimensional scenes based on webrtc, so as to solve the problems existing in the method for interactive linkage between browser charts and UE4 three-dimensional scenes implemented in the above-mentioned prior art.

[0010] The present invention provides a method for interactive linkage between a browser chart and a UE4 three-dimensional scene based on webrtc, comprising:

[0011] Implement an event dispatch center on the browser side according to the publish-subscribe mode; the functions of the event dispatch center include event publishing, event registration, event dispatch and event list query, so that events can be published and registered for the js interface exposed by the browser side, and events can be published and registered for the webrtc interface exposed by UE4;

[0012] Use the event dispatch center to interact with browser charts and UE4 3D scenes.

[0013] Furthermore, the method of using the event dispatch center to interact with the browser chart and the UE4 three-dimensional scene includes:

[0014] Steps for event editing;

[0015] The steps at which the event runs.

[0016] In some embodiments, the event editing step includes:

[0017] The first step is that when the browser configures the chart component to respond to events, it registers the chart component response events to the event dispatch center;

[0018] In the second step, when configuring the 3D scene response event, the UE4 renderer registers the 3D scene response event to the event dispatch center;

[0019] Step 3: When configuring the chart component interaction, the browser subscribes to the 3D scene response event or chart component response event corresponding to the event dispatch center;

[0020] In the fourth step, when configuring the 3D scene interaction, the UE4 renderer subscribes to the chart component response event or the 3D scene response event corresponding to the event dispatch center.

[0021] In some embodiments, the steps of executing the event include:

[0022] The first step is to initialize and start the UE4 renderer in the browser, and establish a webrtc connection between the browser and the UE4 renderer.

[0023] In the second step, the browser traverses all chart components to configure them, and registers the configured chart component response events to the event dispatch center;

[0024] In the third step, the UE4 renderer loads the scene configuration and registers the configured 3D scene response event to the event dispatch center;

[0025] Step 4: Trigger event:

[0026] When the browser triggers a chart interaction event, the event dispatch center is used to implement the interaction between the browser and the UE4 3D scene or the browser local event;

[0027] When the UE4 renderer triggers a 3D scene interaction event, the event dispatch center is used to implement the interaction between the UE4 3D scene and the browser or the UE4 3D scene local event.

[0028] Furthermore, in the fourth step, the method of using the event dispatch center to realize the interaction between the browser and the UE4 three-dimensional scene or the browser local event includes:

[0029] When the browser triggers a chart interaction event, it automatically publishes the event name and corresponding data to the event dispatch center;

[0030] The event dispatch center pushes the event name and corresponding data to the chart component or 3D scene that subscribes to this event in the browser and UE4;

[0031] The chart component or 3D scene receives the event name and corresponding data, and then executes the corresponding event to realize the interaction between the browser and the UE4 3D scene or the browser local event.

[0032] Furthermore, in the fourth step, the method of using the event dispatch center to realize the interaction between the UE4 3D scene and the browser or the local event of the UE4 3D scene includes:

[0033] When the UE4 renderer triggers a 3D scene interaction event, it automatically publishes the event name and corresponding data to the event dispatch center;

[0034] The event dispatch center pushes the event name and corresponding data to the chart component or 3D scene that subscribes to this event in the browser and UE4;

[0035] The chart component or 3D scene receives the event name and corresponding data, and then executes the corresponding event to realize the interaction between the UE4 3D scene and the browser or the local event of the UE4 3D scene.

[0036] The present invention also provides a computer terminal storage medium storing computer terminal executable instructions, wherein the computer terminal executable instructions are used to execute the above-mentioned method for interactive linkage between browser charts and UE4 three-dimensional scenes based on webrtc.

[0037] The present invention also provides a computing device, comprising:

[0038] At least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the above-mentioned method of interactive linkage between browser charts and UE4 three-dimensional scenes based on webrtc.

[0039] In summary, due to the adoption of the above technical solution, the beneficial effects of the present invention are:

[0040] The present invention adopts a publish-subscribe mode to manage all browser chart components and UE4 three-dimensional scenes, so that the events of the browser chart components and the UE4 three-dimensional scenes are decoupled, and other event logics are not affected when adding or deleting events. The problems existing in the interactive linkage method between the browser and the UE4 three-dimensional scene implemented in the prior art can be solved. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings in the embodiments will be briefly introduced below. It should be understood that the following drawings only show certain embodiments of the present invention and therefore should not be regarded as limiting the scope. For ordinary technicians in this field, other related drawings can be obtained based on these drawings without creative work.

[0042] Figure 1 The present invention is a flowchart of a method for interactive linkage between a browser chart and a UE4 three-dimensional scene implemented in the prior art.

[0043] Figure 2 The present invention is a flowchart of a method for interactive linkage between a browser chart and a UE4 three-dimensional scene based on webrtc in an embodiment of the present invention.

[0044] Figure 3 The present invention is a flowchart of event editing in a method for interactive linkage between a browser chart and a UE4 three-dimensional scene based on webrtc in an embodiment of the present invention.

[0045] Figure 4 The present invention is a flowchart of the event operation in the method for interactive linkage between a browser chart and a UE4 three-dimensional scene based on webrtc in an embodiment of the present invention. DETAILED DESCRIPTION

[0046] In order to make the purpose, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Generally, the components of the embodiments of the present invention described and shown in the drawings here can be arranged and designed in various different configurations.

[0047] Therefore, the following detailed description of the embodiments of the present invention provided in the accompanying drawings is not intended to limit the scope of the invention claimed for protection, but merely represents selected embodiments of the present invention. Based on 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.

[0048] The abbreviations and key terms used in the present invention are defined as follows:

[0049] webrtc: The abbreviation of Web Real-Time Communication, is an API that supports web browsers to conduct real-time voice or video conversations.

[0050] Browser charts: Browser-side visual charts implemented using js and css, including tables, pie charts, line charts, radar charts, bar charts and other graphic charts or text.

[0051] 3D scene: A 3D simulation scene created using the UE4 rendering engine and art tools.

[0052] Cloud rendering: The cloud rendering mode is similar to conventional cloud computing, that is, the 3D program is rendered in a remote server. The user terminal clicks a "cloud rendering" button through Web software or directly in the local 3D program and accesses resources with the help of high-speed Internet access. The command is issued from the user terminal, and the server executes the corresponding rendering task according to the command, and the rendering result image is transmitted back to the user terminal for display.

[0053] Example

[0054] like Figure 2 As shown, this embodiment proposes a method for interactive linkage between a browser chart and a UE4 three-dimensional scene based on webrtc, including:

[0055] Implement an event dispatch center on the browser side according to the publish-subscribe mode; the functions of the event dispatch center include event publishing, event registration, event dispatch and event list query, so that events can be published and registered for the js interface exposed by the browser side, and events can be published and registered for the webrtc interface exposed by UE4;

[0056] The method of using the event dispatch center to interact and link the browser chart with the UE4 three-dimensional scene includes:

[0057] Steps for event editing;

[0058] The steps at which the event runs.

[0059] like Figure 3 As shown, the steps of event editing include:

[0060] The first step is that when the browser configures the chart component to respond to events, it registers the chart component response events to the event dispatch center;

[0061] In the second step, when configuring the 3D scene response event, the UE4 renderer registers the 3D scene response event to the event dispatch center;

[0062] Step 3: When configuring the chart component interaction, the browser subscribes to the 3D scene response event or chart component response event corresponding to the event dispatch center;

[0063] In the fourth step, when configuring the 3D scene interaction, the UE4 renderer subscribes to the chart component response event or the 3D scene response event corresponding to the event dispatch center.

[0064] like Figure 4 As shown, the steps of the event operation include:

[0065] The first step is to initialize and start the UE4 renderer in the browser, and establish a webrtc connection between the browser and the UE4 renderer.

[0066] In the second step, the browser traverses all chart components to configure them, and registers the configured chart component response events to the event dispatch center;

[0067] In the third step, the UE4 renderer loads the scene configuration and registers the configured 3D scene response event to the event dispatch center;

[0068] Step 4: Trigger event:

[0069] (1) When the browser triggers a chart interaction event, the event dispatch center is used to implement the interaction between the browser and the UE4 3D scene or the browser local event; specifically:

[0070] When the browser triggers a chart interaction event, it automatically publishes the event name and corresponding data to the event dispatch center;

[0071] The event dispatch center pushes the event name and corresponding data to the chart component or 3D scene that subscribes to this event in the browser and UE4 renderer;

[0072] The chart component or 3D scene receives the event name and corresponding data, and then executes the corresponding event to realize the interaction between the browser and the UE4 3D scene or the browser local event.

[0073] (2) When the UE4 renderer triggers a 3D scene interaction event, the event dispatch center is used to implement the interaction between the UE4 3D scene and the browser or the UE4 3D scene local event; specifically:

[0074] When the UE4 renderer triggers a 3D scene interaction event, it automatically publishes the event name and corresponding data to the event dispatch center;

[0075] The event dispatch center pushes the event name and corresponding data to the chart component or 3D scene that subscribes to this event in the browser and UE4;

[0076] The chart component or 3D scene receives the event name and corresponding data, and then executes the corresponding event to realize the interaction between the UE4 3D scene and the browser or the local event of the UE4 3D scene.

[0077] It can be seen that the present invention adopts a publish-subscribe model to manage all browser chart components and UE4 three-dimensional scenes, so that the events of the browser chart components and the UE4 three-dimensional scenes are decoupled, and other event logics will not be affected when adding or deleting events. This can solve the problems existing in the interactive linkage method between the browser and the UE4 three-dimensional scene implemented in the prior art.

[0078] In addition, in some embodiments, a computer terminal storage medium is provided, which stores computer terminal executable instructions, and the computer terminal executable instructions are used to execute the method for interactive linkage between browser charts and UE4 three-dimensional scenes based on webrtc as described in the above embodiments. Examples of computer storage media include magnetic storage media (e.g., floppy disks, hard disks, etc.), optical recording media (e.g., CD-ROMs, DVDs, etc.), or memories, such as memory cards, ROMs, or RAMs. Computer storage media can also be distributed on network-connected computer systems, such as application stores.

[0079] In addition, in some embodiments, a computing device is proposed, including: at least one processor; and a memory connected to the at least one processor; wherein the memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the method for interactive linkage between a browser chart and a UE4 three-dimensional scene based on webrtc as described in the above embodiments. Examples of computing devices include PCs, tablet computers, smart phones, or PDAs.

[0080] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. For those skilled in the art, the present invention may have various modifications and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A method for interactive linkage between a browser chart and a UE4 three-dimensional scene based on webrtc, characterized in that: The method comprises: Implement an event dispatch center on the browser side according to the publish-subscribe mode; the functions of the event dispatch center include event publishing, event registration, event dispatch and event list query, so that events can be published and registered for the js interface exposed by the browser side, and events can be published and registered for the webrtc interface exposed by UE4; The method of using the event dispatch center to interact and link the browser chart with the UE4 three-dimensional scene includes the step of event running; The steps of running the event include: The first step is to initialize and start the UE4 renderer in the browser, and establish a webrtc connection between the browser and the UE4 renderer. In the second step, the browser traverses all chart components to configure them, and registers the configured chart component response events to the event dispatch center; In the third step, the UE4 renderer loads the scene configuration and registers the configured 3D scene response event to the event dispatch center; Step 4: Trigger event: When the browser triggers a chart interaction event, the event dispatch center is used to implement the interaction between the browser and the UE4 3D scene or the browser local event; When the UE4 renderer triggers a 3D scene interaction event, the event dispatch center is used to implement the interaction between the UE4 3D scene and the browser or the UE4 3D scene local event; In the fourth step, the method of using the event dispatch center to realize the interaction between the browser and the UE4 three-dimensional scene or the browser local event includes: When the browser triggers a chart interaction event, it automatically publishes the event name and corresponding data to the event dispatch center; The event dispatch center pushes the event name and corresponding data to the chart component or 3D scene that subscribes to this event in the browser and UE4; The chart component or 3D scene receives the event name and corresponding data, and then executes the corresponding event to realize the interaction between the browser and the UE4 3D scene or the browser local event; In the fourth step, the method of using the event dispatch center to realize the interaction between the UE4 3D scene and the browser or the local event of the UE4 3D scene includes: When the UE4 renderer triggers a 3D scene interaction event, it automatically publishes the event name and corresponding data to the event dispatch center; The event dispatch center pushes the event name and corresponding data to the chart component or 3D scene that subscribes to this event in the browser and UE4; The chart component or 3D scene receives the event name and corresponding data, and then executes the corresponding event to realize the interaction between the UE4 3D scene and the browser or the UE4 3D scene local event.

2. According to the webrtc-based interactive linkage method between browser chart and UE4 three-dimensional scene according to claim 1, it is characterized in that: The method for using the event dispatch center to interact with the browser chart and the UE4 three-dimensional scene also includes: an event editing step; the event editing step includes: The first step is that when the browser configures the chart component to respond to events, it registers the chart component response events to the event dispatch center; In the second step, when configuring the 3D scene response event, the UE4 renderer registers the 3D scene response event to the event dispatch center; Step 3: When configuring the chart component interaction, the browser subscribes to the 3D scene response event or chart component response event corresponding to the event dispatch center; In the fourth step, when configuring the 3D scene interaction, the UE4 renderer subscribes to the chart component response event or the 3D scene response event corresponding to the event dispatch center.

3. A computer terminal storage medium storing computer terminal executable instructions, characterized in that: The computer terminal executable instructions are used to execute the method for interactive linkage between browser charts and UE4 three-dimensional scenes based on webrtc as described in any one of claims 1-2.

4. A computing device, characterized in that: include: at least one processor; And a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the method for interactive linkage between browser charts and UE4 three-dimensional scenes based on webrtc as described in any one of claims 1-2.

Images