WebVR简介和常用资源链接
什么是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输入方式的变革,如果能在空间投影出虚拟键盘,那将是革命性的。
规范
规范尚处于开发状态,位于:
如何试用
目前Firefox的nightly builds版本、Chrome的试验版本以及三星公司Gear VR的内置浏览器都支持该API。
你可以通过如下的链接获取启用了WebVR功能的编译版本:
或者,如果你想在移动网站上添加WebVR支持,你可以使用WebVR Polyfill来支持Cardboard设备:
Chrome计划在版本54中内置支持WebVR接口,发布时间估计在10月份左右。
你可以使用以下例子测试你的浏览器是否支持WebVR接口:
http://techbrood.com/threejs/examples/#webvr_video
源代码
如果你想了解工作内幕,你可以通过以下链接获取源码:
常用链接
http://www.techbrood.com/threejs/docs/


最新评论
- 相关文章
微信公众号在线生成二维码带参数怎么搞?
带参数二维码是微信公众号渠道二维码的一种实现
微信的带参数二维码有两种,一种是临时二维码,一种是永久二维码,但是永久二维码的生成是有个数限制的,微...WebGL、Asm.js和WebAssembly概念简介
随着HTML技术的发展,网页要解决的问题已经远不止是简单的文本信息,而包括了更多的高性能图像处理和3D渲染方面。这正是要引入WebGL、Asm.js和WebAssembly这些技...
CSS3弹性布局弹性流(flex-flow)属性详解和实例
弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。其中flex-flow是flex-direction...
使用HTML5 Canvas实现的界面元素截屏功能
HTML5、Hybrid APP、Native APP对比和技术选型
HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap),...
使用SVG和CSS3创建圆形进度条动画
圆形进度条是一个经典的控制面板元素,常用于显示任务进度,比如用户档案的完整程度,或者升级状态。有很多方法来实现圆形进度条,比如用JS, CSS3, Canvas, SVG...
计算WebGL中的uniforms变量使用数
在使用Three.js为人体模型加载皮肤材料时,启用了skinning:true的参数。有时候会导致GL编译错误,提示“too many uniforms”。下面的文章有助于理解错误原因和检...
如何使用Three.js加载obj和mtl文件
OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件,需要结合OBJLoader和MTLLoade...
WebGL入门教程4 - 使用纹理贴图(Texture Map)
3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的...
浏览器控制台报JS脚本执行错误:Module is not defined
现在JS分成了两个分支,一部分在服务器端发展如NodeJS,一部分是传统的浏览器运行环境。
有些插件在编写JS代码时,是针对Node编写的,所以直接在浏览器中使...jQuery Ribbles - 基于WebGL的水面涟漪动效插件
使用jQuery
使用requestAnimationFrame和Canvas给按钮添加绕边动画
要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。...
使用CSS3实现流星雨动画教程
很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...
更多...