基于UE4的Web三维可视化研究.docx

    基于UE4的Web三维可视化研究    陈根土 钟娟娟 沈巍摘  要：三维可视化广泛应用于游戏、影视、动画、建筑、工业制造、医疗等领域而基于Web的三维可视化更因有着简便快捷等优点受到人们的喜爱UE4引擎应用到Web三维可视化领域，给传统三维可视化带来了变革借助UE4引擎的能力，构建一个逼真、快捷、轻便的三维可视化场景文章通过对UE4引擎的各种能力的研究，并结合Web三维可视化的业务特点，设计了基于UE4的Web三维可视化系统的结构，并且给出了每个结构的具体技术实现Key：UE4引擎;Web;三维可视化：TP311         ：A：2096-4706（2021）23-0017-04Research on Web 3D Visualization Based on UE4CHEN Gentu， ZHONG Juanjuan， SHEN Wei（Zhejiang University Insigma System Engineering Co.， Ltd.， Hangzhou  310012， China）Abstract： 3D visualization is widely used in games， film and television， animation， architecture， industrial manufacturing， medical and other fields. The 3D visualization based on Web is loved by people because of its simplicity and quickness. The application of UE4 engine in the field of Web 3D visualization has brought changes to the traditional 3D visualization. With the ability of UE4 engine， we can build a realistic， fast and portable 3D visualization scene. In this paper， through the research of various capabilities of UE4 engine， combined with the business characteristics of Web 3D visualization， the structure of Web 3D visualization system based on UE4 is designed， and the specific technical implementation of each structure is also given.Keywords： UE4 engine; Web; 3D visualization0  引  言随着浏览器技术的发展，主要是HTML5和WebGL技术逐步在主流浏览器中的普及，基于Web的三维可视化应用越来越多。

行业内也出现了不少优秀的引擎来帮助大家快速构建三维可视化，比如开源的Cesium.js、Three.js，国内也涌现出不少知名厂家如超图、ThingJS等但这些引擎普遍存在一些难点：（1）体大模型的加载难如文件大小大于1 GB的单个rvt文件，三角面片大于2 000万的时候，加载就会变得非常缓慢，对网络带宽压力也非常大2）大量模型的加载难如一个城市的所有简模，建筑数量在百万级，面片数千万以上前端内存会被消耗光，即便调整浏览器分配的内存也无济于事3）模型的渲染效果差，渲染出来的真实感比较差，只能简单的示意一下但是这些痛点在本地渲染的游戏引擎中通常都不是问题本论文主要围绕Web三维可视化的上述痛点问题，研究了如何结合UE4的能力来解决并设计了基于UE4的三维可视化系统1  课题研究的意义和创新点Web三维可视化对大场景、大模型以及真实感的需求越来越多，用户打开浏览器往往希望可以快速地基于三维场景进行业务的操作而这些在通常的Web三维引擎中通常很难做到课题主要研究UE4的PBR材质系统、lod技术，WebRTC技术等，并通过对这些技术的整合实现在网络带宽只有2～8 Mbps，仅使用普通的PC电脑就能实现海量模型的三维可视化，并且用户可以在秒加載场景的情况下进行各种三维可视化的业务操作。

UE4（Unreal Engine 4）是目前世界上最知名、最顶尖的3D游戏引擎UE4的画质效果完全达到3A游戏大作的水准本课题创造性地将UE4应用于Web三维可视化，提升了Web三维可视化的视觉效果，并通过WebRTC技术实现了在普通用户电脑也可以享受3A游戏大作的三维可视化效果2  UE4像素流技术Web可视化主要依靠UE4的像素流能力，他是整个Web可视化的基石像素流技术在远端先将图像渲染好，再通过WebRTC协议发送给浏览器用户端仅需较少的带宽即可在低性能的设备上还原逼真的画质架构图如图1所示2.1  UE4材质系统Web可视化的逼真设计效果可以基于UE4的材质系统，UE4简化了材质的制作流程，用户只需要简单的连线即可设计出逼真的效果，其基于PBR的材质系统可以更加准确和自然的还原真实的外观UE4材质编辑器截图如图2所示2.2  UE4流关卡技术Web可视化对大场景的支持可以基于UE4的关卡流集成UE4提供的关卡流技术可以将大场景分拆成一个个小的区块，通过控制区块的动态加载和卸载可以大大降低内存的使用，为大规模场景的可视化提供的可能图3为关卡拼接示例2.3  UE4的HLOD技术Web可视化对大量精细度很高模型的支持可以基于UE4的Hlod技术。

UE4的Hlod可以将模型进行合并简化，当距离较远时采用单个精细度不高的模型，当距离较近的时候又恢复回来这样可以在用户无感的情况下，大大提高了三角面的最大渲染上限Hlod截图如图4所示2.4  基于UE4的Web可视化架构我们的可视化架构基于常用的前后端分离架构进行改造，增加了UE4模块并引入了消息中间件MQTT实现UE4与Web后台的通信整体的架构图如图5所示2.5  UE4Mqtt插件实现UE4的MQTT插件基于paho.mqtt库进行二次封装，并提供了6个函数给蓝图调用接口定义如下文所示：public：UFUNCTION（BlueprintCallable， Category = “MqttFun”）void Init（）;UFUNCTION（BlueprintCallable， Category = “MqttFun”）void UnInit（）;UFUNCTION（BlueprintCallable， Category = “MqttFun”）void AddTopic（FString topic）;UFUNCTION（BlueprintCallable， Category = “MqttFun”）int ConnectIn（FString serverAddr， FString userName， FString userPsw， FString clientId）;UFUNCTION（BlueprintImplementableEvent， Category = “MqttFun”）void MessageArrivedCallBack（const FString& topic， const FString& message）;UFUNCTION（BlueprintCallable， Category = “MqttFun”）void SendInfo（const FString& topic， const FString& info）;每个函数上方都有一个UFUNTION的代码，这个是UE4的约定。

BlueprintCallable表示这个函数在蓝图中可以调用，Category表示这个函数的分类对paho.mqtt库的调用，我们采用延迟加载技术，就是当实际需要插件的时候才会动态加载引用的库，而加载我们会在插件的初始化函数里面加载延迟加载的好处是按需加载，在插件没有使用的情况下不占用资源2.6  Vue前端实现UE4在三维可视化的场景和模型渲染方面优势巨大，但是在面向普通的图表、操作业务方面并没有太多优势这一块我们还是采用主流的前端开发技术即我们整个框架后台渲染负责渲染场景，前端渲染负责业务实现，从而可以达到各司其职，业务互补Vue的整体开发框架如图6所示2.7  SpringBoot后端实现后端的业务处理我们使用SpringBoot开发，与UE4的通信采用MQTT协议完成，与前端的通信采用Restful的Api实现，数据存储在Mysql中Mysql对接采用mybatis框架实现，pom中引入：public：UFUNCTION（BlueprintCallable， Category = “MqttFun”）void Init（）;UFUNCTION（BlueprintCallable， Category = “MqttFun”）void UnInit（）;UFUNCTION（BlueprintCallable， Category = “MqttFun”）void AddTopic（FString topic）;UFUNCTION（BlueprintCallable， Category = “MqttFun”）int ConnectIn（FString serverAddr， FString userName， FString userPsw， FString clientId）;UFUNCTION（BlueprintImplementableEvent， Category = “MqttFun”）void MessageArrivedCallBack（const FString& topic， const FString& message）;UFUNCTION（BlueprintCallable， Category = “MqttFun”）void SendInfo（const FString& topic， const FString& info）;其中：mybatis-spring-boot-starter：為mybatis框架mysql-connector-java：为mysql的数据库连接驱动druid-spring-boot-starter：为数据库连接池Mqtt协议对接我们依旧采用eclipse开发的pacho库来实现。

在pom.xml中引入：org.eclipse.pahoorg.eclipse.paho.client.mqttv31.2.03  結  论通过本课题的研究，我们基于UE4的材质系统、流关卡技术、像素流技术、HLOD技术并结合传统的SpringBoot和Vue进行Web开发，解决了Web三维可视化的模型加载难，网络压力大，渲染效果差的问题让用户基于普通的电脑和网络就能享受3A画质的三维可视化但是由于时间关系，我们对UE4还不太了解，特别是UE4如何与GIS系统融合来解决相关问题还需要继续研究，后续我们会不断探索Reference：[1] 杨豫婷.UE4引擎技术在建筑可视化设计中的应用研究 [D].湖北：湖北工业大学，2018.[2] 杨燕.三维场景中地形与建筑物集成可视化技术研究 [D].南京：东南大学，2019.[3]。