openframeworksとopencvでVRライトセーバーをつくる
5月4日は「スター・ウォーズの日」
前からちょっとづつ進めていたのですが、もうすぐ5月4日は「スター・ウォーズの日」なので、そこにあわせて形にしようかと。
コンピューターをディスプレイとキーボードから開放する。
そんな取り組みをいろいろ考えているのですが、ひとつの形として スター・ウォーズ好きでもあるので、リアルタイムで処理できるライトセーバーを現在作っています。
ちなみに、「何故5月4日がスター・ウォーズの日なのか？」は名台詞
May the force be with you.(フォースと共にあらんことを)
とMay 4thをかけた、良質なアメリカンジョークです。
まだ未完成ですが、開発メモを自分用含めてまとめます。
どんなものか？
- 棒がマーカーとなって、それを持ってカメラの前で振ると、ライトセーバーになる。
- その棒で、いろいろ壊せたり、エフェクト処理（画面内で）
- ライトセーバーは発光し、色もかえれる
- フォースも出したい
- 当たり判定をとってゲームも出来る
こんなものを目指しています。
VRライトセーバーの作り方(ハードウェア編)
ライトセーバーとなるマーカーは100円ショップで揃えました。
- カラーボール(10個くらいで100円)
- プラスチックの棒（園芸用？）・・・100円
カラーボールにホットナイフで穴を開けて、まんなかに棒を通します。 これで完成。ボールの位置を動かすことで、発光部分の長さも変えられます。
あとは
- mac book air
- WEBカメラもUSB接続も使ったりするのですが、前面カメラでもOKです。
ライトセーバーの作り方(ソフトウェア編)
- openframeworks (+ Xcode)
です。
作っていく
1.ひとまず、認識＆表示
まずは、
- カメラ映像内の、カラーボールの配色情報を取得（クリックで指定して、値を保存）
- findContoursで二つの輪郭領域を取得。その2点をつないで線を描画する
で進めました。
こんな感じ
線を二重にすることで、いったんそれっぽくなりますが、ライトセーバーが細い。
openframeworksのofSetLineWidth()の値を20とか、100にしても、線が太くなりません。 10以上では変化なし。
ofSetLineWidth maximum value - beginners - openFrameworks
↑、ここを見ると、パソコンのスペックに依存するみたいです。
2.ライトセーバーを画像にする
太い線を引くのはあきらめて画像にしました。
フレーム更新前の座標情報をある程度保存して、アルファを変化させながら表示することが残像も表現します。 いい感じ。
ただし、すばやく振り回すと、認識が飛んでしまいます。 処理が遅くなった気が・・ あと、剣の色を変更したいときに、画像だと面倒ですが、後でシェーダーを作ればいいかなと
- エピソード7の十字架型のライトセーバーも作って見たり、、
3.高速化＋当たり判定
その後、box2dを利用して当たり判定＋敵キャラの表示を加えました。
また高速化のために、ビデオ映像を、640x480にしていたのを320x240にしたら30FPSは安定的に越えるように 表示画像の画質は悪くなりますが、認識精度に悪影響はあまり無い感じです。
表示用と解析用の解像度を変えることも検討が必要
- 子供もノリノリですが、あまり振り回すと、認識が飛んでしまいます。このあたりは、今後調整。
- 現在は、ここまで。進んだらまた更新します。
