ハンドトラッキングとは
実空間内の手の形を検出することを言って、
ARやVR界隈ではかなりおなじみの技術ですね。
って言われてもって方は実際に見せたほうがわりやすいですね。
そんなわけでーーーー
今回作るものはこちら
結構きれいにトラッキングできてるんすよね
環境
touchdesigner 2020.22080
windows10 Pro
leap motion
leap motion ってなにとなったあなたは、
(引用:https://www.yama.info.waseda.ac.jp/ja/research/leap-browsing-api)
手のジェスチャー操作を可能にするデバイスなのですが、
持ってない方はぜひ借りるなり買うなりなんなりしてください。今すぐ。
絶対に後悔はさせません
(決してultraleap社からの案件ではございません)
1.指を作る
leapmotionを接続してください。もしかしたらドライバーとかダウンロードする可能性があるかも。
あれだけ言ってましたので、プロジェクト開いたらまず
leap motion CHOPを出しましょう。
手をleapmotionにかざすと、手に関する様々な情報が数値として返ってきます(なにも反応しない場合はleapmotionがうまく接続されてないかドライバーが入ってない)。
この値を制御していきやす。
まずleapmotionCHOPのパラメーターを写真のように変更お願いシャス。
そしたらmath CHOPつなげてMult-Add → Multiply → 0.01に変更(座標としては値が大きいので小さくします)。
次にselect CHOPつなげます。ここで指のデータを選ぶためにChannel Namesを
hand0/finger[0-5]/next_*:t[xyz]
と入力してください。もしかしたら、macやversionによっては名前が異なる可能性があるので、その際は
channel names横の黒の▶ボタンから同じような名前を見つけて適宜修正してください。
実際に見てもらうと、指の関節の名前とかいろいろ書いてありますが、今回に関すると
hand0(片方の手の)
finger[0-5]（親指から順に小指まで)
next_*(後の第3関節から順に指先まで全部)
t[xyz]（それぞれのxyz座標)
ってな感じです。ご参考に
(引用:https://ameblo.jp/yamatokawashima/entry-12436212230.html)
字が汚い（笑）
ほんならshuffleCHOPをつないで、MethodをSequence Every Nth Channelに、N Valueを3にしてください。
これでそれぞれの座標をx,y,zでまとめてます。
いちおうrename CHOPでToをt[xyz]にしてnull CHOPをつなげます。
次は、モデルを作るためにline SOPを出しましょう。ここでNumber of Pointsを4にします。これで3つの関節を作ります。
次にcopySOPつないでNumber of Copiesを5にします。指は5本ですからね。
そしてchop to SOPつないで先ほどつくったnullちゃんをCHOPにぶち込んでください(ドラック＆ドロップ)
ついでに、compute NormalsもOnに!
そのあと、groupSOPとdeleteSOPをつないでそれぞれ次のように変更してください。
なぜこんなことしてるん？
親指は関節が2つしかないので、無駄に検知したポイントを消してるんですね。
groupSOP上でdisplay optionsでpoint numberを選んでやれば消したいポイントが黄色で表示されることでしょう。
あとはnullつないでgeometryCOMPとconstantMATアタッチさせましょう。
これでleampmotionに手をかざすと5本指が出てくるでしょう。
2.手のひらを作る
さきほどのleapmotionCHOPの値を小さくしたmathCHOPからselectCHOPを3つつなげます。
そして上からChannelNamesを
hand0/finger0/next_proximal:t[xyz]
hand0/finger[1-4]/next_metacarpal:t[xyz]
hand0/wrist:t[xyz]
※wristは手首のことっすね(リストカットとかいうやん？)
この3つをmergeCHOPで順につないで
その後先ほどの指の時と同じ手順で、
shuffleCHOP(Method:sequence Every Nth Channel、N Value:3 )
→
renameCHOP(To:t[xyz])
→
nullCHOP
手のひらモデルを作るために、circleSOPを使います。
circleSOPを置いて、Divisionsを6にします。
あとで指の根本と手首のポイントでつなげるため、5指+1手首=6ってな感じです。
そのあと、choptoSOPつないで CHOPの欄に先ほど作った手のひら用CHOPをD&Dします。
D&D!!??
ドラック&ドロップです（笑）
そのあとも指同様、nullSOPからのgeometryCOMP、MATはphongにしましょう。色はご自由に。
3.関節球を作る
まあこれはぶっちゃけなくてもいいんですけど、作ったほうが見た目いいかなって感じです。
leapmotionCHOPからselectCHOPをつなげてCHOP名をtrackingに変更します。
そしておなじみのChannel Namesは
hand0:tracking
にしときましょう。
そしたら、sphereSOPを置き、primitive Typeをpolygonに変更
次にtransformSOPをつなぎ、Uniform Scaleを
op('tracking')['hand0:tracking'] * 0.05
と打ちましょう!
したら、nullSOPつないでgeometryCOMPつないで、MATは手のひらのphongをアタッチ
ここではインスタンシングを使って、配置していきます。
まずSOPtoCHOPを出してSOPの欄に指のnullSOPをD&Dします（笑）
したら、geometryCOMPのinstancingをOnにして、Default instance OP に先ほどのSOPtoCHOPをD&Dします
そして、TranslateXをtx, TranslateYをty, TranslateZをtzにしてください。
インスタンシング完了！！
4.レンダリングじゃーーー!
CameraCOMPとLightCOMP置きましょう。
パラメーターはこちら
仕上げにrenderTOPをおいてrampTOPとoverTOPで重ねれば完成
こんな感じで自分の手をバーチャル空間に出現させることができました。
ちょっと長くなってしまいましたがいかがでしたか？
youtubeでも
文面だとどうしてもわかりずらいなどで、もし映像で見たいのならこちら
発展させると
手を広げてるとだんだん茎が伸びて、花が咲き誇る
— 三和田智也 (@miwata34) November 19, 2020
「人の動き」と「植物の命」
をかけわせたインタラクティブコンテンツれす#Touchdesigner #lsystem #GPGPU pic.twitter.com/jyeOOVbXl4
ハンドトラッキングはほぼ同じですが、手を握ってるかどうかも検知しています。
めちゃくちゃ簡単だけどね（笑）
注意点
leapmotionは精密機器で特に液晶は割れやすくなっていますので注意して下さい。
自分は学生時代に、ゼミの先生から借りたleapmotionの液晶にひびを入れ、土下座して詫びました(詫びろ詫びろ詫びろ!)。
皆さんにこんなみじめな思いはしてほしくない！！
お気をつけて
最後に
新卒の僕でもハンドトラッキングができるんじゃみたいなこと言いましたが、要は先人たちの最高の技術にお世話になってるだけですね。そこは感謝して存分使いましょう。
アドベンドカレンダー初日行かせてもらいましたが、この後も僕よりも何億何兆何京何垓倍もすごい人たちが登場します。
もちろん自分の会社のたき工房の偉大な仲間たちも参加していますので、要チェックや!!
あともう一度いいますが、これは
leapmotionの宣伝案件ではございません。
ご安心を。
みんなtouchやろうぜ！！(イナズマイレブン風)