在SFHTML5小組（San Francisco HTML5 User Group）組織的一場會議中，與會者們的討論焦點(diǎn)圍繞著兩個(gè)主題：使用HTML5技術(shù)——如WebGL、WebVR、Three.js和GLAM——?jiǎng)?chuàng)建虛擬現(xiàn)實(shí)體驗(yàn)，以及Firefox和Chrome對這些技術(shù)提供支持的當(dāng)前開發(fā)進(jìn)展。這一切背后的目的在于，將整個(gè)互聯(lián)網(wǎng)帶入虛擬現(xiàn)實(shí)（以下簡稱VR）的世界中。

\\

Tony Parisi是VRML和X3D ISO標(biāo)準(zhǔn)的創(chuàng)造者之一，在會上他介紹了WebVR——它結(jié)合了虛擬現(xiàn)實(shí)和Web技術(shù)。目前， VR軟件基本上都屬于游戲式，在創(chuàng)建和操縱圖形方面做了大量的工作。大部分已有的VR應(yīng)用都借助于Unity引擎構(gòu)建，然而精通該引擎的人卻并不多。Parisi的理念是降低該領(lǐng)域的門檻，讓所有開發(fā)者都能夠使用JavaScript與WebGL這樣的基礎(chǔ)Web技術(shù)創(chuàng)建VR。Three.js是一個(gè)JavaScript類庫，用來在WebGL中渲染2D/3D圖像。借助Three.js，開發(fā)者將更易于渲染VR場景，代碼量僅為對應(yīng)的WebGL版本的1/10到1/3。Parisi目前還在致力于創(chuàng)建另一個(gè)不同的解決方案GLAM，這是一門用來創(chuàng)建3D Web內(nèi)容的聲明式語言。它將令VR渲染變得更加簡單。使用GLAM渲染一個(gè)旋轉(zhuǎn)的3D立方體，需要引入glam.js并這樣使用Tag：

\\\#photocube {\ image:url(../images/flowers.jpg);\ rx:30deg;\}\\

Parisi還介紹了，Chrome（實(shí)驗(yàn)版本，Blink源碼分支）和Firefox（nightly）都開始實(shí)現(xiàn)頭部跟蹤方面的WebVR API，這些API可以用來跟蹤VR設(shè)備的運(yùn)動(dòng)情況（目前支持Oculus Rift，稍后也會增加對其他設(shè)備的支持），并支持對WebGL/CSS3內(nèi)容進(jìn)行3D立體渲染。目前已有一個(gè)更簡單的可用方案，由Google Cardboard、智能手機(jī)和一個(gè)VR應(yīng)用（例如Cardboard）組成。該應(yīng)用使用智能手機(jī)的攝像頭和運(yùn)動(dòng)傳感器，在手機(jī)瀏覽器中使用WebGL生成活動(dòng)的立體圖像

\\

來自Mozilla的Firefox OS首席UX設(shè)計(jì)師Josh Carpenter，在他的演講“WebVR的UI/UX設(shè)計(jì)”中，展示了結(jié)合Firefox使用Oculus Rift的效果，并針對開放的“網(wǎng)絡(luò)化（Webby）”虛擬現(xiàn)實(shí)體驗(yàn)總結(jié)了一些他所期望的特性：

\\

• 通過鏈接，無縫且安全地從一個(gè)地方切換到另一個(gè)地方的能力。包括對導(dǎo)航鏈接、縮放、滾動(dòng)、后退、填寫信息等方面的控制。簡而言之，讓用戶在使用VR頭戴設(shè)備的時(shí)候能夠獲得類似于瀏覽器的體驗(yàn)。\\
• 易于開發(fā)。為了實(shí)現(xiàn)這一點(diǎn)，需要開發(fā)一些新的工具?！癑avaScript-Three.js-WebVR-WebGL-瀏覽器”這條工具鏈尚處于新生階段。\\
• 能夠在任何設(shè)備上獲得VR體驗(yàn)。\\
• 能夠?qū)?dāng)今世界中的網(wǎng)站自動(dòng)化轉(zhuǎn)換為VR體驗(yàn)。這意味著在訪問老式網(wǎng)站的時(shí)候，應(yīng)該同樣能夠獲得3D VR體驗(yàn)。\\
• VR商品化：更多的設(shè)備、嵌入性以及更好的性能。\

Carpenter還演示了一些早期階段的工作，這些工作使得普通網(wǎng)站帶入VR世界而不必要求這些網(wǎng)站升級其的內(nèi)容。他還創(chuàng)建了一系列在不同VR站點(diǎn)之間切換時(shí)使用的轉(zhuǎn)場效果。在設(shè)計(jì)VR瀏覽器方面，Carpenter看到了許多潛在的可能性，因?yàn)槟壳拔覀円呀?jīng)可以使用具備空間動(dòng)畫能力的360度Canvas。

\\

來自Google的WebGL和WebVR開發(fā)者Brandon Jones，在他的演講Web瀏覽器的VR內(nèi)部實(shí)現(xiàn)中，提供了一些用于VR應(yīng)用方面的代碼樣例，以介紹在渲染VR場景時(shí)所需的必要條件。在剛開始對站點(diǎn)進(jìn)行VR渲染的時(shí)候，或許有許多令人生畏的工作，但如果我們通過像下面代碼段中展示的一樣使用Three.js，這一切都會變得簡單許多。

\\\ // Normal scene setup, then...\\var vrControls = new THREE.VRControls(camera);\var vrEffect = new THREE.VREffect(renderer);\\function onEnterVRFullscreen() {\ vrEffect.setFullScreen(true);\} \function onWindowResize() {\ vrEffect.setSize(window.innerWidth, window.innerHeight);\} \function onRequestAnimationFrame() {\ vrControls.update();\ vrEffect.render(scene, camera);\}\\

Jones承認(rèn)，盡管Three.js并未將VR作為優(yōu)先考慮的內(nèi)容，也尚未針對VR渲染做優(yōu)化，甚至它本身可能還需要進(jìn)行一些優(yōu)化，但它至少已經(jīng)能夠肩負(fù)起VR渲染的工作。針對VR應(yīng)用開發(fā)者，Jones給出了一些建議：

\\

• 優(yōu)先考慮輕量級頂點(diǎn)渲染引擎\\
• 當(dāng)遇到性能問題的時(shí)候，減少canvas分辨率而不是幀數(shù)。\\
• 永遠(yuǎn)不要把與視點(diǎn)無關(guān)的東西（如陰影或環(huán)境地圖）重復(fù)渲染。\\
• 對每個(gè)眼睛看到的場景逐一完全繪制，在面對狀態(tài)轉(zhuǎn)換時(shí)，是一件非常沉重的任務(wù)。在具體場景下，或許更高效的做法是：針對每個(gè)物體，先繪制左眼所見場景，當(dāng)切換視圖后再繪制右眼所見場景。\

Jones還演示了在Chrome中渲染Quake 3 VR場景。

\\

來源：SFHTML5會議視頻，WebVR API新手指南，Mozilla VR（一個(gè)完全采用VR的網(wǎng)站），Google Cardboard，Chrome VR實(shí)驗(yàn)，GLAM，Mozilla WebVR Mailing List。

\\

查看英文原文：The Current Status of Browser-based Virtual Reality in HTML5

總結(jié)

以上是生活随笔為你收集整理的使用HTML5在浏览器中开发虚拟现实业务的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。