云渲染

本产品支持Pixel Streaming功能，有关Pixel Streaming见Unreal Engine4文档和Unreal Engine5文档。

本页面以Unreal Engine4.27的云渲染部署作简要介绍，包括发布exe、使用二次开发Demo等内容。如果使用Unreal Engine5.0版本，暂时先使用Unreal Engine5.0的像素流送功能。

环境准备

该部分介绍使用云渲染功能之前所需做的准备工作。

  1. 安装Node.js。通过该地址下载Node.js，并在本地安装。安装完成后，可以通过在命令行界面执行"node-v"，来验证Node.js的安装是否完成。
  2. 检查所需网络端口是否被占用（这里以80、8888为例）。通过在命令行界面执行"netstat-ano"命令，检查以上端口是否被占用，如有占用，找到端口对应的应用程序结束任务即可关闭端口。
  3. 更新本地浏览器至最新版本（这里以Chrome 64位浏览器为例）。

设置并打包exe文件

该部分主要介绍如何进行参数并打包Windows项目。

  1. 打开Pixel Streaming插件。单击菜单栏->编辑->插件，在弹出的插件面板中勾选开启内置->Graphics->Pixel Streaming。
  2. 设置编辑器偏好参数。单击菜单栏->编辑->编辑器偏好设置......，在弹出的面板中找到关卡编辑器->播放->在独立进程游戏中运行->额外启动参数，将其值设置为-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888(这里的端口号可以根据需要改动)。
  3. 配置Map。这里以本产品提供的范例场景进行说明。
    • 在打开的范例场景的世界大纲视图找到并删除SuperMap_MainActor蓝图对象。
    • 在内容浏览器内找到Plugins->SuperMap内容->BluePrints->WebUI文件夹->SuperMapWebCameral蓝图对象，并将其拖入当前场景中，然后在该对象的细节面板的变换的位置处将位置归零。
    • 完成上述操作后，保存当前关卡。
  4. 打包Windows项目。根据工程打包及运行操作指南，设置好地图模式并打包项目。

使用云渲染

该部分以Unreal Engine4.27为例，说明如何使用像素流送功能和云渲染Web端Demo。

使用像素流送功能

  1. 生成打包文件快捷方式。
    • 将上一步打包文件中生成的exe文件生成快捷方式。
    • 右键单击快捷方式，在弹出的右键菜单选择属性，在属性面板的快捷方式页面的目标项后输入以下内容：-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888。注意：-AudioMixer前有一个空格。
  2. 安装Express框架。
    • 以管理员身份启动cmd命令行界面。
    • 输入命令：cd/d 打包结果文件\WindowsNoEditor\Samples\PixelStreaming\WebServers\SignallingWebServer文件夹。
    • 跳转至指定路径后，输入并运行命令：npm install express。
  3. 运行run_local.bat文件
    • 以管理员身份运行“打包结果文件\Samples\PixelStreaming\WebServers\SignallingWebServer\platform_scripts\cmd\run_local.bat文件”。

    • 启动成功后，保持run_local.bat文件运行窗口处于开启状态。
  4. 打开步骤一创建的快捷方式文件。
  5. 在运行Unreal Engine的电脑上按下Alt+Tab组合键，将聚焦从虚幻引擎应用程序上移开。
  6. 打开本地最新版本的Chrome 64位浏览器，访问http://localhost/地址，在浏览器窗口中点击即可播放并操作项目工程。

使用云渲染Web端Demo

针对上一部分操作后场景仅可以浏览的情况，为此本产品提供一套JS接口及范例，以实现Web端使用图层管理、三维空间分析和量算等功能。具体使用步骤如下：

  1. 云渲染示例代码拷贝
    • 关闭上一部分一直运行的run_local.bat命令窗口。
    • 进入打包结果文件\WindowsNoEditor\Samples\PixelStreaming\WebServers\SignallingWebServer文件夹，找到并删除删除scripts文件夹。
    • 进入相应产品版本对应的文件夹内，复制相应的文件粘贴至上一步的文件夹内。
      • 找到云渲染\[游戏引擎版本]文件夹内，复制scripts和iearth文件夹，并粘贴至打包结果文件\WindowsNoEditor\Samples\PixelStreaming\WebServers\SignallingWebServer文件夹。
      • 将player.html复制粘贴至打包结果文件\WindowsNoEditor\Samples\PixelStreaming\WebServers\SignallingWebServer\www文件夹内。
      • 如果采用的是Unreal Engine5.0，这里需要将将player.html复制粘贴到\WindowsNoEditor\Samples\PixelStreaming\WebServers\SignallingWebServer\public文件夹内。
  2. 运行信令服务器。
    • 以管理员身份运行启动“打包结果文件\WindowsNoEditor\Samples\PixelStreaming\WebServers\SignallingWebServer\platform_scripts\cmd文件夹下run_local.bat文件”。
  3. 运行云渲染示例代码。
    • 以管理员身份启动cmd命令行界面。
    • 在命令行界面输入并运行cd 打包结果文件\WindowsNoEditor\Samples\PixelStreaming\WebServers\SignallingWebServer\iearth，跳转至指定目录下。
    • 在控制台输入并运行“npm run dev”，启动Web。
    • 双击打开exe快捷方式。
    • 在运行虚幻引擎应用程序的电脑上按下Alt+Tab组合键，将聚焦从虚幻引擎应用程序上移开。
    • 打开最新版Chorome 64位浏览器，在浏览器地址栏输入http://localhost:3000/地址，之后依次点击Click to start和start streaming，进入到场景。
    • 左上角部分为功能栏，可以使用图层加载、图层管理、通视分析、可视域分析、量算等相关功能。

UE5.2、UE5.3版本使用注意事项

通过虚幻引擎官方文档，像素流送版本在UE5.2、UE5.3进行了升级，操作步骤有所变化，用户可以虚幻引擎中的像素流送入门章节了解如何部署像素流送和实现exe的推流。接下来具体看下如何使用云渲染Demo。

  1. 云渲染示例代码拷贝
    • 打开产品包云渲染文件夹，进入到相应游戏引擎版本，复制文件夹粘贴至"打包结果文件\WindowsNoEditor\PixelStreaming(对应UE版本像素流送文件夹)\WebServers\SignallingWebServer"文件夹。
  2. 运行信令服务器。
    • 以管理员身份运行启动“打包结果文件\WindowsNoEditor\PixelStreaming(对应UE版本像素流送文件夹)\WebServers\SignallingWebServer\platform_scripts\cmd\Start_SignallingServer.ps1”文件。
  3. 运行云渲染示例代码。
    • 以管理员身份启动cmd命令行界面。
    • 在命令行界面输入并运行cd 打包结果文件\WindowsNoEditor\PixelStreaming(对应UE版本像素流送文件夹)\WebServers\SignallingWebServer\iearth，跳转至指定目录下。
    • 在控制台输入并运行“npm run dev”，启动Web。
    • 双击打开exe快捷方式。
    • 在运行虚幻引擎应用程序的电脑上按下Alt+Tab组合键，将聚焦从虚幻引擎应用程序上移开。
    • 打开最新版Chorome 64位浏览器，在浏览器地址栏输入http://localhost:3000/地址，之后依次点击Click to start和start streaming，进入到场景。
    • 左上角部分为功能栏，可以使用图层加载、图层管理、通视分析、可视域分析、量算等相关功能。

云渲染示例功能中本地文件使用注意事项

在示例中，会使用飞行路线、视频投放等本地的文件，此本地指的是启动信令服务器的电脑，当前示例还不支持打开服务器端文件选择框，因此暂时需要将文件拷贝到服务器对应路径中使用。