2018年12月22日

プログラミング

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

目次

  1. はじめに
  2. 360度動画を撮影する
  3. 背景動画として使用する
  4. まとめ

はじめに

新しい技術にチャレンジし続ける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を使用しました。
premiere-pro-128x128.png (5.4 kB)

詳細については、また別のシリーズでもご紹介しますが、他にも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です。

bb.gif (5.5 MB)

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

まとめ

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

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

2

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

CONTACT PAGE TOP