Mozilla工程師展示如何將WebGL應用移植到WebVR
在數個月前,我將一款Pathfinder演示應用程式移植到WebVR。那是一次有趣的經歷,而我感覺自己在將WebGL應用移植到WebVR的過程中學到了一推事情。我認為這些經驗教訓應該會對大家有所幫助,尤其是缺乏Web程式設計經驗的WebVR新人。
Pathfinder是一款用Rust語言編寫的基於GPU的字型光柵化器,它包含一個在伺服器端執行Rust程式碼的演示應用程式,但都在TypeScript網站的WebGL中完成所有的GPU工作。
我們有一個展示Mozilla Monument的3D演示作品,將其作為演示3D文字光柵化的一種方式。我希望做的事情是將其轉換為WebVR應用程式,支援你通過移動頭部來瀏覽紀念碑,而非使用鍵盤的方向鍵。
我在著手研究這個問題的時候相當熟悉OpenGL和WebGL,但對VR或WebVR幾乎沒有任何知識背景。三年前我編寫了一個Android Cardboard應用程式,但也就僅此而已。
我希望這篇文章能夠為類似的開發者提供幫助。
1。 什麼是WebVR
WebVR是一組用於在Web上編寫VR應用程式的API。它允許我們請求跳轉到VR模式,這時我們就可以直接將影像渲染到VR顯示器,而不是渲染到平面瀏覽器。當用戶使用Cardboard或Daydream等裝置時,使用者需要將智慧手機塞進頭顯之中。
WebVR API有助於切換至或離開VR模式,獲取姿態資訊,在VR中渲染,以及處理裝置輸入。新的WebXR Device API規範正在對一系列的事項進行優化。
2。 我需要什麼裝置來支援WebVR嗎?
理想情況下,一款優秀的VR裝置可以更容易地測試你的工作,但根據你需要的解析度,Daydream或Cardboard已經足夠。你甚至可以在沒有頭顯的情況下進行測試,不過畫面看起來會很怪異和出現扭曲。
對於本地測試,Chrome提供了一個非常有用的WebVR API模擬擴充套件。你可以使用其中的開發者工具面板來調整姿態,而且你可以獲得無扭曲的顯示。
火狐支援WebVR,而在啟動一定的flag情況下,Chrome Canary同樣予以支援。這個polyfill應該能相容更多的瀏覽器。
3。 工作原理
我認為在我開始的時候,不理解這部分內容是我產生許多困惑和錯誤的根源。API的核心基本上是“將某些內容渲染到畫布,然後再變出魔術”,而我當時無法確定魔法是如何產生。
基本上,有一些我們應該做的事情,然後瀏覽器(或polyfill)同樣有一些額外的工作需要完成。
一旦我們進入VR模式,只要裝置請求幀,就會觸發回撥。在這個回撥中,我們可以訪問姿態資訊。利用姿態資訊,我們可以確定每隻眼睛應該看到的內容,並以某種形式將其提供給WebVR API。
WebVR API期望的事情是,我們將每個眼睛的檢視渲染至畫布,水平分割(當我們初始化它時,這個畫布將傳遞給API)。這是我們這一邊要做的事情,然後瀏覽器(或polyfill)完成剩下的工作。它將使用我們渲染的畫布作為紋理,並且對於每隻眼睛,它會扭曲渲染的一半以適當地使用裝置中的透鏡。例如,Daydream和Cardboard的扭曲遵循這個polyfill中的程式碼。
值得注意的是,作為應用程式開發者,我們不必擔心這一點,因為WebVR API將會為我們處理它。我們只需要將每隻眼睛的未扭曲檢視渲染至畫布,左邊檢視到左半邊,右邊檢視到右半邊,而瀏覽器將處理其餘的檢視。
4。 移植WebGL應用
webvr.info和MDN提供了一些很好的資源。webvr.info有一堆簡潔的樣本,如果你像我一樣,搗鼓它們能夠幫助你更好地學習。
4.1 進入VR模式
首先,我們需要訪問VR顯示器並進入VR模式:
進入VR本身:
現在我們已經進入VR,下一步是什麼?在上面的程式碼片段中,我們有一個render()呼叫,它正在完成大部分的艱苦工作。由於我們從一個現有的WebGL應用程式開始,我們已經有了這樣的功能:
這看起來很好,但請注意我們是為雙眼渲染相同的影像,而且根本沒有處理頭部運動。為了實現這一點,我們需要使用WebVR從VRFrameData物件提供的透檢視和檢視矩陣。
VRFrameData物件包含一個姿態構件,其中包含所有頭部姿態資訊(位置,方向,甚至是速度和加速度)。但為了在渲染時正確定位camera,VRFrameData提供了我們可以直接使用的投影和檢視矩陣。我們可以這樣做:
在圖形中,我們經常發現我們需要處理模型,檢視和投影矩陣。模型矩陣定義了我們希望在空間座標中渲染的物件位置,檢視矩陣定義了camera空間和世界空間之間的變換,而投影矩陣則處理剪輯空間和camera空間之間的變換。有時候我們會處理其中一些組合,比如“模型-檢視”矩陣。
你可以在webvr.info的立體渲染示例中看到立方體群程式碼使用這些矩陣。
我們的應用程式很可能已經具備模型/檢視/投影矩陣的概念。如果沒有,我們可以在頂點著色器中使用檢視矩陣預乘我們的位置。我們的程式碼看起來將是這樣:
這應該能解決問題。現在移動頭部應該能觸發場景中的移動。你可以通過這個演示應用程式看到程式碼的應用,它是利用本文提及的技術來將一個旋轉三角形WebGL應用程式轉換為WebVR相容的三角形瀏覽應用程式。
如果我們有進一步的輸入,我們可能需要使用Gamepad API來設計一個適用於典型VR控制器的VR介面,但這超出了本文的範圍。
from:87870
新浪宣告:新浪網登載此文出於傳遞更多資訊之目的,並不意味著贊同其觀點或證實其描述。