在數個月前，我將一款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界面，但這超出了本文的范圍。

來源：87870