読者です 読者をやめる 読者になる 読者になる

littlewing

人間とコンピューターとメディアの接点をデザインするために考えたこと

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 - openFrameworks

↑、ここを見ると、パソコンのスペックに依存するみたいです。

2.ライトセーバーを画像にする

太い線を引くのはあきらめて画像にしました。

フレーム更新前の座標情報をある程度保存して、アルファを変化させながら表示することが残像も表現します。 いい感じ。

ただし、すばやく振り回すと、認識が飛んでしまいます。 処理が遅くなった気が・・ あと、剣の色を変更したいときに、画像だと面倒ですが、後でシェーダーを作ればいいかなと

3.高速化+当たり判定

その後、box2dを利用して当たり判定+敵キャラの表示を加えました。

また高速化のために、ビデオ映像を、640x480にしていたのを320x240にしたら30FPSは安定的に越えるように 表示画像の画質は悪くなりますが、認識精度に悪影響はあまり無い感じです。

表示用と解析用の解像度を変えることも検討が必要

  • 子供もノリノリですが、あまり振り回すと、認識が飛んでしまいます。このあたりは、今後調整。
  • 現在は、ここまで。進んだらまた更新します。

更新情報はtwitterでもお知らせします。