WebVR简介和常用资源链接

techbrood 发表于 2016-06-18 14:42:32

标签: webvr, webgl, html5, vr, aframe, three.js

- +

什么是WebVR

这是一个实验性的JavaScript API,提供了在用户网页浏览器中访问虚拟现实设备的统一接口。

当前主流VR设备如Oculus Rift DK2、谷歌的CardBoard、三星的Gear VR以及HTC Vive。

其中Vive和DK2都是高端专业VR设备,Gear VR属于中端设备,CardBoard是入门级的VR设备。

现在体验VR,一般你需要在VR设备的前方加上一个手机,这额外添加了重量和总体成本。

较好的体验是能投影到内置的屏幕上(甚至空间上),然后使用内置浏览器打开url,而无须下载APP。

在这样的场合下WebVR能更好的发挥作用。WebVR的发展依赖于VR输入方式的变革,如果能在空间投影出虚拟键盘,那将是革命性的。

规范

规范尚处于开发状态,位于:

https://w3c.github.io/webvr/

如何试用

目前Firefox的nightly builds版本、Chrome的试验版本以及三星公司Gear VR的内置浏览器都支持该API。

你可以通过如下的链接获取启用了WebVR功能的编译版本:

  1. Chrome

  2. Firefox

  3. Samsung Internet for Gear VR

或者,如果你想在移动网站上添加WebVR支持,你可以使用WebVR Polyfill来支持Cardboard设备:

  1. WebVR Polyfill

Chrome计划在版本54中内置支持WebVR接口,发布时间估计在10月份左右。

你可以使用以下例子测试你的浏览器是否支持WebVR接口:

http://techbrood.com/threejs/examples/#webvr_video

源代码

如果你想了解工作内幕,你可以通过以下链接获取源码:

  1. Chromium

  2. Firefox

常用链接

http://www.techbrood.com/threejs/docs/

http://vr.chromeexperiments.com/

https://webvr.info/

https://aframe.io/

possitive(6) views13170 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • WebGL场景中多相机拍摄的原理和意义

    一般而言,3D场景的渲染只需要一个相机,不过借助多相机可以获取一些单相机无法达到的特效。比如突显特定对象并模糊背景。
    3D相机渲染的基本原理是依靠颜色...

  • ARCore基本概念和工作原理简介

    谷歌的WebAROnARCore项目基于Android手机提供的ARCore增强现实引擎,要了解WebAROnARCore,需要先了解ARCore的工作原理。基本上ARCore做了两件事,首先跟踪手机...

  • 谷歌ARCore技术特性简介

    谷歌美国时间2017.8.29号刚发布了ARCore预览版,这是一个类似于苹果ARKit的增强现实SDK,在此之前,谷歌虽然已投资AR平台Tango,但由于需要特定的硬件和传感器,...

  • Three.js 对象局部坐标转换为世界坐标

    在Three.js中进行顶点几何计算时,一个需要注意的地方是,需要统一坐标系。比如你通过Three.js提供的API创建了一个球体网孔对象,那么默认情况下,各网孔顶点的...

  • Three.js入门教程4 - 创建粒子系统动画

    嗨,又见面了。这么说我们已经开始学习Three.js了,如果你还没有看过之前三篇教程,建议你先读完。如果你已经读完前面的教程了,你可能会想做一些关于粒子的东西。让我们直面这个话题吧,每个人都爱粒子效果。不管你是否知道,你可以很轻易地创建它们。

  • WebGL入门教程6 - 光照效果和Phong光照模型

    正是因为有了光,世界才能被我们看见,在3D的世界里,光照给物体带来真实的视觉感受。当光照射在某一表面上时,它可能被吸收、反射或投射。其中入射到表面上的一...

  • 如何实现SVG clipPath自适应被裁剪对象

    CSS3中引入的clip-path(裁剪路径)属性是一个很强大的特性。
    clip-path的含义如下图所示,好比剪纸一样,你用剪刀沿着某条路径把目标对象(图像或元素)裁...

  • IE各版本CSS Hack(兼容性处理)语法速查表

    为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在w...

  • D3.js读取外部json数据

    D3.js是一个很好的数据可视化工具,支持从web服务读取json数据,或者从外部文件如.json, .csv文件中直接读取。由于部分服务比如flickrs上的图文数据服务需要VPN...

  • Three.js 3D打印数据模型文件(.STL)加载

    3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...

  • 在PHP网页程序中执行Sass/Compass命令

    我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...

  • 更多...