在數(shù)個(gè)月前，我將一款Pathfinder演示應(yīng)用程序移植到WebVR。那是一次有趣的經(jīng)歷，而我感覺(jué)自己在將WebGL應(yīng)用移植到WebVR的過(guò)程中學(xué)到了一推事情。我認(rèn)為這些經(jīng)驗(yàn)教訓(xùn)應(yīng)該會(huì)對(duì)大家有所幫助，尤其是缺乏Web編程經(jīng)驗(yàn)的WebVR新人。

Pathfinder是一款用Rust語(yǔ)言編寫(xiě)的基于GPU的字體光柵化器，它包含一個(gè)在服務(wù)器端運(yùn)行Rust代碼的演示應(yīng)用程序，但都在TypeScript網(wǎng)站的WebGL中完成所有的GPU工作。

我們有一個(gè)展示Mozilla Monument的3D演示作品，將其作為演示3D文本光柵化的一種方式。我希望做的事情是將其轉(zhuǎn)換為WebVR應(yīng)用程序，支持你通過(guò)移動(dòng)頭部來(lái)瀏覽紀(jì)念碑，而非使用鍵盤的方向鍵。

我在著手研究這個(gè)問(wèn)題的時(shí)候相當(dāng)熟悉OpenGL和WebGL，但對(duì)VR或WebVR幾乎沒(méi)有任何知識(shí)背景。三年前我編寫(xiě)了一個(gè)Android Cardboard應(yīng)用程序，但也就僅此而已。

我希望這篇文章能夠?yàn)轭愃频拈_(kāi)發(fā)者提供幫助。

1。 什么是WebVR

WebVR是一組用于在Web上編寫(xiě)VR應(yīng)用程序的API。它允許我們請(qǐng)求跳轉(zhuǎn)到VR模式，這時(shí)我們就可以直接將影像渲染到VR顯示器，而不是渲染到平面瀏覽器。當(dāng)用戶使用Cardboard或Daydream等設(shè)備時(shí)，用戶需要將智能手機(jī)塞進(jìn)頭顯之中。

WebVR API有助于切換至或離開(kāi)VR模式，獲取姿態(tài)信息，在VR中渲染，以及處理設(shè)備輸入。新的WebXR Device API規(guī)范正在對(duì)一系列的事項(xiàng)進(jìn)行優(yōu)化。

2。 我需要什么設(shè)備來(lái)支持WebVR嗎?

理想情況下，一款優(yōu)秀的VR設(shè)備可以更容易地測(cè)試你的工作，但根據(jù)你需要的分辨率，Daydream或Cardboard已經(jīng)足夠。你甚至可以在沒(méi)有頭顯的情況下進(jìn)行測(cè)試，不過(guò)畫(huà)面看起來(lái)會(huì)很怪異和出現(xiàn)扭曲。

對(duì)于本地測(cè)試，Chrome提供了一個(gè)非常有用的WebVR API模擬擴(kuò)展。你可以使用其中的開(kāi)發(fā)者工具面板來(lái)調(diào)整姿態(tài)，而且你可以獲得無(wú)扭曲的顯示。

火狐支持WebVR，而在啟動(dòng)一定的flag情況下，Chrome Canary同樣予以支持。這個(gè)polyfill應(yīng)該能兼容更多的瀏覽器。

3。 工作原理

我認(rèn)為在我開(kāi)始的時(shí)候，不理解這部分內(nèi)容是我產(chǎn)生許多困惑和錯(cuò)誤的根源。API的核心基本上是“將某些內(nèi)容渲染到畫(huà)布，然后再變出魔術(shù)”，而我當(dāng)時(shí)無(wú)法確定魔法是如何產(chǎn)生。

基本上，有一些我們應(yīng)該做的事情，然后瀏覽器(或polyfill)同樣有一些額外的工作需要完成。

一旦我們進(jìn)入VR模式，只要設(shè)備請(qǐng)求幀，就會(huì)觸發(fā)回調(diào)。在這個(gè)回調(diào)中，我們可以訪問(wèn)姿態(tài)信息。利用姿態(tài)信息，我們可以確定每只眼睛應(yīng)該看到的內(nèi)容，并以某種形式將其提供給WebVR API。

WebVR API期望的事情是，我們將每個(gè)眼睛的視圖渲染至畫(huà)布，水平分割(當(dāng)我們初始化它時(shí)，這個(gè)畫(huà)布將傳遞給API)。這是我們這一邊要做的事情，然后瀏覽器(或polyfill)完成剩下的工作。它將使用我們渲染的畫(huà)布作為紋理，并且對(duì)于每只眼睛，它會(huì)扭曲渲染的一半以適當(dāng)?shù)厥褂迷O(shè)備中的透鏡。例如，Daydream和Cardboard的扭曲遵循這個(gè)polyfill中的代碼。

值得注意的是，作為應(yīng)用程序開(kāi)發(fā)者，我們不必?fù)?dān)心這一點(diǎn)，因?yàn)閃ebVR API將會(huì)為我們處理它。我們只需要將每只眼睛的未扭曲視圖渲染至畫(huà)布，左邊視圖到左半邊，右邊視圖到右半邊，而瀏覽器將處理其余的視圖。

4。 移植WebGL應(yīng)用

webvr.info和MDN提供了一些很好的資源。webvr.info有一堆簡(jiǎn)潔的樣本，如果你像我一樣，搗鼓它們能夠幫助你更好地學(xué)習(xí)。

4.1 進(jìn)入VR模式

首先，我們需要訪問(wèn)VR顯示器并進(jìn)入VR模式：

進(jìn)入VR本身：

現(xiàn)在我們已經(jīng)進(jìn)入VR，下一步是什么?在上面的代碼片段中，我們有一個(gè)render()調(diào)用，它正在完成大部分的艱苦工作。由于我們從一個(gè)現(xiàn)有的WebGL應(yīng)用程序開(kāi)始，我們已經(jīng)有了這樣的功能：

這看起來(lái)很好，但請(qǐng)注意我們是為雙眼渲染相同的影像，而且根本沒(méi)有處理頭部運(yùn)動(dòng)。為了實(shí)現(xiàn)這一點(diǎn)，我們需要使用WebVR從VRFrameData對(duì)象提供的透視圖和視圖矩陣。

VRFrameData對(duì)象包含一個(gè)姿態(tài)構(gòu)件，其中包含所有頭部姿態(tài)信息(位置，方向，甚至是速度和加速度)。但為了在渲染時(shí)正確定位camera，VRFrameData提供了我們可以直接使用的投影和視圖矩陣。我們可以這樣做：

在圖形中，我們經(jīng)常發(fā)現(xiàn)我們需要處理模型，視圖和投影矩陣。模型矩陣定義了我們希望在空間坐標(biāo)中渲染的對(duì)象位置，視圖矩陣定義了camera空間和世界空間之間的變換，而投影矩陣則處理剪輯空間和camera空間之間的變換。有時(shí)候我們會(huì)處理其中一些組合，比如“模型-視圖”矩陣。

你可以在webvr.info的立體渲染示例中看到立方體群代碼使用這些矩陣。

我們的應(yīng)用程序很可能已經(jīng)具備模型/視圖/投影矩陣的概念。如果沒(méi)有，我們可以在頂點(diǎn)著色器中使用視圖矩陣預(yù)乘我們的位置。我們的代碼看起來(lái)將是這樣：

這應(yīng)該能解決問(wèn)題。現(xiàn)在移動(dòng)頭部應(yīng)該能觸發(fā)場(chǎng)景中的移動(dòng)。你可以通過(guò)這個(gè)演示應(yīng)用程序看到代碼的應(yīng)用，它是利用本文提及的技術(shù)來(lái)將一個(gè)旋轉(zhuǎn)三角形WebGL應(yīng)用程序轉(zhuǎn)換為WebVR兼容的三角形瀏覽應(yīng)用程序。

如果我們有進(jìn)一步的輸入，我們可能需要使用Gamepad API來(lái)設(shè)計(jì)一個(gè)適用于典型VR控制器的VR界面，但這超出了本文的范圍。

來(lái)源：87870