バスキュール技術ブログ

バスキュールが得意とするインタラクティブエンジニアリングを、あますことなくお届け!

流星放送局の流星演出と映像合成

こんにちは、エンジニアの岩渕(@buccchi)です。

去年12月のふたご座流星群ピークの夜に放送された「流星放送局」では流星を感知できるシステム“Meteor Broadcaster”からの通知を受けて生放送画面にみんなの願い事をリアルタイムに合成して降らせるということをやってました。今回はこの演出部分について説明します。

構成

番組中はドラマとライブ(アーティストライブ、トーク)がありました。それぞれに対応するため2種類の構成を用意しました。

ドラマ時の機材構成

ドラマは5分程度のものが5話ありました。
事前に画角とカットが切り替わるタイミングがわかっているので、各カットに応じたパースや大きさで流星を降らせることができる様に、1話ごとに決めカットを3つと、汎用的に使えるヒキ・ヨリ・ミドルのカットを3つ、それと非表示用のカットを1つの計7カットを用意してこれをドラマのタイムコードに合わせて切り替えていました。
最終的なカット数は530超。
また、参加者数や流星感知時のテロップ表示はAnimateで実装し、QUMO2というシステムで合成していました。

BSジャパン(六本木)機材構成

f:id:bascule-dev:20170509165230p:plain

ライブ時の機材構成

生放送用のカメラ3台にUnityマシン3台を割り当てていました。

河口湖中継車機材構成

f:id:bascule-dev:20170509165256p:plain

合成方法

流星演出はUnityで実装。ブルーム発光しているのでこれを加算合成をすれば綺麗に表示できると思っていたのですが、加算合成はTV放送ではなかなか難しいらしく断念、代わりにフィルキー合成という方法で行いました。
Unityの画面を単純にフィル映像として使うとどうしても半透明部分が黒ずんでしまうので、いくつかのパターンを試して、フィル映像は白ベタでキー映像をUnityで生成するという方法を選択しました。

Unityの映像をBlackmagicへ送る

Unityの映像は SyphonUnityPluginというのとBlack Syphonというのを使ってBlackmagicへ送っていました。
ただし

  • 描画タイミングの同期が取れていないのかちょっとカクつく。
  • Unity側でカメラを切り替えると設定が外れる。
  • 再設定後に同期がとれるまでノイズが流れる。

という問題もあったので今後同じ様なことをやる場合には別の方法を探る必要があそうです。

流星演出

ライブのカメラ位置や画角が確定するのは放送当日で、そこから最終調整をしなければいけない状況だったため、落下範囲や速度をすばやく設定できる様にエディタ拡張を用意しておきました。

流星落下アニメーション

文字はDOTweenで1文字ずつバラバラに制御。
消滅時のパーティクルは、文字の最終ノードにエミッターを設定。
地面を照らす光はライトだと重いので板ポリで表現。
文字間を繋ぐ線はLineだと細い場合に潰れてしまうので、板ポリに左右に余白をもたせたテクスチャで。

f:id:bascule-dev:20170509165312g:plain

流星の落下範囲やもろもろの設定

以下のパラメータをエディタ上で変更できるようにしていました。

  • 落下エリア
  • 文字が発生する距離
  • 文字が静止する距離(画面内のいい感じの高さで静止させて文字が読めるように)
  • 文字が静止後に滑る距離(静止後もゆっくりスクロールし続けることで長文も読めるように)
  • 文字が静止後に滑る時間
  • 進入角度
  • 願いの文字サイズ
  • 着地時の光のサイズ
  • 衝突時のエフェクトの有無(落下地点が画面外の場合に処理を省略するため)

落下地点を完全なランダムにしてしまうと流星が重なりすぎて読めなくなったりするので Random.InitState(int seed) を適当なタイミングで叩いて各カットの初回の落下位置を固定していました。
落下範囲を極端に狭めることで「ダルマの頭に落とす」みたいなことも可能になってます。

f:id:bascule-dev:20170509165338p:plain f:id:bascule-dev:20170509165327p:plain

パースマッチング

パースはBlender上でBLAMというアドオンを使って合わせていました。
ただしBlenderは右手座標系で水平画角、Unityは左手座標系で垂直画角という違いがあるのでこれを変換する必要があります。

Blender画角(水平)をUnity画角(垂直)に変換

public Camera cam;
public float blenderFov = 62.4f;    // Blender側の視野角

private void ConvertFovFromBlender(){
    float fov = 2f * Mathf.Atan(Mathf.Tan(blenderFov * Mathf.Deg2Rad / 2f) / cam.aspect);
    cam.fieldOfView = fov * Mathf.Rad2Deg;
}

f:id:bascule-dev:20170515234728g:plain

ドラマ決めカット一覧

ドラマ用に最終的に用意した決めカットは15種類。これ以外のカットは汎用カットからシーンに合ったものを割り当てていました。

  • スマホ
    f:id:bascule-dev:20170509165518p:plain
  • ミュージシャンの妹
    f:id:bascule-dev:20170509165527p:plain
  • オウム返し
    f:id:bascule-dev:20170509165534p:plain
  • あれから
    f:id:bascule-dev:20170509165542p:plain
  • 風景が変わる
    f:id:bascule-dev:20170509165604p:plain

おわりに

流星という自然現象をキーにしているため、これだけ用意しても使われることのないカットが多くを占めてしまうのですが、 それでも新しい体験を作るためにやる価値は十分あったと思ってます。