h5 vr效果_Web端VR初介绍

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 ni