7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

TouchDesigner Advent Calendar 2020

Day 1

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

Last updated at Posted at 2020-11-30

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

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

#今回作るものはこちら
ezgif.com-gif-maker.gif

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

#環境
touchdesigner 2020.22080
windows10 Pro
leap motion

leap motion ってなにとなったあなたは、
image.png
(引用:https://www.yama.info.waseda.ac.jp/ja/research/leap-browsing-api)

手のジェスチャー操作を可能にするデバイスなのですが、
持ってない方はぜひ借りるなり買うなりなんなりしてください。今すぐ。

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

#1.指を作る
leapmotionを接続してください。もしかしたらドライバーとかダウンロードする可能性があるかも。
あれだけ言ってましたので、プロジェクト開いたらまず
leap motion CHOPを出しましょう。
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

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

まずleapmotionCHOPのパラメーターを写真のように変更お願いシャス。
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

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

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

と入力してください。もしかしたら、macやversionによっては名前が異なる可能性があるので、その際は
channel names横の黒の▶ボタンから同じような名前を見つけて適宜修正してください。
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

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

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

ってな感じです。ご参考に
hand_joint_LI.jpg
(引用:https://ameblo.jp/yamatokawashima/entry-12436212230.html)
字が汚い(笑)

ほんならshuffleCHOPをつないで、MethodをSequence Every Nth Channelに、N Valueを3にしてください。
これでそれぞれの座標を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

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

次は、モデルを作るためにline SOPを出しましょう。ここでNumber of Pointsを4にします。これで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

次にcopySOPつないでNumber of Copiesを5にします。指は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

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

ついでに、compute NormalsもOnに!
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

そのあと、groupSOPとdeleteSOPをつないでそれぞれ次のように変更してください。
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

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

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

groupSOP上でdisplay optionsでpoint numberを選んでやれば消したいポイントが黄色で表示されることでしょう。
あとはnullつないでgeometryCOMPとconstantMATアタッチさせましょう。
これでleampmotionに手をかざすと5本指が出てくるでしょう。
#2.手のひらを作る
さきほどのleapmotionCHOPの値を小さくしたmathCHOPからselectCHOPを3つつなげます。
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

そして上からChannelNames

finger0CHOP
hand0/finger0/next_proximal:t[xyz]
finger1_4CHOP
hand0/finger[1-4]/next_metacarpal:t[xyz]
wristCHOP
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にします。

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

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

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

D&D!!??

ドラック&ドロップです(笑)
ezgif.com-gif-maker.gif

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

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

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

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

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

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

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

まずSOPtoCHOPを出してSOPの欄に指のnullSOPD&Dします(笑)
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

したら、geometryCOMPのinstancingをOnにして、Default instance OP に先ほどのSOPtoCHOPをD&Dします
そして、TranslateXをtx, TranslateYをty, TranslateZをtzにしてください。
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

インスタンシング完了!!

#4.レンダリングじゃーーー!
CameraCOMPとLightCOMP置きましょう。
パラメーターはこちら
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

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

仕上げにrenderTOPをおいてrampTOPとoverTOPで重ねれば完成
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

こんな感じで自分の手をバーチャル空間に出現させることができました。
ちょっと長くなってしまいましたがいかがでしたか?
#youtubeでも
文面だとどうしてもわかりずらいなどで、もし映像で見たいのならこちら
Inkedyoutube_sumale00_LI.jpg

#発展させると

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

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

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

皆さんにこんなみじめな思いはしてほしくない!!
お気をつけて

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

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

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

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

7
5
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?