今回は depth センサーつきのカメラである Azure Kinect を使います!カメラの映像の体の部位に合わせて物体を表示させる、というのをやってみたいと思います!
サンプルファイル
chimanaco/takara-univ-media-programming-2023
10が本日のディレクトリです。
Kinect は Microsoft 社が販売したデバイスで、物体のジェスチャーや音声認識を元に操作を行うというものです。最初は Xbox 360の周辺機器として登場したのですが、後に Windows PC に接続して使える一般用も発売されました。
それまではとても高価で大がかりだったモーションキャプチャや物体認識などを、卓上サイズかつ安価に実現したことにより、ゲーム用途だけでなく、この講義に沿った内容で言うと、人の輪郭や位置を取得して数多のインタラクティブインスタレーションで利用されてきました。
使用例
Kinect に限らず近しい機能を使った作品は探してみるととてもたくさん見つかると思います。
仕組み
以下の機能を組み合わせて物体認識などを行っています。
| Type | Function |
|---|---|
| RGB カメラ | 通常のカメラと同じ RGB で色が表現されるカメラ |
| Depth センサー | カメラから物体までの距離(深度)を赤外線を使用して測定する |
| マイク | 音声入力&認識 |
Kinect の種類
Kinect と呼ばれるものは2023年6月20日現在、3種類あります。 本講義で使用するのはその中でもMicrosoft のサイトから購入が可能な Azure Kinect DK
というもので Azure Kinect と呼ばれます。Depth センサーは投光した赤外線が反射して戻ってくる時間から Depth 情報を得る Time of Flight(TOF) 方式を採用しています。

その他の Depth センサーつきのカメラ
Depth センサーつきのカメラは、ロボット工学やAR、VRをはじめとする多種多様な分野で活用されています。以下の記事で比較されているように沢山の種類のものがあります。
3Dカメラ 8種類を 様々な環境で比較しました 【その① 屋外編】 | 研究開発者向け情報発信メディア TEGAKARI
3Dカメラ 8種類を 様々な環境で比較しました 【その② 屋内編】 | 研究開発者向け情報発信メディア TEGAKARI
最近の iPhone や iPad にも LiDAR が搭載されていて、写真撮影や AR、3Dスキャンなどにも活用されていますね。
使ってみる /project1/AzureKinect2D
まず付属の電源ケーブルを使用して Azure Kinect に電源を入れ、さらに PC 用の USB ケーブルを使用して Azure Kinect と PC を接続します。
TouchDesigner でAzure Kinect を使ってイメージを表示するには、Kinect Azure TOP
を使用します。Azure Kinect に給電ができていて PC との接続に問題がなければ Kinect Azure タブの Sensor からハードウェアIDを選択できるようになります。これが表示されない場合、何らかの問題がある可能性があります。

同じく Kinect Azure タブの Image で表示したいタイプを選びます。TouchDesigner でよく使いそうな3つをご紹介します。
Colorカラー映像を取得できます。本日はこちらを使用します。

Depth深度情報(カメラからの距離)を取得できます。
PointCloud点群データ(「位置情報(X,Y,Z)と色情報(R,G,B)を持った点の集合データを取得できます。

カメラからの映像が取得出来たら、Kinect Azure CHOP を配置します。Kinect Azure CHOP を使用して様々な値を取得することができます。
Kinect Aruze TOP のパラメーターにはさきほど配置した Kinect Azure TOP を指定します。これにより Azure Kinect が人を認知した場合、その関節の位置等を推定して表示をすることができます。取得できる箇所は以下の通りです( Azure Kinect ボディ トラッキングの関節 | Microsoft Learn
参照)。

これらが TouchDesigner 上だと p1/neck:tx などどいった値になります。例えばこちらは人として Azure Kinect が認識した1人目の首の 3D 上の x の位置です。Max Players パラメーターで最大の6人まで認識できる人数を指定することができます(距離や角度等の条件によって認識できない場合も)。
関節の位置に 2D のイメージを表示させる
デフォルトだと 3D 上のデータのみ取得できる設定になっているので、Color Image Positions にチェックを入れます。これによって p1/neck:u p1/neck:v などといったカラー映像の位置にマッチした値を取得することができます。

左手の位置に Circle TOP を表示するようにしてみましょう。Kinect Azure CHOP はそのままだと大量のチャンネルがあるので、使用する左手の情報のみに絞ります。Select CHOP をつないで、p1/hand_l:u と p1/hand_l:v を選択します。それぞれ x と y の位置になります。

これを Circle TOP に使用したいのですが、そのまま使用すると p1/hand_l:u と p1/hand_l:v は 0-1 の範囲で動いているので Circle TOP の移動範囲に収まるように Math CHOP の Range を使って値を変換します。

Math CHOP のあとに Null CHOP をつないだあと、Circle TOP を配置します。
Common タブから Resolution を 1280x720 にします(Color の Azure Kinect と同じにします)。これは合成するときに Resolution を合わせるためです。
さらに Center の x と y にそれぞれさきほど配置した Null CHOP から p1/hand_l:u と p1/hand_l:v をドラッグ&ドロップして参照させます。

Circle TOP の色やサイズなどを調節して、Kinect カメラからのカラー映像と合成すると左手の位置に Circle が表示されているはずです。ここでは Composition TOP を使用して Operation を Over にしています。Circle が上に来るようにしています。

ここで Circle の形が歪んでしまった人は Circle TOP で Resolution の設定ができていない可能性があります!
反対の手にも表示させる
右手にも Circle TOP を表示させてみましょう!左手とは違う色にしてください。
目の位置に画像を表示させる /project1/AzureKinect2D_Eyes
- Kinect Azure CHOP に Select CHOP をつないで、右目と左目の位置情報である
p1/eye_l:up1/eye_l:vp1/eye_r:up1/eye_r:vを選択。

- Math CHOP で 0-1 を -0.5-0.5 に変換。

Null CHOP を Math CHOP につなぐ。
MovieFileIn TOPで画像を読み込む‘Fit TOP’ をつないで Resolution に 1280x720 を入力して、カメラ側の解像度と合わせる。

Transform TOPを2個つないでそれぞれ右目と左目の位置を指定する。

- 二つの画像を
Composition TOPで重ねて、さらにカメラからの映像と重ねます。

- 画像のサイズや目の位置が微妙にずれる場合は
Transform TOPを使って調整しましょう。
関節の位置に 3D のオブジェクトを表示させる /project1/AzureKinect3D
Sphere を左手の位置に表示させる
Kinect Azure CHOP を選択して、Absolute Bone Rotations を ON にします。これで 3D 空間上の関節の位置の回転が取得できます。ちなみに Kinect からの情報をもとに 3D のキャラクターを動かす場合などには Relative Bone Rotations の方を使います。

Select CHOP で p1/hand_l:tx p1/hand_l:ty p1/hand_l:tz p1/hand_l_abs:rx p1/hand_l_abs:ry p1/hand_l_abs:rz を指定します。
これらの値をレンダリングする Geometry の Translate と Rotate に代入します。

Geometry をレンダリングするのに必要な Render TOP, Light COMP CAMERA COMP を追加します。Camera COMP の Translate を 0, 0, 0 に、FOV Angle を 90 にします。これは Azure Kinect DK のハードウェアの仕様 | Microsoft Learn
で Horizontal Angle として公表されている値です。

このままだと回転が反対になるので Y 軸方向に180度回転させます。Geometry などの COMP はボックスの上からワイヤーを伸ばすことができ、他の COMP の下につなぐことによって親子関係を作ることができます。これによって親の
Null COMP を追加して180度回転させ、レンダリングされている Geometry COMP の上の output からワイヤーをのばし Null COMPの下の Input につなぎます。

レンダリング結果をカラー映像と合成するとこのようになります!手を前後に動かしてもついてくるはずです。

左手の位置にパーティクルが集まってくるようにする
第6回 Particle SOP基礎 で勉強した内容をここで追加します。
Metaball SOP の Center に p1/hand_l:tx p1/hand_l:ty p1/hand_l:tz を追加することでパーティクルが手の位置に集まってくるようにすることができます。

Particle SOP や Force SOP を調整して動きをつけてみたりしてください。

参考:TouchDesigner で Kinect などの Depth センサー無しに似た表現を実現する方法
Zoom などの Video Conferences ツールで AI を使って背景を除去する機能がありますが、RTX 系のグラフィックカードを積んでいる PC の場合は Nvidia Background TOP が使えます。
Python を使って以下のようなこともできます。
学習したモデルに Semantic Segmentation させて、Webカメラ画像にリアルタイムで、 TouchDesinger のエフェクトかける - Qiita
本日の課題:左手以外の場所にオブジェクトが集まってくるようにする
授業では左手に集まってくるようにしましたが、他の箇所を使って、オブジェクトや色、サイズなども変更して試してみてください。
最終課題は Azure Kinect と授業で勉強したものを使ってインタラクティブなものを作る、になる予定ですのでどんなものに応用できそうか考えておいてください!
以下参考
- 3D モデルを動かす
- 手の位置で映像の大きさや色を変える
- 人が近づいてきたら照明が ON になる
- 手の位置で照明を動かす
参考
- Kinect - Wikipedia
- decode19 CM04 Azure Kinect DK 徹底解説 ~ 進化したテクノロジーとその実装 ~
- Azure Kinect DK のハードウェアの仕様 | Microsoft Docs
- 3Dカメラ 8種類を 様々な環境で比較しました 【その① 屋外編】 | 研究開発者向け情報発信メディア TEGAKARI
- 【技術解説】DeepLabのセマンティックセグメンテーションとTouchDesignerを用いた映像制作|デザイニウム|note
- 学習したモデルに Semantic Segmentation させて、Webカメラ画像にリアルタイムで、 TouchDesinger のエフェクトかける - Qiita
- TouchDesignerでAzure KinectのBody TrackingデータをRecordして再生 - Qiita
- TouchDesignerでAzure Kinectを使ってBlenderで作成した自作モデルを動かす - Qiita
- lecture.nakayasu.com - TouchDesigner + Azure Kinect DK