YuYuYouEr工作室

 

Kinect舞台美术、游戏特效，可以用于商业展示、互动橱窗。

 

YuYuYouEr_KinectTetris – 体感俄罗斯方块，最自然的交互，最经久不衰的游戏；

下载地址：http://www.YuYuYouEr.cn/down/YuYuYouEr_KinectTetris_release_v0.2.zip

 

 

近期对手指识别跟踪比较感兴趣，网上有几个公开的Kinect、OpenNI版本，都是基于骨骼数据和深度图像来识别手指，当然也会受限于体感设备最小识别距离的限制。

我则利用virTouch摄像头（一款由永利宁公司生产的指控设备）完成近距离的手指识别跟踪，目前算法还处于试验阶段，需进一步优化。

不过从处理结果来看，效果还是蛮好的，优化后应该会比较稳定。

 

给自己开发了一套有限状态自动机类库，满足基本的状态转移需求，有需要的朋友拿去玩吧。

boost库中自动机还是比较强大的，不过确实比较大，而且我的项目要求可在运行时修改状态机的配置。

 

源码下载地址：

qfFSM 百度网盘

C++版本：qfFSM_for_cpp_v1.2.zip

Java版本：qfFSM_for_java_v1.2.zip

JavaScript版本：qfFSM_for_javascript_v1.2.zip

C#版本：qfFSM_for_csharp_v1.2.zip

Unity3D(C#)版本：qfFSM_for_unity3d_csharp_v1.2.zip

压缩包内含有一个简单的 StopWatch例程，UML状态图如下：

类库非常小，文件列表及说明如下：

qfState.h/.cpp：状态

qfStateMachine.h/.cpp：状态机，由状态、事件、转移规则组成，继承自qfState，可作为另一个状态机的子状态

qfEvent.h：事件，状态机的激励

PropertyBag.h：属性包，每个qfEvent都有一个属性包

qfFSM.h/.cpp：qfFsmLogic类，对qfStateMachine进行封装，提供一个大粒度状态机基类，状态机开始、停止、重置，状态机子状态管理。

================================

[Read the rest of this entry...]

整理一下最近kinect交互项目中按钮激活时用到的状态图，希望对大家有帮助。

上图为Button对于某个kinect骨骼节点的响应，处理进入、离开、激活。

状态列表：

State_Normal: 常规状态
State_PointOut: 点离开状态
State_PointIn: 点进入
State_CountDown_start: 倒计时开始
State_Active: 激活
State_DeActive: 非激活

事件列表：

无名称的事件弧为AutoTransferEvent，实现状态间的自动转移；
event_PointIn: 点进入
event_PointOut: 点离开
event_UserLeave: 用户离开
event_CountDown_end: 倒计时结束
event_enableMultiActive: 允许连续多次激活

最近在项目中使用与kinect手部节点交互的按钮，需要处理手部进入、离开按钮范围，进入后0.5s达到激活态，激活后若手部节点没有离开，则允许连续激活。

在我的项目中Button内部有StateMachine实现，同时持有一个EventListenerManager，允许其他对象注册为EventListener，State_Active/State_DeActive状态会有事件产生。

如果需要实现激活Loading动画，如常见的转满一周或者类似注水的效果，可以在State_CountDown_start状态增加事件通知。

 

本文主要介绍chrome版本体感浏览器使用过程，由于目前kinect社区开发者居多，所以本文也侧重介绍如何基于体感浏览器做开发，并假定您能搞定一些SDK安装相关的小问题。

直接切入正题吧，首先您得下载体感浏览器，这是一个zip包，解压即可，您需要掌握的基本技能：JavaScript、HTML、HTML5 Canvas。

体感浏览器目前发布在国内最大的体感开发社区cnKinect.com首页，体感浏览器目前有两个版本，分别支持微软MS Kinect SDK和开源OpenNI SDK，确保您的机器已经安装好相应的SDK驱动。

对于运行在体感浏览器中的Web应用来说，并不需要关心底层SDK驱动类型，Web应用主要使用我们提供的JavaScript API来获取Kinect识别结果，目前浏览器在启动时默认会打开体感硬件（请先将硬件接入PC，这里将来会完善，做到即插即用）。

体感浏览器启动后，默认会打开cnKinect.com中app页面，目前我们编写的Web体感应用都发布在这里，如果您有博客空间，那么可以将编写的Web体感应用发布在自己的站点，给提供朋友一个url即可，他们便可体验您完成的酷炫效果。

OK，接下来发一张图片，是目前我最满意的Web体感应用：体感浏览器版-捕鱼达人截图(由原HTML5版捕鱼达人移植而来,感谢捕鱼达人团队，他们编写了这个很难酷的游戏)。

以捕鱼达人为例(URL：http://app.cnkinect.com/fishjoy/)，在体感浏览器加载完成之后，玩家站在kinect视野内，将看到一个绿色人影，此时，玩家将左手或右手从胸前推出，游戏中将发射一枚渔网，您技术够好的话，也能像我一样逮到两条大家伙。

接下来介绍如何开发一款可以运行在体感浏览器中的Web体感应用。

首先要明确体感浏览器也是一款标准的Web浏览器，可以用他打开baidu，google这些网站，体感浏览器内核为Webkit，对HTML5支持相当好，上图中小绿人便是用HTML5中Canvas绘制得到。

体感浏览器发布的zip包中包含有ReadMe.txt，其中介绍了主要的目录结构：

目录结构说明：————————
cnkinect_broswer/cnkinect_broswer.exe：浏览器主程序。
sample/api/api.js：提供一个基本的javascript函数来获取骨骼数据。
sample/example_kinect_javascript：基本示例，打开体感浏览器后，拖进去就ok，最新版本新增加视频、深度数据流，内部非常简单。

体感浏览器提供3条API，分别对应Kinect3中基本数据流，如下：

qfKinectGetSkeletonData()函数获取kinect骨骼节点数据，目前仅提供一名用户节点数据；
qfKinectGetVideoData()函数获取kinect视频数据；
qfKinectGetDepthData()函数获取kinect深度数据；

API函数说明：

1、qfKinectGetSkeletonData()函数返回一个JSON格式字符串，可以使用JQuery、eval，或者第三方JSON解析库转为JavaScript对象，如下：

function deal_Skeleton()  {

var strJsonSkl = qfKinectGetSkeletonData();
if (strJsonSkl == null || strJsonSkl == “”) { return ; }

var skl = eval( “(” + strJsonSkl + “)” );

//下面以获取右手坐标x,y,z分量为例，单位为米
skl["hand_right"].x;      //ok，各位coding大仙可以用这个数据天马行空一番了
skl["hand_right"].y;      //ok，您现在知道玩家右手的高度了，请继续天马，继续行空
skl["hand_right"].z;       //ok，z即是用户右手相对kinect的距离， 捕鱼达人前推动作判定，小z功不可没

}

2、视频数据、深度图数据结构非常简单，首先你看视频数据：

//获取得到VideoData，再获取HTML5中Canvas对象的context，直接putImageData()即可
var kinectVideo = qfKinectGetVideoData();
var context = canvas.getContext(’2d’);
context.putImageData(kinectVideo, 0, 0, 0, 0, 640, 480);

不会使用Canvas的同学可以搜索“Canvas”，查看相关资料，非常简单。
w3school中也有相关科普教材：http://www.w3school.com.cn/html5/html5_canvas.asp

3、深度数据与上述Video数据类似，演示一下显示绿色小人代码，说明如何处理深度数据：

首先你需要知道深度原始数据是到kinect的距离，单位毫米，体感浏览器得到的为32位整形，长度4个字节，低3位存放UserID，
SDK驱动中通过C语言得到的深度为2字节。

var kinectDepth = qfKinectGetDepthData();
var size = kinectDepth.width * kinectDepth.height * 4;
for (var i=0; i<size; i+=4) {

//遍历每个深度数据项，判断UserID，如果为0则令此像素透明，否则不透明并显示为绿色调
//这样小绿人就抠出来了
if (0 != (kinectDepth.data[i+0] & 0×07)) {  //判断UserID

kinectDepth.data[i+3] = 255;    //绿色分量最大
kinectDepth.data[i+1] = 255;    //完全不透明

}
else {

kinectDepth.data[i+3] = 0;   //完全透明

}

}

OK，科普完毕，如果大家折腾的过程中有需要讨论的地方，欢迎在群中找我，我是YuYuYouEr；

我的EMail：YuYuYouEr@qq.com
我的博客：http://www.YuYuYouEr.cn

最后附上 捕鱼达人视频、骨骼视频深度数据测试视频：

本文也发布在 KTU – Kinect体感开发者协作博客，标题为《chrome体感浏览器详细使用过程》，

KTU博客文章质量相当高，值得kinect研发者细看一番。

YuYuYouEr增强现实AR软件视频

支持任意海报、宣传则、书籍封面，内页插图。

YuYuYouEr增强现实AR-SDK开发包

不需要特殊的黑白图片标记，使用普通海报、照片即可。
SDK提供视频获取，图片识别标定，可输出样本图片名称、位置、旋转度数。

提供SDK定制，AR互动项目定制开发。

加入人影的版本：

第一个版本：