我分享技术,你专注艺术。

【Verge3D】如何开发WebVR应用

本教程使用Verge3D 2.10正式版,有关这个版本的主要功能参见更新日志。2.10版的一大更新是增加了AR/VR支持,其中AR部分由于依赖的webXR标准还在开发当中,尚不稳定,所以该功能暂时禁用。

准备工作

首先了解什么是webXR?

它是Verge3D 2.10 AR/VR功能实现的技术依赖。它是Mozilla于2017年提出的用于取代WebVR的新的技术标准,原有的WebVR API也将会被新的 WebXR Device API 取代。WebXR是在网络上实现VR/AR/MR,从而实现沉浸式Web体验的技术标准。详情见https://github.com/immersive-web/webxr

现在支持WebVR的硬件设备有哪些?

就WebVR功能的实现来说,目前有三大类,一是使用眼镜盒子的移动端设备,主要是支持Google Daydream 的安卓手机;第二类就是基于PC平台的VR头显设备,如HTC vive,Oculus rift,第三类是VR一体机。

支持的WebVR的浏览器有哪些?

首先自然是firefox浏览器,WebXR是Mozilla提出的,而firefox正是自家的产品。在PC平台使用最新稳定版本的firefox,在google Daydream平台上可以安装firefox reality,HTC vive也支持firefox reality。另外一个靠谱的浏览器就是google的chrome浏览器。

开发

首先创建项目,目前由于Verge3D对WebVR的实验性支持,官方建议在创建新项目时勾选Legacy VR选项,以获得更普遍的设备的支持。

创建项目

接下来就要创建场景。和普通的web3d项目一样,按照标准的流程搭建场景,甚至拼图部分也和标准流程一样,VR功能像是额外增加的一种交互方式,并没有什么特殊的地方。

要说有,当然是有的,要不然也不需要写这个教程了——第一个需要注意相机。

关于相机问题

1.相机位置问题。进入VR模式前相机和以前没什么不同,但是进入VR模式后不管相机在场景的什么位置都会回到世界原点,这样就会造成相机位置上的错误。所以我们需要在在场景中设置一个虚拟体,用它来标记相机的位置,在进入VR模式后,使用拼图将相机位置吸附到虚拟体身上,然后把相机P到虚拟体上。还要注意的是,虚拟体的高度对应现实中的地面,也就是虚拟体的位置在VR用户的脚下。这里会用到两个拼图:snap to object、parent to object。

2.缩放问题。如果虚拟体有缩放,在VR模式基于注视的交互中,注视标记点也会被缩放。也就是下图中绿色的注视点。

使用注视进行交互

关于交互方式

交互方式有两种,对于没有控制器的设备,如眼镜盒子这种类型的,交互使用注视,即上图所示的方式。对于有控制器的设备,会从控制器发射出一条虚拟射线,但是只支持一个控制器,也就是只能用一个手柄进行交互。

使用控制器进行交互

可以使用when hoveredwhen clicked拼图来处理用户事件,从这里可以看出VR的交互事件与普通模式下的点击、经过事件是一样的,所以前面说VR像是增加了一个交互,并不会和原来的程序有兼容性问题。

关于VR模式

进入VR模式只需要两个拼图就可以了。需要注意的是进入VR模式通常需要通过点击按钮实现。按钮可以是场景中的物体,或者html按钮。

通常需要点击按钮进入VR模式

默认有3种VR模式:sitting or standing、walking、looking from orgin,前两种就实际体验来看并没有什么不同,但是根据规范,两者一个是静止的,一个是运动的。而第三种模式就是固定位置的,类似Flying类型相机。

关于浏览器

由于chrome浏览器对WebXR标准处于实验性支持阶段,因此需要开启相应功能。

Google Daydream平台上使用稳定版Chrome浏览器,并在chrome:// flags页面上开启两个WebXR选项:

HTC Vive和Oculus设备可在稳定版Chrome和Firefox浏览器中使用。此外,Chrome浏览器需要在chrome:// flags页面上启用某些WebXR选项:

需要说明的是,在目前的Firefox浏览器上不支持控制器的交互,只能使用注视交互;在Chrome浏览器上进入VR模式后,PC上的画面是静止的,不能与头显同步。

最后,这是我开发一个WebVR应用程序:高空坠落体验。

点击图片查看3D内容

地址:https://zjbcool.com/vr/

zjbcool

zjbcool
关闭菜单