VR世界に美少女アニメポスターを貼る
要約
「週末はなにをしてたんですか?」「ゆるゆり画像を自分のまわりで回してました」
— みずぴー (@mzp) 2014, 7月 26概要
部屋にポスターを貼りたくはないけど、ポスターを貼ったときに得られる満足感は欲しくなったので、仮想世界に貼ることにした。
どのように貼るかは何パターンか試したが、最終的には以下のように円柱状に貼るようにした。
配布ページ・ソースコード
できること
ローカルのファイルの表示
指定したディレクトリ以下にある画像ファイル(現状は*.jpgのみ)を表示できる。
ぼーっと眺めていても楽しいように、ゆっくりと回転する。気分によって回転を速くしたり止めたりしたいので、設定画面で変更可能。
OculusRift対応
OculusRift DK1に対応。DK2はまだ届いてないので対応できない。
pixiv api対応
どうしようかなり迷ったが、Pixiv API(解説: http://qiita.com/nezuq/items/e4c55bb9c68bf5785e73)からの画像取得もできるようにした。 ただ、ダウンロードなどの非同期化はしてないので、辛抱強く待つ必要がある。
所感
- 想定通りの満足感を得られた。大変よい。
- ベクトル演算まわりの知識が足りなくてつらい。
- OculusRiftのデバッグするときはコンタクトを装備すると便利。
- 公式のPixiv APIが欲しい。
- OculusRift DK2はやく届いてほしい。
- ただ見るだけでなく関連画像の表示や整列などをやりたい。面倒そう。
紹介記事
開発中の様子(TL;DR)
Evernote上のメモより転機。
画像の準備
まずはローカルにある画像を表示できるようにする。
開発に使う画像は http://yuriplus.com/blog-entry-426.html から取得した。後々公開したいのでこの画像はレポジトリには入れていない。
平面上に配置
画像をどう貼るかについては3つほどアイデアがあるが、まずは平面上に配置した。
OculusRift対応はOVRPlayerControllerを配置するだけなので簡単。 立体感をだすために、画像ごとにz軸座標をばらつかせた。
Twitterに公開
ここまでのスクリーンショットをTwitterで公開して寝る。 翌朝、50fav越えていたので、わりと手応えを感じる。
部屋にアニメポスターを貼るのは微妙らしいので、仮想世界に貼りはじめました。 pic.twitter.com/O4aPqjnM0e
— みずぴー (@mzp) 2014, 7月 25配置方法を変更
OculusRiftで試していたけど、平面上だと視界全部を覆えないので、球状を試すことにする。 LookAtなどを多用して無理矢理それっぽくする。
ベクトル演算をがんばる
球より円柱のほうがよさそうなので、変更し始める。
画像の向きは(画像の位置 - カメラの位置)で計算できることまではできたけど、その方向に向くために必要な回転を求めることができなくて苦しむ。 Twitterでいろいろ聞いて外積で回転の軸を計算すればいいことを教えてもらう。(だいたい半日かかった)
@mzp 外積のベクトルの方向に対してどちら周りと決まっているので、角度が180度を超える場合は外積のベクトルが逆向きになるはずですよ
— うえん＠岩作 (@aschery19) 2014, 7月 26@mzp mzわかるかしら？汗 pic.twitter.com/Oc67eg0t7V
— うえん＠岩作 (@aschery19) 2014, 7月 26結果として、円柱状に配置できるようになった。ついでに照明の置き場所やRangeを工夫して全体が明るくなるように調整した。
回転付与
動きがあったほうが楽しい気がしたので、ゆっくりとした回転を付与。
設定画面準備
設定メニューを作った。前につくったvr-guri-guriのコードをほぼそのまま流用した。
日本語を表示したいので、今回はみかちゃんフォントを利用。
pixiv api対応
Pixiv API(解説)に対応。ダウンロードの非同期化は、大変そうなので後回し。
非OculusRift対応
カメラ切り替えやキーボード、マウスによる操作を追加。この状態で大画面に写せばそれなりに見栄えがする。
