VRZOME代码是采用Webvr+Webusb实现,代码开源保存在https://github.com/VRZOME/WebVR-Development-Kit
代码文件目录如下
|--------css
|-------js--------|---------controls.js 处理键盘控制
|---------elevr-player.js 播放器主体控制
|---------phonevr.js 陀螺仪数据预处理,然后把数据给播放器
|---------player-webgl.js 播放器的具体实现
|---------rgb.js webusb连接搜索
|---------serial.js webusb接收数据和解析数据
|--------lib------|---------util.js 播放器视角控制
|---------vr.js VR畸变以及VR参数设置
|--------index.html 网页入口
代码其实很简单,没有学过编程也可研究。
【设置VR畸变参数】
一般我们会自己选购VR盒子,由于市面上透镜的设计都不一样,VR畸变的设计也不一样(VR畸变是图片经过畸变处理后,四个角往中间收缩的一种算法),所以要根据VR盒子调整VR参数。
这部分代买在vr.js中实现
vr.StereoParams = function() {
this.zNear_ = 0.01; //桶形畸变参数,一般不用改
this.zFar_ = 1000; //桶形畸变参数,一般不用改
}
vr.HmdInfo = function(opt_values) {
this.desktopX = opt_values ?parseFloat(opt_values[o++]) : 0; //设置整个画面的上下位置
this.desktopY = opt_values ?parseFloat(opt_values[o++]) : 0; //设置整个画面的水平位置
this.resolutionHorz = opt_values ?parseFloat(opt_values[o++]) : vrScreenWidth; //整个屏幕水平分辨率
this.resolutionVert = opt_values ?parseFloat(opt_values[o++]) : vrScreenHeight; //整个屏幕水垂直辨率
this.screenSizeHorz = opt_values ?parseFloat(opt_values[o++]) : 0.12096; //屏幕水平方向两个像素点间距
this.screenSizeVert = opt_values ?parseFloat(opt_values[o++]) : 0.06804; //屏幕垂直方向两个像素点间距
this.screenCenterVert = opt_values ?parseFloat(opt_values[o++]) : vrScreenHeight / 2; //显示中心
this.eyeToScreenDistance = opt_values ?parseFloat(opt_values[o++]) : 0.041; //眼睛到屏的距离
this.lensSeparationDistance = opt_values ?parseFloat(opt_values[o++]) : 0.063;
this.interpupillaryDistance = opt_values ?parseFloat(opt_values[o++]) : 0.065; //瞳距
}
所以玩转VR我们就改这些参数就好了。
【陀螺仪滤波算法处理】
在js/serial.js中保存着接收陀螺仪算法程序。程序没有写复杂,只是用了if,for语句,剩下的就是加减乘除,没有编程基础的朋友,就学一下编程的if和for语句即可。
具体算法就不介绍了,这个版本算法不是很完美马上要更新的,这里介绍一下我们的设备上传过来的报文格式。
this.device_.transferIn(5, 64).then(result => {}这条语句说明了在USB端口接收wenusb的报文,长度最大64个字节。
我们硬件上传过来的报文:
报文[1]: 168 --- 代表是IMU报文
报文[2]: data --- 上下视角
报文[2]: data --- 上下视角
报文[3]: data --- 左旋或者右旋视角
报文[3]: data --- 左旋或者右旋视角
报文[4]: data --- 左右视角
报文[4]: data --- 左右视角
报文[4]: data --- 左右视角
报文[5]: data --- 保留
报文[6]: data --- 保留
报文[10]: data --- 时间戳:IMU每隔一段时间读取一次数据,单位为毫秒。
报文[11]: data --- 时间戳:报文[7]-报文[10]存储了硬件板子的采样时间戳
报文[12]: data --- 时间戳:报文[7]为高位,报文[10]为低位
报文[13]: data --- 时间戳
报文[14]: data --- 加速度accx-高8位
报文[15]: data --- 加速度accx-低8位
报文[16]: data --- 加速度accy-高8位
报文[17]: data --- 加速度accy-低8位
报文[18]: data --- 加速度accz-高8位
报文[19]: data --- 加速度accz-低8位
报文[20]: data --- 重力计gyroX-高8位
报文[21]: data --- 重力计gyroX
报文[22]: data --- 重力计gyroY-高8位
报文[23]: data --- 重力计gyroY
报文[24]: data --- 重力计gyroZ-高8位
报文[25]: data --- 重力计gyroZ
报文[26]: data --- 地磁仪magX-高8位
报文[27]: data --- 地磁仪magX
报文[28]: data --- 地磁仪magY-高8位
报文[29]: data --- 地磁仪magY
报文[30]: data --- 地磁仪magZ-高8位
报文[31]: data --- 地磁仪magZ
有了这些数据大家可以书写自己的滤波算法。
这个产品目前还有一些尚未完成的功能和已知的bug,这些详见Github。同时Github上还会发布一些任务悬赏,鼓励大家参与,优质代码被上传到Github会有奖励,并且作者会被VRZOME网页鸣谢页面永远记住。