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(12) views14796 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 创建非矩形网页页面元素的常用技术和实例代码

    非矩形设计正在变成一种时尚,比如波浪形、菱形、三角形等:而随着技术发展,这种设计在技术实现上也变得更容易。本文以最简单的三角形为例,演示使用5种方法来...

  • CSS3属性选择器特性使用详解

    CSS3除了引入动画、滤镜(用于特效)以及新的布局技术外,在选择器(selector)方面也有增强。属性选择器根据元素的属性(attributes)来匹配。这可以是一个单独...

  • 使用CSS3 box-decoration-break特性实现多行文本样式

    当文章中的长文本被自动断行为多行文本时,其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
    按照规范...

  • 使用HTML5 FileReader和Canvas压缩用户上传的图片

    手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...

  • 学习使用CSS制作进度条

    进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下:.pb-scope

  • 三维向量的简单运算和实用意义

    在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...

  • 粒子运动模拟 - Verlet积分算法简介

    Verlet算法是经典力学(牛顿力学)中的一种最为普遍的积分方法,被广泛运用在分子运动模拟(Molecular Dynamics Simulation),行星运动以及织物变形模拟等领域...

  • Three.js入门教程1 - 基础知识和创建一个红色球体

    [ TECHBROOD注:Three.js是一个主流的开源WebGL库,WebGL允许使用JavaScript直接操作GPU,在网页上实现3D效果。
    Google的工程师Paul在网站aerotwist.com上...

  • CSS3图片混合(Blend)效果及其参考计算公式一览表

    在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...

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

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

  • 使用Canvas绘制完美的不完美圆形

    真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...

  • inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

    在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如图1所示。那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边...

  • SVG过滤器feColorMatrix矩阵变换效果用法详解

    在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a);那么就可以应用...

  • 更多...