清新亲民的虚拟现实——WebVR

发表于2016-10-25
评论9 1.64w浏览
作者:薛冰洁

  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"#test-obj" mtl="#test-mtl" material="" obj-model="">

模型导入

  效果如上图。可以看出,使用官网解释的方法可以导入模型,但贴图却不见了。在A-frame中使用obj文件生成的mtl只支持导入简单的单色材质,想要导入贴图,必须要以材质图片路径重新定义材质,同时也可以加入法线贴图等信息。
1
"#test-obj" material="src: url(path/deer.png); normalMap: url(path/deerBump.png)" obj-model="">

  DUANG,一个模型和材质的导入就完成了。

模型加入材质贴图

360°全景
  实现360°更是出奇简单。想要展示一幅全景图,只需要在用于定义背景的上加上全景图信息,就可以得到一个 360°全景图展示;同理,A-Frame也支持360全景视频,只要使用一个标签就能完成:


360°全景

  简单却强大的A-Frame当然远不止这些,还支持骨骼动画,灯光,摄像机,各类交互等功能。这也正是WebVR的特质,清新亲民快上手,内涵丰富广流传。赶快来加入这场VR和Web双重变革的大潮流中吧!

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引