2011年当時の私のKinectハック(kinect-ultraとkinect-kamehameha)とそこから得た学びに関するプレゼンテーション。

1. Kinect Hacks for Dummies
鷲尾友人 / Tomoto Shimizu Washio
tomoto@gmail.com
Twitter: @tomoto335 (日) / @tomoto335e (英)
Rev 1: 3/11/2011 (JTPAギークサロン)
Rev 2: 6/19/2011

2. 目次
 はじめに
◦ 筆者について
◦ 概要
◦ Kinectに関する基礎知識
 第1章: 技術サイド
◦ ハードとソフトの準備
◦ ハックの中身
 第2章: ビジネスサイド
◦ もともとの意図と実際のフィードバック
◦ 動画再生数
◦ 起こったことさまざま
 むすび

3. 筆者について
1973
1979
1985
1991
1997
2003
2009
対話できるCPU
MN1610
Z80
SC62015
x86, ARM,
Other RISCs
BASIC
話せるプログラミング言語
LISP
Perl
C VB C++
Java Tcl/Tk
RubyC#
Haskell
ActionScript
小学生
中学・高校生
パートタイムプログラマー 30%
ギタープレイヤー/作曲・編曲家 65%
大学生 5%
日立製作所
再びカリフォルニア
at Hitachi Data Systems
誕生
Javascript
Python
カリフォルニア
at Stanford
人生の黄金期
ベーマガ投稿時代
アセンブリ言語で
初プログラミング
ソフトウェア製品R&D
• 大規模オブジェクト指向設計
• ミドルウェア
• HCI
• システム管理
• ユーザ中心設計
• …

4. 概要 (1)
 このプレゼンはいったい何？
◦ 筆者が年末年始にお遊びで作ったKinectハックについて語る
http://code.google.com/p/kinect-ultra/
http://code.google.com/p/kinect-kamehameha/
◦ Kinectハックのおもしろさについて伝える
 Kinectハックって何？
◦ Xbox 360用体感型ゲームシステムKinectをPCにつないでお
もしろいものを作ること
 筆者はいつ/どうしてKinectハックを始めたのか？
◦ Kinect発売一ヵ月後の2011年12月
◦ 知人のTweetでKinectとKinectハックを知る
◦ 「これはやらねば！ちょうど冬休みになるしな！」

5. 概要 (2)
 筆者のKinectハックの特徴は？
◦ 集中的・突貫プロジェクト
 主要部分(*)は一週間で完(かみさんが愛想を尽かす前に)
 動き認識や3D CGに関する特別な知識なしから出発
◦ 「世界初のしょうもないもの」への挑戦
 「世界中の開発者たちが素晴らしいハックを次々と生み出してお
り、まったく驚くばかりだ。それならば実用的なものは彼らに任
せ、世界初のしょうもないものを作って、知力・体力・CPUパ
ワーの無駄遣いを極めてやろう…よし、やる気が出てきたぞ！」
◦ 公表した動画に国内外から予想外の大きな反響
 YouTube＆ニコニコ動画の再生数: 最初の一週間で30万回
 ニュース系Blog、新聞、TV等の様々なメディアに登場
 コンテストで賞を受賞
 投資家から声をかけられる
 …
(*) 大きな反響を得たkinect-ultra V1

6. 概要 (3)
 みなさんが今日得られるかもしれないこと
◦ Kinectハックを自分でやってみるためのとっかかり
  第1章: 技術サイド
◦ 「Geekが一発当てる」ためのヒント…？
  第2章: ビジネスサイド
 お断り
◦ 画像認識、動き認識、3D CGについては素人です
◦ 自分の興味のあることや、自分のやりたいことを実現するた
めに必要なことしか知りません
◦ アカデミックな正確さにこだわりません (嘘も方便)
◦ ビジネスマンではまったくありません

7. Kinectに関する基礎知識 (1)
 Kinect
◦ ジェスチャーや音声認識によりコントローラーなしに直感的
で自然なゲームプレイを可能とするXbox360用システム
◦ 2011年11月発売
 Kinectセンサー
◦ RGBカメラ＋IR深度センサー＋マイク等を備えた入力装置
 解像度: 640x480@30fps, 1280x1024@10fps(*)
 中身はPrimeSense社が開発
◦ USBでPCに接続可能
 ドライバやライブラリがフリーで利用可能
◦ 以下Kinectセンサーを単に「Kinect」と呼ぶ
(*) Avin’s Windows driverを使って

8. Kinectに関する基礎知識 (2)
 Kinectで一体何ができるのか？大まかに言うと…
映像と被写体までの距離
(各画素の深度)が取れる
PC上の処理で
物体を認識
さらなるPC上の処理で
人の骨格を認識(各関節
の三次元座標が取れる)
RGBカメラ +
深度センサー
いろんなことが
できそうだ
Let’s hack!
遠い
超遠い
近い

9. 第1章: 技術サイド
 この突貫プロジェクトの背後にあるレシピをご紹介
◦ 手品のタネと同じ…わかってしまえばなんてことない
◦ 一般的な数学の知識(特に幾何)は必要
 開発期間
◦ 調査: 3日
◦ kinect-ultra: V1 7日間 + V2 2日間
◦ kinect-kamehameha: V1 1日間 + V2 2日間
 まあn日ではなくn晩で数えた方が正しいんだけどなー
大きな反響を
得たのはこれ

10. 用意するハードウェア
 もちろんKinect
◦ 単品で買うこと
 Xbox+KinectパックにはUSB用コネクタが付いてこない
 Windows PC
◦ そこそこ速いCPUとGPU
 ハードウェアの能力が高いほど無造作にプログラムが書ける
 筆者はCore i7 2600 + GeForce GTX 285
◦ MACやLinuxは？
 正直、よく知らない
 現状ではたぶんWindowsが楽; ドライバの実装が比較的よい、
Microsoftの公式SDKがある、など
 Xboxは不要
(*) 例えばAvinのWindows用ドライバはRGBカメラとIR深度センサーの座標系を自動的
に一致させてくれるが、Linux用ドライバではなかった。今はよくなっているかも。

11. 用意するソフトウェア (1)
 OpenNI + NITE + Avin’s SensorKinect
◦ Kinectからの各種センシング情報(色や深度など)や各種認識
処理(プレイヤー認識や骨格認識など)を使うための基本的な
ソフトウェアセット
 OpenNI: フレームワーク
 NITE: OpenNI互換の実装
 Avin’s SensorKinect: OpenNI互換のドライバ
◦ 他の選択肢(例: OpenKinectなど)に対するメリット(*)
 本家PrimeSenseの血統
 Out-of-the-boxで簡単に骨格認識ができる
 これがなければこんなに早く作りきれなかった
 RGBカメラとIRセンサー間の座標変換不要
 ドライバの出来がよい; Thanks to Avin!
◦ 以下上記ソフトウェア一式を単に「OpenNI」と呼ぶ
(*) つい最近Microsoftの公式SDKがリリースされたが未評価

12. 用意するソフトウェア (2)
 OpenGL関連ライブラリ
◦ 筆者は3D CG APIにOpenGLを選択
◦ 使うのは初めてなので「OpenGL SuperBible 5th Edition」
を読んでそのままフォロー
 定番のサポートライブラリ(freeglutなど)を一通り
 本書に付属のライブラリGLToolsをそのまま使用
 その他
◦ OpenCV
 ガウス分布乱数と画像ファイル読み込みにのみ使用

13. ハック0: サンプルで勉強
 kinect-ultra着手前に3日間勉強
◦ OpenKinectとOpenNIの両方をトライ
◦ OpenNIのサンプルプログラムをいじくりまわし、基本的な
画素情報へのアクセス方法とOpenGLの使い方を勉強
 習作は深度付き時間差オーバレイ
 See 「Kinectでアルゴリズム行進！」
http://www.youtube.com/watch?v=j4ABDmFhkgA

14. ハック1: 変身
 骨格認識キャリブレーションをトリガとして使用
◦ 骨格認識を開始するには「psiポーズ」が必要
◦ Kinectらしくキャリブレーション完了で変身発動
 もともとのアイディアはセブンらしく眼鏡をかけるポーズだったんだけどね
 スーツはプレイヤー部分の色を変化させているだけ
◦ どの画素がプレイヤーかはOpenNIが教えてくれるので簡単にわかる
◦ 各画素の頭からの距離で色(赤か灰色)を決定
 任意の画素や関節間の距離を実世界座標系で計算可能(遅いのでちょっとした最適化が必要)
◦ なんていいかげんな！→いやジョークだしこんなもんでしょ
 庵野秀明版「帰ってきたウルトラマン」へのオマージュ入り
 白線の骨格を敢えて残しているのもウルトラマン風味を出すため
 スキンの貼り付けができたらすばらしい！が難しすぎる
Ψギリシャ文字
psiのポーズ

15. 豆知識: 座標系について少々
Kinect座標系
各XY平面
(0, 0)~(640, 480)
0
実世界座標系
• OpenNIから取れる関節の位置
• 3D仮想空間のオブジェクト(ポリゴン)の位置
OpenNI APIによる変換
(ちょっと遅い)
10000~
• Kinectから取れる画素
の色や深度の生データ
OpenGL座標系
1.0
0.0
Zバッファ
(非線形)
各XY平面
(-1.0, -1.0)~(1.0, 1.0)
• OpenGLに最終的に与える
頂点のデータ
OpenGL APIによる
射影
深度 (たぶん線形)
各XY平面
Z

16. ハック2: ポーズ検出→ビーム発射
 実は「動き検出」ではなく「ポーズ検出」のみ
◦ 時間変化を追わないのですごく簡単
◦ 関節の位置を取ったら、あとは長さ・内積・外積といった基本的な
ベクトル演算によって判定
◦ 試行錯誤でいい感じになるよう条件とパラメタ(閾値など)を調整
 特定のポーズを検出したらビームを発生
◦ ビームはアルファテクスチャを張った四角形であり、それを3D仮想
空間上に置いてRGBカメラからの実像に重ねる
◦ 位置/方向/初速をポーズから計算
 アイスラッガーも同様
◦ ポーズを一定時間保つ、といったチェックが追加で入っている

17. ハック3: 陰面処理
 RGBカメラの各画素を3D仮想空間上の点オブジェクトとして配置
◦ テクスチャを貼るとこうはならない
◦ ビームなど他の仮想オブジェクトとの間の前後関係を再現
 高速化のため各画素を投影座標系のまま扱う
◦ 仮想オブジェクトは基本的に実世界座標系で扱うが、全画素を実世界座標系
に変換すると遅すぎる
◦ 代わりにKinect座標系の深度値をOpenGL座標系のZバッファ値に直接変換
(変換式を探すには少々試行錯誤を要した)
◦ 次ページ参照

18. Kinect座標系
各XY平面
(0, 0)~(640, 480)
0
実世界座標系
OpenNI APIによる変換
(ちょっと遅い)
10000~
• Kinectから取れる画素
の色や深度の生データ
OpenGL座標系
1.0
0.0
Zバッファ
(非線形)
各XY平面
(-1.0, -1.0)~(1.0, 1.0)
OpenGL APIによる
射影
深度 (たぶん線形)
各XY平面
Z
豆知識: 高速な深度変換
Kinectの深度値をOpenGLのZバッ
ファ値に直接変換すると断然早い。
ただし変換式を見つけるには少々
試行錯誤を要した。
すべてのものを一旦実世界
座標系に変換してから扱う
と処理は簡単だが、遅い
• OpenNIから取れる関節の位置
• 3D仮想空間のオブジェクト(ポリゴン)の位置
• OpenGLに最終的に与える
頂点のデータ

19. ハック4: 当たり判定
 ビーム(仮想空間上の四角形)と実世界の物体(各画素に対応する
仮想空間上の点)との衝突を判定し、ビームをスパークに変換
◦ 全画素とビームとの近接判定をするのは非現実的
◦ 実座標系を粗いvoxelに分割し、点があるvoxelにマークを付ける
 距離の判定ではなくvoxelのルックアップで判定可能
 voxelのマーキングはダウンサンプルした画素情報で行う
 マーキングは実世界座標系で行う必要があり遅いので
◦ 精度は粗い、でも楽しい！

20.  IRレーザーで測距するので暗い部屋でも動く
◦ http://www.youtube.com/watch?v=nvvQJxgykcU
◦ ランダムなパターンを照射し、それをセンサーで受けて視差
を分析して測距するらしい
豆知識: 暗闇でのKinectの動き
(上記URLよりキャプチャ)

21.  青白い丸を描いても全然光球に見えない…どうしよう？
 自分や周囲を光球中心からの距離に応じて明るく照らすことに
より表現
 人間の錯覚のおかげでちゃんとまぶしく/熱く感じる！
 全画素に対する距離計算が必要なので近似計算で高速化
 Z軸に少々変換を加えた投影座標系のまま計算し、近似距離とする
 近似距離をどう輝度に作用させるかを試行錯誤で決定
 現実の光の当たり方とは異なるが十分よさげだし、少なくとも十分楽しい
ハック5: 光球の表現

22. ハック6: エネルギー波の表現 (1)
 長～く引き伸ばされたポリゴンの半球で表現
 法線ベクトルと視線ベクトルの内積を透過度に効かせる
◦ 芯が不透明で縁に行くほど透明になる (星雲的表現)
◦ GLSL(シェーディング言語)で実現
 初めての言語だが、本にあったサンプルコードを30分ほどいじってものになった
 法線ベクトルを乱数で揺らす
◦ もやもやあるいは渦巻きに見える
◦ 偶然の発見から出発しての試行錯誤

23. ハック6: エネルギー波の表現 (2)
n
v
サンプルコードにあった
普通の反射の表現
rgb = rgb·(n·v / |v|)k
(視線ベクトル)
(法線ベクトル)
星雲的表現
a = (n·v / |v|)k
After a quick tweak…
乱数で法線ベクトルを揺らすこ
とにより、透過度が場所と時間
によりゆらゆらと変化する。こ
れがもやもやあるいは渦巻きの
ように見える効果を生む。
透過度として働く
輝度として働く

24. ハック7: 髪の毛(！)の表現
 単純な計算式に落とすのがポイント
◦ O = 頭の中心、P = O周辺かつ上方にあるプレイヤー境界の各画素とし、
PからOPの方向に向かって長さ n|OP| の細い三角形を描画する
ここで n = OPの水平に対する角度rに関する単純な「のこぎり波」関数
 エネルギー球に対する若干の斥力を加える
 三角形には乱数とグラデーションで黄色を混ぜる
◦ 金色に輝いているかのように見せる効果
 すべて投影面上で二次元で計算/描画
◦ 非現実的だが、簡単に計算できて漫画的に見えるという効果を生む
O
P
n|OP|
n = r に関する単純なのこぎり波関数
プレイヤーの
境界
0
r
π/2
n
r

25. 第2章: ビジネスサイド
 動画公開に対して得られたまったく予想外の大きな
反響についてご紹介
 Geekが一発当てるためのヒント…になるかも？

26. そもとも筆者は何を狙っていたのか？
 「成功しよう」なんて少しも思っていないが、下記のような明
確な意図があったことは確か → ここに成功要因がある？
◦ 世界の他のKinectハッカーたちと肩を並べたい
◦ 他にないものであること – 役に立たず、意味がなく、世界初
◦ スピード命
 ゲームメーカーの本気の作品が公開される前に
 他の誰かが先にKinectでビームを撃ってしまう前に
◦ 芸としての完成度
 最初は人の姿のままビームが出るだけ(約2日)だったが、芸の完成度に満
足するまで次々と機能を足していった
 アイディアが思いつくたびに「やっぱこれなしには公開できないだろ
う！」という思考がドライブ力となった
 変身、陰面処理、当たり判定、アイスラッガー、時間制限、飛び去り、…
◦ 相手は世界
 日本語版と英語版を作成し、ニコ動とYouTubeに動画を公開
 片方だけではもう片方のコミュニティを排斥することになってしまう

27. 実際にいただいた感想の例
 子供が喜ぶ
◦ 子供がPCを占領してしまった
◦ 子供とよく○○ごっこをするのだが、子供は頭の中で○○になって
いる自分を想像して、なりきっている。それが本当に○○になれる
のだから、彼らにとっては素晴らしいことだ
 昔からの夢がかなう
◦ このアプリを大人の言葉で批評しようとしても、自分の中の子供の
声にかき消されてしまうのだ: 「すげー、変身してるよ！俺もやり
てぇ！」
 私: 「世にもばかばかしいものを作ってやれ！」なんて発想で
作っていてゴメンナサイ。ただ、自分がおもしろいと思って
作ったものに人々が未来の技術の可能性を見出して喜んでくれ
るのは技術者冥利に尽きる。

28. 0
100,000
200,000
300,000
400,000
500,000
600,000
Total Views
0
20000
40000
60000
80000
100000
120000
140000
Views/day in first two weeks
Nico (ja)
YT (ja)
YT (en)
kinect-ultraの動画再生数
 24時間以内に爆発的に増加し最初の一週間で30万
◦ 次ページでもう少し議論
 日本は世界に比べて熱しやすく冷めやすい印象
 何もなければ忘れ去られ、何かの契機ではたと思い出される
ニコニコ動画ア
ワードノミネート
爆発的
アクセス

29. 再生数爆発のメカニズム(仮説)
 いかにしてアクセス数がこんなに速く・大きく膨らんだ
のか想像してみる
 仮説: 動画、Tweet、ニュースサイトの連鎖反応が多段ロ
ケットのように発生(*)
 これを意図的に起こすことは可能だろうか？
 よくわからないが、非常に難しい気がする
第一段階
(~10h)
ニコ動を中心にマニアックなものが好きな人たちの目にとまり、
彼らがTweetする。再生数とTweet数がゆるやかに上昇する。
第二段階
(~20h)
Tweet数が「ある閾値」を超え、ニュースサイトが気づき記事
に書く (まず独立系blogから始まりその後Yahoo! Newsなどの
メジャー系サイトに広がる)。再生数とTweet数が相乗効果で一
気に上昇する。
Stage 3 再生数がまた別の「ある閾値」を超え、「人気動画」にランク
インし目立つようになる。相乗効果がさらに強まる。
Cool down
(48h~)
Tweetが冷め、相乗効果が止まる。
(*) 私の知人が公衆の動きを観察してこの仮説を立ててくれた。Great job of him. 観察
対象は主に日本。

30. kinect-kamehamehaの動画再生数
 爆発は起こらず
◦ 当初ニコ動で多数の再生数をゲットしたが(ニコ動内ではkinect-ultraより多
い)、爆発を誘引するには至らず
◦ 聴衆に｢思わずTweet」させるだけの強烈なインパクトがなく閾値を超えな
かったと思われる
 日本より世界からの継続的な再生
◦ 世界のドラゴンボールファン？アクセスは主にブラジルから
◦ ときどきジャンプアップがある – 理由は不明
0
20,000
40,000
60,000
80,000
100,000
120,000
140,000
160,000
180,000
200,000
Total Views
0
2000
4000
6000
8000
10000
12000
14000
16000
18000
20000
Views/day in first two weeks
Nico (ja)
YT (ja)
YT (en)

31. その他起こったこと (1)
 各種メディアへの登場
◦ Blog, ニュース、技術レビューサイト
◦ 新聞、雑誌 (e.g. Japan Times、R25)
◦ TV (e.g. NHK BS1/2、TV朝日)
◦ ネットキャスト (日本、フランス)
◦ 下記に詳細あり:
http://code.google.com/p/kinect-ultra/wiki/Articles
http://code.google.com/p/kinect-kamehameha/wiki/Articles
 公でのデモおよびプレゼン
◦ 3D Vision & Kinect Hacking Meetup
◦ JTPAギークサロン
◦ Maker Faire (Thanks to Matt Bell for involving me)
◦ Campus Party (招待されたが参加ならず)

32. その他起こったこと (2)
 コンテストでの受賞およびノミネート
◦ Matt Cutt’s Kinect Contest 受賞
◦ Maker Faire 2011 Bay Area Editor’s Choice 受賞
◦ ニコニコ動画アワード2011年春ノミネート
 その他のコンタクト
◦ 他のKinectハッカーたち！
◦ 投資家
◦ アーティスト (映像作家？動画を作品内で使いたいと)
◦ 3Dモデラー (アイスラッガーのモデルを提供してくれた)

33. むすび
 Let’s Hack!
◦ 創造的・想像的に、自分の内なる声に耳を傾け、自分が本当
におもしろいと思えるものを具現化しよう
◦ その技術分野の専門家である必要はなく、むしろ自分が何を
知り・何を知らないかを前提として、目的に最も効果的に近
づける自分なりの解を考え出そう
◦ あなたが注いだエネルギーは、予想をはるかに超える結果に
より報われる…かもしれない
◦ クールなハックを引っさげて世界に出よう