WebVR大潮來襲 ---前端開發(fā)能做些什么？

2018-5-28    周周

        去年谷歌和火狐針對(duì)WebVR提出了WebVR API的標(biāo)準(zhǔn)，顧名思義，WebVR即web + VR的體驗(yàn)方式，我們可以戴著頭顯享受沉浸式的網(wǎng)頁，新的API標(biāo)準(zhǔn)讓我們可以使用js語言來開發(fā)。今天，約克先森將介紹如何開發(fā)一個(gè)WebVR網(wǎng)頁，在此之前，我們有必要了解WebVR的體驗(yàn)方式。

WebVR體驗(yàn)?zāi)Ｊ?/strong>

WebVR的體驗(yàn)方式可以分為VR模式和裸眼模式

一、VR模式

?滑配式HMD + 移動(dòng)端瀏覽器

        如使用cardboard眼鏡來體驗(yàn)手機(jī)瀏覽器的webVR網(wǎng)頁，瀏覽器將根據(jù)水平陀螺儀的參數(shù)來獲取用戶的頭部傾斜和轉(zhuǎn)動(dòng)的朝向，并告知頁面需要渲染哪一個(gè)朝向的場景。

?分離式HMD + PC端瀏覽器

        通過佩戴Oculus Rift的分離式頭顯瀏覽連接在PC主機(jī)端的網(wǎng)頁，現(xiàn)支持WebVR API的瀏覽器主要是火狐的 Firefox Nightly和設(shè)置VR enabled的谷歌chrome beta。

二、裸眼模式

        除了VR模式下的體驗(yàn)方式，這里還考慮了裸眼下的體驗(yàn)瀏覽網(wǎng)頁的方式，在PC端如果探測的用戶選擇進(jìn)入VR模式，應(yīng)讓用戶可以使用鼠標(biāo)拖拽場景，而在智能手機(jī)上則應(yīng)讓用戶可以使用touchmove或旋轉(zhuǎn)傾斜手機(jī)的方式來改變場景視角。

        WebVR的概念大概就如此，這次我們將采用cardboard + mobile的方式來測試我們的WebVR場景，現(xiàn)在踏上我們的開發(fā)之旅。

準(zhǔn)備工作

        技術(shù)和框架：three.js for WebGL

         Three.js是構(gòu)建3d場景的框架，它封裝了WebGL函數(shù)，簡化了創(chuàng)建場景的代碼成本，利用three.js我們可以更優(yōu)雅地創(chuàng)建出三維場景和三維動(dòng)畫。

        測試工具：智能手機(jī) + 滑配式頭顯

        推薦使用cardboard或者某寶上三十塊錢的高仿貨。當(dāng)然，如果你練就了裸眼就能將手機(jī)雙屏畫面看成單屏的能力也可以忽略。

       需要引入的js插件：

  • three.min.js
  • webvr-polyfill.js
  • VRcontrols.js
  • VReffect.js
  • webvr-manager.js

webvr-polyfill.js

        由于WebVR API還沒被各大主流瀏覽器支持，因此需要引入webvr-polyfill.js來支持WebVR網(wǎng)頁，它提供了大量VR相關(guān)的API，比如Navigator.getVRDevices()獲取VR頭顯信息的方法。

VRControls.js

        VR控制器，是three.js的一個(gè)相機(jī)控制器對(duì)象，引入VRcontrols.js可以根據(jù)用戶在空間的朝向渲染場景，它通過調(diào)用WebVR API的orientation值控制camera的rotation屬性。

VREffect.js

        VR分屏器，這是three.js的一個(gè)場景分屏的渲染器，提供戴上VR頭顯的顯示方式，VREffect.js重新創(chuàng)建了左右兩個(gè)相機(jī)，對(duì)場景做二次渲染，產(chǎn)生雙屏效果。

webvr-manager.js

         這是WebVR的方案適配插件，它提供PC端和移動(dòng)端的兩種適配方式，通過new WebVRManager()可以生成一個(gè)VR圖標(biāo)，提供VR模式和裸眼模式的不同體驗(yàn)，當(dāng)用戶在移動(dòng)端點(diǎn)擊按鈕進(jìn)入VR模式時(shí)，WebVRManager便會(huì)調(diào)用VREffect分屏器進(jìn)行分屏，而退出VR模式時(shí)，WebVRManager便用回renderer渲染器進(jìn)行單屏渲染。

        具體使用方法我們將在下文說明。

        3D場景構(gòu)建

        首先我們創(chuàng)建一個(gè)HTML文件

       <!DOCTYPE html>

       <html lang="en">

       <head> 

              <meta charset="UTF-8">

                  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">

              <title>webVR-helloworld</title>

                   <style type="text/css">

                         * { 

                           margin: 0;

                           padding: 0;

                            }

                     html,body {

                                 height: 100%;

                                overflow: hidden;

                     }

               </style>

         </head>

         <body>

         </body>

        <script src="./vendor/three.min.js"></script>

          <script src="./vendor/webvr-polyfill.js"></script>

          <script src="./vendor/VRControls.js"></script>

       <script src="./vendor/VREffect.js"></script>

       <script src="./vendor/webvr-manager.js"></script>

       <script src="./main.js"></script>

       </html>

         接下來編寫js腳本，開始創(chuàng)建我們的3d場景。

1、創(chuàng)建場景

        Three.js中的scene場景是繪制我們3d對(duì)象的整個(gè)容

       1.var scene = new THREE.Scene();

2、添加相機(jī)

Three.js的相機(jī)

Three.js中的camera相機(jī)代表用戶的眼睛，我們通過設(shè)置FOV確定視野范圍，

  • //定義一個(gè)60°的視角，視線范圍在1到1000的透視相機(jī)
  • var camera = new THREE. new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000);
  • scene.add(camera);

3、添加渲染器

  • Three.js的渲染器用來渲染camera所看到的畫面


  • //初始化渲染器 antialias參數(shù)為ture表示開啟抗鋸齒策略
  • var renderer = new THREE.WebGLRenderer({ antialias: true } );
  • //設(shè)置渲染器渲染尺寸
  • renderer.setSize(window.innerWidth,window.innerHeight);
  • //設(shè)置渲染背景為白色
  • renderer.setClearColor(0xeeeeee);
  • //將渲染場景的canvas放入body標(biāo)簽里
  • document.body.appendChild(renderer.domElement);

  • 添加一個(gè)立方體網(wǎng)格

  • // 創(chuàng)建立方體
  • var geometry = new THREE.CubeGeometry( 10,10,10);
  • var cubematerial = new THREE.MeshLambertMaterial( { color: 0xef6500,needsUpdate: true,opacity:1,transparent:true} );
  • var cube = new THREE.Mesh( geometry, Cubematerial );
  • cube.position.set(0,100,-50);
  • cube.rotation.set(Math.PI/6,Math.PI/4,0);
  • scene.add(cube);

4、啟動(dòng)動(dòng)畫

  • 產(chǎn)生動(dòng)畫的原理就是讓camera持續(xù)連拍，同時(shí)每一次改變物體的屬性，通過requestAnimationFrame()方法遞歸的方式來持續(xù)更新場景對(duì)象屬性，你可以將它理解為setTimeout的優(yōu)化版。相比setTimeout函數(shù)，requestAnimationFrame可以保證動(dòng)畫渲染不會(huì)因?yàn)橹骶€程的阻塞而造成跳幀。


  • function animate() {
  •     //讓立方體旋轉(zhuǎn)
  •     cube.rotation.y += 0.01;
  •     //渲染器渲染場景，等同于給相機(jī)按下快門
  •     renderer.render(scene, camera);
  •     //遞歸運(yùn)行該函數(shù)
  •     requestAnimationFrame( animate );
  • }
  • animate();//啟動(dòng)動(dòng)畫

      至此，我們已經(jīng)繪制了一個(gè)簡單的3d場景并且讓它動(dòng)了起來，接下來，我們需要讓我們的場景可以支持WebVR模式。

WebVR場景開發(fā)

       WebVR網(wǎng)頁的基本原理其實(shí)是通過瀏覽器的WebVR API獲取用戶輸入，進(jìn)而控制相機(jī)的視角，在VR模式下通過VR控制器和VR分屏器以二分屏+gyroscope(使用水平陀螺儀)的方式顯示畫面，裸眼情況下提供全屏+touchmove/gyroscope。

       現(xiàn)在我們開始分別創(chuàng)建上文所說的VR控制器和VR分屏器

  • //初始化VR控制器需要傳入場景相機(jī)
  • var vrControls = new THREE.VRControls(camera);
  • //初始化VR渲染器需要傳入場景渲染器
  • var vrEffect = new THREE.VREffect(renderer);
  • //初始化VR適配器，傳入渲染器和分屏器
  • var vrManager = new WebVRManager(renderer, vrEffect);

      然后在前面創(chuàng)建的場景渲染函數(shù)里調(diào)用

  • function animate() {
  •     cube.rotation.y += 0.01;
  •     //實(shí)時(shí)更新相機(jī)的位置和轉(zhuǎn)角
  •     vrControls.update();
  •     vrManager.render(scene, camera);
  •     //遞歸運(yùn)行該函數(shù)
  •     requestAnimationFrame( animate );
  • }

       至此，我們已經(jīng)完成了一個(gè)基本的webVR網(wǎng)頁，不過少了點(diǎn)交互效果好像，敬請期待Web開發(fā)的新世界---WebVR之交互事件。

  • 完整代碼：在文章基礎(chǔ)上添加了天空和地面相關(guān)代碼，以及下篇文章將講到VR凝視交互事件。
  • demo演示地址 ：手機(jī)瀏覽需設(shè)置允許橫屏。

結(jié)語

        目前，國外的谷歌、火狐、Facebook和國內(nèi)百度已推出支持WebVR瀏覽器的版本，微軟也宣布將推出自己的VR瀏覽器，隨著后期5g網(wǎng)絡(luò)極速時(shí)代的到來以及HMD頭顯的價(jià)格和平臺(tái)的成熟，WebVR的體驗(yàn)方式將是革命性的，用戶通過WebVR瀏覽網(wǎng)上商店，線上教學(xué)可進(jìn)行“面對(duì)面”師生交流等，基于這種種應(yīng)用場景，我們可以找到一個(gè)更好的動(dòng)力去學(xué)習(xí)WebVR。






分享本文至：

日歷

鏈接

個(gè)人資料

存檔