在SFHTML5小組（San Francisco HTML5 User Group）組織的一場會議中，與會者們的討論焦點圍繞著兩個主題：使用HTML5技術——如WebGL、WebVR、Three.js和GLAM——創建虛擬現實體驗，以及Firefox和Chrome對這些技術提供支持的當前開發進展。這一切背后的目的在于，將整個互聯網帶入虛擬現實（以下簡稱VR）的世界中。

\\

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

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

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

\\

來自Mozilla的Firefox OS首席UX設計師Josh Carpenter，在他的演講“WebVR的UI/UX設計”中，展示了結合Firefox使用Oculus Rift的效果，并針對開放的“網絡化（Webby）”虛擬現實體驗總結了一些他所期望的特性：

\\

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

Carpenter還演示了一些早期階段的工作，這些工作使得普通網站帶入VR世界而不必要求這些網站升級其的內容。他還創建了一系列在不同VR站點之間切換時使用的轉場效果。在設計VR瀏覽器方面，Carpenter看到了許多潛在的可能性，因為目前我們已經可以使用具備空間動畫能力的360度Canvas。

\\

來自Google的WebGL和WebVR開發者Brandon Jones，在他的演講Web瀏覽器的VR內部實現中，提供了一些用于VR應用方面的代碼樣例，以介紹在渲染VR場景時所需的必要條件。在剛開始對站點進行VR渲染的時候，或許有許多令人生畏的工作，但如果我們通過像下面代碼段中展示的一樣使用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承認，盡管Three.js并未將VR作為優先考慮的內容，也尚未針對VR渲染做優化，甚至它本身可能還需要進行一些優化，但它至少已經能夠肩負起VR渲染的工作。針對VR應用開發者，Jones給出了一些建議：

\\

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

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

\\

來源：SFHTML5會議視頻，WebVR API新手指南，Mozilla VR（一個完全采用VR的網站），Google Cardboard，Chrome VR實驗，GLAM，Mozilla WebVR Mailing List。

\\

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。