cloud rendering

This product supports Pixel Streaming, see Unreal Engine4 documentation and Unreal Engine5 documentation for Pixel Streaming.

This page briefly introduces the cloud rendering deployment of Unreal Engine 4.27, including publishing exe and using secondary development Demo. If you are using Unreal Engine 5.0, use Unreal Engine 5.0 's pixel streaming feature for now.

Environmental preparation

This section describes the preparations you need to do before using cloud rendering capabilities.

  1. Install Node.js. Download Node.js from this address and install it locally. Once installed, you can verify that Node.js is installed by executing node-v on the command line interface.
  2. Check whether the required network port is occupied (80, 8888 are examples). Execute netstat-ano command on command line interface to check whether the above ports are occupied. If they are occupied, find the application corresponding to the port and close the port.
  3. Update your local browser to the latest version (Chrome 64-bit is an example).

Set up and package exe files

This section focuses on how to parameterize and package Windows projects.

  1. Open the Pixel Streaming plugin. Click on the menu bar - Edit - Plugins , and check on Built-in - Graphics - Pixel Streaming in the plugins panel that pops up.
  2. Set editor preferences. Click Menu Bar -> Edit -> Editor Preferences... In the pop-up panel, find the Level Editor - Play - Run in standalone games - Extra startup parameter , set its value to-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888(the port number here can be changed as needed).
  3. Configure Map. Here is an example scenario provided by this product.
    • Locate and delete the SuperMap_MainActor Blueprint object in the World Outliner of the open sample scene.
    • Find the Plugins - SuperMap Content-BluePrints - WebUI folder-SuperMapWebCameral Blueprint object in the Content Browser and drag it into the current scene, then zero the position at the location of the object's detail panel transform.
    • After completing the above operations, save the current level.
  4. Package Windows projects. Set map mode and package project according toproject packaging and operation guide.

Using Cloud Rendering

This section uses Unreal Engine 4.27 as an example to illustrate how to render web-side demos using pixel streaming and cloud rendering.

Use pixel streaming

  1. Create a shortcut to packaged files.
    • Generate shortcuts to the exe file generated in the previous packaging file.
    • Right-click the shortcut, select Properties from the right-click menu that pops up, and enter the following after the target item on the Shortcuts page of the Properties Panel: -AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888. Note: -There is a space before AudioMixer.
  2. Install Express Frame.
    • Start cmd command line interface as administrator.
    • Enter the command: cd/d Package Results Files\WindowsNoEditor\Samples\PixelStreaming\WebServers\SignallingWebServer folder.
    • After jumping to the specified path, enter and run the command: npm install express.
  3. Run the run_local.bat file
    • Run the Package Results File\Samples\PixelStreaming\WebServers\SignallingWebServer\platform_scripts\cmd\run_local.bat file as administrator.

    • After successful startup, keep the run_local.bat file running window open.
  4. Open the shortcut file created in step 1.
  5. Press Alt+Tab on the computer running Unreal Engine to shift focus away from the Unreal Engine application.
  6. Open the latest version of Chrome 64-bit browser, visit http://localhost/address, click in the browser window to play and operate the project project.

Rendering Web-side Demo with Cloud

In view of the situation that the scene can only be browsed after the operation of the previous part, this product provides a set of JS interfaces and examples to realize the functions of layer management, 3D spatial analysis and measurement on the Web side. The specific steps are as follows:

  1. Cloud Rendering Sample Code Copy
    • Close the run_local.bat command window that was running in the previous part.
    • Go to the package results file\WindowsNoEditor\Samples\PixelStreaming\WebServers\SignallingWebServer folder, locate and delete the Delete scripts folder.
    • Enter the folder corresponding to the corresponding product version, copy the corresponding file and paste it into the folder in the previous step.
      • Locate the Cloud Rendering\[Game Engine Versions] folder, copy the scripts and iarth folders, and paste into the package results file\WindowsNoEditor\Samples\PixelStreaming\WebServers\SignallingWebServer folder.
      • Copy and paste player.html into the package results file\WindowsNoEditor\Samples\PixelStreaming\WebServers\SignallingWebServer\www folder.
      • If you are using Unreal Engine 5.0, you need to copy and paste player.html into the\WindowsNoEditor\Samples\PixelStreaming\WebServers\SignallingWebServer\public folder.
  2. Run the signaling server.
    • Run as administrator to launch the "package results file\WindowsNoEditor\Samples\PixelStreaming\WebServers\SignallingWebServer\platform_scripts\cmd folder run_local.bat file".
  3. Run the cloud rendering sample code.
    • Start cmd command line interface as administrator.
    • Enter and run cd package result file\WindowsNoEditor\Samples\PixelStreaming\WebServers\SignallingWebServer\iarth on the command line interface, jump to the specified directory.
    • Start Web by typing and running "npm run dev" on the console.
    • Double-click to open exe shortcut.
    • Press Alt+Tab on the computer running the Unreal Engine application to move focus away from the Unreal Engine application.
    • Open the latest version of Chorome 64-bit browser, enter http://localhost:3000/address in the browser address bar, and then click Click to start and start streaming to enter the scene.
    • The upper left corner is the function bar, where you can use related functions such as layer loading, layer management, perspective analysis, visual analysis, measurement, etc.

UE5.2, UE5.3 version use precautions

According to the official document of Unreal Engine, the pixel streaming version has been upgraded in UE5.2 and UE5.3, and the operation steps have changed. Users can learn how to deploy pixel streaming and implement exe push streaming in the pixel streaming introductory chapter of Unreal Engine. Let's look at how to render Demo using Cloud.

  1. Cloud Rendering Sample Code Copy
    • Open the product package cloud rendering folder, enter the corresponding game engine version, copy the folder and paste it into the folder "Package Result File\WindowsNoEditor\PixelStreaming(corresponding to UE version pixel streaming folder)\WebServers\SignallingWebServer".
  2. Run the signaling server.
    • Run the Start Package Results File\WindowsNoEditor\PixelStreaming(corresponding to UE version pixel streaming folder)\WebServers\SignallingWebServer\platform_scripts\cmd\Start_SignallingServer.ps1 file as an administrator.
  3. Run the cloud rendering sample code.
    • Start cmd command line interface as administrator.
    • Enter and run cd package result file\WindowsNoEditor\PixelStreaming(corresponding to UE version pixel streaming folder)\WebServers\SignallingWebServer\iearth in the command line interface, jump to the specified directory.
    • Start Web by typing and running "npm run dev" on the console.
    • Double-click to open exe shortcut.
    • Press Alt+Tab on the computer running the Unreal Engine application to move focus away from the Unreal Engine application.
    • Open the latest version of Chorome 64-bit browser, enter http://localhost:3000/address in the browser address bar, and then click Click to start and start streaming to enter the scene.
    • The upper left corner is the function bar, where you can use related functions such as layer loading, layer management, perspective analysis, visual analysis, measurement, etc.

Cloud rendering example features in the use of local files considerations

In the example, local files such as flight route and video delivery will be used. This local refers to the computer that starts the signaling server . The current example does not support opening the server-side file selection box, so it is temporarily necessary to copy the files to the corresponding path of the server for use.