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原生变量(Native Variables)新特性简介
对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。...CSS3特性查询(Feature Query: @supports)功能简介
这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Que...
如何使用CSS3合成模式(blend-mode)和滤镜(filter)实现彩色蜡笔(时光机)照片特效
在之前的文章中我们已经详细讲解过CSS3滤镜(filter,也可称之为过滤器)的工作方式,本文将实现一个当下流行的时光机相片特效实例来说明其实际用途。
我们...深入理解JS和CSS3动画性能问题和技术选择
本文对比了JS及其框架和CSS3的动画性能,并深入剖析了其内在原因。技术结论大致如下:1. jQuery出于设计原因,在动画性能上表现最差2. CSS3由于把动画逻辑推给了...
HTML5动画背后的数学 - 粒子群仿生算法简介
本站收录了多个算法可视化动画,如模拟鸟群运动:http://wow.techbrood.com/fiddle/30529等等。这里面除...
计算WebGL中的uniforms变量使用数
在使用Three.js为人体模型加载皮肤材料时,启用了skinning:true的参数。有时候会导致GL编译错误,提示“too many uniforms”。下面的文章有助于理解错误原因和检...
Three.js入门教程6 - 创建全景图和纹理
全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。要做一个全景图,你需要一个软件用来做一张全景图片。我使用了iPhone上的Microsoft Photosyn...
Three.js入门教程2 - 着色器(下)
这是WebGL着色器教程的后半部分,如果你没看过前一篇,阅读这一篇教程可能会使你感到困惑,建议你翻阅前面的教程。
如何使用WebGL实现空气高温热变形动画特效
我们在炎炎夏日,或者在火堆旁,经常会观察到热源周围空气的不稳定波动现象。本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场...
如何基于Canvas来模拟真实雨景Part1:预备知识和创建基本对象
更多...