tande lab.

[QuartzComposer] リアルタイムなスルー映像に任意のタイミングでテロップ&音を重ねる

友人結婚式で制作した余興映像 (詳しくは 前記事 – 結婚式余興 よちもち☆モチオネア) で、下記のように当日の寸劇の様子に合わせてテロップを重ね合わせた映像をスクリーンに流していました。演者の動きや進行に応じて、PC操作でテロップ内容や音声を切り替えるというものです。

当日披露宴で流した映像例

リアルタイムに映像ミキシングするなら QuartzComposer しか思いつかなかったのもあり、QuartzComposer の勉強がてら試行錯誤してみましたので、その記録です。

完成映像はコチラ。

必要機材・ソフトウェア

前記事 – 結婚式余興 よちもち☆モチオネア を参照してください。

全体像

まず、当日はこんな形で映像投影をしていました。
https://cacoo.com/diagrams/r0ZCtzgS2exGquSO-AC6FC.png

当日は映像再生全てを QuartzComposer で行いました。
最終的に作った QuartzComposer のデータは以下のようになります。
https://lh5.googleusercontent.com/-nhSgDQVJFU8/TSM8YHghvdI/AAAAAAAAk8M/J6mReLLjF9M/s640/110105-0003.png

図にするとこんな感じです。(クリックで拡大)

 

出力映像について

ひとつひとつ比較しながら見ていきます。

まず、QuartzComposer では出力映像はレイヤー状にいくつでも配置できます。数字が多いものほど上に重なって、これらが組合わさって投影されています。
QuartzComposer図解

パッチについて詳しい説明は省きますが、QuartzComposer では出力用パッチ (Render Patch) が数種類用意されていて、用途に応じて使い分けることができます。ここでは用途に応じて以下のパッチを利用しています。

出力映像 3: Billboad

画像・映像データの表示用パッチ。2D表示のみで、アスペクト比は固定。スルー映像の上に重ねるテロップを表示するのに利用しています。
https://lh5.googleusercontent.com/-ZjwMuCTEokk/TcNaAoLTnGI/AAAAAAAAo8g/D7eJa-0JcpE/s800/110506-0020.png

出力映像 2: Splite

画像・映像データの表示用パッチ。3D表示が可能で、色々と高機能。ビデオカメラからの入力スルー映像のアスペクト比を直すのに利用しています。
https://lh4.googleusercontent.com/-GnjYJzWvPz0/TcNaBbYbx1I/AAAAAAAAo8k/DIjgPOjYKKc/s800/110506-0021.png

出力映像 1: Clear

単色でウィンドウ全体に描画するパッチ。ここでは黒を敷いています。
https://lh4.googleusercontent.com/-1i42R1KoOsg/TcNaCO5Ad8I/AAAAAAAAo8o/S6OekVRJq4w/s800/110506-0022.png

他、QuartzComposer のパッチについては下記のサイトが詳しいです。
Quartz Composer/パッチ – おなかすいたWiki!

 

準備する映像について

上でいう「出力映像 3」に表示する映像は全て背景透明の映像として準備し、キーボード操作によって任意の映像を再生できるようにしています。QuartzComposerでは音のみの扱いはデフォルトではできないのと、音に合わせたアニメーション等は、ひとまとめの映像としてしまった方が楽でした。映像の数だけ Movie Importerパッチを準備します。
QuartzComposer QuartzComposer図解

7つの映像はQuartzComposerのファイルと同じ階層に置いて準備しました。
QuartzComposerファイルと同じ階層に再生したい映像を置く

00_black.png

  • その名の通り、ただの黒い画像です。
  • 余興映像スタート前に表示しておくための黒です。

01_movie.mp4

  • 余興映像の本編です。
  • これは本編映像なので背景透明ではないです。
  • この映像が再生終了後、リアルタイムのスルー映像が表示されるようにしています。

02_fadeInToThrough.mov

  • 本編映像が終わったあとスムーズにスルー映像に繋がるように見せるフェード映像です。
  • 実質は黒背景から透明背景へフェードするアニメーション映像になっています。
  • 余興演者である みのよこた (@yktmnb) が登場し、新郎新婦の席まで歩いていくまでのつなぎです。

03_question.mov

  • みのよこた が新郎新婦に近づいて質問を投げかける時の映像です。
  • 新婦に質問をし始めた瞬間に再生を開始すると、質問テロップとそれに合わせた音が流れます。

04_question_orange.mov

  • 新婦が質問に回答した瞬間に再生する映像です。
  • 回答した箇所のテロップがオレンジになり、それに合わせた音が流れます。もしここで複数の回答があり得るなら、そういう分岐が必要になりましたが回答はひとつしかあり得ないのでラクチンでした。

05_question_green.mov

  • 新婦のファイナルアンサーに対して、みのよこたが正解!と言った瞬間に再生する映像です。
  • 回答した箇所のテロップがグリーンに点滅し、正解を祝福するファンファーレ音+アニメーションが流れます。

06_staff_roll_alpha.mov

  • おめでとうアナウンスと共にスルー映像からエンディングのスタッフロールへフェードする映像です。
  • これは 02_fadeInToThrough.mov と逆で透明背景から黒背景へフェードする映像になっています。

02〜06の映像は、進行が遅くても間が持つように音楽をループで流した尺の長い映像として用意し、当日の進行が早ければ映像の途中でも次の映像へキーボードで移動できるようにしていました。

この時、次の映像へキーボードで送っても前の映像の音声だけが残るという現象があったんですが、それを防ぐために Movie Importerパッチに直接映像URLを書かずに、Javascriptパッチで渡すということをしています。それについては後述。

 

映像切換えのキーボード入力について

映像を切り替えるキーボード入力は、基本左右キーしか利用してません。左キー押下で-1、右キー押下で+1、というように左右キーでは単純に0〜6の範囲で数字の増減をさせています。
QuartzComposer
QuartzComposer図解

QuartzComposer で便利なのは Javascript を扱えることです。Javascriptパッチでは自由にコードを記述できるのですが、QuartzComposerデフォルトのパッチでは逆に複雑になってしまう処理等は、直接コードを記述して対応できます。

ここでは数字を+1させる要素として、「右キー押下」と「再生終了後自動的に」の2要素を加えたかったので、敢えて切り分けて下記のようにJavascriptで記述しています。すごいまどろこっしい書き方なのでもっと良い方法ありそうですが、「右キー押下」で Inputs[0] が ture に、01〜05の動画再生終了後も Inputs[1]〜[5] に ture が入るようになってて、どの Inputs が ture になっても、数字+1されるというようになってます。
QuartzComposer内でJavascriptを記述する

//→ボタンと、movie終了時に、increasing signal
if(inputs[0] || inputs[1] || inputs[2] || inputs[3] || inputs[4] || inputs[5] ){ 
	outputs[0] = true;
}else{
	outputs[0] = false;
}

そうやって上でカウントされる数字(0〜6の範囲)を受け取り、その数字によって再生する映像を下記で切り換えています。
QuartzComposer
QuartzComposer図解

 

映像再生時の処理について

02〜06映像はほぼ処理が一緒ですが、Movie Importerパッチの左右にJavascriptパッチを置いて、映像を再生する直前と直後で処理をさせています。
QuartzComposer
QuarzComposer図解

Movie Importerパッチの直前に置いてあるJavascriptパッチは以下のようになっていて再生シグナルを受け取ったら、再生映像のURL(Movie Location)と、再生スタート位置の秒数(Selection Start)、何秒再生させるか(Selection Duration: 0で制限なし)、をMovie Importerパッチに流します。なぜ最初からMovie Importerパッチに記述しないで再生シグナルを受け取ってからURL等を渡しているかというと、映像が2重に表示されてしまったり、前述したように前の映像の音だけ残ってしまうなどの不具合を回避するためです。
Movie Importerパッチの前に記述するJavascript

//outputs[0] Movie Location
//outputs[1] Selection Start
//outputs[2] Selection Duration
//outputs[3] Video Capture

if(inputs[0] == 1){ //movieの時だけ、movie再生&音ならす
	outputs[0] = "./01_movie.mp4";
	//outputs[0] = "./02_fadeInToThrough.mov";
	outputs[1] = 0; //selection start 520
	outputs[2] = 0; //selectiion duration
	//outputs[3] = true;
}else{
	outputs[0] = "";
	outputs[1] = 0;
	outputs[2] = 1;
	//outputs[3] = true;
}

コメントアウトしてある Outputs[3] はこのミキシング映像をキャプチャするかどうかを判別するためのものなんですが、当日キャプチャしたらMacが火を吹きそうだったので実行しませんでした。キャプチャ自体もデフォルトではできませんが今回は説明省きます。

Movie Importerパッチの直後に置いてあるjavascriptパッチでは、映像の再生が終了したことをカウンターパッチに知らせる処理が記述してあります。そのシグナルを受け取ってカウンターで数字を+1にして自動的に次の映像へ移動させるようになっています。01の余興映像本編のみ、映像終了と同時にスルー画をONにするよう Outputs[1] で知らせるようになっていますが基本処理は他と一緒です。
Movie Importerパッチの後に記述するJavascript

if(inputs[1] == 0){
	outputs[0] = false;
	return;
}

if(inputs[1] - inputs[0] < 0.5){
	outputs[0] = true;
	outputs[1] = true; //映像本編が終わったら、スルー画を出す
}else{
	outputs[0] = false;
	outputs[1] = false;
}

ちなみに Movie Importerパッチの中身はこんな感じで、映像再生のシグナルを受けるまで Movie Location は空っぽ状態です。
Movie Importerパッチの中身

あと、Movie Importerパッチで「Asynchronous Mode」にチェックをつけないと、映像の音が再生されないので注意!この設定項目自体、初期の QuartzComposer にはなかったのでもう少ししたら音単体も扱えるようなパッチもデフォルトでリリースされるかもしれませんね。
Movie Importerパッチの設定

以上が、今回余興で作った QuartzComposer による映像ミキシングの全貌ですー。説明してて自分でも訳分かんなくなってきたから、他人が読んだら更に訳分かんないかもですが。。
不明点などあればコメントで残していただけると幸いです。

QuartzComposerファイルのダウンロード

つたないファイルで恐縮ですがこちらに QuartzComposer のファイルを置いておきますので、もし参考にされたい方いましたらどうぞダウンロードしてください。

ダウンロード: RealtimeVideoComposition.qtz




3 comments
  1. […] 2011.5.7 追記 記事起こしました。 [QC] リアルタイムなスルー映像に任意のタイミングでテロップ&音を重ねる […]

  2. […] […]

  3. […] […]

Submit comment