360度動画を背景にする【これからはじめるReact 360】

はじめに

新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay21です！

「自社WebARサービスのデザインと実装で苦労したこと」でした。

自社WebARサービスのデザインと実装で苦労したこと

今回はReact 360で360度動画を背景として使う方法をご紹介していきます。

このシリーズでは、「ランニング360」と題したWebVRを開発していきます。
最終的には自分が走っているかのような体験をすることができ、またアイテムを獲得していくゲーム要素も入れていく予定です。

さて、前回は環境構築を行いました。
360度動画自体の撮影、また編集にも触れながらWebVRとして背景動画を設定していきます。

360度動画を撮影する

360度動画とは、その名の通り360度どこの角度からも見ることができる動画のことです。

例えばこちらのNational Geographic のような動画です。Youtubeも360度動画をサポートしています。

※マウスやスマートフォンを動かして角度を変えてみてください。

カメラを選ぶ

では、360度動画はどうやって撮影するのでしょうか。
いくつか専用のカメラをご紹介します。
価格帯は高いものだと数十万円しますが、今回は数万円程の価格のものです。

Insta 360はスマートフォンにさして使用するタイプの360度カメラです。

THETAは軽量でスタイリッシュなデザインのカメラです。

最後にGoPro Fusionをご紹介します。
今回はこのカメラを使用し、360度動画（もちろん画像も）を撮影しました。
スマートフォン経由で操作できるので、わかりやすいかなと思います。

動画を編集する

今回はAdobe Premiere Pro CCを使用しました。

詳細については、また別のシリーズでもご紹介しますが、他にもFinalCutProのような動画編集ソフトでは360度動画も編集可能なようです。

そしてオフィス近くで撮影を行い、出来上がったのがこちらの動画です。
Amazon S3に保存しています。

※少し重いのでご注意ください。

背景動画として使用する

では、背景動画を指定していきます。
まず、先程作成した動画をstatic_assetsディレクトリに保存します。
run.mp4というファイル名にします。

次に、client.jsを見ていきます。

...

function init(bundle, parent, options = {}) {
  const r360 = new ReactInstance(bundle, parent, {
    // Add custom options here
    fullScreen: true,
    ...options,
  });
  // Creating a Video Player
  const player = r360.compositor.createVideoPlayer('myplayer');
  // Set the video to be played, and its format
  player.setSource(r360.getAssetURL('run.mp4'), '2D');

  r360.compositor.setBackgroundVideo('myplayer');
  player.setLoop(true);
  player.play();

  // Render your app content to the default cylinder surface
  r360.renderToSurface(
    r360.createRoot('running360', { /* initial props */ }),
    r360.getDefaultSurface()
  );
...

ポイントをいくつか解説していきます。

  const player = r360.compositor.createVideoPlayer('myplayer');

ここでmyplayerというビデオプレイヤーをつくります。

  player.setSource(r360.getAssetURL('run.mp4'), '2D');

そしてここでrun.mp4を指定しています。
getAssetURL はstatic_assetsをパス指定するものです。

そしてsetSourceメソッド2つ目の引数の’2D’ですが、フォーマットを指定する為のものです。
ヘッドセットでないとその効果は見れない為、今回はデフォルトの2Dフォーマットを指定します。

  r360.compositor.setBackgroundVideo('myplayer');

そしてここでmyplayerをReactのインスタンスであるr360の背景として宣言します。

  player.setLoop(true);
  player.play();

最後に、少しはまったポイントです。
ここで明示的にplayerをplayしないと動画が再生されません！
setLoopは繰り返すかどうかの指定ですね！

こうしてできたのがこのようなWebVRです。

サンプル
サイトはこちらですが、回が進むことでアップデートされるのでご注意！

まとめ

今回はReac360での背景360度動画再生についてご紹介しました。
360度の動画を流すことで、だいぶ没入感（自分がその空間に入り込んでいるような感覚）が強くなるのではないでしょうか。

いきなりこうして背景動画を流すこともできますが、途中から背景を変えることも当然可能です。
また、例えば目線によるインタフェースの実装も可能です。
次回以降、そのやり方をご紹介していきます。