如何利用leap motion手势识别创建支持手势操控的Web游戏

Leap Motion作为一款手势识别设备,相比于Kniect,长处在于准确度。
在我的毕业设计《场景漫游器》的开发中。Leap Motion的手势控制作为重要的一个环节。以此,谈谈开发中使用Leap Motion进行手势识别的实现方式以及须要注意的地方。
一、对Leap Motion的能力进行评估
在设定手势之前。我们必须知道Leap Motion能做到哪种程度,以免在设定方案之后发现非常难实现。这个评估依靠实际对设备的使用体验。主要从三个方面:
1.Leap Motion提供的可视化的手势识别界面
2.SDK文档说明
3.Leap商店中的APP
基本能够的得出:
1.Leap Motion的识别对于水平方向或者以水平方向为基础手势可以较好的识别。
2.对于握拳或者垂直的行为识别会出现误差。这样的误差和详细的手势行为有关。
3.不应该过分依赖高准确度,Leap Motion能检測到毫米级别是没错的,可是有时候会把你伸直的手指识别成弯曲的。所以要做好最坏的打算。
二、实际的须要
移动、旋转、点击button、缩放和旋转物体、关闭程序、暂停,主要的功能需求是这样。
有一些原则:
1.同样环境下的手势应该接近和方便的转换。旋转和移动的之间的转换应该设计的非常自然。
2.手势避免冲突,手势过于相似不是什么好事。比方三个伸直的手指和四个伸直的手指不应该被设计成两个手势。当然这不是绝对的。假设你进行一个缓慢的动作而且动作是面向Leap Motion的摄像头,这时候应该相信它。至少要针对这个手势做一个单独的測试。
三、考虑主要的数据结构和算法的轮廓
Leap Motion的SDK在第一部分的时候已经浏览过。最起码能知道Leap Motion能够包括的信息。从SDK看来这是非常丰富的,既然设计自己的手势,那么最好不要依赖于SKD开发包的炫酷的手势。非常可能,这些手势仅仅是官方用来演示或者炫耀的。自己设计手势的基本数据结构也有另外的优点,比方更换了体感设备,可是功能是相似的。这时候仅仅须要更改获取数据的方式就能够了(从一个SDK更换到还有一个SDK),而不要改动算法。
算法的轮廓与基本数据有非常大的关系。所以数据结构一定要尽量的精简而且同意改动(可能某个算法占领了决定性因素,可是開始没考虑到)。
public class HandAndFingersPoint : MonoBehaviour
const int BUFFER_MAX=5;
Controller m_LeapC
&span style=&white-space:pre&& &/span&public E_HandInAboveView m_AboveView = E_HandInAboveView.N
//手指-数据 ,[0]表示左手,[1]表示右手
private Dictionary&Finger.FingerType,FingerData&[] m_FingerDatas = new Dictionary&Finger.FingerType, FingerData&[2];
//buffer,[0]表示左手,[1]表示右手,[,n](n属于0,3。表示第n次缓存)
private Dictionary&Finger.FingerType,FingerData&[,] m_FingerDatasBuffer=new Dictionary&Finger.FingerType, FingerData&[2,BUFFER_MAX];
private int m_CurBufIndex=0;
//palm 0:左手 和1:右手
private PointData[] m_PalmDatas = new PointData[2];
private readonly PointData m_DefaultPointData = new PointData(Vector.Zero, Vector.Zero);
private readonly FingerData m_DefaultFingerData = new FingerData(Vector.Zero,Vector.Zero,Vector.Zero);HandAndFingersPoint类中剩下的部分是对数据的填充、清除、刷新等方法。E_HandInAboveView记录哪仅仅手先进入Leap Motion的视野。用于设定优先级。
另外两个主要的数据结构PointData和FingerData:
//一个手指的数据包括一个指尖点数据和手指根骨的位置数据
public struct FingerData
public PointData m_P//指尖的位置和指向
public Vector m_P//手指根骨的位置,对于拇指来说是Proximal phalanges近端指骨的位置
public FingerData(PointData pointData, Vector pos)
m_Point = pointD
m_Position =
public FingerData(Vector pointPos, Vector pointDir, Vector pos)
m_Point.m_Position = pointP
m_Point.m_Direction = pointD
m_Position =
public void Set(FingerData fd)
m_Point = fd.m_P
m_Position = fd.m_P
//一个点的数据,包括方向和位置
public struct PointData
public Vector m_P//位置
public Vector m_D//方向
public PointData(Vector pos,Vector dir)
m_Position =
m_Direction =
public void Set(PointData pd)
m_Position = pd.m_P
m_Direction = pd.m_D
public void Set(Vector pos,Vector dir)
m_Position =
m_Direction =
//先被看到的手
public enum E_HandInAboveView
基本数据定义好之后,最好确认数据的填充是没问题的。实际通过Frame frame = Leap.Controller.Frame();来获取最新的数据。这时候并不急着写完和基本数据相关的方法。如今终于要的是手势算法的合理性。要推断是否合理,最好先写一个算法。
最简单的是伸掌手势,在控制中水平的伸掌用于漫游,垂直的伸掌用于暂停。我发现手掌依赖于手指,而手指包含两个状态——伸直和弯曲。另外,其它的手势,也都是手指的伸直或者弯曲,外加方向的判定累积出各种效果。理所当然的,应该单独写出手指的弯曲和伸直判定算法:
/// &summary&
/// 该方法提供对于单个手指匹配的算法,如伸直。弯曲
/// 以后可能的改变:对于不同的场景可能要求有所不同。这里的阈值或许会随之改变
/// &/summary&
public class FingerMatch
//弯曲状态的角度阈值
static readonly float FingerBendState_Radian = Mathf.PI*4f / 18 ;//40度
//伸直状态的角度阈值
static readonly float FingerStrightState_Radian = Mathf.PI/12;//15度
/// &summary&
/// 手指伸直的状态,当根骨-指尖的方向和指向的偏差小于阀值时,判定手指为伸直状态。
/// 注意无效的方向为零向量。先判定是零向量
/// &/summary&
/// &param name=&adjustBorder&&对阈值做的微调&/param&
/// &returns&&/returns&
public static bool StrightState(FingerData fingerData, float adjustBorder=0f)
bool isStright =
Vector disalDir = fingerData.m_Point.m_D
//假设指尖方向为0向量,表示无效的数据
if (!disalDir.Equals(Vector.Zero))
Vector fingerDir = fingerData.m_Point.m_Position - fingerData.m_P//指尖位置减去指根位置,由指根指向指尖的向量
float radian = fingerDir.AngleTo(disalDir);
if (radian & FingerStrightState_Radian + adjustBorder)
isStright =
return isS
/// &summary&
/// 推断一根手指是否处于弯曲状态
/// &/summary&
/// &param name=&fingerData&&须要判定的手指数据&/param&
/// &param name=&bandBorder&&弯曲的阈值&/param&
/// &returns&&/returns&
public static bool BendState(FingerData fingerData, float adjustBorder=0f)//,out float eulerAugle)
bool isBend =
//eulerAugle = -1f;
Vector disalDir = fingerData.m_Point.m_D
if( !disalDir.Equals(Vector.Zero) )
Vector fingerDir = fingerData.m_Point.m_Position - fingerData.m_P//指尖位置减去指根位置,指跟到指尖的向量
float radian = fingerDir.AngleTo(disalDir);
//eulerAugle = radian*180/Mathf.PI;
//夹角超过定义的阈值时,认定为弯曲状态
if (radian & FingerBendState_Radian + adjustBorder)
return isB
上面包括了一个重要的概念——阈值。它是描写叙述究竟何种程度算是伸直,何种程度算是弯曲。阈值的确定是须要实际測试来决定的。写到这里也是时候进行一次简单的測试了,毕竟算法的轮廓已经确定。我甚至没写出手掌伸直的判定算法。就确定是可行的。
基本数据结构相关的操作——HandAndFingersPoint类:
该类使用基本数据。在Unity Editor中执行会展示了一个手掌的轮廓,蓝色表示手指的方向。红色表示手指骨根到掌心和指尖的连线,黄色表示掌心到指尖的连线:
四、手势实现中简要的概括
其它代码都能够在我的获取。在手势的实现中,也包括了一些小的技巧。比方对于动作的匹配要防止手指的颤抖引起的误差。採用离散的数据取样——每隔一定时间做一次取样。
使用和观察这些脚本的方式:能够把这些脚本放在一个GameObject中。通过Leap Motion会看到脚本的属性在匹配成功时会发生变化。另外,脚本中包括了事件的注冊功能,换句话说。外部能够向随意的手势注冊一个事件,以便手势完毕匹配或者到达某种匹配状态时做一些额外的处理。这些脚本如今并不能直接完毕我们的需求,如暂停。我们须要在这些手势状态或者动作上做进一步的限定,如依据掌心的方向设定垂直向前的手掌为暂停,水平的手掌为平移之类的。
阅读(...) 评论()如何利用Leap Motion创建支持手势操控的Web游戏_百度知道
如何利用Leap Motion创建支持手势操控的Web游戏
Leap Motion API大大简化了对手部、指向物末端的空间坐标以及该指向物末端的移动速度等,其中一端由用户把持在手中,并在这里下载到前面提到的这两种版本;
&body&gt作为开发工作的第一步.4,这些帧也就是经过处理的控制器视频流快照,它的作用是从公司的CDN处下载Leap Motion JavaScript库;javascript&script&gt.loop(function(frame) {
&lt.loop方法对来自设备的数据进行捕捉,就会发现其中有多项属性被用于描述显示信息——例如指向物的长度与宽度。在这里我们使用的是非精简版本。这里的“工具”被认定为一种延长状物体。大家可以点击此处访问Leap Motion官方网站;
&lt.2,这是为了能够在需要使用浏览器的JavaScript调试器时能够更轻松地对代码进行单步调试,每一帧内所包含的一系列pointables都被输出至控制台当中;& 上述代码的head元素中包含一个script标签,我们利用Leap.js" target="_blank">http。如果大家检查这些被推送至控制台的指向物对象.pointables://js。在第二个script标签中;/&gt://html&script src=&quot.leapmotion:&
&lt.com/leap-0。Leap Motion驱动程序会发出数据“帧(frame)”;head&gt,通用术语“指向物(pointable)”被用于描述作为工具或者手指存在的对象。在前面的示例中.length &
&lt.com/leap-0、手指以及工具位置的检测流程,用于显示一系列显示在帧内的指向物对象。Leap Motion针对生产使用环境推出一套精简版本.4;/text/
&lt.log(frame。帧对象当中包含一项名为pointables的属性;script type=&quot,此外还针对开发用途提供非精简版本;&#47.2;html&script&&#47。在Leap Motion的表述体系当中; &lt,也就是页面body之下;body&/<a href="http,例如铅笔;
Leap.pointables);
})。被传递至该loop中的匿名函数在每次接收到新帧时都会执行一次.leapmotion,从而持续不断地为应用程序的运行提供必要信息。该软件每秒大约会产生30帧数据,并在其中载入Leap Motion JavaScript库; 0)&gt、获取来自设备的数据并记录下浏览器调试控制台中的部分数据;head&gt,让我们首先创建一个网页
其他类似问题
为您推荐:
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁如何利用Leap Motion创建支持手势操控的Web游戏_百度知道
如何利用Leap Motion创建支持手势操控的Web游戏
提问者采纳
作为开发工作的第一步,让我们首先创建一个网页,并在其中载入Leap Motion JavaScript库、获取来自设备的数据并记录下浏览器调试控制台中的部分数据:&html&
&script src=&http:// /leap-0.4.2.js&&&/script&
&script type=&text/javascript&&
Leap.loop(function(frame) {
if (frame.pointables.length & 0)
console.log(frame.pointables);
&/script& &/html& 上述代码的head元素中包含一个script标签,它的作用是从公司的CDN处下载Leap Motion JavaScript库。Leap Motion针对生产使用环境推出一套精简版本,此外还针对开发用途提供非精简版本。在这里我们使用的是非精简版本,这是为了能够在需要使用浏览器的JavaScript调试器时能够更轻松地对代码进行单步调试。大家可以点击此处访问Leap Motion官方网站,并在这里下载到前面提到的这两种版本。在第二个script标签中,也就是页面body之下,我们利用Leap.loop方法对来自设备的数据进行捕捉。Leap Motion驱动程序会发出数据“帧(frame)”,这些帧也就是经过处理的控制器视频流快照。该软件每秒大约会产生30帧数据,从而持续不断地为应用程序的运行提供必要信息。被传递至该loop中的匿名函数在每次接收到新帧时都会执行一次。Leap Motion API大大简化了对手部、手指以及工具位置的检测流程。这里的“工具”被认定为一种延长状物体,例如铅笔,其中一端由用户把持在手中。在Leap Motion的表述体系当中,通用术语“指向物(pointable)”被用于描述作为工具或者手指存在的对象。帧对象当中包含一项缉搐光诽叱赌癸涩含绩名为pointables的属性,用于显示一系列显示在帧内的指向物对象。在前面的示例中,每一帧内所包含的一系列pointables都被输出至控制台当中。如果大家检查这些被推送至控制台的指向物对象,就会发现其中有多项属性被用于描述显示信息——例如指向物的长度与宽度、指向物末端的空间坐标以及该指向物末端的移动速度等。
其他类似问题
为您推荐:
防伪查询的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁如何利用Leap Motion创建支持手势操控的Web游戏_百度知道
如何利用Leap Motion创建支持手势操控的Web游戏
提问者采纳
当用户在Leap Motion控制器前方移动自己的手指时,用于描述该手势的相关性质;
&lt,我们将在HTML 5 Canvas上描绘手指位置.normalizePoint(position);&#47,而后将其作为矩形绘制在屏幕当中;2d&).tipPswipe&quot,Leap,我们必须将选项对象的enableGestures属性设为true.2.js&quot、而无需另行安装额外的浏览器插件.pointables[0],
var y = ctx,因为它能帮助我们获取手指的原始位置.loop(function(frame) {
if (frame。第一步.4; 在多数情况下,通用术语“指向物(pointable)”被用于描述作为工具或者手指存在的对象;style type=&quot.canvas.canvas,即frameEventName选项.loop方法对来自设备的数据进行捕捉;canvas&quot,clearRect方法在处理每一帧图像时都会被调用一次;
&lt.js" target="_blank">body&gt.js&quot.2: true.width * (1 - start[1]); 0) {
var position = frame。WebSockets标准的设计目标在于允许JavaScript代码运行在网页当中,负责捕捉数据并利用部分简单API进行打包以保证其易于使用,而后将其top与left属性分别设置为对应的X与Y坐标。当用户部署好了自己的Leap Motion设备。接下来、并将其与应用程序窗口中的对应点加以映射.normalizePoint(gesture, function(frame) {
ctx。在这里我们使用的是非精简版本;
ctx.width正式开始Leap Motion JavaScript库依赖于WebSockets将来自控制器的数据提交并显示在用户的Web浏览器之上;head&html&gt://js。它采用一种便捷的标准化方法; html&
L&text&#47。Leap Motion驱动程序会发出数据“帧(frame)”;/
&lt.innerWidth * normalized[0].stroke();
frame.pointables[0]; 0)
var position =/script src=&
&lt,大家应该能够在Canvas上看到自己的动作轨迹线条;text/
Leap。Leap Motion JavaScript库与本地WebSocket服务器相连;body&
Leap。以下示例代码显示了如何对扫动手势进行迭代.normalizePoint(position).height * (1 - normalized[1]);
element.loop(options, 20).loop(function(frame)
if (frame,而不太可能直接使用原始tipPosition数据; };script src=&quot.loop回调将被调用至每一个提取自Leap Motion控制器的帧数据。在第二个script标签中;body&head&
}).stabilizedTipPosition.clearRect(0。Leap Motion帧对象当中包含一个手势属性;&&/
var endY =http。这里的“工具”被认定为一种延长状物体;
console: &quot。在火狐开发者控制台中查看指向物对象,它的作用是从公司的CDN处下载Leap Motion JavaScript库.com/leap-0.beginPath();
var ctx =canvas&gt.2。这一次.com/leap-0.getElementById(&quot,从而确保该回调只在浏览器准备进行绘制时被调用,让我们首先创建一个网页.log(&quot.clearRect(0。下面的示例代码为如何获取单个指向物的原始坐标.loop与浏览器的绘制周期保持一致.&lt: 25px://js.lineTo(endX;&#47,用户可以利用它通过移动手指控制屏幕上某个元素的位置; &lt,即将某个物理点的原始坐标换算成能够代表该点在互动框中相对位置的等效数值;
&lt。现在我们已经获得了用户手指的物理坐标.log(frame。另一项名为stabilizedTipPosition的备选属性则允许我们收集同样的数据;&gt:&head&gt.getContext(&quot: & Y: &&
element.2。如果该选项没有经过设置; 在屏幕上绘制手指位置利用标准化定位机制,我们利用Lcss&quot。被传递至该loop中的匿名函数在每次接收到新帧时都会执行一次.script&gt.4。计算标准化手指位置利用指向物数据; 这样一来.pointables,利用标准Canvas绘制API来描绘由起始位置到结束位置的线条;
}).forEach(function(gesture) {
if (gesture。标准化坐标使用浮点数值格式;X://js.length &body&
var element = document。Leap Motion针对生产使用环境推出一套精简版本;script&gt.rect(x.fill();
var options = {
var endX =);
& height=&& + position[0] + &quot。在默认状态下.innerHeight * (1 - normalized[1])。由Leap Motion控制器捕捉到的数据会被发往WebSocket服务器, 20。最后;
});div&gt,我们利用forEach方法对pointable项目进行了遍历,这是为了能够在需要使用浏览器的JavaScript调试器时能够更轻松地对代码进行单步调试;canvas id=&2d&quot,Leap Motion SDK还能够识别出其它几种手势动作。标准化定位机制非常实用,大家都会优先使用Leap Motion软件所提供的自动稳定功能.getElementById(&&#47.innerWidth * normalized[0];
&lt.width * start[0];html&gt.beginPath(););
ctx,现在我们已经可以在网页上绘制手指的具体位置;script src=&&#47,并在其中载入Leap Motion JavaScript库.interactionBox.js&quot.moveTo(startX;&gt,用于显示一系列显示在帧内的指向物对象;/
var start = /leap-0:&lt。在forEach loop当中.getElementById(&quot.interactionBox、从而使每根手指都成为可操作对象;head&
&lt、并为其安装了附带的软件及驱动程序之后,能够提取从帧数据中检测出的一系列手势信息;animationFrame&canvas&quot.startPosition);
&lt,接下来要做的就是将其与浏览器窗口内的位置进行关联.
background-color,此外还针对开发用途提供非精简版本,例如铅笔;&gt。每一种手势都具备一项type属性. width=&
&lt.com/leap-0。它会对每一个标准化位置进行识别;
var startY = ctx。在前面的示例中,而后再将其传递至L
var canvas = document,由控制器加以追踪的大型虚拟空间被称为互动框(interaction box),旨在确保前一帧所绘制的矩形切实得到清除://&#47:var canvas = document。为了获取手势数据:&lt
来自团队:
其他类似问题
为您推荐:
leap的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁> 手势操控
在电子工程世界为您找到如下关于“手势操控”的新闻
手势操控资料下载
为了实现在Virtools环境下自然方便的人机交互过程,设计开发了基于Kinect的虚拟装配交互技术。该技术通过三维多手指检测并结合Kalman滤波来稳定跟踪指尖,同时基于指尖特征自定义了多种装配所需的手势;以Mircrosoft Visual Studio 2010为开发工具,设计了手势操控相关功能块的编辑后集成于Virtools环境中,实现了手势在虚拟装配中的交互控制。实例证明,该技术能很好...
手势操控相关帖子
和一键返回这类的功能真的是大幅度提高了用户体验!逼格满满的有没有!
本帖最后由 tianshuihu 于
20:22 编辑
赞一个,信号搜索功能太强大了,以前大都是手动搜索时域波形,进而估算出信号所在频率范围,这个示波器居然兼有频谱分析仪的功能,太给力了!
测试仪器终于跨入触屏时代!特别对于频谱分析仪,触屏非常有用,如果能支持多点手势触控就更好了,这样可以更轻松的控制...
贴片机{:1_102:}
DIY个带摄像头的微型投影仪,手势操控:titter:
哇,这个提议太好啦,其实身边好多小伙伴都有过DIY的经历,和电子扯上关系的例如:DIY音频功率放大,DIY线性电源,DIYUSB转串口,DIY声控开关,DIYUSB小台灯,DIY摇摇棒,DIY距离报警器,DIY收音机,DIY点阵屏,DIY虚拟蜡烛,DIY能够显示字的小风扇。复杂一点的有:DIY无线通信...
轻便或笨重的外设。到现在的Kinect等各类设备以及可以完全靠摄像头识别用户的动作。如果这项技术再次取得突破性的进展,很有可能能完全取代鼠标,让人与电脑的交流进入一个全新的时代。 MYOMYO看起来很像之前提到过的手环鼠标。但是它的不同之处在于并非操作光标来进行电脑的操作,而是通过特定的手势和动作来直接对应用程序进行操作,在演示视频中,MYO的操作看起来非常华丽,一个响指就能开始、停止播放音乐,手指...
这样的无线装备,你想不想弄一台?或者自己在家改造一台?
& &人类是一种很“懒”的动物,所有的发明几乎都是为了让你更省力地生活着。不过,物联网的一个门槛是基于无线网络、而并非即插即用。你需要的配置家庭无线网络、将设备加入到无线网络中、在手机端下载应用程序,最后才能实现操控。如果这些操作让70岁的老人来完成,似乎有些不太现实。在这种情况下,Reemo手势腕带以一种非常“傻瓜化...
本帖最后由 jameswangsynnex 于
19:50 编辑
伟人说过,人有多大胆,地有多大产。科技发展到不靠谱的今天,已经跨过了实用主义,蠢蠢欲动的向浮夸进发。任何领域的发展过了能用这一关,就开始琢磨逼格了。未来科技的方向一定有一个功效分支是装逼,这点从科幻电影中就可以看出端倪。
提到交互,第一印象一定是科幻电影中眼花缭乱的手势、炫酷流弊的界面...
爱特梅尔maXTouch-无限触摸:.cn/course/517
爱特梅尔maXTouch多点触摸技术的无限触摸能带来新的应用可能,例如是以多根手指操控的手势、确认多重有效触摸,以及拒绝无意触摸等。
EEWORLD大学堂----爱特梅尔maXTouch-无限触摸...
到了VGA水平,分别位于手机的四个角,提供3D手势控制和眼球跟踪功能;另外2个摄像头分别位于机身正面和背面,用于拍摄照片和视频,其中机身背面的摄像头分辨率为1300万像素,正面的摄像头分辨率为200万像素。传言表明,亚马逊将通过向用户提供全新的操控方式挑战苹果在智能手机市场上的霸主地位。  据悉,亚马逊的3家摄像头合作伙伴为致伸科技、光宝科技和舜宇光学。致伸科技将是亚马逊智能手机摄像头的主要供应商...
如果类似 Google Glass 这类穿戴式设备未来会成为主流的话,到时候我们会如何同这些设备进行交互呢?一个可能的答案是手势操控。但是现有的手势交互,比如 Kinect 或者 Leap Motion,大多是基于摄像头识别用户动作来做的。MYO这款神奇的腕带则独辟蹊径,通过检测用户运动时胳膊上肌肉产生的生物电变化,配合手臂的物理动作监控来做人机交互。戴上腕带,你就可以像绝地武士一样控制移动...
在2013CES展上我们看到了大量创新产品,包括佩戴型显示系统、智能手势识别、眼神追踪、远程智能家电等等,未来的创新电子产品将将以智能化推动信息的沟通。
未来的创新电子产品将向三个趋势发展:
1、手机/平板/PC/TV等终端融合;
2、增强现实体验,实现人机操控;
3、智能化未来科技生活,实现人与人、物与物、人与物随时随地沟通。 关于未来三到五年,创新电子产品畅想 作为国内首创的“深圳...
客气,有启发就好,我也常常从别人的帖子里得到启发
谷歌近日获得了一项“智能手套”(Smart Glove)技术专利,用户可利用该手套进行文本输入,还支持其他各种手势操控。
谷歌近日获得了一项“智能手套”(Smart Glove)技术专利
  尽管谷歌已经获得了“眼球跟踪控制”方面的技术专利,但这并不意味着谷歌不再考虑其他感知方面的输入技术。
  近日,谷歌又获得了“智能手套”技术...
手势操控视频
手势操控创意
本周热门资源推荐

我要回帖

更多关于 leap motion 8种手势 的文章

 

随机推荐