本文為《程序員》原創(chuàng)文章，未經(jīng)允許不得轉(zhuǎn)載，更多精彩文章請訂閱2017年《程序員》
作者：張乾，上海渲圖信息科技有限公司CEO。曾任職于騰訊上海研發(fā)部，負(fù)責(zé)次時代游戲引擎的研究與開發(fā)工作，目前主要從事VR/AR以及輕量化Web3D的應(yīng)用與平臺開發(fā)，熱愛圖形與渲染。
責(zé)編：屠敏，關(guān)注 VR/AR 等領(lǐng)域，尋求報(bào)道或者投稿請發(fā)郵件tumin@csdn.net，另有「CSDN VR 開發(fā)群」，技術(shù)之路，我們共同進(jìn)步，歡迎開發(fā)者加微信tm_forever_miss申請入群，務(wù)必備注姓名+公司+職位。

---

導(dǎo)語：隨著硬件和軟件技術(shù)的發(fā)展，產(chǎn)業(yè)界對虛擬現(xiàn)實(shí)（Virtual Reality）用戶體驗(yàn)產(chǎn)生了重大期望。技術(shù)的進(jìn)步也使我們可能通過現(xiàn)代瀏覽器借助開放Web平臺獲得這種用戶體驗(yàn)。這將幫助Web成為創(chuàng)建、分發(fā)以及幫助用戶獲得虛擬現(xiàn)實(shí)應(yīng)用和服務(wù)生態(tài)系統(tǒng)的重要基礎(chǔ)平臺。

引言

---

2016年最令科技界激動的話題，莫過于VR會如何改變世界。一些電影已開始涉足VR，讓用戶不僅能看到3D影像，更能以“移形換影”之術(shù)身臨其境，帶來前所未有的沉浸式觀影體驗(yàn)；此外，游戲領(lǐng)域也開始VR化，用戶再也不用忍受游戲包里單一的場景。這些酷炫效果帶來了巨大想象空間，VR正在走近人們的生活。然而現(xiàn)實(shí)是，除了偶爾體驗(yàn)下黑科技的奇妙外，VR并沒有真正普及，在資本和硬件廠商狂熱的背后，質(zhì)疑聲也此起彼伏。

目前，雖然VR硬件的發(fā)展已經(jīng)走上了快車道，但內(nèi)容卻非常單薄。一部VR電影的成本相當(dāng)高昂，VR游戲也不遜色。內(nèi)容創(chuàng)作成本的居高不下，導(dǎo)致了VR的曲高和寡。要想脫下那一層高冷的貴族華裳，飛入尋常百姓家，VR尚需解決內(nèi)容供給這一難題。以HTML5為代表的Web技術(shù)的發(fā)展，或?qū)⒏淖冞@一僵局。目前，最新的Google Chrome和Mozilla Firefox瀏覽器已經(jīng)加入面向HTML5技術(shù)的WebVR功能支持，同時各方也正在起草并充實(shí)業(yè)界最新的WebVR API標(biāo)準(zhǔn)?；赪eb端的這些虛擬現(xiàn)實(shí)標(biāo)準(zhǔn)將進(jìn)一步降低VR內(nèi)容的技術(shù)創(chuàng)作成本及門檻，有利于世界上最大的開發(fā)者群體—HTML5（JavaScript）開發(fā)者進(jìn)入VR內(nèi)容創(chuàng)作領(lǐng)域。這不僅是Web技術(shù)發(fā)展歷程上的顯著突破，也為VR造就了借力騰飛的契機(jī)。

Web端VR的優(yōu)勢

---

Web可降低VR體驗(yàn)門檻

Web技術(shù)不僅使創(chuàng)作VR的成本更加低廉，而且大大降低技術(shù)門檻。Web VR依托于WebGL技術(shù)的高速發(fā)展，利用GPU執(zhí)行計(jì)算以及游戲引擎技術(shù)針對芯片級的API優(yōu)化，提高了圖形渲染計(jì)算能力，大大降低開發(fā)者進(jìn)入VR領(lǐng)域的門檻，同時Web VR還可以更好地結(jié)合云計(jì)算技術(shù)，補(bǔ)足VR終端的計(jì)算能力，加強(qiáng)交互體驗(yàn)。

可以肯定，Web擴(kuò)展了VR的使用范圍，廣告營銷，全景視頻等領(lǐng)域已經(jīng)涌現(xiàn)一批創(chuàng)新案例，很多生活化的內(nèi)容也納入了VR的創(chuàng)作之中，如實(shí)景旅游、新聞報(bào)道、虛擬購物等，其內(nèi)容展示、交互都可以由HTML5引擎輕松創(chuàng)建出來。這無疑給其未來發(fā)展帶來更多想象空間。

Web開發(fā)者基數(shù)龐大

除了技術(shù)上的實(shí)現(xiàn)優(yōu)勢，Web還能給VR帶來一股巨大的創(chuàng)新動力，因?yàn)樗鼡碛兄鴱V泛的應(yīng)用范圍與龐大的開發(fā)者基數(shù)，能幫助VR技術(shù)打贏一場人民戰(zhàn)爭，讓VR不再只是產(chǎn)業(yè)大亨們的資本游戲，而是以平民化的姿態(tài)，進(jìn)入廣大用戶日常生活的方方面面。

相信假以時日，VR應(yīng)用會像現(xiàn)在滿目皆是的App一樣，大量的VR開發(fā)者借助于Web端開發(fā)的低門檻而大量進(jìn)入，同時各種稀奇古怪的創(chuàng)意層出不窮，虛擬現(xiàn)實(shí)成為電商商家必須的經(jīng)營手段等。若到了這個階段，VR離真正的繁榮也就不遠(yuǎn)了。

開發(fā)Web端的VR內(nèi)容

---

接下來我們通過實(shí)踐操作來真正制作一些Web端的VR內(nèi)容，體驗(yàn)WebVR的便捷優(yōu)勢。我們知道，許多VR體驗(yàn)是以應(yīng)用程序的形式呈現(xiàn)的，這意味著你在體驗(yàn)VR前，必須進(jìn)行搜索與下載。而Web VR則改變了這種形式，它將VR體驗(yàn)搬進(jìn)了瀏覽器，Web+VR = WebVR。在進(jìn)入實(shí)踐之前，下面先來分析一下WebVR實(shí)現(xiàn)的技術(shù)現(xiàn)狀。

WebVR 開發(fā)的方式

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

• HTML5+ Java Scnipt + WebGL + WebVR API
• 傳統(tǒng)引擎 + Emscripten^[1]
• 第三方工具，如A-Frame^[2]

第一種方法是使用WebGL與WebVR API結(jié)合，在常規(guī)Web端三維應(yīng)用的基礎(chǔ)上通過API與VR設(shè)備進(jìn)行交互，進(jìn)而得到對應(yīng)的VR實(shí)現(xiàn)。第二種是在傳統(tǒng)引擎開發(fā)內(nèi)容的基礎(chǔ)上，比如Unity、Unreal等，使用Emscripten將C/C++代碼移植到Java Scnipt版本中，進(jìn)而實(shí)現(xiàn)Web端的VR。第三種是在封裝第一種方法的基礎(chǔ)上，專門面向沒有編程基礎(chǔ)的普通用戶來生產(chǎn)Web端VR內(nèi)容。在本文中我們主要以第一和第三種方法為例進(jìn)行說明。

WebVR草案

WebVR是早期和實(shí)驗(yàn)性的JavaScript API，它提供了訪問如Oculus Rift、HTC Vive以及Google Cardboard等VR設(shè)備功能的API。VR應(yīng)用需要高精度、低延遲的接口，才能傳遞一個可接受的體驗(yàn)。而對于類似Device Orientation Event接口，雖然能獲取淺層的VR輸入，但這并不能為高品質(zhì)的VR提供必要的精度要求。WebVR提供了專門訪問VR硬件的接口，讓開發(fā)者能構(gòu)建舒適的VR體驗(yàn)。

WebVR API目前可用于安裝了Firefox nightly的Oculus Rift、Chrome的實(shí)驗(yàn)性版本和Samsung Gear VR的瀏覽器。

使用A-Frame開發(fā)VR內(nèi)容

如果想以較低的門檻體驗(yàn)一把WebVR開發(fā)，那么可以使MozVR團(tuán)隊(duì)開發(fā)的A-Frame框架。A-Frame是一個通過HTML創(chuàng)建VR體驗(yàn)的開源WebVR框架。通過該框架構(gòu)建的VR場景能兼容智能手機(jī)、PC、 Oculus Rift和HTC Vive。MozVR團(tuán)隊(duì)開發(fā)A-Frame框架的的是：讓構(gòu)建3D/VR場景變得更易更快，以吸引Web開發(fā)社區(qū)進(jìn)入WebVR的生態(tài)。WebVR要成功，需要有內(nèi)容。但目前只有很少一部分WebGL開發(fā)者，卻有數(shù)以百萬的Web開發(fā)者與設(shè)計(jì)師。A-Frame要把3D/VR內(nèi)容的創(chuàng)造權(quán)力賦予給每個人，其具有如下的優(yōu)勢與特點(diǎn)：

• A-Frame能減少冗余代碼。冗余復(fù)雜的代碼成為了嘗鮮者的障礙，A-Frame將復(fù)雜冗余的代碼減至一行HTML代碼，如創(chuàng)建場景則只需一個<a-scene> 標(biāo)簽。
• A-Frame是專為Web開發(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)建了一個聲明式的實(shí)體組件系統(tǒng)（entity-component-system）。另外，組件能發(fā)布并分享出去，其他開發(fā)者能以 HTML的形式進(jìn)行使用。

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

// 引入A-Frame框架
<script src="./aframe.min.js"></script>
<a-scene>
  <!-- 定義并創(chuàng)建球體 -->
  <a-sphere position="0 1 -1" radius="1" color="#EF2D5E"></a-sphere>
  <!-- 定義交創(chuàng)建立方體 -->
  <a-box width="1" height="1" rotation="0 45 0" depth="1" color="#4CC3D9" position="-1 0.5 1"></a-box>    
  <!-- 定義并創(chuàng)建圓柱體 -->
  <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <!-- 定義并創(chuàng)建底板 -->
  <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <!-- 定義并創(chuàng)建基于顏色的天空盒背景-->
  <a-sky color="#ECECEC"></a-sky>
  <!-- 設(shè)置并指定攝像機(jī)的位置 -->
  <a-entity position="0 0 4">
    <a-camera></a-camera>
  </a-entity>
</a-scene>

上述代碼在A-Frame中執(zhí)行的效果如圖1所示。

使用Three.js開發(fā)VR內(nèi)容

上文中我們提到另外了一種更加靠近底層同時更加靈活生產(chǎn)WebVR內(nèi)容的方法，就是直接使用WebGL+WebVR的API。這種方法相對于A-Frame的優(yōu)勢在于可以將VR的支持方便地引入到我們自己的Web3D引擎中，同時對于底層，特別是渲染模塊可以做更多優(yōu)化操作從而提升VR運(yùn)行時的性能與體驗(yàn)。

如果沒有自己的Web3D引擎也沒有關(guān)系，可以直接使用成熟的渲染框架，比如Three.js和Babylon.js等，這些都是比較流行且較為出色的Web3D端渲染引擎（框架）。接下來就以Three.js為例，說明如何在其上制作WebVR內(nèi)容。

首先，對于任何渲染程序的三個要素是相似的，即是建立好scene、renderer、camera。設(shè)置渲染器、場景以及攝像機(jī)的操作如下：

var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
 document.body.appendChild(renderer.domElement);
// 創(chuàng)建Three.js的場景
var scene = new THREE.Scene();
// 創(chuàng)建Three.js的攝像機(jī)
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 10000);
// 調(diào)用WebVR API中的攝像機(jī)控制器對象，并將其與主攝像機(jī)進(jìn)行綁定
var controls = new THREE.VRControls(camera);
// 設(shè)置為站立姿態(tài)
controls.standing = true;
// 調(diào)用WebVR API中的渲染控制器對象，并將其與渲染器進(jìn)行綁定
var effect = new THREE.VREffect(renderer);
effect.setSize(window.innerWidth, window.innerHeight);
// 創(chuàng)建一個全局的VR管理器對象，并進(jìn)行初始化的參數(shù)設(shè)置
var params = {
  hideButton: false, // Default: false.
  isUndistorted: false // Default: false.
};
var manager = new WebVRManager(renderer, effect, params);

上述代碼即完成了渲染前的初始化設(shè)置。接下來需要向場景中加具體的模型對象，主要操作如下所示：

function onTextureLoaded(texture) {
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;
  texture.repeat.set(boxSize, boxSize);
  var geometry = new THREE.BoxGeometry(boxSize, boxSize, boxSize);
  var material = new THREE.MeshBasicMaterial({
    map: texture,
    color: 0x01BE00,
    side: THREE.BackSide
  });
  // Align the skybox to the floor (which is at y=0).
  skybox = new THREE.Mesh(geometry, material);
  skybox.position.y = boxSize/2;
  scene.add(skybox);
  // For high end VR devices like Vive and Oculus, take into account the stage
  // parameters provided.
  setupStage();
}
// Create 3D objects.
var geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
var material = new THREE.MeshNormalMaterial();
var targetMesh = new THREE.Mesh(geometry, material);
var light = new THREE.DirectionalLight( 0xffffff, 1.5 );
light.position.set( 10, 10, 10 ).normalize();
scene.add( light );  
var ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);

var loader = new THREE.ObjectLoader();
loader.load('./assets/scene.json', function (obj){
    mesh = obj;
    // Add cube mesh to your three.js scene
    scene.add(mesh);
    mesh.traverse(function (node) {
        if (node instanceof THREE.Mesh) {
            node.geometry.computeVertexNormals();
        }
    });
    // Scale the object
    mesh.scale.x = 0.2;
    mesh.scale.y = 0.2;
    mesh.scale.z = 0.2;
    targetMesh = mesh;
    // Position target mesh to be right in front of you.
    targetMesh.position.set(0, controls.userHeight * 0.8, -1);
});

最后的操作便是在requestAnimationFrame設(shè)置更新。在animate的函數(shù)中，我們要不斷地獲取HMD返回的信息以及對camera進(jìn)行更新。

// Request animation frame loop function
var lastRender = 0;
function animate(timestamp) {
  var delta = Math.min(timestamp - lastRender, 500);
  lastRender = timestamp;
  // Update VR headset position and apply to camera.
  //更新獲取HMD的信息
  controls.update();
  // Render the scene through the manager.
  //進(jìn)行camera更新和場景繪制
  manager.render(scene, camera, timestamp);
  requestAnimationFrame(animate);
}

最后，程序運(yùn)行的效果如圖2所示，可以直接在手機(jī)上通過VR模式并配合Google Cardboard即可體驗(yàn)無需下載的VR內(nèi)容^[3]。

上述示例中的代碼實(shí)現(xiàn)可從^[4]中下載。

經(jīng)驗(yàn)與心得

---

通過上述介紹我們基本可以實(shí)現(xiàn)一個具有初步交互體驗(yàn)的Web端VR應(yīng)用，但這只是第一步，單純技術(shù)上的實(shí)現(xiàn)距離真正的可工程化還有一定差距。因?yàn)樽罱K工程化之后面向用戶的產(chǎn)品必須比技術(shù)原型要考慮更多具體的東西，比如渲染的質(zhì)量、交互的流暢度、虛擬化的沉浸度等，這些都最終決定用戶是否會持續(xù)使用產(chǎn)品、接受產(chǎn)品所提供的服務(wù)等，所以將上述技術(shù)在工程化應(yīng)用之前還有很多的優(yōu)化與改進(jìn)工作要做。以下是個人在做Web端VR應(yīng)用過程中體會的一些心得經(jīng)驗(yàn)，分享出來供讀者參考。

• 引擎的選用。如果是使用已有的WebGL引擎，則可參考^[5]中的文檔來進(jìn)行VR SDK集成。這里邊需要做到引擎層與VR SDK層兼容，以及VR模式與引擎的工具部分的整合，也可以參考桌面引擎如Unity3D和Unreal在VR SDK集成上的開發(fā)模式。如果選用第三方的WebGL引擎則有Three.js或Babylon.js等可選，這些主流的WebGL引擎都已經(jīng)（部分功能）集成了VR SDK。
• 調(diào)試的設(shè)備。調(diào)試Web端的VR應(yīng)用同樣需要有具體的VR設(shè)備的支持。對于桌面WebM內(nèi)容還是要盡量使用HTC Vive或Oculus等強(qiáng)沉浸感VR設(shè)備。對于移動Web應(yīng)用，由于Android平臺上的各瀏覽器的差異較大，表現(xiàn)也會不太一致，所以建議使用iOS設(shè)備進(jìn)行開發(fā)與調(diào)試，但是在最終發(fā)布前仍要對更多的Andnoid設(shè)備進(jìn)行適配性測試與優(yōu)化。
• 性能的優(yōu)化。在Web端做三維的繪制與渲染，性能還是主要瓶頸，因而要盡可能的提高實(shí)時渲染的性能，這樣才能有更多資源留給VR部分。目前的WebVR在渲染實(shí)時中并沒有像桌面VR SDK一樣可以調(diào)用眾多的GPU底層接口做諸如Stereo rendering等深層次的優(yōu)化，因而對性能的占用還是較多。
• 已知的問題。目前，WebVR仍然不太穩(wěn)定，還會有諸多的Bug，比如某些情況下會有設(shè)備跟蹤丟失的情況，而且效率也不是太高。大多數(shù)WebVR應(yīng)用可以作為后期產(chǎn)品的儲備和預(yù)研，但要推出真正可供用戶使用并流暢體驗(yàn)的產(chǎn)品，還是有較長的路要走。

結(jié)束語

---

許多人將即將過去的2016稱為VR元年，在這一年中VR的確經(jīng)歷了突飛猛進(jìn)的發(fā)展，體現(xiàn)在技術(shù)與生態(tài)等各個方面。在新的2017年，相信VR必將會有更大的發(fā)展與進(jìn)步，作為技術(shù)工作者，我們更應(yīng)該從自身的技術(shù)專長作為出發(fā)點(diǎn)，參與到新技術(shù)對社會與生活的變革中來。

參考鏈接

[1] http://kripken.github.io/emscripten-site/
[2] https://aframe.io/
[3] http://www.shxt3d.com/webvr/index.html
[4] https://github.com/bugrunnerzhang/hellowebvr.git
[5] https://mozvr.com/

---

了解最新移動開發(fā)、VR/AR 干貨技術(shù)分享，請關(guān)注 mobilehub 微信公眾號（ID: mobilehub)。