[Touchdesigner]新卒でもハンドトラッキングできるんじゃ! leapmotionとともに

#ハンドトラッキングとは
実空間内の<b>手</b>の形を検出することを言って、
ARやVR界隈ではかなりおなじみの技術ですね。

って言われてもって方は実際に見せたほうがわりやすいですね。
そんなわけでーーーー

#今回作るものはこちら
![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/fd74b3b2-e575-1974-1df5-c9dfbe219b42.gif)

結構きれいにトラッキングできてるんすよね

#環境
touchdesigner 2020.22080
windows10 Pro
<b>leap motion</b>

leap motion ってなにとなったあなたは、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/029852a2-2a94-84a0-dc4e-94d77b6a65d4.png)
(引用:https://www.yama.info.waseda.ac.jp/ja/research/leap-browsing-api)

<b>手のジェスチャー操作</b>を可能にするデバイスなのですが、
持ってない方はぜひ借りるなり[買う](https://www.amazon.co.jp/%E3%80%90%E5%9B%BD%E5%86%85%E6%AD%A3%E8%A6%8F%E4%BB%A3%E7%90%86%E5%BA%97%E5%93%81%E3%80%91-Leap-Motion-%E5%B0%8F%E5%9E%8B%E3%83%A2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%A9%E3%83%BC-3D%E3%83%A2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3/dp/B00GWCATS8)なりなんなりしてください。<b>今すぐ。</b>

絶対に後悔はさせません
(決してultraleap社からの案件ではございません)

#1.指を作る
<b>leapmotionを接続</b>してください。もしかしたらドライバーとかダウンロードする可能性があるかも。
あれだけ言ってましたので、プロジェクト開いたらまず
<b>leap motion CHOP</b>を出しましょう。
![TouchDesigner 2020.22080_ C__Users_22034_Desktop_touchdesigner_project_tdsw_L-system_SEIMEI_qiita_ver_handtracking.6.toe_ 2020_11_24 14_17_30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/4a2fb4b0-cb1e-0ddc-bc8c-4182b1c28723.png)

手をleapmotionにかざすと、手に関する様々な情報が<b>数値</b>として返ってきます(なにも反応しない場合はleapmotionがうまく接続されてないかドライバーが入ってない)。
この値を制御していきやす。

まずleapmotionCHOPのパラメーターを写真のように<b>変更</b>お願いシャス。
![InkedTouchDesigner 2020.22080_ C__Users_22034_Desktop_touchdesigner_project_tdsw_L-system_SEIMEI_qiita_ver_handtracking.6.toe_ 2020_11_24 14_13_02_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/0889620f-903a-7851-0d33-243da0c311f7.jpeg)

そしたらmath CHOPつなげてMult-Add → Multiply → 0.01に変更(座標としては値が大きいので小さくします)。
次にselect CHOPつなげます。ここで指のデータを選ぶためにChannel Namesを

```
hand0/finger[0-5]/next_*:t[xyz]
```

と入力してください。もしかしたら、macやversionによっては名前が異なる可能性があるので、その際は
channel names横の<b>黒の▶ボタン</b>から同じような名前を見つけて適宜修正してください。
![TouchDesigner 2020.22080_ C__Users_22034_Desktop_touchdesigner_project_tdsw_L-system_SEIMEI_qiita_ver_handtracking.7.toe_ 2020_11_24 16_07_51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/de074558-e979-d516-e8a9-d2f20b922bf1.png)

実際に見てもらうと、指の関節の名前とかいろいろ書いてありますが、今回に関すると

<b>hand0(片方の手の)
finger[0-5]（親指から順に小指まで)
next_*(後の第3関節から順に指先まで全部)
t[xyz]（それぞれのxyz座標)</b>

ってな感じです。ご参考に
![hand_joint_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/6fa928f5-b394-14b1-68ab-4b8555c2d336.jpeg)
(引用:https://ameblo.jp/yamatokawashima/entry-12436212230.html)
字が汚い（笑）

ほんなら<b>shuffleCHOP</b>をつないで、<b>MethodをSequence Every Nth Channel</b>に、<b>N Valueを3</b>にしてください。
これでそれぞれの座標をx,y,zでまとめてます。
![TouchDesigner 2020.22080_ C__Users_22034_Desktop_touchdesigner_project_tdsw_L-system_SEIMEI_qiita_ver_handtracking.6.toe_ 2020_11_24 14_49_35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/a603566d-eed8-4aed-3102-e513c8f91de7.png)

いちおう<b>rename CHOPでToをt[xyz]にしてnull CHOP</b>をつなげます。

次は、モデルを作るために<b>line SOP</b>を出しましょう。ここで<b>Number of Pointsを4</b>にします。これで3つの関節を作ります。

![TouchDesigner 2020.22080_ C__Users_22034_Desktop_touchdesigner_project_tdsw_L-system_SEIMEI_qiita_ver_handtracking.6.toe_ 2020_11_24 14_51_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/15276c49-4fa2-0163-55f8-0a21313925a4.png)

次に<b>copySOP</b>つないで<b>Number of Copiesを5</b>にします。指は5本ですからね。
![TouchDesigner 2020.22080_ C__Users_22034_Desktop_touchdesigner_project_tdsw_L-system_SEIMEI_qiita_ver_handtracking.6.toe_ 2020_11_24 14_51_34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/2ace6acc-8ebc-83e4-024c-3b2cbcb31a61.png)

そして<b>chop to SOP</b>つないで先ほどつくった<b>nullちゃんをCHOPにぶち込んでください</b>(ドラック＆ドロップ)

ついでに、<b>compute NormalsもOnに!</b>
![TouchDesigner 2020.22080_ C__Users_22034_Desktop_touchdesigner_project_tdsw_L-system_SEIMEI_qiita_ver_handtracking.6.toe_ 2020_11_24 14_51_47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/12342951-1caa-85d5-18ff-9ecbc81359ee.png)

そのあと、<b>groupSOPとdeleteSOPをつないでそれぞれ次のように変更</b>してください。
![TouchDesigner 2020.22080_ C__Users_22034_Desktop_touchdesigner_project_tdsw_L-system_SEIMEI_qiita_ver_handtracking.6.toe_ 2020_11_24 14_52_41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/79d84a62-f056-aba4-e26a-017c87686e5d.png)

![TouchDesigner 2020.22080_ C__Users_22034_Desktop_touchdesigner_project_tdsw_L-system_SEIMEI_qiita_ver_handtracking.6.toe_ 2020_11_24 14_52_52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/332455a5-e3b2-2079-68b0-b91ed21da3d0.png)

<b>なぜこんなことしてるん？</b>
親指は関節が2つしかないので、無駄に検知したポイントを消してるんですね。

groupSOP上でdisplay optionsでpoint numberを選んでやれば消したいポイントが黄色で表示されることでしょう。
あとは<b>nullつないでgeometryCOMPとconstantMAT</b>アタッチさせましょう。
これで<b>leampmotionに手をかざす</b>と5本指が出てくるでしょう。
#2.手のひらを作る
さきほどのleapmotionCHOPの値を小さくした<b>mathCHOPからselectCHOPを3つ</b>つなげます。
![TouchDesigner 2020.22080_ C__Users_22034_Desktop_touchdesigner_project_tdsw_L-system_SEIMEI_qiita_ver_handtracking.6.toe_ 2020_11_24 14_54_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/81fbee38-749c-e89b-af23-51fec1f7e731.png)

そして上から<b>ChannelNames</b>を

```:finger0CHOP
hand0/finger0/next_proximal:t[xyz]
```

```:finger1_4CHOP
hand0/finger[1-4]/next_metacarpal:t[xyz]
```

```:wristCHOP
hand0/wrist:t[xyz]
```
※wristは手首のことっすね(リストカットとかいうやん？)

この3つを<b>mergeCHOP</b>で<b>順</b>につないで
その後先ほどの指の時と同じ手順で、
<b>
shuffleCHOP(Method:sequence Every Nth Channel、N Value:3 )
→
renameCHOP(To:t[xyz])
→
nullCHOP
</b>

手のひらモデルを作るために、circleSOPを使います。
<b>circleSOPを置いて、Divisionsを6</b>にします。

![TouchDesigner 2020.22080_ C__Users_22034_Desktop_touchdesigner_project_tdsw_L-system_SEIMEI_qiita_ver_handtracking.7.toe_ 2020_11_24 18_36_51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/501587ac-25e3-8351-e215-e92505541125.png)

あとで指の根本と手首のポイントでつなげるため、5指+1手首=6ってな感じです。

そのあと、<b>choptoSOPつないで　CHOPの欄に先ほど作った手のひら用CHOP</b>を<b>D&D</b>します。


<b>D&D!!??</b>


<b>ドラック&ドロップ</b>です（笑）
![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/dd76411d-528b-090b-8206-87da54374739.gif)


そのあとも指同様、<b>nullSOPからのgeometryCOMP、MATはphong</b>にしましょう。色はご自由に。

#3.関節球を作る
まあこれはぶっちゃけなくてもいいんですけど、作ったほうが見た目いいかなって感じです。
<b>leapmotionCHOPからselectCHOP</b>をつなげて<b>CHOP名をtracking</b>に変更します。
そしておなじみの<b>Channel Names</b>は

```:tracking(selectCHOP)
hand0:tracking
```

にしときましょう。
![TouchDesigner 2020.22080_ C__Users_22034_Desktop_touchdesigner_project_tdsw_L-system_SEIMEI_qiita_ver_handtracking.7.toe_ 2020_11_24 15_56_44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/de346e25-1752-b7a0-86a9-1105e5a6f481.png)

そしたら、<b>sphereSOPを置き、primitive Typeをpolygon</b>に変更
次に<b>transformSOPをつなぎ、Uniform Scale</b>を

```
op('tracking')['hand0:tracking'] * 0.05
```

と打ちましょう!
したら、<b>nullSOPつないでgeometryCOMPつないで、MATは手のひらのphong</b>をアタッチ

ここでは<b>インスタンシング</b>を使って、配置していきます。

まず<b>SOPtoCHOPを出してSOPの欄に指のnullSOP</b>を<b>D&D</b>します（笑）
![TouchDesigner 2020.22080_ C__Users_22034_Desktop_touchdesigner_project_tdsw_L-system_SEIMEI_qiita_ver_handtracking.7.toe_ 2020_11_24 15_57_30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/78723002-56b4-1e3f-7462-adb163178584.png)

したら、<b>geometryCOMPのinstancingをOn</b>にして、Default instance OP に先ほどの<b>SOPtoCHOPをD&D</b>します
そして、<b>TranslateXをtx, TranslateYをty, TranslateZをtz</b>にしてください。
![TouchDesigner 2020.22080_ C__Users_22034_Desktop_touchdesigner_project_tdsw_L-system_SEIMEI_qiita_ver_handtracking.7.toe_ 2020_11_24 15_58_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/3c787de6-558d-4fb8-7b9b-964d9968d239.png)

<b>インスタンシング完了！！</b>

#4.レンダリングじゃーーー!
<b>CameraCOMPとLightCOMP</b>置きましょう。
パラメーターはこちら
![TouchDesigner 2020.22080_ C__Users_22034_Desktop_touchdesigner_project_tdsw_L-system_SEIMEI_qiita_ver_handtracking.7.toe_ 2020_11_24 15_58_44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/e9b1b1e5-646d-cdab-699a-4f19c4f3fd9a.png)


![TouchDesigner 2020.22080_ C__Users_22034_Desktop_touchdesigner_project_tdsw_L-system_SEIMEI_qiita_ver_handtracking.7.toe_ 2020_11_24 15_58_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/0658cce5-5c3f-2547-ca6e-c8e25f8bb3b0.png)


仕上げに<b>renderTOPをおいてrampTOPとoverTOP</b>で重ねれば完成
![TouchDesigner 2020.22080_ C__Users_22034_Desktop_touchdesigner_project_tdsw_L-system_SEIMEI_qiita_ver_handtracking.7.toe_ 2020_11_24 18_44_48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/ab893f62-8718-37a4-640c-f987b80cf369.png)


こんな感じで<b>自分の手をバーチャル空間に出現させる</b>ことができました。
ちょっと長くなってしまいましたがいかがでしたか？
#youtubeでも
文面だとどうしてもわかりずらいなどで、もし<b>映像</b>で見たいのならこちら
[![Inkedyoutube_sumale00_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/0e541b97-86eb-d49b-c097-3da88f6364e5.jpeg)](https://www.youtube.com/watch?v=Pza56DCXcLA)


#発展させると
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">手を広げてるとだんだん茎が伸びて、花が咲き誇る<br>「人の動き」と「植物の命」<br>をかけわせたインタラクティブコンテンツれす<a href="https://twitter.com/hashtag/Touchdesigner?src=hash&amp;ref_src=twsrc%5Etfw">#Touchdesigner</a> <a href="https://twitter.com/hashtag/lsystem?src=hash&amp;ref_src=twsrc%5Etfw">#lsystem</a> <a href="https://twitter.com/hashtag/GPGPU?src=hash&amp;ref_src=twsrc%5Etfw">#GPGPU</a> <a href="https://t.co/jyeOOVbXl4">pic.twitter.com/jyeOOVbXl4</a></p>&mdash; 三和田智也 (@miwata34) <a href="https://twitter.com/miwata34/status/1329309665973338112?ref_src=twsrc%5Etfw">November 19, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ハンドトラッキングはほぼ同じですが、<b>手を握ってるかどうか</b>も検知しています。
めちゃくちゃ<b>簡単</b>だけどね（笑）

#注意点
leapmotionは精密機器で特に<b>液晶は割れやすくなっています</b>ので注意して下さい。

自分は学生時代に、ゼミの先生から借りたleapmotionの<b>液晶にひびを入れ、土下座して詫び</b>ました(詫びろ詫びろ詫びろ!)。

皆さんにこんな<b>みじめな思い</b>はしてほしくない！！
お気をつけて

#最後に
<b>新卒の僕でもハンドトラッキングができるんじゃ</b>みたいなこと言いましたが、要は先人たちの<b>最高の技術にお世話になってる</b>だけですね。そこは感謝して存分使いましょう。

アドベンドカレンダー初日行かせてもらいましたが、この後も僕よりも何<b>億</b>何<b>兆</b>何<b>京</b>何<b>垓</b>倍もすごい人たちが登場します。
もちろん自分の会社の<b>たき工房の偉大な仲間</b>たちも参加していますので、要チェックや!!


あともう一度いいますが、これは
leapmotionの宣伝案件ではございません。
ご安心を。

みんなtouchやろうぜ！！(イナズマイレブン風)