こんなのつくったよ
動画内に2種類の Prototype が含まれています。
前半のはここで試していただけます。
https://hands-control.pages.dev/
＊ Webカメラ搭載の PC/Mac ある程度最近のスマートフォンでお試しいただけます
後半のは機種ごとのキャリブレーションが必要なのですが、そこが適当実装すぎるので未公開状態です。
思いついたきっかけ
おかげさまで Project PLATEAU ADVOCATE 2024 なども拝命致しておりまして、さまざまな方を相手に、Project PLATEAU に関連するお話やデモをさせていただく機会が増えてきました。
そんなおり、やはり、
「PLATEAU View などの 3D地図は（マウス操作での）視点移動がむずかしい」
という参加者さんが一定いらっしゃいます。
たしかにそうだよなぁ。。。なにか代替手法ないかなぁ。。。
入口の時点で拒否したくなる気持ち、食わず嫌いになるところをなんとかできないか。
もっとワクワクした操作感を用意できないか考えてみました。
両手を空間で動かすことで、3D操作するものは、
- Kinnect系センサー
- LeapMotionシリーズ
- MetaQuest などのHMD
などなどいろいろありましたが、それらは専用のセンサーや機器が必要です。
それらをイメージしていた時に、ふと Macbook の WebCam が目に入りました。
「今の時代、この WebCam だけでそこそこ両手を認識できるなじゃいかな？」
と
そして、つくってみました。
「PLATEAU WebCam 3D Hands Controller（仮称）」ばくたん
タイトルは「AirPinch」なんてのもいいかなぁなど考え中です。
さて本題。仕組みですが３行にまとめると、
- WebCam にうつった両手を MediaPipe で認識
- 両手の座標認識の精度が良いのはどの手の状態・角度のどの動きかを調査
- 許される精度範囲の座標をもって直感的な操作に近しい方法はなんだろうか考えながら実装してみた
です。
2-3 についてはそこそこ悩み、繰り返しました。
いまは親指と人差し指をくっつけた OKサイン の指先座標をベースに、いろいろ組み合わせていますが、もっとよい操作方法があるかもしれません。
また動画の前半の空を飛ぶのは、認識した2次元座標をベースにつくっていて、
後半のボックスを配置するのは、擬似的な3次元座標をベースにしています。
前半はまずまず満足した精度（および認識速度）になっていますが、後半はもっと精度を上げられる気がしています。
こだわったところ
- 前述した「認識精度とその範囲での直感的な操作」のバランス
これはもっといい答えがまだあるかもしれませんが、それなりにこだわりました。
- 機種依存が少ないブラウザで動く仕組みで実装するぞ
Unity やあれこれ実装の方が、精度的なところでは良い結果を出しやすかったのかもしれませんが、今後の発展も含めて、JavaScript でできるところまでがんばってみました。
今後の野望 〜 SF ちっくな操作を日常に Like a 'マイノリティ・リポート'
もう昭和世代しか知らないかもしれませんが、やっぱりトムクルーズ主演のあの映画「マイノリティ・リポート」が忘れられません。
当たり前にその日が来て欲しいなぁ。。。
野望1: 3D地図においての両手空中操作方法のデファクトスタンダードをつくるぞ！？
- UI って新規に考案するのはいろいろ大変ですね。技術的な精度の課題もあり。難しく面白いです。
野望2: 空飛ぶシリーズはなんらかのフライトアクションゲームに発展させたいなぁ（仲間求む）
- 飛行機が輪を潜っていって点数が貯まるようなシンプルなそれくらいからつくって
- もっとわくわくするアイデアなにかないかなぁ
- この IP(キャラクターなど) と組み合わせて〜というチャンスもこないかなぁ
野望3: ニーズがあったら OpenSource にするぞ
- だって Project PLATEAU のよいところのひとつはオープンな考え方ですしね
以上です。