虚幻引擎5学习笔记(二)

虚幻引擎5学习笔记(二)

2024年05月24日 阅读:15 字数:1040 阅读时长:3 分钟

本文主要记录使用Cesium for Unreal将Cesium的3D地理空间功能与虚幻引擎的高保真渲染能力相结合,为游戏引擎解锁3D地理空间生态系统;并借助像素流送推到Web前端进行展示。

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

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

1. Cesium for Unreal

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

1.1. 三维模型

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

1015763f85fb8f95.png

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

1.2. 光照环境

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

676bae8cadefa671.png

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

1.3. 相机

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

b53349db1d255f44.png

8c5a3de0e2847f0b.png

1.4. 地形服务

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

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

1.5. 地理空间

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

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

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

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

2. 蓝图操作Cesium

2.1. 修改位置

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

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

65babaa85a76d9ff.png

2.2. 修改视角

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

db3e68b16de5d205.png

3. 像素流送

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

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

f260726478c5fa14.png

3.1. UE5

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

c29538825129553b.png

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

7c61c4793f171d56.png

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和端口 

3eb0b272fd3b2ac1.png

推荐阅读

恰饭区

评论区 (0)

0/500

还没有评论,快来抢第一吧