研發實戰:用WebGL Multiview擴展提升WebXR應用性能

2019-11-01 01:10:24 映維網 分享

查看引用/信息源請點擊:映維網

預計各個主要瀏覽器很快就會默認添加支持

映維網 2019年09月19日)WebGL Multiview擴展已經支持多個瀏覽器和3D Web引擎,它可以輕松幫助提升你的WebXR應用的性能。

1.什么是multiview?

當VR開始出現的時候,大多數引擎同時通過運行兩次渲染階段來實現對立體渲染的支持。盡管這可行,但非常低效。

每當調用時,renderScene都會設置視口,渲染器和狀態。這會翻倍每幀的渲染成本。

然后,為了提高性能表現和最小化狀態改變,一些優化開始出現。

即便你能夠減少狀態改變的次數,但繪制調用的數量依然保持不變:對象數量的兩次。

為了解決這個問題,Mozilla開發了Multiview擴展。簡單來說,利用這個擴展,你只需通過一次繪制調用即可繪制多個目標,從而減少每次瀏覽的總負載。

這是通過利用每個視圖的信息來調整著色器uniforms,并通過gl_ViewID_OVR來訪問它們,原理類似于Instancing API。

multiview擴展的結果渲染循環如下所示:

這個擴展可以用于提升多個任務,如級聯陰影貼圖,渲染力提防貼圖,渲染多視口等等,但最為常見的用例的立體渲染。

立體渲染是Mozilla的主要目標,因為你只需對3D引擎進行一定的修改即可改善VR渲染路徑的性能。目前,大多數頭顯都有兩個視圖,但存在采用超寬視場,采用4個視圖的頭顯原型,而4個視圖是目前Muitiview支持的最大視圖數。

2. WebGL中的Multiview

Once the OpenGL OVR_multiview2 specification was created, the WebGL working group started to make a WebGL version of this API.

當創建了OpenGL OVR_multiview2規范后,WebGL工作小組就開始制作這個API的WebGL版本。

自Mozilla首次在servo和three.js實驗對Multiview的支持已經過去一段時間。在當時,支持WEBGL_multiview是一個相當艱巨的挑戰:它基于一個不透明的幀緩沖區,并且可以結合WebGL1一起使用,但著色器需要使用GLSL 3.0支持進行編譯(僅WebGL2),所以需要對servo進行一定的調整。

當時WebVR規范有一個支持Multiview的提案,但沒有通過。

得益于WebGL工作組的工作,multivew的情況在過去幾個月里有了很大的改善。這個規范已經處于Community Approved狀態,這意味著瀏覽器可以默認啟用它。

對于最終規范,值得注意的幾點限制是:

3. 支持multiview的Web引擎

Mozilla在過去一段時間里一直在為努力實現three.js(PR)的multiview支持。目前,只要擴展名可用,并且定義一個沒有坑鋸齒的WebGL2環境即可:

這里是一個利用multiview的three.js示例(源代碼)。

有關如何在不使用任何第三方引擎的情況下直接使用multiview的詳細信息,你可以查看three.js實現,參閱規范的示例代碼或Oculus的教程。

4. 支持multiview的瀏覽器

社區剛剛通過了這個擴展,所以預計各個主要瀏覽器很快就會默認添加支持。

5. 性能提升

大多數WebGL或WebXR應用程序受CPU限制,場景中的對象越多,提交給GPU的繪制調用越多。Mozilla曾就通過兩個視圖進行立體渲染進行了基準測試。與傳統渲染相比,Mozilla實現了大約40%的持續性能提升。

如下圖所示,需要繪制的立方體(繪制調用)越多,性能就越佳。

6. 接下來的計劃

目前multiview擴展的主要缺點是,無法渲染到多重采樣backbuffer。要在WebXR中使用它,你應該在創建環境時設置antialias:false。然而,這是WebGL工作組正在開展的工作。

一旦工作組提出建議并由瀏覽器實現,3D引擎就應該能夠自動支持它。希望我們能夠就能夠看到WebGL和WebXR生態系統迎來新的擴展,并幫助提高渲染的性能和質量,比如說Nvidia VRWorks(如可變速率著色和透鏡匹配著色)。

聲明:本站部分資源來源于網絡,版權歸原作者或者來源機構所有,如作者或來源機構不同意本站轉載采用,請通知我們,我們將第一時間刪除內容。本站刊載文章出于傳遞更多信息之目的,所刊文章觀點僅代表作者本人觀點,并不意味著本站贊同作者觀點或證實其描述,其原創性及對文章內容的真實性、完整性、及時性本站亦不作任何保證或承諾,請讀者僅作參考。
編輯:牛牛
快乐十分胆拖中奖图