原標題：研發實戰：用WebGL Multiview擴展提升WebXR應用性能

來源：映維網 作者 黃顏

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狀態，這意味著瀏覽器可以默認啟用它。

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

它只支持WebGL2環境，因為它需要GLSL 3.00和紋理數組。目前無法用multiview渲染到多重采樣backbuffer，所以你應該使用antialias: false創建環境。 （WebGL工作組正在研究解決方案）

3. 支持multiview的Web引擎

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

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

A-Frame基于three.js，所以一旦更新到最新版本，它們就應該能夠獲得multiview支持。Babylon.js支持OVR_multiview2已又一段時間（更多信息）。

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

4. 支持multiview的瀏覽器

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

火狐桌面版：默認情況下，Firefox 71將支持啟用multiview。與此同時，你可以在Firefox Nightly進行測試。Firefox Reality：從版本1.3開始就默認啟用。Oculus Browser：它已實現但默認情況下禁用，你必須啟用Draft WebGL Extension首選項。Chrome：你可以在Chrome Canary for Windows中使用以下命令行參數進行運行： –use-cmd-decoder = passthrough –enable-webgl-draft-extensions

5. 性能提升

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

如下圖所示，需要繪制的立方體（繪制調用）越多，性能就越佳。

6. 接下來的計劃

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

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

責任編輯：