淺談 WebVR

本文轉自凹凸實驗室：https://aotu.io/notes/2016/08...

「目鏡在他眼前塗上了一抹朦朧的淡色，映射着一幅彎曲的廣角畫面：一條燈火輝煌的大街，伸向無盡的黑暗。但這大街其實並不存在，它只是電腦繪出的一片虛擬的空間。」——《Snow Crash》，Neal Stephenson 1992年

什麼是 VR

VR（Virtual Reality）是利用電腦模擬產生一個三維空間的虛擬世界，提供用戶關於視覺等感官的模擬，讓用戶感受彷彿身歷其境，能夠及時、沒有限制地觀察三維空間內的事物。用戶進行位置移動時，電腦能夠當即進行復雜的運算，將精確的三維世界視頻傳回產生臨場感。—— 維基百科

VR 的顯示原理

瞭解 VR 顯示原理前，先了解咱們人眼的立體視覺的成像原理：

人眼的視覺是能夠感受出深度的，也就是深度知覺（depth perception）。而有了深度的信息後，才能判斷出立體空間的相對位置。

另外，因爲兩個眼睛的位置不同（通常人兩眼相距 5~7 釐米），因此看到的東西會有兩眼視差（binocular parallax），大腦再將這兩個圖像作融合處理，從而產生立體的感受（即所謂的 binocular cues）。

立體視覺

頭戴式顯示器（Head-mounted Display）

頭戴式顯示器（HMD）是 VR 目前最多見的一種體驗方式。它的原理是將小型二維顯示器所產生的圖像經由光學系統放大。具體而言，小型顯示器所發射的光線通過凸狀透鏡使圖像因折射產生相似遠方效果。利用此效果將近處物體放大至遠處觀賞，從而達到所謂的全息視覺（Hologram）。另外，顯示器被分爲左右兩個部分，分別顯示左右眼看到的圖像。大腦再將左右眼所看到的圖像（兩眼視差）作融合處理，從而產生 3D 效果。同時，HMD 會根據頭部運動讓視角與之同步。綜合上述特性，用戶經過 HMD 體驗 VR 時就如同在現實中觀看同樣，這種體驗也被稱爲沉浸式體驗。

HMD 原理示意圖

HMD 種類

目前市場上主要有如下 3 種 HMD 設備：

• 滑配式
  這是目前最初級、價格最低的 HMD 設備。它與智能手機相鏈接，將 2D 顯示變成 3D VR 顯示。滑配式 HMD 設備強烈依賴於主機系統（智能手機），後者是提供 VR 效果的必備部分。
  廠商：滑配式 HMD 設備包括谷歌 Carboard 和三星 Gear VR。

• 分離式
  分離式 HMD 設備較滑配式 HMD 設備複雜，內置多種電子零部件。二者的主要不一樣是，分離式 HMD 設備擁有本身的顯示屏，也可能配備本身的處理器（提供簡單計算能力）。雖然分離式 HMD 設備不能獨立於主機系統而工做，但卻爲 VR 市場創造了新的機會，由於主機系統已再也不侷限於智能手機，PC 和視頻遊戲機也能用於提供 VR 體驗。總之，分離式 HMD 設備能提供高質量的 VR 體驗。
  廠商：分離式 HMD 設備包括 Facebook Oculus Rift、HTC Vive 和 PlayStation VR。

• 整合式
  整合式 HMD 設備擁有強大的計算能力和追蹤系統。做爲一款獨立的計算設備，整合式 HMD 設備將配備一整套零部件，價格甚至高於普通 PC。
  廠商：微軟 HoloLens（AR）

對於想初步體驗或入門 VR 的用戶，推薦谷歌的 Carboard 或國內的性價比高的滑配式設備。

Google Carboard

VR 周邊設備

VR 是最具科幻色彩以及夢幻體驗的東西，單獨一個 HMD 並不能發揮 VR 的最大效果，加上「屬性加成」的周邊才能體驗極致的 VR。

2015 年，澳大利亞開設了世界首家 VR 沉浸式競技遊戲店—— Zero Latency。 這家店擁有 4300 平方英尺，安裝有 129 臺 PlayStation Eye 攝像頭，用於捕捉玩家的動做。整套系統能夠最多同時供 6 名玩家進行遊戲。

現實與虛擬

固然，各式各樣的 VR 周邊設備也愈來愈多，如 Virtuix Omni 跑步機：

Virtuix Omni

這些設備無疑會加強了 VR 的體驗，給用戶帶來更加刺激與逼真的體驗。

WebVR

上文說了這麼多關於 VR 的東西，視乎尚未入正題（⊙﹏⊙)）

許多 VR 體驗是以應用程序的形式呈現的，這意味着你在體驗 VR 前，必須進行搜索與下載。而 Web VR 則改變了這種形式，它將 VR 體驗搬進了瀏覽器，Web + VR = WebVR。

下面根據我目前的看法，分析一下 WebVR 的現狀。

WebVR 草案

WebVR 是早期和實驗性的 JavaScript API，它提供了訪問如 Oculus Rift 和 Google Cardboard 等 VR 設備功能的 API。

VR 應用須要高精度、低延遲的接口，才能傳遞一個可接受的體驗。而對於相似 Device Orientation Event 接口，雖然能獲取淺層的 VR 輸入，但這並不能爲高品質的 VR 提供必要的精度要求。WebVR 提供了專門訪問 VR 硬件的接口，讓開發者能構建溫馨的 VR 體驗。

WebVR API 目前可用於安裝了 Firefox nightly 的 Oculus Rift、Chrome 的實驗性版本和 Samsung Gear VR 的瀏覽器。固然，若是你如今就想在你的移動端瀏覽器體驗 WebVR，可使用 WebVR Polyfill。

WebVR 開發

在 Web 上開發 VR 應用，有下面三種（潛在）方式：

1. JavaScript, Three.js 與 監聽設備方向（Device Orientation）

2. JavaScript, Three.js 與 WebVR

3. CSS 與 WebVR（仍處於很是早期階段）

因爲 WebVR 仍處於草案階段並可能會有所改變，因此建議你基於 webvr-boilerplate 進行 WebVR 開發。

A-Frame

上面說道，在 Web 上開發 VR 應用有 3 種（潛在）方式，前兩種都離不開直接接觸 Three.js，而第三種方式則爲時尚早。對於沒接觸過 Three.js，但又想體驗一把 WebVR 開發的同窗們來講，無疑會存在必定的門檻。

若是你想以較低的門檻體驗一把 WebVR 開發，那麼能夠試試 MozVR 團隊 開發的 A-Frame 框架。

PS：寫着寫着，A-Frame 的版本從 v0.2 升到到 v0.3（這很前端），但文檔等各方面變得更加完善了。

簡介

A-Frame 是一個經過 HTML 建立 VR 體驗的開源 WebVR 框架。經過該框架構建的 VR 場景能兼容智能手機、PC、 Oculus Rift 和 HTC Vive。

MozVR 團隊開發的 A-Frame 框架的目的是：讓構建 3D/VR 場景變得更易更快，以吸引 web 開發社區進入 WebVR 的生態。WebVR 要成功，須要有內容。但目前只有不多一部分 WebGL 開發者，卻有數以百萬的 Web 開發者與設計師。A-Frame 要把 3D/VR 內容的創造權力賦予給每一個人。

優點與特色

• A-Frame 能減小冗餘代碼。冗餘複雜的代碼成爲了嚐鮮者的障礙，A-Frame 將複雜冗餘的代碼減至一行 HTML 代碼，如建立場景則只需一個 <a-scene> 標籤。

• A-Frame 是專爲 Web 開發者設計的。它基於 DOM，所以能像其它 Web 應用同樣操做 3D/VR 內容。固然，也能結合 box、d三、React 等 JavaScript 框架一塊兒使用；

• A-Frame 讓代碼結構化。Three.js 的代碼一般是鬆散的，A-Frame 在 Three.js 之上構建了一個聲明式的實體組件系統（entity-component-system）。另外，組件能發佈並分享出去，其它開發者能以 HTML 的形式進行使用。

減小冗餘複雜的代碼

實現

talk is cheap，show me the c... hello world.

A-Frame 的 Hello world

在手機的瀏覽器（如：Chrome、QQ瀏覽器）中呈現的效果

實現代碼以下：

// 引入aframe框架
<script src="./aframe.min.js"></script>

<a-scene>
  <!-- 球體 -->
  <a-sphere position="0 1 -1" radius="1" color="#EF2D5E"></a-sphere>
  <!-- 盒（此處是立方體） -->
  <a-box width="1" height="1" rotation="0 45 0" depth="1" color="#4CC3D9" position="-1 0.5 1"></a-box>    
  <!-- 圓柱 -->
  <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <!-- 平面 -->
  <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <!-- sky元用於爲場景添加背景圖或顯示360度的全景圖 -->
  <a-sky color="#ECECEC"></a-sky>
  <!-- 用於指定攝像機的位置 -->
  <a-entity position="0 0 4">
    <a-camera></a-camera>
  </a-entity>
</a-scene>

基本概念（以 v0.3 版本爲參考）：

• 該框架的三維座標軸遵循右手座標系，具體以下圖：
  

• 場景的原點默認在視口底邊的中點

• position 至關於 CSS3 中的 translate3d

• 以米爲單位長度

• height 與 width 是正面的長和寬，depth表示深度（厚度）

• rotation="x y z" 單位角度（°），拇指指向座標軸的正方向，其他手指捲起來的方向就是該軸的旋轉正方向。

• color 是材質顏色，默認是白色（#FFF）

• 在 PC 中，可經過鼠標與鍵盤 WSAD 進行交互

小結

固然，上述案例只是 A-Frame 的 Hello World demo。若你感興趣，能夠深刻學習，再結合本身的想法，相信你能做出讓人拍手稱讚的做品。

• A-Frame 官網：https://aframe.io/

• A-Frame Blog：https://aframe.io/blog/

• Awesome A-Frame：https://github.com/aframevr/a...

其它一些 WebVR 案例

下面就列舉一些 WebVR 的相關案例，若是你已具有了 VR 的體驗環境，不妨體驗一下。

• Beloola：Beloola 是一個基於 WebVR 的社交平臺，它容許人們在同一個虛擬的空間上實時進行情感交流。

• Sketchfab：Sketchfab 是一個不需任何插件便可在 Web 頁面裏嵌入交互式 3D 模型的服務網站。

• Vizor：該網站提供了可視化編輯器，讓任何人都能在瀏覽器上建立和分享他們的 VR 內容。

• Chrome Experiments for Virtual Reality：Chrome 團隊提供的 6 個 VR 案例。

• ...

更多 WebVR 內容等着大家發現

結束語

許多人將 2016 年稱爲 VR 元年。VR 的前景有人看好，也有人看衰。但不管如何，新技術的出現都值得咱們去體驗一番。固然，做爲一名開發者，也能夠從代碼的角度體驗一番。

想詳細瞭解更多關於 VR 的行業報告，能夠閱讀 《VR與AR：解讀下一個通用計算平臺》。

參考資料

• WebVR.info

• A-Frame

• How to Build VR on the Web Today

• VR與AR：解讀下一個通用計算平臺

本文轉自凹凸實驗室：https://aotu.io/notes/2016/08...
更多文章請關注凹凸實驗室：

感謝您的閱讀，本文由 凹凸實驗室 版權全部。如若轉載，請註明出處：凹凸實驗室（https://aotu.io/notes/2016/08...）