基于UE4的Web三維可視化研究

陳根土 鐘娟娟 沈巍

摘? 要：三維可視化廣泛應用于游戲、影視、動畫、建筑、工業制造、醫療等領域。而基于Web的三維可視化更因有著簡便快捷等優點受到人們的喜愛。UE4引擎應用到Web三維可視化領域，給傳統三維可視化帶來了變革。借助UE4引擎的能力，構建一個逼真、快捷、輕便的三維可視化場景。文章通過對UE4引擎的各種能力的研究，并結合Web三維可視化的業務特點，設計了基于UE4的Web三維可視化系統的結構，并且給出了每個結構的具體技術實現。

關鍵詞：UE4引擎;Web;三維可視化

中圖分類號：TP311? ? ? ? ?文獻標識碼：A文章編號：2096-4706（2021）23-0017-04

Research on Web 3D Visualization Based on UE4

CHEN 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 visualization

0? 引? 言

隨著瀏覽器技術的發展，主要是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.paho

org.eclipse.paho.client.mqttv3

1.2.0

3? 結? 論

通過本課題的研究，我們基于UE4的材質系統、流關卡技術、像素流技術、HLOD技術并結合傳統的SpringBoot和Vue進行Web開發，解決了Web三維可視化的模型加載難，網絡壓力大，渲染效果差的問題。讓用戶基于普通的電腦和網絡就能享受3A畫質的三維可視化。但是由于時間關系，我們對UE4還不太了解，特別是UE4如何與GIS系統融合來解決相關問題還需要繼續研究，后續我們會不斷探索。

參考文獻：

[1] 楊豫婷.UE4引擎技術在建筑可視化設計中的應用研究 [D].湖北：湖北工業大學，2018.

[2] 楊燕.三維場景中地形與建筑物集成可視化技術研究 [D].南京：東南大學，2019.

[3] 吳剛.基于Unreal蔡甸區交通道路擁堵分析研究 [D].荊州：長江大學，2019.

[4] 賀紫珺.基于SpringBoot和Vue框架的第三方醫療器械供應鏈平臺的設計與實現 [D].上海：東華大學，2019.

[5] 張鵬飛.基于Unreal Engine的室內外一體化真三維虛擬校園環境構建 [D].武漢：華中師范大學，2019.

[6] 關峰.基于Web3D的建筑信息模型輕量級可視化研究 [D].湖北：湖北工業大學，2018.

[7] 周信文.基于WebGIS的三維數字地球可視化框架研究與實現 [D].南昌：江西師范大學，2019.

[8] 郭建雄.基于WebGL的地理信息數據三維可視化方法研究 [D].撫州：東華理工大學，2019.

[9] 趙菲.基于WebGL的古建筑BIM模型輕量化研究與實現 [D] 西安：西安建筑科技大學，2018.

[10] 于冰洋.基于WebGL的三維場景開發與應用的研究 [D].成都：成都理工大學，2019.

作者簡介：陳根土（1974—），男，漢族，浙江杭州人，高級工程師，碩士，研究方向：物聯網、指揮調度、三維可視化等;鐘娟娟（1979—），女，漢族，福建龍巖人，高級工程師，碩士，研究方向：物聯網、大數據、三維可視化等;沈巍（1988—），男，漢族，江蘇東臺人，中級工程師，碩士，研究方向：三維可視化、音視頻流媒體等。