上一期講了什么是3D引擎以及3D引擎的發(fā)展史，本期回到數(shù)字孿生引擎：

什么是B/S架構(gòu)和C/S架構(gòu)？

WebGL與WebGPU又有什么關(guān)系？

開發(fā)數(shù)字孿生必須要用數(shù)字孿生引擎嗎？游戲引擎不是也可以開發(fā)數(shù)字孿生嗎？

什么是B/S與C/S架構(gòu)？

常見的3D引擎可以分成兩大類，一類是Native3D引擎（客戶端），這類引擎以Unity、UE4等游戲引擎為主，另一類是Web3D引擎（瀏覽器），以ThingJS 3D等基于WebGL和WebGPU開發(fā)的渲染引擎為主。

所以，目前數(shù)字孿生市場(chǎng)上有兩種技術(shù)路線，一個(gè)是基于游戲3D引擎的走C/S架構(gòu)的，一個(gè)是基于Web 3D引擎的走B/S架構(gòu)。

先來(lái)說(shuō)說(shuō)什么是C/S架構(gòu)，C/S架構(gòu)是第一種比較早的軟件架構(gòu)，主要用于局域網(wǎng)內(nèi)，分為客戶機(jī)和服務(wù)器兩層。C/S架構(gòu)軟件有一個(gè)特點(diǎn)，就是如果用戶要使用的話，需要下載一個(gè)客戶端，安裝后就可以使用。例如，Office、QQ等軟件。

B/S架構(gòu)的全稱為Browser/Server，即瀏覽器/服務(wù)器結(jié)構(gòu)，Browser指的是Web瀏覽器，極少數(shù)事務(wù)邏輯在前端實(shí)現(xiàn)，但主要事務(wù)邏輯在服務(wù)器端實(shí)現(xiàn)，分為表現(xiàn)層、邏輯層和數(shù)據(jù)層三層。B/S架構(gòu)的系統(tǒng)無(wú)需特別安裝，只用Web瀏覽器即可。

C/S架構(gòu)數(shù)字孿生系統(tǒng)缺點(diǎn)顯而易見，它只能安裝在局域網(wǎng)中，需要下載才能使用，一般規(guī)模的數(shù)字孿生系統(tǒng)都得十幾個(gè)甚至幾十個(gè)G，每次升級(jí)都要更新所有客戶端，優(yōu)點(diǎn)就是效果足夠精美，且只有一層交互，因此響應(yīng)速度較快。B/S架構(gòu)數(shù)字孿生系統(tǒng)效果可能不如C/S架構(gòu)效果那么好，優(yōu)點(diǎn)是無(wú)需安裝，可以直接放在廣域網(wǎng)上，通過(guò)一定的權(quán)限控制實(shí)現(xiàn)多客戶訪問(wèn)的目的，交互性較強(qiáng)。

WebGL與WebGPU的區(qū)別與聯(lián)系

提到WebGL與WebGPU，必須要提OpenGL圖形渲染接口，了解的朋友可能比較熟悉，OpenGL是一個(gè)跨平臺(tái)的行業(yè)標(biāo)準(zhǔn)，可以部署在Windows、MacOS、Linux、Andriod和iOS上，而且學(xué)習(xí)門檻很低，使用場(chǎng)景更加廣泛，除游戲外，大量的工業(yè)設(shè)計(jì)、仿真和數(shù)字孿生應(yīng)用都在使用OpenGL。

OpenGL是一個(gè)很大的家族，最早的OpenGL1.0是1991年發(fā)布的，后來(lái)每隔幾年都會(huì)更新一個(gè)版本。到了2012年WebGL才發(fā)布。WebGL天然是擁抱瀏覽器的，它以O(shè)penGL ES為基礎(chǔ)，做了一些API裁剪和瀏覽器適配。

WebGL誕生的背景是因?yàn)榛ヂ?lián)網(wǎng)的高速發(fā)展，基于瀏覽器的Web應(yīng)用越來(lái)越廣泛。程序員們就想，安裝那么多插件實(shí)在太麻煩，能否用瀏覽器直接訪問(wèn)3D應(yīng)用呢？而且C++和C#太難學(xué)，能不能直接用JavaScript開發(fā)3D應(yīng)用程序呢？于是，WebGL在千呼萬(wàn)喚中應(yīng)運(yùn)而生。

而WebGPU是GPU顯卡硬件向?yàn)g覽器開放的低級(jí)應(yīng)用程序接口，底層是基于 Vulkan、Metal和DirectThingJS 3D 12，是WebGL的升級(jí)版，更好地支持和開放了GPU顯卡的最新技術(shù)，能提供更好的性能，更好地支持多線程，更好地使用GPU實(shí)現(xiàn)很多渲染和計(jì)算上的優(yōu)化，并采用了面向?qū)ο蟮?a target="_blank">編程風(fēng)格。

為什么說(shuō)游戲引擎并不是做數(shù)字孿生的最佳選擇？

為什么游戲引擎不是做數(shù)字孿生的最佳選擇？其實(shí)《游戲引擎架構(gòu)》這本書中給出了答案：在游戲領(lǐng)域，沒有所謂最好的引擎，只有最合適的引擎，這句話同樣適用于數(shù)字孿生領(lǐng)域。

那回到本文的主題，如何選擇最合適數(shù)字孿生項(xiàng)目的引擎呢？在思考這個(gè)問(wèn)題前，我們先要搞清楚數(shù)字孿生場(chǎng)景和游戲場(chǎng)景的區(qū)別。

做數(shù)字孿生，主要的業(yè)務(wù)場(chǎng)景是城市、園區(qū)、樓宇和數(shù)據(jù)中心的運(yùn)營(yíng)管理，業(yè)務(wù)價(jià)值是幫助人們更好地認(rèn)知和管理現(xiàn)實(shí)世界。所以，這種業(yè)務(wù)場(chǎng)景和游戲有很大的區(qū)別。游戲大都是封閉的虛擬世界，里面出現(xiàn)的人物、事件和地點(diǎn)都是事先設(shè)計(jì)好的，游戲中做出的決策也不會(huì)影響現(xiàn)實(shí)世界。

而數(shù)字孿生是用來(lái)管理現(xiàn)實(shí)世界的，現(xiàn)實(shí)世界有大量的工具平臺(tái)需要兼容和集成、有大量的實(shí)時(shí)數(shù)據(jù)需要接入和處理，這些都是傳統(tǒng)游戲引擎難以適應(yīng)的。

另外，現(xiàn)實(shí)世界的管理需求在不斷演變，數(shù)字孿生應(yīng)用就需要不停地迭代，甚至以周為單位交付新的管理功能。如果用游戲引擎來(lái)做數(shù)字孿生應(yīng)用開發(fā)周期長(zhǎng)且不說(shuō)，而且迭代起來(lái)非常麻煩。因此就需要一個(gè)低門檻、易調(diào)試、高性能的引擎來(lái)開發(fā)數(shù)字孿生應(yīng)用。

所以數(shù)字孿生的最佳引擎應(yīng)該具備以下特點(diǎn)：

1??支持海量實(shí)時(shí)數(shù)據(jù)驅(qū)動(dòng)現(xiàn)實(shí)世界有大量的傳感器，這就需要數(shù)字孿生體是能夠被實(shí)時(shí)數(shù)據(jù)驅(qū)動(dòng)的，能夠根據(jù)數(shù)據(jù)狀態(tài)的變化而變化

2??支持與第三方物聯(lián)系統(tǒng)的無(wú)縫整合目前物聯(lián)網(wǎng)領(lǐng)域已經(jīng)有眾多的樓宇監(jiān)控系統(tǒng)、資產(chǎn)管理系統(tǒng)和物聯(lián)控制系統(tǒng)存在，數(shù)字孿生系統(tǒng)并非要取代這些系統(tǒng)工具，而是實(shí)現(xiàn)數(shù)據(jù)互通和界面整合，而且大部分已有系統(tǒng)都是Web應(yīng)用，所以數(shù)字孿生引擎必須兼容Web應(yīng)用

3??更快的需求響應(yīng)速度和適變能力對(duì)于一個(gè)現(xiàn)實(shí)世界的管理系統(tǒng)而言，管理場(chǎng)景會(huì)不斷演進(jìn)，功能需求也會(huì)不斷變化，系統(tǒng)要發(fā)揮價(jià)值，就必須不斷地優(yōu)化，疊加新功能，所以開發(fā)的效率十分重要。要提升開發(fā)效率，最好的辦法是采用前端編程語(yǔ)言，Javascript是前端開發(fā)者使用最廣泛的語(yǔ)言，學(xué)習(xí)門檻低，開發(fā)效率遠(yuǎn)遠(yuǎn)高于傳統(tǒng)游戲引擎。

為數(shù)字孿生而生的渲染引擎——ThingJS 3D

UINO優(yōu)锘的ThingJS 3D渲染引擎是一款Web 3D渲染引擎。很多伙伴可能想問(wèn)，Web平臺(tái)有很多的開源引擎，如：three.js，BabylonJS，PlayCanvas，ClayGL，Oasis等，以及在CS端也有，如：Unity、UE、CryEngine、Ogre等引擎，為什么UINO優(yōu)锘要開發(fā)自己的引擎呢？

UINO優(yōu)锘自2012年創(chuàng)立之初，就在項(xiàng)目中對(duì)一些引擎做了較深入的研究和實(shí)踐，發(fā)現(xiàn)這些引擎并不能完全滿足我們所面對(duì)的領(lǐng)域的需求。

這種情況下，我們結(jié)合了之前使用C++開發(fā)的引擎經(jīng)驗(yàn)、WebGL的開發(fā)經(jīng)驗(yàn)、上述引擎的使用經(jīng)驗(yàn)、以及項(xiàng)目中的實(shí)踐經(jīng)驗(yàn)，開發(fā)了WebGL版的ThingJS 3D引擎，以便更好地服務(wù)于Web平臺(tái)的3D渲染。

ThingJS 3D渲染效果

在ThingJS 3D渲染引擎的框架設(shè)計(jì)中，主要分為四層：標(biāo)準(zhǔn)封裝層，渲染邏輯層，場(chǎng)景資源層和擴(kuò)展層。標(biāo)準(zhǔn)封裝層，渲染邏輯層，場(chǎng)景資源層構(gòu)成核心庫(kù) ThingJS 3D。

核心庫(kù)是一個(gè)Web優(yōu)先的，最小可運(yùn)行的通用圖形渲染庫(kù)。Web優(yōu)先指的是ThingJS 3D主要基于WebGL和WebGPU作為底層繪圖標(biāo)準(zhǔn)。通用圖形渲染庫(kù)指的是ThingJS 3D并不限定圖形渲染以外的其它邏輯，適用性與擴(kuò)展性比較好。另外，UINO優(yōu)锘官方提供常用需求的擴(kuò)展，作為第二方庫(kù)供開發(fā)者使用。至于定制化的需求，支持由開發(fā)者基于ThingJS 3D開發(fā)第三方庫(kù)。

ThingJS 3D渲染引擎架構(gòu)

渲染引擎封裝的功能，從大的分類來(lái)說(shuō)，可以分為：場(chǎng)景樹，幾何體，材質(zhì)，渲染管線，下面簡(jiǎn)要介紹一下ThingJS 3D在這些方面的改進(jìn)：

1??場(chǎng)景樹

改進(jìn)了場(chǎng)景樹矩陣更新的邏輯，基于內(nèi)置的矩陣標(biāo)臟系統(tǒng)，可以進(jìn)行觸發(fā)式更新。簡(jiǎn)單理解就是，有改變?cè)俑?，不改變不更新，在大多?shù)項(xiàng)目中，可以極大提高矩陣更新效率，從而提升渲染幀率。

優(yōu)化Uniform的預(yù)處理，場(chǎng)景中全局參數(shù)，燈光參數(shù)，可以單獨(dú)進(jìn)行更新并cache，提高Uniform上傳效率。

可擴(kuò)展的渲染層級(jí)列表，更方便地渲染排序?；阡秩緦蛹?jí)，可方便地實(shí)現(xiàn)背景，場(chǎng)景，覆蓋物的排序分離，并基于深度緩沖分層，滿足特定渲染需求。能一定程度上解決透明圖標(biāo)遮擋問(wèn)題，滿足alwaysOnTop，Overlay的需求等等。

2??幾何體

核心庫(kù)提供Geometry，Attribute，Buffer類，提供逐頂點(diǎn)的幾何體描述。同時(shí)支持Instance繪制?；趲缀误w的封裝，我們可以接收多種類型的數(shù)據(jù)進(jìn)行渲染：

模型加載器，例如核心庫(kù)示例部分提供的GLTFLoader，VoxLoader等

程序生成，例如：點(diǎn)，線，面，管，擠出等

自定義數(shù)據(jù)，例如第三方GIS數(shù)據(jù)，實(shí)時(shí)傳輸數(shù)據(jù)等

在點(diǎn)線面的擴(kuò)展上，ThingJS 3D的官方示例部分，會(huì)提供業(yè)務(wù)場(chǎng)景（ThingJS）中常用的幾何體生成計(jì)算模塊。

3??材質(zhì)

一般的Web渲染引擎中，很難基于內(nèi)置材質(zhì)進(jìn)行擴(kuò)展。例如three.js，材質(zhì)的Uniform上傳與材質(zhì)類型是深度耦合的，因此很難基于Standard材質(zhì)實(shí)現(xiàn)掃光等材質(zhì)特效。ThingJS 3D提供了材質(zhì)繼承機(jī)制，只需要簡(jiǎn)單插入著色器邏輯，即可實(shí)現(xiàn)對(duì)PBR材質(zhì)的快捷修改。

4??渲染管線

常見的WebGL引擎中，渲染器的渲染功能容易是過(guò)度耦合的。ThingJS 3D面向基于GPU加速的圖形接口，即WebGL與WebGPU，基于這樣的思路，我們抽離出RenderPass的概念。

目前我們提供WebGLRenderPass作為默認(rèn)的渲染通道，未來(lái)，幾乎可以無(wú)縫切換到WebGPURenderPass。這樣在我們推出WebGPU渲染器后，不需要改變上層代碼邏輯，即可直接實(shí)現(xiàn)WebGPU的渲染。

另外，ThingJS 3D提供的接口可以單獨(dú)處理“場(chǎng)景圖信息的收集”與“渲染列表的生成”，并可以執(zhí)行力度更低的渲染命令。便于實(shí)現(xiàn)高性能的后處理流程擴(kuò)展。在實(shí)際渲染中，物體勾邊，發(fā)光等后期，往往需要多通道的渲染。在下圖中，同樣是執(zhí)行兩通道的渲染，ThingJS 3D執(zhí)行的流程，能避免很多冗余的邏輯。

基于這樣的設(shè)計(jì)，我們提供了高級(jí)渲染器（EffectComposer）的擴(kuò)展。高級(jí)渲染器是一個(gè)后期混合器，并內(nèi)置了常用的后期處理模塊。高級(jí)渲染器為ThingJS提供了豐富的后期特效支持。

除了全屏幕的后期處理效果，EffectComposer還提供逐物體的特效解決方案。未來(lái)，ThingJS 3D還在快速迭代中，未來(lái)我們還要做：

基于Transform Feedback特性的更強(qiáng)大的粒子系統(tǒng)

節(jié)點(diǎn)式材質(zhì)系統(tǒng)

更加強(qiáng)大的WebGPURenderPass

綜上所述，ThingJS 3D為Web平臺(tái)提供強(qiáng)大的3D渲染能力。基于ThingJS 3D引擎，能實(shí)現(xiàn)豐富的幾何體定制，材質(zhì)定制和渲染管線定制。未來(lái)ThingJS 3D將本著開放，共享的原則，不斷演進(jìn)，為用戶提升渲染效果和渲染性能，保證ThingJS在Web端優(yōu)異的渲染能力。

審核編輯黃宇