最近在做一个类似VR照片的demo,跟全景图片也很像,只是VR照片与全景720度显示,我只做了180度。但我发现他们实现的原理有一丝相似,希望可以给一些想入行AR、VR的朋友一些提示吧。
 
    要想根据用户摇晃手机的行为轨迹展示相应的场景,那必须要使用移动端的陀螺仪、加速器等传感器来做相应的协调。现在的移动端已经提供了很多传感器,你可以根据自己的需要获取相应的数据。
 
    刚开始的时候,我使用传感器提供的姿态角,也称为欧拉角:pitch yaw roll 来显示。这种 姿态角/欧拉角 比较常用在航空上,无人机技术应该也使用到了这个技术点。我用飞机的模型来展示一下这三个角,就一目了然了(不同作者使用不同的坐标系,使用哪种坐标系,个人而定。):
                   图一
    姿态角/欧拉角 在数学上理解起来会有点抽象,我也是稍理解一点。在维基百科上,欧拉角定义为:用来描述刚体在三维欧几里得空间的取向,对于任何参考系,一个刚体的取向,是依照顺序,从这参考系,做三个欧拉角的旋转而设定的。有兴趣了解得深入一点,可以参考(需FQ):
 
我们也可以简单理解这三个角代表什么意思:
 
1、俯仰角θ(pitch):围绕Y轴旋转的。
                         图二
2、偏航角ψ(yaw):围绕Z轴旋转的角度。
                        图三
3、滚转角Φ(roll):围绕X轴旋转的角度。
 
                        图四
 
手机的坐标系:
                                 
手机定义的坐标系统:X轴是水平且指向右边,Y轴是垂直且指向前方,Z轴指向屏幕的正面正上方。
当手机左右摇摆时(绕 y 轴旋转),得到变化的 滚转角Φ(roll),范围为 (-90 to 90)
当手机前后摇摆时(绕 x 轴旋转),得到变化的 俯仰角θ(pitch),范围为 (-180 to 180)
当手机横屏转换成竖屏或竖屏转换成横屏时(绕 z 轴旋转),即得到变化的 偏航角ψ(yaw)。
 
当手机旋转得到相应的角度时,我们把屏幕的图片替换成相应角度的图片,这让你感觉身临其境,屏幕里的场景会跟着我们视觉和谐变化,这就是VR大概实现的原理吧。
 
Android提供了类似这个 姿态角/欧拉角 的数据,但两者有些区别,Android 把 偏航角ψ(yaw)定义为方位角 Azimuth。具体可查看Android官方文档:https://developer.android.google.cn/reference/android/hardware/SensorEvent.html#values
接收的传感器类型为:Sensor.TYPE_ORIENTATION (Android官方已经摈弃,换了其它方法来获取)
 
使用这种方式去获取的数据有些波动,当拿着手机不动的时候,数据有时变化也比较大,所以后期我改用了 四元数 来处理这个问题。后来听说了一个方案,通过滤波方法,可以把 姿态角/欧拉角 一些波动比较大的数据过滤点, 得到的数据就比较平滑了。(这个方式,我还没有去试,大家可以去了解了解)
 
使用 “四元数” 也可以实现。四元数理解起来也很抽象:简单的超复数,是复数的不可交换延伸。
 
我是这么简单理解:我们都知道向量,向量是用来形容一个二维空间的轨迹与方向,形象化地表示为带箭头的线段。四元数则表示为在一个四维空间的轨迹与方向。
 
来看一个四元数的表现形式:
                        公式一
这是 A 到 B 的四元数表示,由四个元素组成的数组。我主要讲一些实现方法,里面有一些名词的含义,需要大家找其它的资料慢慢参透。
 
我们再来看一个公式,x、y、z轴的偏移量分别为:
                      
                                 公式二
由该公式我们看得出,只要知道一个四元数的值, 我们就能算出 A 到 B 的x、y、z轴的偏移量。
 
我们从陀螺仪传感器获得的四元数数据,是相对于手机平放在桌面的 xyz 轴的偏移量,我们需要转换成相对上一个位置的偏移量,然后根据偏移量更换相应的图片。
 
现在我们看一下,怎么获取相对的偏移量:
在平面二维向量中,我们知道向量的运算: 向量AC = 向量AB + 向量BC
    公式三
 
那么在四元数中,我们假设从传感器获取到
第一个 四元数为 
假设A点原点,即手机平放在桌面水平位置上。第二个四元数为:
我们需要得到四元数:
这样才能算出B 到C 的相对 xyz 轴相对位移。通过下面公式可以得到
        
          
                                               公式四
 
 
现在知道 
由下面公式可以得到:
                            公式五
从A到B的 四元数 转换成 B到A 的四元数公式,只需把第二、第三、第四个元素取负。
 
知道了
我们用 公式四 得出 ,然后通过公式二求出 xyz 轴的偏移量。
四元数 x 轴的偏移量 与 欧拉角的俯仰角θ(pitch)类似,都是指手机竖屏时,左右摇摆的数值。
四元数 y 轴的偏移量 与 欧拉角的滚转角Φ(roll)类似,都是指手机竖屏时,前后摇摆的数值。
四元数 z 轴的偏移量 与 欧拉角的偏航角ψ(yaw)类似,都是指手机竖屏时,左右旋转的数值。
 
在移动端比较常用到 x、y轴偏移量,就是手机左右摇摆与前后摇摆间的偏移。
 
我做了一个Android demo,用的就是四元数 实现方案,通过四元数得到的y轴偏移量,不断替换图片。
<-------------------------------
当手机横屏,向左倾斜的时候,就会看到右边的视野。也就是判断y轴的相对偏移量,替换不同角度的图片。(gif 图做得有些卡顿,demo里的例子就平滑多了)
 
-------------------------------->
当手机横屏,向右倾斜的时候,就会看到左边的视野。
 
demo 链接:https://github.com/xiaoxiaoqingyi/VRPhoto

简单VR照片 使用陀螺仪、姿态角(Roll、Pitch、Yaw )、四元数的更多相关文章

  1. [UE4]roll pitch yaw

    UE4中的定义: 一.Roll,绕着X轴旋转的角度 二.Pitch,绕着Y轴旋转的角度 三.Yaw,绕着Z轴旋转的角度 Rotator 一.(Roll,Pitch,Yaw) 二.Rotator(0,0 ...

  2. 几张图理解Roll, Pitch, Yaw的含义

    Roll:翻滚    Pitch:俯仰    Yaw:偏航 有时候不知道它到底绕着哪个轴旋转得到的角,一个比较容易的记法是根据字母的排列顺序PRY分别对应XYZ轴进行旋转得到的角,即: Pitch是绕 ...

  3. roll pitch yaw 的分别

    原文地址:http://blog.sina.com.cn/s/blog_452706120100scwu.html yaw,pitch,roll这三个旋转的确切意思.如果有一个人站在(0,0,0)点, ...

  4. 姿态角(Euler角):yaw pitch roll

    姿态角(Euler角):yaw pitch roll  

  5. 姿态角(RPY)的优化目标函数

    在Pose-Graph的过程中,如果使用G2O优化函数库,那么似乎是不用自己编写代价函数(也就是优化目标函数)的,因为G2O有封装好的SE3等格式,使得Pose-Graph的过程变得简单了,即只需要设 ...

  6. pitch yaw roll是什么

    虚拟现实 三维空间的右手笛卡尔坐标如图1所示. 图1 在航空中,pitch, yaw, roll如图2所示. pitch是围绕X轴旋转,也叫做俯仰角,如图3所示. yaw是围绕Y轴旋转,也叫偏航角,如 ...

  7. pitch, yaw, roll

    在航空中,pitch, yaw, roll下图所示. pitch是围绕X轴旋转,也叫做俯仰角. yaw是围绕Y轴旋转,也叫偏航角. roll是围绕Z轴旋转,也叫翻滚角.

  8. Pitch,Yaw,Roll的概念

    在航空中,pitch, yaw, roll下图所示. pitch是围绕X轴旋转,也叫做俯仰角. yaw是围绕Y轴旋转,也叫偏航角. roll是围绕Z轴旋转,也叫翻滚角.     在3D系统中,假设视点 ...

  9. 机器人行业中我们常说的roll、yaw、pitch是什么?

    坐标系建立: 载体坐标系与载体坐标系的关系是三个Euler角:yaw,pitch,roll,反应了载体相对基准面的姿态. pitch是围绕X轴旋转,也叫做俯仰角.当X轴的正半轴位于过坐标原点的水平面之 ...

随机推荐

  1. PHP常用的三种设计模式

    本文为大家介绍常用的三种php设计模式:单例模式.工厂模式.观察者模式,有需要的朋友可以参考下. 一.首先来看,单例模式 所谓单例模式,就是确保某个类只有一个实例,而且自行实例化并向整个系统提供这个实 ...

  2. oracle备份与还原(导入导出)

    Oracle数据导入导出imp/exp 功能:Oracle数据导入导出imp/exp相当于oracle数据还原与备份.说明:大多情况都可以用Oracle数据导入导出完成数据的备份和还原(不会造成数据的 ...

  3. 解决Tomcat: Can't load IA 32-bit .dll on a AMD 64-bit platform 问题

    错误如下: java.lang.UnsatisfiedLinkError: E:\Program Files\MyEclipse 10\apache-tomcat-7.0.23\bin\tcnativ ...

  4. javascript中json对象json数组json字符串互转及取值

    今天用到了json数组和json对象和json类型字符串之间互转及取值,记录一下: 1.json类型的字符串转换为json对象及取值 var jsonString = '{"bar" ...

  5. Patterns for application development with ASP.NET Core

    此文章翻译自 NDC { London } 16-20 January 2017 上, Damian Edwards和David Fowler的演讲,如果翻译不周,请大家指出错误. Logging 生 ...

  6. windows下批量换程序——运维常用

    Windows一批机器,需要批量换程序.写个脚本给大家. net stop sharedaccess (关闭防火墙) del /s d:\*.log d:\*.vbs d:\*.pdb d:\*.vb ...

  7. DirectFB学习笔记一

    本文记录directfb程序的基本操作流程. 1.首先创建一个directfb对象:DirectFBInit(&argc,&argv)初始化然后创建DirectFBCreate(&am ...

  8. SQL Server pivot 行转列遇到的问题

    前段时间开发系统时,有个功能是动态加载列,于是就使用了SQL Server自带的PIVOT函数进行行转列,开始用的非常溜,效果非常好.但是提交测试后问题来了,测试添加的列名中包含空格,然后就杯具了,功 ...

  9. jquery通过ajax向后台发送(checkbox)数组,并在后台接收,(发送的数据是checkedbox)

    版权声明:本文为博主原创文章,未经博主允许不得转载. $(document).ready(function(){ var flag = 1; $("#delBtn").click( ...

  10. 'k1': 大于66的所有值, 'k2': 小于66的所有值

    #!/usr/bin/env python # -*- coding: utf-8 -*- #有如下值集合 [11,22,33,44,55,66,77,88,99,90...],将所有大于 66 的值 ...