2016 年最令科技界激动的话题，莫过于VR会如何改变世界。一些电影已开始涉足VR，让用户不仅能看到3D影像，更能以“移形换影”之术身临其境，带来前所未有 的沉浸式观影体验；此外，游戏领域也开始VR化，用户再也不用忍受游戏包里单一的场景。这些酷炫效果带来了巨大想象空间，VR正在走近人们的生活。然而现 实是，除了偶尔体验下黑科技的奇妙外，VR并没有真正普及，在资本和硬件厂商狂热的背后，质疑声也此起彼伏。

目 前，虽然VR硬件的发展已经走上了快车道，但内容却非常单薄。一部VR电影的成本相当高昂，VR游戏也不逊色。内容创作成本的居高不下，导致了VR的曲高 和寡。要想脱下那一层高冷的贵族华裳，飞入寻常百姓家，VR尚需解决内容供给这一难题。以HTML5为代表的Web技术的发展，或将改变这一僵局。目前， 最新的Google Chrome和Mozilla Firefox浏览器已经加入面向HTML5技术的WebVR功能支持，同时各方也正在起草并充实业界最新的WebVR API标准。基于Web端的这些虚拟现实标准将进一步降低VR内容的技术创作成本及门槛，有利于世界上最大的开发者群体— HTML5（JavaScript）开发者进入VR内容创作领域。这不仅是Web技术发展历程上的显著突破，也为VR造就了借力腾飞的契机。

Web端VR的优势

Web可降低VR体验门槛

Web 技术不仅使创作VR的成本更加低廉，而且大大降低技术门槛。Web VR依托于WebGL技术的高速发展，利用GPU执行计算以及游戏引擎技术针对芯片级的API优化，提高了图形渲染计算能力，大大降低开发者进入VR领域 的门槛，同时Web VR还可以更好地结合云计算技术，补足VR终端的计算能力，加强交互体验。

可以肯定，Web扩展了VR的使用范围，广告营销，全景视频等领域已经涌现一批创新案例，很多生活化的内容也纳入了VR的创作之中，如实景旅游、新闻报道、虚拟购物等，其内容展示、交互都可以由HTML5引擎轻松创建出来。这无疑给其未来发展带来更多想象空间。

Web开发者基数庞大

除了技术上的实现优势，Web还能给VR带来一股巨大的创新动力，因为它拥有着广泛的应用范围与庞大的开发者基数，能帮助VR技术打赢一场人民战争，让VR不再只是产业大亨们的资本游戏，而是以平民化的姿态，进入广大用户日常生活的方方面面。

相信假以时日，VR应用会像现在满目皆是的App一样，大量的VR开发者借助于Web端开发的低门槛而大量进入，同时各种稀奇古怪的创意层出不穷，虚拟现实成为电商商家必须的经营手段等。若到了这个阶段，VR离真正的繁荣也就不远了。

开发Web端的VR内容

接 下来我们通过实践操作来真正制作一些Web端的VR内容，体验WebVR的便捷优势。我们知道，许多VR体验是以应用程序的形式呈现的，这意味着你在体验 VR前，必须进行搜索与下载。而Web VR则改变了这种形式，它将VR体验搬进了浏览器，Web+VR = WebVR。在进入实践之前，下面先来分析一下WebVR实现的技术现状。

WebVR 开发的方式

在Web上开发VR应用，有下面三种方式：

• HTML5+ Java Scnipt + WebGL + WebVR API

• 传统引擎 + Emscripten^[1]

• 第三方工具，如A-Frame^[2]

第 一种方法是使用WebGL与WebVR API结合，在常规Web端三维应用的基础上通过API与VR设备进行交互，进而得到对应的VR实现。第二种是在传统引擎开发内容的基础上，比如 Unity、Unreal等，使用Emscripten将C/C++代码移植到Java Scnipt版本中，进而实现Web端的VR。第三种是在封装第一种方法的基础上，专门面向没有编程基础的普通用户来生产Web端VR内容。在本文中我们 主要以第一和第三种方法为例进行说明。

WebVR草案

WebVR 是早期和实验性的JavaScript API，它提供了访问如Oculus Rift、HTC Vive以及Google Cardboard等VR设备功能的API。VR应用需要高精度、低延迟的接口，才能传递一个可接受的体验。而对于类似Device Orientation Event接口，虽然能获取浅层的VR输入，但这并不能为高品质的VR提供必要的精度要求。WebVR提供了专门访问VR硬件的接口，让开发者能构建舒适 的VR体验。

WebVR API目前可用于安装了Firefox nightly的Oculus Rift、Chrome的实验性版本和Samsung Gear VR的浏览器。

使用A-Frame开发VR内容

如 果想以较低的门槛体验一把WebVR开发，那么可以使MozVR团队开发的A-Frame框架。A-Frame是一个通过HTML创建VR体验的开源 WebVR框架。通过该框架构建的VR场景能兼容智能手机、PC、 Oculus Rift和HTC Vive。MozVR团队开发A-Frame框架的的是：让构建3D/VR场景变得更易更快，以吸引Web开发社区进入WebVR的生态。WebVR要成 功，需要有内容。但目前只有很少一部分WebGL开发者，却有数以百万的Web开发者与设计师。A-Frame要把3D/VR内容的创造权力赋予给每个 人，其具有如下的优势与特点：

• A-Frame能减少冗余代码。冗余复杂的代码成为了尝鲜者的障碍，A-Frame将复杂冗余的代码减至一行HTML代码，如创建场景则只需一个标签。

• A-Frame是专为Web开发者设计的。它基于 DOM，因此能像其他Web应用一样操作3D/VR内容。当然，也能结合box、d3、React等JavaScript 框架一起使用。

• A-Frame让代码结构化。Three.js代码通常是松散的，A-Frame在Three.js之上构建了一个声明式的实体组件系统（entity-component-system）。另外，组件能发布并分享出去，其他开发者能以 HTML的形式进行使用。
  代码实现如下：

// 引入A-Frame框架