[自譯]給Web開發者的VR指南

作者著眼於WebVR的發展，通過介紹當前WebVR的現狀，來幫助我們認識當下的技術環境；介紹了伴隨發展的硬體，也一直是焦點存在的就是與手機結合的Mobile VR，作者在這裡也是與PC一同進行了介紹；通過一些案例，來了解延遲，丟幀等狀況對VR下體驗的影響，並介紹了一些可能會被廣泛使用的APIs，在渲染的技術優化上也增加了一些個人的理解；最後，作者也對web和VR的相互影響表達了自己的觀點，並嘗試引導讀者去發現其它的實現道路。

本來只是想找些指南作為接觸物認識，但是在閱讀過程中遇到的執行緒處理和渲染的時候還真是頭大...不過作者在對WebVR方面的積累還是十分深厚，能夠從硬體、體驗、實現方法去逐一闡述觀點，並且能在最後引導探索WebGL以外的道路，真是厲害。

原文連結：A Guide To Virtual Reality For Web Developers

原文作者：Ada Rose Edwards

最近，VR在傳統瀏覽器上的應用越來越多。在本文中，我們將通過WebVR API來檢視瀏覽器和WebVR的發展現狀。

VR和Web現狀

Web社群之前已經嘗試過了VR,現在的WebVR採用了一種新的技術，更適合現代的web。自從2011年WebGL釋出以來，我們已經加速了3D載web上的應用。現在使用了WebGL的硬體可以提供新的webAPIs來實現VR。

這些APIs使WebVR的內容，可以通過頭帶裝置3D顯示。提供的頭戴裝置，也可以追蹤和控制使用者在虛擬世界中的資訊。

WebVR於2014年，在Mozilla首次展示。在2016年，早期標準版適用於桌面端Chrome,Firefox,和Samsung的VRweb瀏覽器：Samsung Internet for Gear VR。

現在，幾乎所有的頭帶裝置都非常好的支援手機和桌面端標準。

WebVR的支援情況可以看這裡

WebVR的標準是在公開衡量的，它代表了Mozilla,Google,Samsung,Microsoft,Apple之間的合作。

這意味著使用WebVR的網站可以製作一個身臨其境的環境，並同時交付到所有的主要平臺上實現，桌面或移動端。

web的處理能力可以讓人們通過URL輕鬆地分享VR體驗，在瀏覽器中檢視，而無需複雜的應用商店，或是耗時下載到本地。

Samsung internet的VR額外Web APIs

這些API並不是WebVR API的一部分，但不使用WebGL，在傳統網站來構建沉浸式體驗是很有幫助的。

這些APIs正在為Samsung Internet for Gear VR研發。我們希望它們能夠被其他瀏覽器接受並標準化。

全景視訊

通過設定視訊標籤上的屬性type=“dimension=360”，可以播放沉浸式全景視訊（monoscopic&stereoscopic）的能力。這些在Samsung Internet 5.0上得到了加強，使用者可以通過指尖來翻看。

可能的values：

dimension=3d-lr: side-by-side 3D video

dimension=3d-tb: top-to-bottom 3D video

dimension=360: 360-degree video

dimension=360-lr: side-by-side 3D 360-degree video

dimension=360-tb: top-to-bottom 3D 360-degree video

dimension=180: 180-degree video

dimension=180-lr: side-by-side 3D 180-degree video

dimension=180-tb: top-to-bottom 3D 180-degree video

改變天空

另一個Sansung Internet for Gear VR提供的API，是JavaScript API，可以將web的瀏覽器背景更換為開發者選擇的背景。

你的傳統2D網站仍然可以被看到，但是環境將會設定成與網站環境相匹配的。

window.SamsungChangeSky({ sphere: 'http://site.com/blue-sky.jpg' });

什麼是WebVR?

WebVR是一組跨瀏覽器的JavaScript APIs，它提供了各種VR相關的用例，可以將使用者置於WebGL生成的沉浸式環境中。

通過並行渲染3D圖片，這些APIs可以處理所有面向使用者的未失真3D影象。

我不會詳細介紹這些標準，因為標準還在變化，大多數使用者不需要直接與它們打交道，因為WebGL工具和庫可以幫助你處理大多數的WebVR AP。

WebVR APIs現狀

當前的API版本內部為1.1，2.0版本將會更改一些方法命名，並移除一些不使用的方法，還將會增加一些硬體支援，和在第一版中沒有想到的額外功能。

可以在Mozilla Developer Network上閱讀更多，也可以在GitHub上討論。WebVR社群和W3C會在準備好之後，將它遷移到W3C工作上。

基本上，WebVR API提供以下內容：

頭帶裝置允許使用者在虛擬環境中自由檢視。幀插值（frame interpolation）是內建的，就算你移到一個隨機座標系上，它都會是跟隨頭部。

會是像HTC Vive和Gear VR這樣六自由度或三自由度的控制工作。它允許使用者使用手與虛擬環境互動。

傳給頭戴裝置的資訊是如何渲染3D資訊，例如視場，還有每隻眼睛看到的畫布渲染內容。

一種新的頭戴裝置特殊動畫請求框架（headset-specific requestAnimationFrame），會同步在頭戴裝置上顯示重新整理率。

一種渲染方法，將呈現的幀以WebGL畫布元素的形式提交給頭戴裝置。

VR迴圈圖，頭戴裝置提供定位和旋轉資料，開發者使用這些資料呈現使用者角度的場景，然後將這些資料傳送到頭戴裝置上，並坐標變換扭曲顯示給使用者。

構建WebVR的沉浸體驗意味著什麼？

令人驚訝的是，構建一個虛擬現實網站，和構建web app以及移動端站點有許多相似的問題。

現在web最大的問題之一就是網路效能，這很重要，因為：

使用者的關注範圍正在縮小，

網路越來越擁擠，

網站越來越大。

WebGL和WebVR網站也不例外，一不小心就會變得非常龐大。

VR內容會比傳統內容更有優勢，因為它新穎有趣，可以讓使用者多停留一會兒。即使這樣，快速響應的3D體驗依然很重要，使用者沒有耐心，而且會越來越沒有耐心。

在你的網站將VR內容載入出來之前，它只是一個2D網站。

我的建議是，沒必要把所有的東西都準備好了再展開，只需要載入到使用者能夠開始，然後動態載入並快取其餘部分。如果你閱讀了Google的PRPL模式，那麼這種行為應該會很熟悉。

即使是展示一個模糊的360環境和一些低保真的內容，讓使用者環顧四周，也可以為你爭取到更多的時間，來載入更多的內容，並引入吸引人的體驗。

顯示一些基本的內容比失去使用者有利得多，因為他們已經厭倦了等待進度條。

網路執行可能是CPU密集型，並阻塞主執行緒。這可能會給使用者帶來不好的體驗。

預裝一到兩個密集的配置可以避免體驗遭到破壞。然而你還是有很多東西需要去花長時間準備，那麼你應該考慮一個更好的替代方案。

充分利用好service worker and the Cache API來讓靜態資產能夠快速被訪問，這是一個不錯的方法。

漸進增強

VR最主要的兩個平臺是完全不同的：高階的臺式電腦和先進的控制器；中高階智慧手機，可能配備一個旋轉追蹤控制器，或者沒有控制器。

一張HTC Vive的照片，有一個定位追蹤控制器，Samsung Gear VR, Google Daydream 和 Google Cardboards都有出現

這給我們帶來了兩個挑戰：

在不同效能的平臺上保持一致的幀率，在多樣的輸入裝置下，保持友好的體驗。

Gear VR和Daydream的流行，Google Cardboard便宜的價格和良好的可用性，這會對手機的發展帶來巨大的影響。

下面我來介紹一些典型的控制器裝置，你不需要去支援它們，但是需要考慮到無控制器的場景，以及支援有控制器的選項，確保每個人都能有所體驗。支援這些控制器的配置會很不錯，但也顯得不太實際。

一些庫，例如A-Frame Extras的Universal Controls，充分利用這些可以幫助你做得更好。

相容網路的控制器會提升沉浸體驗，從左到右分別是：基於凝視追蹤，傳統的遊戲手柄，旋轉追蹤控制器，定位旋轉追蹤控制器，完整的手勢識別

非對稱執行

隨著web的增強，支援所有級別的硬體並不意味著你可以交付相同的體驗。

再虛擬世界中，一個擁有雙手追蹤的體驗會更吸引人，不應該受到沒有控制器的使用者一樣的限制。

例如，一個VR應用，你可以在其中創作藝術作品，可以使用追蹤控制器在高效能的機器上創作；在移動裝置上，使用者可以觀看這些作品，但是不能編輯。

另一個例子是聯網的多人VR遊戲，玩家可以通過追蹤控制器來玩遊戲；而一個移動觀眾可以通過凝視的互動來選擇不同的觀看點。

測試你的開發內容

像現在的web設計一樣，你需要先為移動端設計。當你在構建場景時，定期在中端手機上測試，沒有控制器的情況下也能被大多數使用者使用。

WebVR允許你同時面向兩個平臺。然而為兩者提供相同的內容可能會導致移動裝置陷入困境，或是桌上型電腦無法充分發揮潛力。

擁有很棒的外形沒有問題。低保真的外觀看起來會有些奇異，但是渲染起來很快。

為了提高影象質量，一個解決方案是在使用者開始使用WebVR之前就提供影象質量選項。如果使用者有高質量需要，就開始載入較大的渲染影象。

更困難但無縫的一種是，從最低的影象開始渲染，並監測裝置的執行狀況，就像requestIdleCallback。如果執行良好，就開始提高影象品質，如果出現了跳幀，那麼就降低影象品質。

當你更新場景時，你可能會決定做一些事情：

下載並使用高解析度的模型或紋理，使用更復雜的著色器。

從大量的用例來看，如果你能保證移動端也能保持良好的幀率，這確實能讓使用者獲得更好的體驗。

畢竟，一個偉大的場景要比視覺看起來真切許多。高度風格化的遊戲，例如Team Fortress 2，現在看起來依然很棒，同時期的現實遊戲也並沒有顯得陳舊。

一個偉大的場景，應該有精心設計的影象風格，大膽的色彩和鮮明的輪廓，這會在低功耗和低解析度的裝置上看起來也不錯。

在VR環境中，大多數使用者的勢力都很差，因此減少文字或任何會導致使用者緊張的內容。

Web給VR帶來了什麼？

web正在試圖解決一些VR所面臨的問題。

最大的問題就是，使用者對一次性的體驗付出很多許可權，他們可能不想再用了。

在本地或桌面的VR中，你必須從應用商店下載，比如Gear VR的Oculus store，HTC Vive的Steam。

這些應用商店的模式很適合視訊遊戲，使用者投入了一些錢後，會再一次的回來。但是對於購物，看電影，或嘗試新的社交平臺這樣的一次性體驗，商店就會變成門檻。

使用者往往會因為他們的裝置上存在的相似的應用，需要佔用儲存空間，使用大量的資料下載，而猶豫再三。特別是那些儲存空間有限，網路狀態也不太好的使用者。

在web上，一旦使用者離開頁面，他們就不必擔心這些內容，因為瀏覽器會清除這些。使用者返回時，再將這些內容快取到裝置上。

當然，這樣的儲存負擔就轉移到了開發商身上，web產生的收益可能就會降低。

通過動態地提供VR內容資產，並且像web一樣，可以從CDN提供智慧快取，HTTP快取，裝置上的service worker API快取。

使用者可以直接進入你的VR體驗，不需要等待很久。

一個高度優化的WebVR網站應該再使用者登入網站的第一秒內就呈現第一幀，沒有冗長的下載和應用商店，這將大幅提高參與度。

每個體驗都可以通過URL分享，在社交渠道商，通過郵件，甚至可以在電視上去分享，這樣你的內容就因為較低的門檻而更容易傳播開來。

充分利用快速網路

許多WebVR網站都有一個特點，在進入VR之前，使用者可以在2D的顯示器上觀看和互動，這個檢視通常會隨著旋轉手機，作為一個視窗出現在虛擬的空間裡。

這個神奇的視窗是一個強大的模式。它給使用者一個VR場景預覽，而不需要頭戴裝置，這對沒有頭戴裝置的人，或者在交通工具上，不想在公共場合佩戴的使用者十分友好。

一旦使用者有了興趣，他們就會在你的網站上去留言，讓他們能夠獲得更舒適的體驗。

從高階介面到低階APIs，web給開發者們帶來了先進的技術

你可能聽說過很多webAPI在VR環境中使用更頻繁：

WebSockets

這些資料將為本實時地作為二進位制資料傳輸到伺服器上，對於VR，它們可以被用來實時同步數百個使用者，來共享體驗，我最近製作了一款開源的演示，在一次會議上，我為超過150個人作出了演示。

WebRTC

為了擴充套件共享VR，我們還可以使用WebRTC維持二進位制資料中視訊和音訊流的點對點連線。這可以讓兩個虛擬使用者，在不通過中央伺服器的情況下進行語音聊天和改變姿態。這可以一次連線6～8名使用者。

WebAudio

WebAudio是最強大的API之一。瀏覽器包含了所有你需要的音訊操作和分析。甚至可以通過pander node來在VR環境中提供3D音效。對於沉浸式的VR環境，WebAudio會很重要。

SpeechRecognition

新的瀏覽器包含了語音識別引擎，當一個鍵盤變得笨拙且苦難的時候，這對於發出指令和輸入內容十分有用。Samsung提供了一個不錯的例子（https://samsunginter.net/word-drop/）。

VR在長期內會對web產生什麼影響？

VR已經對網路平臺產生了影響；WebVR的跨平臺API已經實現；還有W3C種建立一個WebVR工作組的討論。

VR逐漸成為主流，隨著AR和MR的裝置開始進入消費者領域，web已經為新的平臺做好了準備。

我們今天所知道的WebVR完全依賴於WebGL。對WebGL的優化，意味著瀏覽器的開發商不得不利用硬體優化來提高下一個版本的渲染速度，速度很重要，因為掉幀會產生很糟糕的影響，會引起使用者的不適。

WebGL 2將會很快應用在穩定的瀏覽器。WebGL 2會讓WebGL更接近OpenGL ES 3.0規範。更高的真實度和更快的渲染，會讓VR有一種驚奇的視覺體驗。

WebAudio可能需要更精準的3D音訊轉換，與頭戴裝置更好的傳輸功能，傳遞更高質量的3D音訊。這會帶來更好的沉浸體驗。

在web上編寫指令碼可以顯著地改善效能。一些JavaScript APIs可以用來提高web效能。

JavaScript本身可以進行優化和預編譯。另一種選擇是將其他語言編譯為WebAssembly(WASM)。這可以提高整個系統的速度，提供一個更小的包，下載速度更快，更高效地解析和執行。如果使用得當和模組化。WASM可以用來作為WebVR體驗的核心呈現引擎，我們仍然可以像今天這樣使用JavaScriptj進行互動。

瀏覽器可以利用web worker來啟用不阻塞主執行緒的計算。這樣主執行緒就可以用於呈現。web worker對於操縱大量的資料，例如物理引擎，就很有用。通過這種方式將計算從主執行緒中分離出來，它們就不太可能會引發幀率下降。

不過，一些web workers傳送資料的成本會載入主執行緒上。這部分可以通過轉移物件來減輕。可轉換的物件例如ArrayBuffers,允許你改變物件的所有者，但是如果中途出現了錯誤，處理起來可能非常容易出錯。

一個名叫ShareArrayBuffer的新API將允許多個workers共享一個ArrayBuffer，這種情況下很有用。

現在渲染web頁面的執行緒也被用來渲染WebGL場景。因此在主執行緒上執行的其他程式碼的副作用，例如垃圾收集或CPU繫結函式，都可能會導致丟幀。

OffscreenCanvas允許在web worker中執行渲染。這將有助於將非常重要和敏感的渲染迴圈從其它執行緒中分離出來。

另一個重要的渲染用例是預先錄製的2D3D視訊。這些可以在WebGL中用作紋理，但是缺乏對細粒度的控制。就像我們在JavaScript中有音訊元素和AudioContext一樣，我們需要新增一個videoContext來支援視訊效能操作，以幫助在3D中播放360度視訊。

VR與當前web衝突的一個地方就是文字的渲染。文字顯示是web平臺的核心功能，但是在WebGL中顯示文字幾乎是不可能的。

通過瀏覽器將呈現的DOM內容公開給WebGL，這將是很好的事情。更好地利用web對2D介面的能力，但也存在安全和隱私方面的風險！

另一條路徑

基於WebGL的VR並不一定要成為VR的未來。在WebGL中，即使是最簡單的WebVR應用，也似乎是短視的，從長遠來看，這是很致命的。

web的部分優勢在於HTML是一種宣告性語言。瀏覽器可以根據平臺來解釋語言。你在手機上電腦上TV上看到的網站都是不同的。VR就是各種媒體體驗的另一個平臺。

通過宣告，HTML和CSS，web上的VR可以自動處理渲染，平衡渲染速度和視覺效果。一臺高階的電腦可以使用高階的著色器和細緻的模型；低功耗的收集使用最簡單的著色器和低保真模型，就像圖片可以選擇正確的解析度一樣，然後再根據裝置進行裁剪。

HTML可以擴充套件到一些常見的VR用例中，例如360視訊和3D影象，展示3D模型，將一個web頁面的內容遷移到3D空間中。

Samsung已經開始將這些用例用在了web瀏覽器中，Samsung Internet for Gear VR。

它通過video元素內建了3D視訊。顯示一個並排的3D視訊需要一個HTML標籤：

<video controls src="360video.mp4" type="video/mp4; dimension=360-lr;">

折中的路

當然，這些並不互相排斥。web可以對簡單的VR用例進行處理和優化，同時還可以通過WebGL構建沉浸式的VR提供優化。

Extensible Web是這樣一種觀點，web不必為易於使用而犧牲可擴充套件性，社群可以使用底層工具來擴充套件使用庫的web平臺。

VR似乎就是這種觀點的一個例子，我們已經有了WebGL和WebVR API這樣的底層工具。

A-Frame庫提供了定製的HTML元素來構建WebGL的3D場景。A-Frame可以單獨使用，或配合流行的框架例如React和Angular。

A-Frame允許有HTML經驗的開發者去描繪3D場景，通過熟悉的JavaScript來控制它們。像jQuery,Angular和React可以被用於改變場景，但它們仍然是HTML。

結語

web有能力將VR帶給世界，帶給每一位使用者，和每一位開發者。

VR在web上還處在早期的階段，現在才剛剛建立起來，看看什麼可行，什麼不行。

web可以展示VR不僅僅是視訊遊戲。VRk可以用來強化我們在web上所做的一切，甚至可以沉浸在媒體中實現新的互動。

作為開發者，我們可以在web上開始構建VR體驗。通過參與和反饋關於標準流程的反饋，我們可以讓webVR成為一個更健壯的標準，為未來的開發者鋪平道路。

即使你不認為VR已經成熟，AR和MR裝置仍然與我們如今的構建相關。我們為VR沉浸式構建的介面模式，仍在向前。

我們一起構建明天的web。