虚幻引擎5学习笔记（二）

紧接上一篇文章，本文主要记录使用Cesium for Unreal将Cesium的3D地理空间功能与虚幻引擎的高保真渲染能力相结合，为游戏引擎解锁3D地理空间生态系统。

并借助像素流送推到Web前端进行展示，以及和前端进行数据交互。

1. Cesium for Unreal

之前我们勾选了"Cesium for Unreal"插件，那么在虚幻引擎编辑器的“窗口”菜单中可以打开“cesium”窗口。

1.1. 三维模型

点击“Blank 3D Tiles Tileset”添加一个空的三维模型Actor数据可以选择Cesium Ion或者本地的数据。

可以看到三维模型是倒立的，我们选择Georeference，然后点击“设置原点”

1.2. 光照环境

添加Cesium SunSky，以模拟光照等环境。 

需要调整光源否则场景一片白，可以通过点击“Snap Local Up to Elipsoid Normal”或输入经纬度改变光源位置；也可以把光源强度调小（一般1~100就可以了）。

1.3. 相机

添加相机，以实现视角场景的控制。

1.4. 地形服务

添加影像底图和地形服务。

注意Ion的token需要有对应资源的权限，然后就可以在UE5里面使用影像图和地形服务了

1.5. 地理空间

普通虚幻引擎Actor的位置一般是世界场景的坐标，为了更好地控制物品的位置，需要把它转换转换成地理坐标系对象。 

点击菜单栏的“窗口”-“放置Actor”

将一个普通的虚幻引擎Actor变成一个地理坐标系对象，方法是将CesiumGlobeAnchor组件附加到它上面

然后就可以通过经纬度来修改物体的位置了

2. 蓝图操作Cesium

2.1. 修改位置

前面有说怎么把物品放置到地理空间中，这里是在运行过程中修改物品的位置，确保已经添加了“CesiumGlobeAnchor”组件

通过调用“CesiumGlobeAnchor”组件的api来修改位置

2.2. 修改视角

参考上一篇文章的蓝图通信，把相机Cesium的DynamicPawn相机拖入关卡蓝图中，然后调用“Flyto”函数。

3. 像素流送

在云端服务器上运行虚幻引擎应用程序，通过WebRTC将渲染的帧和音频流送到浏览器和移动设备。再从浏览器将键盘、鼠标和触摸事件或自定义事件发送回虚幻引擎。 

有点类似于直播，只不过是将UE5渲染的内容实时推送到客户端，也能接收客户端的交互。

3.1. UE5

在编辑器中测试，点击“流送关卡编辑器”，把整个关卡场景推送到web端

在蓝图脚本中接收像素流送输入的信息，解析JSON中的数据

3.2. web端

web端通过像素流送的npm包，接收UE5推送的像素流进行展示。 并通过对应的Api和UE5进行数据交互。 

<template>
  <el-space direction="vertical" class="btn-container">
    <el-button type="primary" @click="handleClick('foucsRadar')">雷达视角推进</el-button>
    <el-button type="primary" @click="handleClick('resetCamera')">视角复位</el-button>
    <el-button type="primary" @click="handleClick('loopRequstRegions')">点云数据</el-button>
    <el-button type="primary" @click="handleClick('shuaxinyujing')">形变报警数据</el-button>
    <el-button type="primary" @click="handleClick('point')">飞行到报警点</el-button>
    <el-button type="primary" @click="handleClick('cursorPointer')">鼠标悬停状态</el-button>
    <el-button type="primary" @click="handleClick('cursorDefault')">鼠标结束悬停状态</el-button>
    <el-button type="primary" @click="handleClick('shuaxinRegion')">截图</el-button>
  </el-space>
  <div id="map" />
</template>

<script>
import { Config, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.2';
import { Application, PixelStreamingApplicationStyle } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2';
export default
  {
    name: 'PlayerView',
    mounted() {
      const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle();
      PixelStreamingApplicationStyles.applyStyleSheet();
      // Example of how to set the logger level      
      // Logger.SetLoggerVerbosity(10);        
      // Create a config object      
      const config = new Config({ useUrlParams: true, serverUrl: '127.0.0.1', serverPort: 80 });
      // Create a Native DOM delegate instance that implements the Delegate interface class      
      const stream = new PixelStreaming(config);
      console.log('stream :>> ', stream);
      this.stream = stream
      const application = new Application({
        stream,
        onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode)
      });
      document.body.appendChild(application.rootElement);
    },
    methods:
    {
      handleClick(params) {
        this.stream.emitUIInteraction({ "type": params, "id": 1 });
      }
    }
  }
</script>

3.3. 打包后

找到打包后的目录，给原本exe文件拉个快捷方式，属性目标后写上 -AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888

然后打开快捷方式运行UE5，web端连接对应的ip和端口