みずぴー日記

人間の再起動ボタンはハワイのビーチにある

VR世界に美少女アニメポスターを貼る

要約

概要

部屋にポスターを貼りたくはないけど、ポスターを貼ったときに得られる満足感は欲しくなったので、仮想世界に貼ることにした。

f:id:mzp:20140727122435p:plain

どのように貼るかは何パターンか試したが、最終的には以下のように円柱状に貼るようにした。

f:id:mzp:20140727122336p:plain

配布ページ・ソースコード

できること

ローカルのファイルの表示

指定したディレクトリ以下にある画像ファイル(現状は*.jpgのみ)を表示できる。

f:id:mzp:20140727122311j:plain

ぼーっと眺めていても楽しいように、ゆっくりと回転する。気分によって回転を速くしたり止めたりしたいので、設定画面で変更可能。

OculusRift対応

OculusRift DK1に対応。DK2はまだ届いてないので対応できない。

f:id:mzp:20140727122816p:plain

pixiv api対応

どうしようかなり迷ったが、Pixiv API(解説: http://qiita.com/nezuq/items/e4c55bb9c68bf5785e73)からの画像取得もできるようにした。 ただ、ダウンロードなどの非同期化はしてないので、辛抱強く待つ必要がある。

f:id:mzp:20140727122552p:plain

所感

  • 想定通りの満足感を得られた。大変よい。
  • ベクトル演算まわりの知識が足りなくてつらい。
  • OculusRiftのデバッグするときはコンタクトを装備すると便利。
  • 公式のPixiv APIが欲しい。
  • OculusRift DK2はやく届いてほしい。
  • ただ見るだけでなく関連画像の表示や整列などをやりたい。面倒そう。

紹介記事

開発中の様子(TL;DR)

Evernote上のメモより転機。

画像の準備

まずはローカルにある画像を表示できるようにする。

開発に使う画像は http://yuriplus.com/blog-entry-426.html から取得した。後々公開したいのでこの画像はレポジトリには入れていない。

f:id:mzp:20140727122319j:plain

平面上に配置

画像をどう貼るかについては3つほどアイデアがあるが、まずは平面上に配置した。

f:id:mzp:20140727122321p:plain

OculusRift対応はOVRPlayerControllerを配置するだけなので簡単。 立体感をだすために、画像ごとにz軸座標をばらつかせた。

f:id:mzp:20140727122325p:plain

Twitterに公開

ここまでのスクリーンショットTwitterで公開して寝る。 翌朝、50fav越えていたので、わりと手応えを感じる。

配置方法を変更

OculusRiftで試していたけど、平面上だと視界全部を覆えないので、球状を試すことにする。 LookAtなどを多用して無理矢理それっぽくする。

f:id:mzp:20140727122327p:plain

ベクトル演算をがんばる

球より円柱のほうがよさそうなので、変更し始める。

画像の向きは(画像の位置 - カメラの位置)で計算できることまではできたけど、その方向に向くために必要な回転を求めることができなくて苦しむ。 Twitterでいろいろ聞いて外積で回転の軸を計算すればいいことを教えてもらう。(だいたい半日かかった)

結果として、円柱状に配置できるようになった。ついでに照明の置き場所やRangeを工夫して全体が明るくなるように調整した。

f:id:mzp:20140727122329p:plain

回転付与

動きがあったほうが楽しい気がしたので、ゆっくりとした回転を付与。

https://vine.co/v/M01UYFxDMUO

設定画面準備

設定メニューを作った。前につくったvr-guri-guriのコードをほぼそのまま流用した。

日本語を表示したいので、今回はみかちゃんフォントを利用。

f:id:mzp:20140727122311j:plain

pixiv api対応

Pixiv API(解説)に対応。ダウンロードの非同期化は、大変そうなので後回し。

f:id:mzp:20140727122552p:plain

非OculusRift対応

カメラ切り替えやキーボード、マウスによる操作を追加。この状態で大画面に写せばそれなりに見栄えがする。

f:id:mzp:20140727122313j:plain