はじめに

ARで召喚したガッキーと恋ダンスを踊る！！

Unity上でVuforiaを使ってガッキーと恋ダンスを踊りたいと思い、
クリスマスイブを費やして実装したので記録をとりたいと思います。

ちなみに僕は…逃げ恥視聴経験がありません。

必要なもの

AdobeAfterEffects（もしくは、アルファチャンネル動画を作成できるソフト）
Unity
Vuforia

手順

AR表示したい動画の背景をAdobeAfterEffectsで塗り潰し
塗りつぶした動画をovgファイルに変換
変換した動画を、Unity上でオブジェクトに貼り付けて動画再生
オブジェクトのテクスチャにシェーダーを適用し、背景を透過処理
オブジェクトごとVuforiaでAR表示

AfterEffectsで動画切り抜き

まず、使いたい動画の背景を削除します。
背景を残したままARで動画を再生するだけなら簡単なのですが、
使いたいところだけ切り抜いて使用するのが理想でしょう。

AfterEffectsのロトブラシという機能を使えば、
簡単に切り抜くことができます。

使いたい動画を放り込み、ロトブラシを選択。
1フレームずつ地道に切り抜いていく作業です、、、
ある程度追従してくれるのですが、僕は面倒すぎて最初の15秒で打ち止めました。

参考動画：【AfterEffects】ロトブラシで人物抽出
https://www.youtube.com/watch?v=AqpxQGobpQs

あとでクロマキーの要領で背景を透過処理するので、
切り抜いたあとの背景は緑色とか、動画内に使わない色にしておくとよいです。

書き出しは.mp4でOKです。
アルファチャンネル付きの動画として書き出して
Unityでアルファをもったまま再生できるといいのですが、それはできないっぽい…。
なので、緑色とかにしておいてUnity側で透過処理を行います。

ちなみに、自前で用意した実写動画を使うなら、テレビ局みたいに緑色の背景で
撮影したものを用意すればこの辺の手順はカットorかなり楽に済みます。

Unity上で動画再生

透過した動画をUnity上に放り込む前に、
MP4の動画だと再生ができないので.ovgファイルに変換します。

ソフトをダウンロードしてもいいですが、オンラインコンバータを使うと楽です。
https://convertio.co/ja/mp4-ogv/

AfterEffectsの書き出しを初めから.ogvでできればいいのですが、
不慣れでとりあえず.mp4に書き出して変換する手続きをとりました。。
誰か知ってらしたら教えてください…！

また、Unity上で動画再生する方法はこのエントリを参考にしました。
http://qiita.com/nakfiv/items/ce7c5506c66280014709

.ovgに変換した動画をStreamingAssetsフォルダに放り込みます。
上のエントリ内にあるMovieスクリプトを拝借し、適当に用意したGameObjectにアタッチ。
動画名をInspector上で入力。このままだと背景が緑色の動画が再生されるだけです。
GameObjectのサイズを動画の縦横比に合わせて変更しておきましょう。

動画の背景を透過処理

この状態で緑色だけを透過処理すれば、使いたい部分だけ残って
いい感じに現実となじむので、特定の色のみ透過するシェーダーを用意します。

有志が使いやすいクロマキーシェーダーを作ってくれていたので、これを拝借しました。
http://onoty3d.hatenablog.com/entry/2016/02/06/141002

動画の背景色をスポイトでとると、簡単に背景が透過されます。すげえ。。。

VuforiaでAR表示

ここまででもUnity内で動画が流せていい感じですが、
さらにVuforiaというSDKを使って、現実世界に召喚したいと思います。

Vuforiaの使い方は長くなるのでこの辺を参照していただければと、、

さっき作成した動画再生オブジェクトを、ImageTargetオブジェクトの子オブジェクトとして
設定すればARマーカ上に透過した動画が再生されます。

よっ！

ジャーン！

クリぼっちでもガッキーと恋ダンスが踊れるARシステム『AR agakiYui』 pic.twitter.com/i9kR0NbQ6j
— ぽし@とうふLINEスタンプ (@hoshi_527) 2016年12月24日

どうしても端の方に緑色の消し残りがあるのですが、この辺は方法を変えてどうにかするしかないですね。。

おわりに

ちなみにVuforiaにはVideoPlaybackという動画再生のための
サンプルがあるのですが、.movと.mp4にしか対応しておらずアルファチャンネルつきの動画は再生できないです。
また、iOSやAndroidにビルドしないと動かないので、今回は使用しませんでした。

また、Vuforiaフォーラムにはアルファ動画のAR再生についての質問がたくさんあったのですが、
若干回りくどかったり、有料Assetを使うっぽいのでやめました。~~なにより英語が読めねえ。~~

結果的に割とシンプルな実装ができたのでよしとします。
AfterEffectsの地道な作業はどっちみち必要になりますし！

↓念のためリンク（よりよい方法があったら教えてください…）
https://developer.vuforia.com/forum/qcar-api/displaying-video-alpha-channel-removed
https://developer.vuforia.com/forum/ios/can-we-play-video-playback-alpha-channel-video
https://developer.vuforia.com/forum/qcar-api/playing-video-alpha-channel-videosample-demo-project