清新亲民的虚拟现实——WebVR
发表于2016-10-25
作者：薛冰洁
WebVR，顾名思义，是通过浏览器作为媒介访问VR设备并实现交互的方式。从2014年Mozilla发起的实验性小项目，到今年3月Mozilla和Google合作开发的里程碑式WebVR API 1.0标准的发布，再到数日前OculusConnect 3中发布的Carmel VR浏览器和ReactVR库，WebVR正受到更多开发者的关注。
优势和功能
相比高贵冷艳的本地VR程序，集四大优势于一身的WebVR非常亲民。成本低：开发不基于游戏引擎，不必支付高昂的研发出版费用。 门槛低：开发难度降低，开发群体将不仅限于游戏开发者，成千上万的Web开发者都可以加入VR开发的大部队，加速充实VR内容。访问高：全球超过30亿的网民都会成为潜在的VR内容消费者，加上兼容各款HMD，WebVR的访问量将远超本地VR；易使用，也是WebVR最重要的优势：用户通过一个地址就可以从任何平台或HMD访问，无需下载安装程序。
WebVR的低阻力开发并不意味其功能孱弱。当前技术下，WebVR体验和本地程序相差无几。在PC端，WebVR可以自动访问已连接的Oculus Rift等头显设备，并支持空间追踪，甚至可以做到房间整体追踪（Room-Scale Tracking）；对于手机用户，WebVR也支持Samsung Gear和Google Cardboard模式，会自动在横屏状态下双屏显示，借助重力传感完成VR体验；即使没有VR设备，人们也可以利用鼠标或重力感应来预览内容。WebVR的刷新率可达每秒90帧——相对舒适的感官体验。WebVR也支持各类操控和交互方式。
缺陷与发展
传统浏览器并不是为高画质、低延迟的VR内容所设计的，因此有限的网页端图像效果成了WebVR的最大缺陷，其图像渲染远不及Unity或Unreal输出。
虽是缺陷，却不致命。作为网页端，从WebVR上发布的内容自然会与本地应用有所不同：WebVR擅长的是大众化，方便传播的内容。如空间全景图，360度全景视频，数据可视化，房产或商品预览等不足以单独作为本地应用程序的内容，却很WebVR：画面容易渲染，内容适合传播，用户可以分分钟通过链接分享在朋友圈。
当然，提高图像渲染效果将是目前WebVR的努力方向。WebVR API的开发者Brandon Jones认为，目前的WebVR 1.0虽然已经做到能够舒适运行VR渲染的程度，但仍存在延迟和不稳定，API会在这个方向更新完善；另外，随着浏览器的不断进步，加上新的网页端图像技术的持续更新，如WebGL2和Webassembly，都将促进WebVR的发展，在网页端运行AAA级VR游戏并不是梦。
目前只有少数浏览器支持WebVR，已知的包括Firefox Nightly builds, 部分Chrome, Samsung Internet Browser for Gear。 不久前微软Edge也宣布将会兼容WebVR，相信未来会有更多的浏览器支持WebVR。
加入这场变革
有人说这是VR的一场变革，也有人认为这是Web 3.0变革的一部分。不论如何，开发者们，是不是想立刻加入这场变革？创建WebVR的方式自然很多，今天我们就来探讨其中一种，如何利用A-Frame建立WebVR页面。
首先，下载 A-Frame的Hello World开放源码，并使用兼容WebVR的PC或手机浏览器打开index页面，我们可以看到如下场景。
A-Frame Hello World VR场景
场景很简单，只使用了几个基本几何体，源代码如下：
从Hello World源码我们可以看出，A-Frame非常结构化，简单易懂，适合初学者，这也正是Mozilla创建A-Frame的初衷。当然，这个例子只是一个Hello World场景，要创建VR内容，我们不会只满足于基础几何体、简单位移和单一颜色，我们需要自己的模型材质，也许还想达到360°全景效果。别担心，这些也非常容易实现。
模型导入
据官网解释，A-Frame可以兼容DAE或OBJ模型，例如导入一个OBJ模型，建议先在框架下加载定义a-asset-item, 并指明.obj文件和.mtl文件的路径:
加载定义之后以a-obj-model使用模型，并使用之前定义的id。
1 | 1 |
模型导入
效果如上图。可以看出，使用官网解释的方法可以导入模型，但贴图却不见了。在A-frame中使用obj文件生成的mtl只支持导入简单的单色材质，想要导入贴图，必须要以材质图片路径重新定义材质，同时也可以加入法线贴图等信息。
1 | |
DUANG，一个模型和材质的导入就完成了。
模型加入材质贴图
360°全景
实现360°更是出奇简单。想要展示一幅全景图，只需要在用于定义背景的上加上全景图信息，就可以得到一个 360°全景图展示；同理，A-Frame也支持360全景视频，只要使用一个标签就能完成：
360°全景
简单却强大的A-Frame当然远不止这些，还支持骨骼动画，灯光，摄像机，各类交互等功能。这也正是WebVR的特质，清新亲民快上手，内涵丰富广流传。赶快来加入这场VR和Web双重变革的大潮流中吧！