優鍩科技:渲染引擎T3D:WebGL端數字孿生應用最優解

為ThingWebGL端數字孿生應用最優解,JS提供Web平臺的3D渲染能力。

大家都知道,Web平臺有很多的開源引擎,如:three。js,BabylonJS,PlayCanvas,ClayGL,Oasis等,以及在CS端也有,如:Unity、UE、CryEngine、Ogre等引擎,我們對其中一些引擎做了較深入的研究和專案實踐,但發現這些引擎並不能完全滿足我們所面對的數字孿生領域的需求。這種情況下,我們結合了之前使用C++開發的引擎經驗、WebGL的開發經驗、上述引擎的使用經驗、以及專案中的實踐經驗,開發了WebGL版的T3D引擎,以便更好地服務於Web平臺的3D渲染。

優鍩科技:渲染引擎T3D:WebGL端數字孿生應用最優解

T3D引擎框架

優鍩科技:渲染引擎T3D:WebGL端數字孿生應用最優解

在T3D引擎的框架設計中,主要分為四層:標準封裝層,渲染邏輯層,場景資源層和擴充套件層。

標準封裝層,渲染邏輯層,場景資源層構成核心庫 t3d。js。

核心庫是一個Web優先的,最小可執行的通用圖形渲染庫。Web優先指的是t3d。js主要基於WebGL和WebGPU作為底層繪圖標準。通用圖形渲染庫指的是t3d。js並不限定圖形渲染以外的其它邏輯,適用性與擴充套件性比較好。

另外,官方提供常用需求的擴充套件,作為第二方庫供開發者使用。至於定製化的需求,支援由開發者基於T3D開發第三方庫。

改進

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

場景樹

改進了場景樹矩陣更新的邏輯,基於內建的矩陣標髒系統,可以進行觸發式更新。簡單理解就是,有改變再更新,不改變不更新,在大多數專案中,可以極大提高矩陣更新效率,從而提升渲染幀率。

最佳化Uniform的預處理,場景中全域性引數,燈光引數,可以單獨進行更新並cache,提高Uniform上傳效率。

可擴充套件的渲染層級列表,更方便的渲染排序。基於渲染層級,可方便地實現背景,場景,覆蓋物的排序分離,並基於深度緩衝分層,滿足特定渲染需求。能一定程度上解決透明圖示遮擋問題,滿足alwaysOnTop,Overlay的需求等等。(three。js由於沒有渲染分層功能,同一場景內的渲染節點不能透過一次遍歷分發到不同的渲染陣列中,很難高效地實現上述功能。)

優鍩科技:渲染引擎T3D:WebGL端數字孿生應用最優解

幾何體

核心庫提供Geometry,Attribute,Buffer類,提供逐頂點的幾何體描述。同時支援Instance繪製。基於幾何體的封裝,我們可以接收多種型別的資料進行渲染:

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

程式生成,例如:點,線,面,管,擠出等。

自定義資料,例如第三方GIS資料,實時傳輸資料等。

優鍩科技:渲染引擎T3D:WebGL端數字孿生應用最優解

在點線面的擴充套件上,t3d。js的官方示例部分,會提供業務場景(ThingJS)中常用的幾何體生成計算模組。

優鍩科技:渲染引擎T3D:WebGL端數字孿生應用最優解

材質

一般的Web渲染引擎中,很難基於內建材質進行擴充套件。例如three。js,材質的Uniform上傳與材質型別是深度耦合的,因此很難基於Standard材質實現掃光等材質特效。T3D提供了材質繼承機制,只需要簡單插入著色器邏輯,即可實現對PBR材質的快捷修改。

優鍩科技:渲染引擎T3D:WebGL端數字孿生應用最優解

渲染管線

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

目前我們提供WebGLRenderPass作為預設的渲染通道,未來,幾乎可以無縫切換到WebGPURenderPass。這樣在我們推出WebGPU渲染器後,不需要改變上層程式碼邏輯,即可直接實現WebGPU的渲染。

優鍩科技:渲染引擎T3D:WebGL端數字孿生應用最優解

另外,T3D提供的介面可以單獨處理“場景圖資訊的收集”與“渲染列表的生成”,並可以執行粒度更低的渲染命令。便於實現高效能的後處理流程擴充套件。在實際渲染中,物體勾邊,發光等後期,往往需要多通道的渲染。在下圖中,同樣是執行兩通道的渲染,t3d執行的流程,能避免很多冗餘的邏輯。

優鍩科技:渲染引擎T3D:WebGL端數字孿生應用最優解

基於這樣的設計,我們提供了高階渲染器(EffectComposer)的擴充套件。高階渲染器是一個後期混合器,並內建了常用的後期處理模組。高階渲染器為ThingJS提供了豐富的後期特效支援。

優鍩科技:渲染引擎T3D:WebGL端數字孿生應用最優解

除了全螢幕的後期處理效果,EffectComposer還提供逐物體的特效解決方案。

優鍩科技:渲染引擎T3D:WebGL端數字孿生應用最優解

未來,T3D還在快速迭代中,未來我們還要做:

基於Transform Feedback特性的更強大的粒子系統。

節點式材質系統。

更加強大的WebGPURenderPass。

綜上所述,T3D為Web平臺提供強大的3D渲染能力。基於T3D引擎,能實現豐富的幾何體定製,材質定製和渲染管線定製。未來T3D將本著開放,共享的原則,不斷演進,為使用者提升渲染效果和渲染效能,保證ThingJS在Web端優異的渲染能力。

關於UINO優鍩科技

UINO優鍩科技成立於2012年,總部位於北京,目前團隊已超過千人,在上海、廣州、深圳、杭州、南京等地均設有分支。

自成立至今,UINO秉承數字孿生的理念,以多維空間大資料為基礎,致力於打通邏輯世界和物理世界,並憑藉三維視覺化互動為核心特點的數字孿生運維管理能力,形成了資料中心視覺化、智慧園區、智慧城市、智慧消防等多種數字孿生運運場景群。

迄今為止,UINO優鍩科技已服務了2,000+行業領軍企業,並不斷為全行業客戶提供數字孿生視覺化解決方案。

頂部