Chrome 56 Android 版已引入 WebVR API

虚拟现实 (VR)
正在迅速普及,如今,该技术已进入网络。网络的威力令其能够跨浏览器和硬件地实现
VR,只需点击一下,即可访问 VR。这使得 VR
开发者可以通过单一的网络应用接触多种类型头戴式设备的广大用户。

作者着眼于WebVR的发展,通过介绍当前WebVR的现状,来帮助我们认识当下的技术环境;介绍了伴随发展的硬件,也一直是焦点存在的就是与手机结合的Mobile
VR,作者在这里也是与PC一同进行了介绍;通过一些案例,来了解延迟,丢帧等状况对VR下体验的影响,并介绍了一些可能会被广泛使用的APIs,在渲染的技术优化上也增加了一些个人的理解;最后,作者也对web和VR的相互影响表达了自己的观点,并尝试引导读者去发现其它的实现道路。

本来只是想找些指南作为接触物认识,但是在阅读过程中遇到的线程处理和渲染的时候还真是头大…不过作者在对WebVR方面的积累还是十分深厚,能够从硬件、体验、实现方法去逐一阐述观点,并且能在最后引导探索WebGL以外的道路,真是厉害。

据谷歌开发者博客透露,Chrome
56 for Android 现已发布 Beta
测试版,开发者可以注册开源试用版,后者支持
WebVR API 和
GamePad API
扩展程序。WebVR API
允许访问虚拟实境设备(例如 Daydream
View)的输入和输出功能。它还允许访问用户的位置和方向,让网络应用可以将立体
3D 场景呈现到头戴式设备的显示屏上。Gamepad API
扩展程序允许访问来自动作控制器(例如 Daydream
控制器)的输入,并支持虚拟实境中的自然交互。

原文链接:A Guide To Virtual Reality For Web
Developers

开源试用版允许开发者为访问其网站的所有 Chrome 用户临时启用此功能。WebVR
API 仍在不断开发之中,在将其用作所有页面的默认功能之前,Google
会根据开发者的反馈对其做出进一步的更改。在未来的 Chrome 版本中,WebVR
将会拓展到桌面平台和 Google Cardboard 中,而在 Chrome 57
中,将会引入几项性能改进。

原文作者:Ada Rose Edwards

要了解如何开始构建 WebVR 网络应用,请访问 WebVR
开发者网站以查看教程和示例。

最近,VR在传统浏览器上的应用越来越多。在本文中,我们将通过WebVR
API来查看浏览器和WebVR的发展现状。

(文/开源中国)    

VR和Web现状

Web社区之前已经尝试过了VR,现在的WebVR采用了一种新的技术,更适合现代的web。自从2011年WebGL发布以来,我们已经加速了3D载web上的应用。现在使用了WebGL的硬件可以提供新的webAPIs来实现VR。

这些APIs使WebVR的内容,可以通过头带设备3D显示。提供的头戴设备,也可以追踪和控制用户在虚拟世界中的信息。

WebVR于2014年,在Mozilla首次展示。在2016年,早期标准版适用于桌面端Chrome,Firefox,和Samsung的VRweb浏览器:Samsung
Internet for Gear VR。

现在,几乎所有的头带设备都非常好的支持手机和桌面端标准。

WebVR的支持情况可以看这里

WebVR的标准是在公开衡量的,它代表了Mozilla,Google,Samsung,Microsoft,Apple之间的合作。

这意味着使用WebVR的网站可以制作一个身临其境的环境,并同时交付到所有的主要平台上实现,桌面或移动端。

web的处理能力可以让人们通过URL轻松地分享VR体验,在浏览器中查看,而无需复杂的应用商店,或是耗时下载到本地。

Samsung internet的VR额外Web APIs

这些API并不是WebVR API的一部分,但不使用WebGL,在传统网站来构建沉浸式体验是很有帮助的。

这些APIs正在为Samsung Internet for Gear
VR研发。我们希望它们能够被其他浏览器接受并标准化。

全景视频

通过设置视频标签上的属性type=“dimension=360”,可以播放沉浸式全景视频(monoscopic&stereoscopic)的能力。这些在Samsung
Internet 5.0上得到了加强,用户可以通过指尖来翻看。

可能的values:

dimension=3d-lr: side-by-side 3D video

dimension=3d-tb: top-to-bottom 3D video

dimension=360: 360-degree video

dimension=360-lr: side-by-side 3D 360-degree video

dimension=360-tb: top-to-bottom 3D 360-degree video

dimension=180: 180-degree video

dimension=180-lr: side-by-side 3D 180-degree video

dimension=180-tb: top-to-bottom 3D 180-degree video

改变天空

另一个Sansung Internet for Gear VR提供的API,是JavaScript
API,可以将web的浏览器背景更换为开发者选择的背景。

你的传统2D网站仍然可以被看到,但是环境将会设置成与网站环境相匹配的。

window.SamsungChangeSky({ sphere:
‘http://site.com/blue-sky.jpg’
});

什么是WebVR?

WebVR是一组跨浏览器的JavaScript
APIs,它提供了各种VR相关的用例,可以将用户置于WebGL生成的沉浸式环境中。

通过并行渲染3D图片,这些APIs可以处理所有面向用户的未失真3D图像。

我不会详细介绍这些标准,因为标准还在变化,大多数用户不需要直接与它们打交道,因为WebGL工具和库可以帮助你处理大多数的WebVR
AP。

WebVR APIs现状

当前的API版本内部为1.1,2.0版本将会更改一些方法命名,并移除一些不使用的方法,还将会增加一些硬件支持,和在第一版中没有想到的额外功能。

可以在Mozilla
Developer Network上阅读更多,也可以在GitHub上讨论。WebVR社区和W3C会在准备好之后,将它迁移到W3C工作上。

基本上,WebVR API提供以下内容:

头带设备允许用户在虚拟环境中自由查看。帧插值(frame
interpolation)是内置的,就算你移到一个随机坐标系上,它都会是跟随头部。

会是像HTC Vive和Gear
VR这样六自由度或三自由度的控制工作。它允许用户使用手与虚拟环境交互。

传给头戴设备的信息是如何渲染3D信息,例如视场,还有每只眼睛看到的画布渲染内容。

一种新的头戴设备特殊动画请求框架(headset-specific
requestAnimationFrame),会同步在头戴设备上显示刷新率。

一种渲染方法,将呈现的帧以WebGL画布元素的形式提交给头戴设备。

澳门新葡亰8455下载app 1

VR循环图,头戴设备提供定位和旋转数据,开发者使用这些数据呈现用户角度的场景,然后将这些数据发送到头戴设备上,并坐标变换扭曲显示给用户。

澳门新葡亰8455下载app,构建WebVR的沉浸体验意味着什么?

令人惊讶的是,构建一个虚拟现实网站,和构建web
app以及移动端站点有许多相似的问题。

现在web最大的问题之一就是网络性能,这很重要,因为:

用户的关注范围正在缩小,

网络越来越拥挤,

网站越来越大。

WebGL和WebVR网站也不例外,一不小心就会变得非常庞大。

VR内容会比传统内容更有优势,因为它新颖有趣,可以让用户多停留一会儿。即使这样,快速响应的3D体验依然很重要,用户没有耐心,而且会越来越没有耐心。

在你的网站将VR内容加载出来之前,它只是一个2D网站。

我的建议是,没必要把所有的东西都准备好了再展开,只需要加载到用户能够开始,然后动态加载并缓存其余部分。如果你阅读了Google的PRPL模式,那么这种行为应该会很熟悉。

即使是展示一个模糊的360环境和一些低保真的内容,让用户环顾四周,也可以为你争取到更多的时间,来载入更多的内容,并引入吸引人的体验。

显示一些基本的内容比失去用户有利得多,因为他们已经厌倦了等待进度条。

网络运行可能是CPU密集型,并阻塞主线程。这可能会给用户带来不好的体验。

预装一到两个密集的配置可以避免体验遭到破坏。然而你还是有很多东西需要去花长时间准备,那么你应该考虑一个更好的替代方案。

充分利用好service worker and the Cache
API来让静态资产能够快速被访问,这是一个不错的方法。

渐进增强

VR最主要的两个平台是完全不同的:高端的台式电脑和先进的控制器;中高端智能手机,可能配备一个旋转追踪控制器,或者没有控制器。

澳门新葡亰8455下载app 2

一张HTC Vive的照片,有一个定位追踪控制器,Samsung Gear VR, Google
Daydream 和 Google Cardboards都有出现

这给我们带来了两个挑战:

在不同性能的平台上保持一致的帧率,在多样的输入设备下,保持友好的体验。

Gear VR和Daydream的流行,Google
Cardboard便宜的价格和良好的可用性,这会对手机的发展带来巨大的影响。

下面我来介绍一些典型的控制器设备,你不需要去支持它们,但是需要考虑到无控制器的场景,以及支持有控制器的选项,确保每个人都能有所体验。支持这些控制器的配置会很不错,但也显得不太实际。

一些库,例如A-Frame Extras的Universal
Controls,充分利用这些可以帮助你做得更好。

澳门新葡亰8455下载app 3

兼容网络的控制器会提升沉浸体验,从左到右分别是:基于凝视追踪,传统的游戏手柄,旋转追踪控制器,定位旋转追踪控制器,完整的手势识别

澳门新葡亰8455下载app 4

澳门新葡亰8455下载app 5

非对称运行

随着web的增强,支持所有级别的硬件并不意味着你可以交付相同的体验。

再虚拟世界中,一个拥有双手追踪的体验会更吸引人,不应该受到没有控制器的用户一样的限制。

例如,一个VR应用,你可以在其中创作艺术作品,可以使用追踪控制器在高性能的机器上创作;在移动设备上,用户可以观看这些作品,但是不能编辑。

另一个例子是联网的多人VR游戏,玩家可以通过追踪控制器来玩游戏;而一个移动观众可以通过凝视的交互来选择不同的观看点。

测试你的开发内容

像现在的web设计一样,你需要先为移动端设计。当你在构建场景时,定期在中端手机上测试,没有控制器的情况下也能被大多数用户使用。

网站地图xml地图