アイ・コラボレーション神戸は元町高架通のギャラリーの依頼で（ディープな雰囲気で有名な）モトコーを全天球映像に収め、こうべまちづくり会館で映像展示することになった。ノートパソコンとテレビをつなぎ、全天球映像のギャラリー機能をちょっとしたHTMLで実現できた。

I’d made the Motoko VR Gallery with my laptop, TV and a little HTML cording. Motoko is a name of space under railway viaduct in kobe-Motomachi famous for old and deep atmosphere.

Demo

  1. Standaloneギャラリー版

  2. （比較）YouTube再生リスト版

展示風景

要件

  1. モトコ―の全天球映像を8時間連続して再生できること

    1. 連続再生でPCが不安定になってはならない

  2. インターネット環境のない地下ギャラリーのためスタンドアロンで動作すること

    1. YouTube等のストリーミング配信は不可

  3. ギャラリーの者はPC操作に不慣れなので極力操作を避け、電源スイッチオンで自動再生までできること

    1. ソフトウェアによる手動再生は不可

    2. 映像切り替えも自動で行えること

    3. 風景が360度自動で回転するとベスト

  4. モトコ―という場所を初めて見るお客さんのため、キャプションを表示すること

    1. 説明文を見るためにマウス操作を必要としないこと

採用した技術・構成

  1. Googleのオープンソースライブラリ、vrviewを採用し、HTMLでギャラリーを作成

    1. 長時間安定して全天球映像を再生できる

    2. iframe内で動作し、URLに引数を付加することででサイズ・再生ファイル等の指定が容易

  2. ノートPC上にHTTPサーバーを立ち上げ、スタンドアロンで動作するようにした

  3. PCが起動するとnode.jsでHTMLサーバーが起動し、Firefoxで全画面表示させるようにした

    1. 複数のタブで開くケースを考慮し、自動再生は見送った

      1. 代わりに動画か静止画を選べるシンプルな再生ボタンを配置した

    2. 映像の自動切り替えはjquery.prettyPhotoを採用

      1. iframeに対応したギャラリーライブラリで、キャプションを表示することが可能

    3. 風景の自動回転は時間の関係で実装を見送った

  4. キャプションはjquery.prettyPhotoで表現できた

実際のコード

GitHubに動画ファイルを除いたソースコードを公開した https://github.com/ickobe/motoko-vr

おまけ

GitHubに43円で作れるVRゴーグルの展開図を載せておいた https://github.com/ickobe/vr-goggles-pattern cardboard out.png

Spread the word

comments powered by Disqus