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

陳根土 鐘娟娟 沈巍

摘? 要：三維可視化廣泛應(yīng)用于游戲、影視、動(dòng)畫、建筑、工業(yè)制造、醫(yī)療等領(lǐng)域。而基于Web的三維可視化更因有著簡(jiǎn)便快捷等優(yōu)點(diǎn)受到人們的喜愛(ài)。UE4引擎應(yīng)用到Web三維可視化領(lǐng)域，給傳統(tǒng)三維可視化帶來(lái)了變革。借助UE4引擎的能力，構(gòu)建一個(gè)逼真、快捷、輕便的三維可視化場(chǎng)景。文章通過(guò)對(duì)UE4引擎的各種能力的研究，并結(jié)合Web三維可視化的業(yè)務(wù)特點(diǎn)，設(shè)計(jì)了基于UE4的Web三維可視化系統(tǒng)的結(jié)構(gòu)，并且給出了每個(gè)結(jié)構(gòu)的具體技術(shù)實(shí)現(xiàn)。

關(guān)鍵詞：UE4引擎;Web;三維可視化

中圖分類號(hào)：TP311? ? ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：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? 引? 言

隨著瀏覽器技術(shù)的發(fā)展，主要是HTML5和WebGL技術(shù)逐步在主流瀏覽器中的普及，基于Web的三維可視化應(yīng)用越來(lái)越多。行業(yè)內(nèi)也出現(xiàn)了不少優(yōu)秀的引擎來(lái)幫助大家快速構(gòu)建三維可視化，比如開(kāi)源的Cesium.js、Three.js，國(guó)內(nèi)也涌現(xiàn)出不少知名廠家如超圖、ThingJS等。但這些引擎普遍存在一些難點(diǎn)：

（1）體大模型的加載難。如文件大小大于1 GB的單個(gè)rvt文件，三角面片大于2 000萬(wàn)的時(shí)候，加載就會(huì)變得非常緩慢，對(duì)網(wǎng)絡(luò)帶寬壓力也非常大。

（2）大量模型的加載難。如一個(gè)城市的所有簡(jiǎn)模，建筑數(shù)量在百萬(wàn)級(jí)，面片數(shù)千萬(wàn)以上。前端內(nèi)存會(huì)被消耗光，即便調(diào)整瀏覽器分配的內(nèi)存也無(wú)濟(jì)于事。

（3）模型的渲染效果差，渲染出來(lái)的真實(shí)感比較差，只能簡(jiǎn)單的示意一下。

但是這些痛點(diǎn)在本地渲染的游戲引擎中通常都不是問(wèn)題。本論文主要圍繞Web三維可視化的上述痛點(diǎn)問(wèn)題，研究了如何結(jié)合UE4的能力來(lái)解決并設(shè)計(jì)了基于UE4的三維可視化系統(tǒng)。

1? 課題研究的意義和創(chuàng)新點(diǎn)

Web三維可視化對(duì)大場(chǎng)景、大模型以及真實(shí)感的需求越來(lái)越多，用戶打開(kāi)瀏覽器往往希望可以快速地基于三維場(chǎng)景進(jìn)行業(yè)務(wù)的操作。而這些在通常的Web三維引擎中通常很難做到。課題主要研究UE4的PBR材質(zhì)系統(tǒng)、lod技術(shù)，WebRTC技術(shù)等，并通過(guò)對(duì)這些技術(shù)的整合實(shí)現(xiàn)在網(wǎng)絡(luò)帶寬只有2～8 Mbps，僅使用普通的PC電腦就能實(shí)現(xiàn)海量模型的三維可視化，并且用戶可以在秒加載場(chǎng)景的情況下進(jìn)行各種三維可視化的業(yè)務(wù)操作。

UE4（Unreal Engine 4）是目前世界上最知名、最頂尖的3D游戲引擎。UE4的畫質(zhì)效果完全達(dá)到3A游戲大作的水準(zhǔn)。本課題創(chuàng)造性地將UE4應(yīng)用于Web三維可視化，提升了Web三維可視化的視覺(jué)效果，并通過(guò)WebRTC技術(shù)實(shí)現(xiàn)了在普通用戶電腦也可以享受3A游戲大作的三維可視化效果。

2? UE4像素流技術(shù)

Web可視化主要依靠UE4的像素流能力，他是整個(gè)Web可視化的基石。像素流技術(shù)在遠(yuǎn)端先將圖像渲染好，再通過(guò)WebRTC協(xié)議發(fā)送給瀏覽器。用戶端僅需較少的帶寬即可在低性能的設(shè)備上還原逼真的畫質(zhì)。架構(gòu)圖如圖1所示。

2.1? UE4材質(zhì)系統(tǒng)

Web可視化的逼真設(shè)計(jì)效果可以基于UE4的材質(zhì)系統(tǒng)，UE4簡(jiǎn)化了材質(zhì)的制作流程，用戶只需要簡(jiǎn)單的連線即可設(shè)計(jì)出逼真的效果，其基于PBR的材質(zhì)系統(tǒng)可以更加準(zhǔn)確和自然的還原真實(shí)的外觀。UE4材質(zhì)編輯器截圖如圖2所示。

2.2? UE4流關(guān)卡技術(shù)

Web可視化對(duì)大場(chǎng)景的支持可以基于UE4的關(guān)卡流集成。UE4提供的關(guān)卡流技術(shù)可以將大場(chǎng)景分拆成一個(gè)個(gè)小的區(qū)塊，通過(guò)控制區(qū)塊的動(dòng)態(tài)加載和卸載可以大大降低內(nèi)存的使用，為大規(guī)模場(chǎng)景的可視化提供的可能。圖3為關(guān)卡拼接示例。

2.3? UE4的HLOD技術(shù)

Web可視化對(duì)大量精細(xì)度很高模型的支持可以基于UE4的Hlod技術(shù)。UE4的Hlod可以將模型進(jìn)行合并簡(jiǎn)化，當(dāng)距離較遠(yuǎn)時(shí)采用單個(gè)精細(xì)度不高的模型，當(dāng)距離較近的時(shí)候又恢復(fù)回來(lái)。這樣可以在用戶無(wú)感的情況下，大大提高了三角面的最大渲染上限。Hlod截圖如圖4所示。

2.4? 基于UE4的Web可視化架構(gòu)

我們的可視化架構(gòu)基于常用的前后端分離架構(gòu)進(jìn)行改造，增加了UE4模塊并引入了消息中間件MQTT實(shí)現(xiàn)UE4與Web后臺(tái)的通信。整體的架構(gòu)圖如圖5所示。

2.5? UE4Mqtt插件實(shí)現(xiàn)

UE4的MQTT插件基于paho.mqtt庫(kù)進(jìn)行二次封裝，并提供了6個(gè)函數(shù)給藍(lán)圖調(diào)用。接口定義如下文所示：

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）;

每個(gè)函數(shù)上方都有一個(gè)UFUNTION的代碼，這個(gè)是UE4的約定。BlueprintCallable表示這個(gè)函數(shù)在藍(lán)圖中可以調(diào)用，Category表示這個(gè)函數(shù)的分類。對(duì)paho.mqtt庫(kù)的調(diào)用，我們采用延遲加載技術(shù)，就是當(dāng)實(shí)際需要插件的時(shí)候才會(huì)動(dòng)態(tài)加載引用的庫(kù)，而加載我們會(huì)在插件的初始化函數(shù)里面加載。延遲加載的好處是按需加載，在插件沒(méi)有使用的情況下不占用資源。

2.6? Vue前端實(shí)現(xiàn)

UE4在三維可視化的場(chǎng)景和模型渲染方面優(yōu)勢(shì)巨大，但是在面向普通的圖表、操作業(yè)務(wù)方面并沒(méi)有太多優(yōu)勢(shì)。這一塊我們還是采用主流的前端開(kāi)發(fā)技術(shù)。即我們整個(gè)框架后臺(tái)渲染負(fù)責(zé)渲染場(chǎng)景，前端渲染負(fù)責(zé)業(yè)務(wù)實(shí)現(xiàn)，從而可以達(dá)到各司其職，業(yè)務(wù)互補(bǔ)。Vue的整體開(kāi)發(fā)框架如圖6所示。

2.7? SpringBoot后端實(shí)現(xiàn)

后端的業(yè)務(wù)處理我們使用SpringBoot開(kāi)發(fā)，與UE4的通信采用MQTT協(xié)議完成，與前端的通信采用Restful的Api實(shí)現(xiàn)，數(shù)據(jù)存儲(chǔ)在Mysql中。Mysql對(duì)接采用mybatis框架實(shí)現(xiàn)，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的數(shù)據(jù)庫(kù)連接驅(qū)動(dòng)

druid-spring-boot-starter：為數(shù)據(jù)庫(kù)連接池

Mqtt協(xié)議對(duì)接我們依舊采用eclipse開(kāi)發(fā)的pacho庫(kù)來(lái)實(shí)現(xiàn)。在pom.xml中引入：

org.eclipse.paho

org.eclipse.paho.client.mqttv3

1.2.0

3? 結(jié)? 論

通過(guò)本課題的研究，我們基于UE4的材質(zhì)系統(tǒng)、流關(guān)卡技術(shù)、像素流技術(shù)、HLOD技術(shù)并結(jié)合傳統(tǒng)的SpringBoot和Vue進(jìn)行Web開(kāi)發(fā)，解決了Web三維可視化的模型加載難，網(wǎng)絡(luò)壓力大，渲染效果差的問(wèn)題。讓用戶基于普通的電腦和網(wǎng)絡(luò)就能享受3A畫質(zhì)的三維可視化。但是由于時(shí)間關(guān)系，我們對(duì)UE4還不太了解，特別是UE4如何與GIS系統(tǒng)融合來(lái)解決相關(guān)問(wèn)題還需要繼續(xù)研究，后續(xù)我們會(huì)不斷探索。

參考文獻(xiàn)：

[1] 楊豫婷.UE4引擎技術(shù)在建筑可視化設(shè)計(jì)中的應(yīng)用研究 [D].湖北：湖北工業(yè)大學(xué)，2018.

[2] 楊燕.三維場(chǎng)景中地形與建筑物集成可視化技術(shù)研究 [D].南京：東南大學(xué)，2019.

[3] 吳剛.基于Unreal蔡甸區(qū)交通道路擁堵分析研究 [D].荊州：長(zhǎng)江大學(xué)，2019.

[4] 賀紫珺.基于SpringBoot和Vue框架的第三方醫(yī)療器械供應(yīng)鏈平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn) [D].上海：東華大學(xué)，2019.

[5] 張鵬飛.基于Unreal Engine的室內(nèi)外一體化真三維虛擬校園環(huán)境構(gòu)建 [D].武漢：華中師范大學(xué)，2019.

[6] 關(guān)峰.基于Web3D的建筑信息模型輕量級(jí)可視化研究 [D].湖北：湖北工業(yè)大學(xué)，2018.

[7] 周信文.基于WebGIS的三維數(shù)字地球可視化框架研究與實(shí)現(xiàn) [D].南昌：江西師范大學(xué)，2019.

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

[9] 趙菲.基于WebGL的古建筑BIM模型輕量化研究與實(shí)現(xiàn) [D] 西安：西安建筑科技大學(xué)，2018.

[10] 于冰洋.基于WebGL的三維場(chǎng)景開(kāi)發(fā)與應(yīng)用的研究 [D].成都：成都理工大學(xué)，2019.

作者簡(jiǎn)介：陳根土（1974—），男，漢族，浙江杭州人，高級(jí)工程師，碩士，研究方向：物聯(lián)網(wǎng)、指揮調(diào)度、三維可視化等;鐘娟娟（1979—），女，漢族，福建龍巖人，高級(jí)工程師，碩士，研究方向：物聯(lián)網(wǎng)、大數(shù)據(jù)、三維可視化等;沈?。?988—），男，漢族，江蘇東臺(tái)人，中級(jí)工程師，碩士，研究方向：三維可視化、音視頻流媒體等。