摘要：它與智能手機相連接，將顯示變成顯示。廠商滑配式設備包括谷歌和三星。作為一款獨立的計算設備，整合式設備將配備一整套零部件，價格甚至高于普通。廠商微軟對于想初步體驗或入門的用戶，推薦谷歌的或國內(nèi)的性價比高的滑配式設備。

本文轉(zhuǎn)自凹凸實驗室：https://aotu.io/notes/2016/08...

“目鏡在他眼前涂上了一抹朦朧的淡色，映射著一幅彎曲的廣角畫面：一條燈火輝煌的大街，伸向無盡的黑暗。但這大街其實并不存在，它只是電腦繪出的一片虛擬的空間?！薄禨now Crash》，Neal Stephenson 1992年

VR（Virtual Reality）是利用電腦模擬產(chǎn)生一個三維空間的虛擬世界，提供用戶關于視覺等感官的模擬，讓用戶感覺仿佛身歷其境，可以及時、沒有限制地觀察三維空間內(nèi)的事物。用戶進行位置移動時，電腦可以立即進行復雜的運算，將精確的三維世界視頻傳回產(chǎn)生臨場感?！?維基百科

了解 VR 顯示原理前，先了解我們?nèi)搜鄣牧Ⅲw視覺的成像原理：

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

另外，由于兩個眼睛的位置不一樣（一般人兩眼相距 5~7 厘米），所以看到的東西會有兩眼視差（binocular parallax），大腦再將這兩個圖像做融合處理，從而產(chǎn)生立體的感覺（即所謂的 binocular cues）。

立體視覺

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

HMD 原理示意圖

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

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

分離式
分離式 HMD 設備較滑配式 HMD 設備復雜，內(nèi)置多種電子零部件。兩者的主要不同是，分離式 HMD 設備擁有自己的顯示屏，也可能配備自己的處理器（提供簡單計算能力）。雖然分離式 HMD 設備不能獨立于主機系統(tǒng)而工作，但卻為 VR 市場創(chuàng)造了新的機會，因為主機系統(tǒng)已不再局限于智能手機，PC 和視頻游戲機也能用于提供 VR 體驗。總之，分離式 HMD 設備能提供高質(zhì)量的 VR 體驗。
廠商：分離式 HMD 設備包括 Facebook Oculus Rift、HTC Vive 和 PlayStation VR。

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

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

Google Carboard

VR 是最具科幻色彩以及夢幻體驗的東西，多帶帶一個 HMD 并不能發(fā)揮 VR 的最大效果，加上“屬性加成”的周邊才能體驗極致的 VR。

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

現(xiàn)實與虛擬

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

Virtuix Omni

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

上文說了這么多關于 VR 的東西，視乎還沒有入正題（⊙﹏⊙)）

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

下面根據(jù)我目前的見解，分析一下 WebVR 的現(xiàn)狀。

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

VR 應用需要高精度、低延遲的接口，才能傳遞一個可接受的體驗。而對于類似 Device Orientation Event 接口，雖然能獲取淺層的 VR 輸入，但這并不能為高品質(zhì)的 VR 提供必要的精度要求。WebVR 提供了專門訪問 VR 硬件的接口，讓開發(fā)者能構建舒適的 VR 體驗。

WebVR API 目前可用于安裝了 Firefox nightly 的 Oculus Rift、Chrome 的實驗性版本和 Samsung Gear VR 的瀏覽器。當然，如果你現(xiàn)在就想在你的移動端瀏覽器體驗 WebVR，可以使用 WebVR Polyfill。

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

JavaScript, Three.js 與 監(jiān)聽設備方向（Device Orientation）

JavaScript, Three.js 與 WebVR

CSS 與 WebVR（仍處于非常早期階段）

由于 WebVR 仍處于草案階段并可能會有所改變，所以建議你基于 webvr-boilerplate 進行 WebVR 開發(fā)。

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

如果你想以較低的門檻體驗一把 WebVR 開發(fā)，那么可以試試 MozVR 團隊 開發(fā)的 A-Frame 框架。

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

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

MozVR 團隊開發(fā)的 A-Frame 框架的目的是：讓構建 3D/VR 場景變得更易更快，以吸引 web 開發(fā)社區(qū)進入 WebVR 的生態(tài)。WebVR 要成功，需要有內(nèi)容。但目前只有很少一部分 WebGL 開發(fā)者，卻有數(shù)以百萬的 Web 開發(fā)者與設計師。A-Frame 要把 3D/VR 內(nèi)容的創(chuàng)造權力賦予給每個人。

A-Frame 能減少冗余代碼。冗余復雜的代碼成為了嘗鮮者的障礙，A-Frame 將復雜冗余的代碼減至一行 HTML 代碼，如創(chuàng)建場景則只需一個 標簽。

A-Frame 是專為 Web 開發(fā)者設計的。它基于 DOM，因此能像其它 Web 應用一樣操作 3D/VR 內(nèi)容。當然，也能結合 box、d3、React 等 JavaScript 框架一起使用；

A-Frame 讓代碼結構化。Three.js 的代碼通常是松散的，A-Frame 在 Three.js 之上構建了一個聲明式的實體組件系統(tǒng)（entity-component-system）。另外，組件能發(fā)布并分享出去，其它開發(fā)者能以 HTML 的形式進行使用。

減少冗余復雜的代碼

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

A-Frame 的 Hello world

在手機的瀏覽器（如：Chrome、QQ瀏覽器）中呈現(xiàn)的效果

實現(xiàn)代碼如下：

// 引入aframe框架



  
  
  
      
  
  
  
  
  
  
  
  
    
  

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

該框架的三維坐標軸遵循右手坐標系，具體如下圖：

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

position 相當于 CSS3 中的 translate3d

以米為單位長度

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

rotation="x y z" 單位角度（°），拇指指向坐標軸的正方向，其余手指卷起來的方向就是該軸的旋轉(zhuǎn)正方向。

color 是材質(zhì)顏色，默認是白色（#FFF）

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

當然，上述案例只是 A-Frame 的 Hello World demo。若你感興趣，可以深入學習，再結合自己的想法，相信你能作出讓人拍手稱贊的作品。

A-Frame 官網(wǎng)：https://aframe.io/

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

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

下面就列舉一些 WebVR 的相關案例，如果你已具備了 VR 的體驗環(huán)境，不妨體驗一下。

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

Sketchfab：Sketchfab 是一個不需任何插件即可在 Web 頁面里嵌入交互式 3D 模型的服務網(wǎng)站。

Vizor：該網(wǎng)站提供了可視化編輯器，讓任何人都能在瀏覽器上創(chuàng)建和分享他們的 VR 內(nèi)容。

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

...

更多 WebVR 內(nèi)容等著你們發(fā)現(xiàn)

許多人將 2016 年稱為 VR 元年。VR 的前景有人看好，也有人看衰。但無論如何，新技術的出現(xiàn)都值得我們?nèi)ンw驗一番。當然，作為一名開發(fā)者，也可以從代碼的角度體驗一番。

想詳細了解更多關于 VR 的行業(yè)報告，可以閱讀 《VR與AR：解讀下一個通用計算平臺》。

WebVR.info

A-Frame

How to Build VR on the Web Today

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

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

感謝您的閱讀，本文由 凹凸實驗室 版權所有。如若轉(zhuǎn)載，請注明出處：凹凸實驗室（https://aotu.io/notes/2016/08...）