Touching Future—s01-e01

《怪兽打打》是一款基于WebRTC开发的体感小游戏，也是MTG在web上实现体感交互的第一个小尝试。我们将逐一对影像捕捉、图像实时处理算法、游戏逻辑等实现原理拆解分析，为你提供一个既不需要奥特曼，也不需要任何武器，只靠你一个拳头就可以轻易干掉怪兽的新方法。

Transcript

1. Touching     Future   S01-­‐E01 昊川  
2. 话说远古时代……  
3. 时至今日……  
4. 奈何……生不逢时  
5. 问题是……  
6. 他好，我也好，当然这样最好  
7. 采用英特尔酷睿2 双核处理器，此处 省略1w字…… 幸亏，我们有神器——盘古斧  
8. 想当年，我左青龙 右白虎，老牛在腰 间，龙头在胸 口…… 可惜……年久失修变成了板斧  
9. 神器2——五彩石（手套）  
10. 还有黑玉断续膏（接口）   window.URL  =  window.URL  ||    window.webkitURL;     navigator.getUserMedia  =              navigator.getUserMedia      ||  navigator.webkitGetUserMedia      ||  navigator.mozGetUserMedia      ||  navigator.msGetUserMedia;  
11. 还是黑玉断续膏（接口）   <video  autoplay></video>   if  (navigator.getUserMedia)  {      navigator.getUserMedia(        {video:  true},                        function(stream)  {          video.src  =            window.URL.createObjectURL(stream);          },          __onFail);   }  
12. 三取黑玉断续膏（接口）   <canvas></canvas>   ctx0  =  c0.getContext("2d")   ctx0.drawImage(video,  0,  0);   arr  =  ctx0.getImageData(0,  0,          DETECT_WIDTH,  DETECT_HEIGHT);   数组大小width*height*4  
13. 万事具备，只欠东风   （图像算法）    
14. 图像处理-Transform   context.setTransform(a,  b,  c,  d,  e,  f)
15. 图像处理-Filter   var  filter  =  function(pixels,  rgb)  {                  var  d  =  pixels.data;                  for  (var  i  =  0;  i  <  d.length;  i  +=  4)  {                          var  r  =  d[i],    g  =  d[i+1],  b  =  d[i+2];                          var  v  =  (r  >=  rgb[0]-SENS  &&  r  <=                                  rgb[0]+SENS  &&  g  >=  rgb[1]-SENS  &&  g  <=                                  rgb[1]+SENS  &&  b  >=  rgb[2]-SENS  &&  b  <=                                  rgb[2]+SENS)  ?  0  :  255;                          d[i]  =  d[i+1]  =  d[i+2]  =  v;                  }                  return  pixels;   };  
16. 图像处理-Difference-1   var  __fastAbs  =  function(value)  {                  return  (value  ^  (value  >>  31)  –              (value  >>  31));   };     var  __threshold  =  function(value)  {                  return  (value  >  0x20)  ?  0x0FF  :  0x0;   };  
17. 图像处理-Difference-2   var  difference  =  function(target,  data1,  data2)  {                      if  (data1.length  !=  data2.length)  return  null;                      var  i  =  0;                        while  (i  <  (data1.length  *  0.25))  {                              var  average1  =  (data1[4  *  i]  +  data1[4  *  i  +  1]  +  data1[4  *  i  +  2])  /  3;                              var  average2  =  (data2[4  *  i]  +  data2[4  *  i  +  1]  +  data2[4  *  i  +  2])  /  3;                              var  diff  =  __threshold(__fastAbs(average1  -  average2));                              target[4  *  i]  =  diff;                              target[4  *  i  +  1]  =  diff;                              target[4  *  i  +  2]  =  diff;                              target[4  *  i  +  3]  =  0xFF;                              ++i;                      }          }  
18. 人物出入侦测  
19. 人物出入侦测   初始状态 有人进入 静止 进入游戏
20. 特定颜色位置判断1  
21. 特定颜色位置判断2  
22. 特定颜色位置判断3  
23. 特定颜色位置判断4  
24. 特定颜色位置判断5 接下来，我们做排序：   ……
25. 特定颜色位置判断6 •  采用队列将第一个放入队列，同时给予标 记，防止死循环。   •  另外查看当前队列8个方向上是否有100%黑 色的块，如果有入队列。如果占比低于80%， 丢掉这个块，否则缓存起来。   •  直到队列为空。  
26. 特定颜色位置判断7   100 100 80   60   100 100 60   80   60   60   60   60   60   队列
27. 特定颜色位置判断8
28. 特定颜色位置判断9   •  得到黑色区域的位置，算出中心点（可改 善）   •  投射到屏幕上，终于……  
29. 当然它还有很多限制   •  受JS性能限制，图形算法不精准或依赖特殊 条件较多；   •  实时性待改善；   •  受摄像头限制，采样频率30pfs不能达到最 理想的效果，另外平面摄像无法满足纵深 探测。
30. 优化路线     •  修改算法，如采用预测算法或能提高实时 性（当然效果很有限）；   •  将复杂的图像处理算法放到GPU去——采用 Ejecta等技术；   •  做一些不需要自己造轮子的事，享受Kinect、 LeapMoJon带来的便捷。
31. 游戏地址   http://   ued.taobao.com/mtg/ gaia/  
32. 最后……   •  有兴趣的同学可以加入我们MTG研究小组   •  旺旺群：966273652   •  ATA社区： hQp://www.atatech.org/gprofile/820   •  大量体感设备在等你   •  Kinect、LeapMoJon……   •  还有海量视觉、交互妹纸