為ThingWebGL端數(shù)字孿生應(yīng)用最優(yōu)解，JS提供Web平臺(tái)的3D渲染能力。

大家都知道，Web平臺(tái)有很多的開源引擎，如：three.js，BabylonJS，PlayCanvas，ClayGL，Oasis等，以及在CS端也有，如：Unity、UE、CryEngine、Ogre等引擎，我們對其中一些引擎做了較深入的研究和項(xiàng)目實(shí)踐，但發(fā)現(xiàn)這些引擎并不能完全滿足我們所面對的數(shù)字孿生領(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版的T3D引擎，以便更好地服務(wù)于Web平臺(tái)的3D渲染。

T3D引擎框架

在T3D引擎的框架設(shè)計(jì)中，主要分為四層：標(biāo)準(zhǔn)封裝層，渲染邏輯層，場景資源層和擴(kuò)展層。

標(biāo)準(zhǔn)封裝層，渲染邏輯層，場景資源層構(gòu)成核心庫 t3d.js。
核心庫是一個(gè)Web優(yōu)先的，最小可運(yùn)行的通用圖形渲染庫。Web優(yōu)先指的是t3d.js主要基于WebGL和WebGPU作為底層繪圖標(biāo)準(zhǔn)。通用圖形渲染庫指的是t3d.js并不限定圖形渲染以外的其它邏輯，適用性與擴(kuò)展性比較好。

另外，官方提供常用需求的擴(kuò)展，作為第二方庫供開發(fā)者使用。至于定制化的需求，支持由開發(fā)者基于T3D開發(fā)第三方庫。

改進(jìn)
渲染引擎封裝的功能，從大的分類來說，可以分為：場景樹，幾何體，材質(zhì)，渲染管線，下面我來簡要介紹一下T3D在這些方面的改進(jìn)。

場景樹

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

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

可擴(kuò)展的渲染層級(jí)列表，更方便的渲染排序?；阡秩緦蛹?jí)，可方便地實(shí)現(xiàn)背景，場景，覆蓋物的排序分離，并基于深度緩沖分層，滿足特定渲染需求。能一定程度上解決透明圖標(biāo)遮擋問題，滿足alwaysOnTop，Overlay的需求等等。（three.js由于沒有渲染分層功能，同一場景內(nèi)的渲染節(jié)點(diǎn)不能通過一次遍歷分發(fā)到不同的渲染數(shù)組中，很難高效地實(shí)現(xiàn)上述功能。）

幾何體

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

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

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

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

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

材質(zhì)

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

渲染管線

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

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

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

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

除了全屏幕的后期處理效果，EffectComposer還提供逐物體的特效解決方案。

未來，T3D還在快速迭代中，未來我們還要做：

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

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

更加強(qiáng)大的WebGPURenderPass。

…

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

關(guān)于UINO優(yōu)锘科技

UINO優(yōu)锘科技成立于2012年，總部位于北京，目前團(tuán)隊(duì)已超過千人，在上海、廣州、深圳、杭州、南京等地均設(shè)有分支。

自成立至今，UINO秉承數(shù)字孿生的理念，以多維空間大數(shù)據(jù)為基礎(chǔ)，致力于打通邏輯世界和物理世界，并憑借三維可視化交互為核心特點(diǎn)的數(shù)字孿生運(yùn)維管理能力，形成了數(shù)據(jù)中心可視化、智慧園區(qū)、智慧城市、智慧消防等多種數(shù)字孿生運(yùn)運(yùn)場景群。

迄今為止，UINO優(yōu)锘科技已服務(wù)了2,000+行業(yè)領(lǐng)軍企業(yè)，并不斷為全行業(yè)客戶提供數(shù)字孿生可視化解決方案。