カラーフェルトボールとウェブカメラを使って安価なピアノモーションキャプチャーを作った話

ウェブカメラソフトウェアのURLが間違っておりました大変申し訳ございません(追記: 2020/3/08 12:18)


#0. 目次
 1. できること
 2. はじめに
 3. きっかけ
 4. 必要なもの(ハード)
 5. 必要なもの(ソフト)
 6. セットアップ

#1. できること
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/Qu6wBd69ayo/0.jpg)](http://www.youtube.com/watch?v=Qu6wBd69ayo)
(ピアノと、MIDI信号と連動して動くようにしてくれるスクリプトは借り物です ピアノモデル: https://booth.pm/ja/items/1287644 スクリプト: イトイさんより https://twitter.com/ItoiPiano (現在非公開))

###環境(詳しくは4. 必要なもの(ハード)で)
![P_20200227_233222.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593203/a4ea73e7-69f7-4015-8b80-ad3c7a1432bf.jpeg)
![P_20200227_234310.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593203/3f7b348c-ad97-cb4f-d36d-107206da1bda.jpeg)



#2. はじめに
 Luppetのように気軽に誰でも、を目指したつもりですが、かなり手間がかかる上に常に手の甲が上を向いている状況しか想定していません。Unityの知識も少し必要です。また、左右の手が交差するような弾き方については想定していません。(わたしがバーチャルでピアノを弾きたくて作ったのですが音ゲー界隈やほかの楽器にも応用できるかな？)
 さらに、当方Unity歴1か月C#歴も1か月、プログラミング初心者、そもそもソフトを作ること自体ほぼ初めて、ついでにブログ書くのもQiitaも初めてで、熱意だけでロケットのように開発してきたのでいろいろご容赦ください。
####※現在VRoidモデル専用となっております。ご了承ください。

#3. きっかけ

 しばらく前からピアノ系VTuber的な活動をしたいなと思っていたのですが、Luppetを使って指のトラッキングをしながらピアノを弾いてみたものの、LeapMotionを置く位置が目の前でとっても邪魔+精度的にどうしても限界がある。
https://twitter.com/FFH_jan/status/1143890313401946114
 業務用のモーションキャプチャとかならセンサー付ければモーション取れるのかもしれないけど高すぎて論外。
→彩度の高い物体を指につけて指認識+指の区別をすれば安価でモーションキャプチャーを作れるのでは？

#4. 必要なもの(ハード) 2020/2/29現在すべて合わせて8500円くらい

 Amazonでまとめて買えるようにAmazon発送の物だけで揃えました。

・指につけるマーカーの材料
https://www.amazon.co.jp/dp/B000SXOBG8
https://www.amazon.co.jp/dp/B07P5LZZX4

・カメラ(2個)
カメラについては後で詳しく書きます
とりあえず今はLogicoolC270もしくはC270nを使うことを前提に進めていきます(わたしがC270を買った直後に品切れしてしまってAmazonさんにC270nに誘導されるのですが、C270nはロゴを変えただけで中身同じらしいので大丈夫そう)
https://www.amazon.co.jp/gp/product/B003YUB660

・カメラを固定する台
https://www.amazon.co.jp/gp/product/B00AJHKIAQ

・カメラを固定する台を壁に固定するもの
壁に釘を刺せる人の最適解は多分これ(わたしはこれ)
https://www.amazon.co.jp/gp/product/B01ABJKODC
刺せない人は…突っ張り棒を天井まで伸ばして…って感じでしょうかね…

・洗濯ばさみ2個
こういう普通のものでよい
![cd802e1433d20aaf509fb7e1bb81e36e_s.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593203/7e5e76dd-f831-b1e0-d3c2-2411096fabf0.jpeg)

・40W昼光色電球2個
・コード付きソケット2個
(ソケットの口径に注意してください)
これが最適解かな？
https://www.amazon.co.jp/dp/B07CXK7Z4Z
・照明を壁に引っ掛ける金具
最適解？↓
https://www.amazon.co.jp/dp/B00288IPXG
(下の写真みたいに引っ掛けられるならなんでもおｋ)
![P_20200305_144204.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593203/25d89e12-d5e4-9ef9-afb2-bd44daf88909.jpeg)


・USB2.0かそれ以上の延長ケーブル2本
それぞれ違う系統につないでください(ハブなどにつなぐこと自体は問題ないです)
1本目はパソコン前から接続2本目は後ろからとかだと間違いないです(この辺よくわかってない)

・のりもしくはボンド
・はさみ

・デスクトップPC(当方のCPU Core i7 8700)
ノートでも薄型ノートとかでなければ大丈夫かな？

###カメラについて

LogicoolのC270はコスパの良い定番のウェブカメラなんですが、エンコーダーが貧弱なのか、手を早く動かすと映像がカクついてy座標の計算結果がガクガクになることがあります
なので、予算に余裕のある方はもう少し高いもの買うといいのかなと思いますが当方貧乏学生なので全く試せておりません。もしカクつかないカメラがあったら教えてください…


#5. 必要なもの(ソフト)

・Logicool ウェブカメラ ソフトウェア
http://www.logitech.com/pub/video/lws/lws280.exe
URLが間違っておりました大変申し訳ございません(追記: 2020/3/08 12:18)

・本ソフト https://cmmc.booth.pm/items/1884930

・Unity2018.4.18f1

#6. セットアップ

##マーカー編
まずマジックバンドを下記のようにカットします
長さ5㎝が1つ
6cmが3つ
7cmが1つ
(特別に指が太かったり細かったりしなければこれでいいはず)
次に、5個すべてを縦に半分に切ります。
(これで幅5㎜のマジックバンドが10個できたはず)
次に、手首に巻ける長さのマジックバンドを2本作ります(こちらは幅1㎝のまま)
次に、カラーフェルトボールを指定の6色選びます(2つずつ)

・指定の6色
赤
濃いオレンジ
薄いオレンジ
黄色
黄緑
青
![P_20200306_083748.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593203/8489a60b-417b-9b79-a46d-7fa310bda3e1.jpeg)


注意する色
####赤
![P_20200305_150308.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593203/2da681e2-dc63-6ff6-77df-2dc478f26d20.jpeg)
とても微妙な違いなのですが、真ん中の色を選んでください。(この3色のほかにピンクと薄ピンクもあるので注意)

####薄いオレンジ
みかんみたいな色です
とてもうすいオレンジも入っているので間違えないよう注意

####青
![P_20200305_150201.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593203/ff87a420-929e-20e8-fe6c-f9e33cd7215d.jpeg)
これも真ん中を選んでください

選択ができたら、下のような順番で端の方にカラーフェルトボールをのりなどで付けていきます。
・左右非対称なので注意
・7cmと5cmのマジックバンドに黄色と濃いオレンジが1つずつ、手首は赤、ほかは6cmのマジックバンド
![P_20200227_234310.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593203/ef76c895-316c-7cc3-719e-5a567e161926.jpeg)![P_20200305_154316.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593203/fc4468da-1018-d810-f820-14658a97e893.jpeg)
端の方につける理由ですが、マジックバンドの端が指の側面や底面に来てしまうと、ピアノを弾いているときに隣の指や鍵盤に引っかかってマーカーが回転してしまうことがあるからです。こうすればマジックバンドの端は常にほぼ真上に来てくれます。

###つける位置
![body_te.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593203/386482fe-9f9d-8c3f-4b68-8fc624f16ac3.png)


##カメラ編

L字アルミアングルの両端にカメラを写真のように取り付けます
![P_20200227_233451.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593203/ef1bc757-1153-147c-3b38-d767b339ad8f.jpeg)
![P_20200227_233521.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593203/1c3a4da7-079b-6de8-05ce-984581bb9cb4.jpeg)

次に、写真のように壁に取り付けます。鍵盤からの高さは88健の場合は160cmくらいになります。奥行きは鍵盤の手前の端を0として奥に30cmくらい
![P_20200227_233125.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593203/dafee006-f431-a43f-7441-34a88194c4d7.jpeg)
![P_20200227_233222.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593203/02dfed3f-3ccc-f8dc-2f6e-9a11acf5f2b3.jpeg)

最後に、照明を上の写真のように鍵盤から80㎝くらいの高さに、鍵盤をまんべんなく照らすように配置します

##ソフト編

###ウェブカメラ
Logicool ウェブカメラ ソフトウェアをインストールし、C270を１つ接続します。
Logicool ウェブカメラ ソフトウェアを起動し、詳細設定画面に行きます。
(画像2枚目にウェブカメラの変更という項目が見えますが同じウェブカメラがつながれているとバグって変えられないので１つずつつないで設定します)
![logi1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593203/67ab9e1d-3808-4ca4-0d9f-0df15b899e6a.png)
![logi2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593203/d357c233-4622-6950-d7c7-efc05c6a4a3f.png)
![logi3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593203/402bc526-0b78-ef73-ac21-c1810d48c89c.png)
![logi4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593203/c11480a1-e424-59db-3097-739308ff0705.png)
↑これを…
↓こうします(数字は表示されないのでキーボードの矢印などを使って数えてください…)
露出を0にすると勝手に1になるのでそれも含めて4です
![logi5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593203/e6c551fc-21f7-3796-aecb-ce4a46949719.png)
そのあと一度ウェブカメラを外し、もう一方のウェブカメラについても同じ操作をします。

windowsのカメラアプリなどを起動したりすると設定が戻ってしまうので気を付けてください。

###Unity
まずUnity2018.4.18f1をインストールして、わたしの作ったUnityPackageをProjectWindowにドラッグアンドドロップし、その中にあるScene1をhierarchyにドラッグアンドドロップします。
そのあとはこの動画の指示に従ってください(2分)
https://youtu.be/0tP81cghO0M

これで動くはずです…！
ご質問、ご指摘等ございましたらコメント欄もしくはTwitterまで！

追記: 最近になって、指抜きグローブの表面にマーカーをくっつける方法を思いついたので暇があったら試してみようと思います
こういうの https://www.amazon.co.jp/dp/B082NKTY7N(追記: ←は拘束がきつくてダメでした)
https://www.amazon.co.jp/dp/B00B4T9NJU