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

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

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

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

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

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

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

立體視覺(jué)

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

HMD 原理示意圖

目前市場(chǎng)上主要有以下 3 種 HMD 設(shè)備：

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

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

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

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

Google Carboard

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

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

現(xiàn)實(shí)與虛擬

當(dāng)然，各式各樣的 VR 周邊設(shè)備也越來(lái)越多，如 Virtuix Omni 跑步機(jī)：

Virtuix Omni

這些設(shè)備無(wú)疑會(huì)增強(qiáng)了 VR 的體驗(yàn)，給用戶帶來(lái)更加刺激與逼真的體驗(yàn)。

上文說(shuō)了這么多關(guān)于 VR 的東西，視乎還沒(méi)有入正題（⊙﹏⊙)）

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

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

WebVR 是早期和實(shí)驗(yàn)性的 JavaScript API，它提供了訪問(wèn)如 Oculus Rift 和 Google Cardboard 等 VR 設(shè)備功能的 API。

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

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

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

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

JavaScript, Three.js 與 WebVR

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

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

上面說(shuō)道，在 Web 上開(kāi)發(fā) VR 應(yīng)用有 3 種（潛在）方式，前兩種都離不開(kāi)直接接觸 Three.js，而第三種方式則為時(shí)尚早。對(duì)于沒(méi)接觸過(guò) Three.js，但又想體驗(yàn)一把 WebVR 開(kāi)發(fā)的同學(xué)們來(lái)說(shuō)，無(wú)疑會(huì)存在一定的門檻。

如果你想以較低的門檻體驗(yàn)一把 WebVR 開(kāi)發(fā)，那么可以試試 MozVR 團(tuán)隊(duì) 開(kāi)發(fā)的 A-Frame 框架。

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

A-Frame 是一個(gè)通過(guò) HTML 創(chuàng)建 VR 體驗(yàn)的開(kāi)源 WebVR 框架。通過(guò)該框架構(gòu)建的 VR 場(chǎng)景能兼容智能手機(jī)、PC、 Oculus Rift 和 HTC Vive。

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

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

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

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

減少冗余復(fù)雜的代碼

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

A-Frame 的 Hello world

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

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

// 引入aframe框架



  
  
  
      
  
  
  
  
  
  
  
  
    
  

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

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

場(chǎng)景的原點(diǎn)默認(rèn)在視口底邊的中點(diǎn)

position 相當(dāng)于 CSS3 中的 translate3d

以米為單位長(zhǎng)度

height 與 width 是正面的長(zhǎng)和寬，depth表示深度（厚度）

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

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

在 PC 中，可通過(guò)鼠標(biāo)與鍵盤 WSAD 進(jìn)行交互

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

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

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

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

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

Beloola：Beloola 是一個(gè)基于 WebVR 的社交平臺(tái)，它允許人們?cè)谕粋€(gè)虛擬的空間上實(shí)時(shí)進(jìn)行情感交流。

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

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

Chrome Experiments for Virtual Reality：Chrome 團(tuán)隊(duì)提供的 6 個(gè) VR 案例。

...

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

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

想詳細(xì)了解更多關(guān)于 VR 的行業(yè)報(bào)告，可以閱讀 《VR與AR：解讀下一個(gè)通用計(jì)算平臺(tái)》。

WebVR.info

A-Frame

How to Build VR on the Web Today

VR與AR：解讀下一個(gè)通用計(jì)算平臺(tái)

本文轉(zhuǎn)自凹凸實(shí)驗(yàn)室：https://aotu.io/notes/2016/08...
更多文章請(qǐng)關(guān)注凹凸實(shí)驗(yàn)室：

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