動画の描画
AR体験で動画を使用することは、ユーザーの目を引き付ける効果的な手段です。Wikitudeでは、動画を3種類のモードで再生できます。使用する動画は自己公開動画、YouTubeまたはVimeoなどのオンライン動画サービスに投稿された動画である必要があります。
使用可能なモードは以下のとおりです。
サポートされている動画の種類は以下のとおりです。
全画面動画
全画面動画は、ユーザーのデバイスに搭載されたネイティブプレーヤーで再生される動画です。カメラビュー内で直接再生されるのではなく、別のウィンドウが開いてそこで動画プレーヤーが起動します。ユーザーがウィンドウを閉じると、AR体験に戻ります。
拡張動画
拡張動画は、カメラビュー内のターゲットの前面で直接再生されます。プロジェクトで動画のサイズと位置を設定できます。
メモ: 拡張動画として再生するには、動画がある特定のコーデック(H.264)でエンコードされている必要があります。詳細については、「サポートされている動画コーデック」のセクションを参照してください。また、拡張動画はすべてのデバイスで再生できるとは限りません。「サポートされているデバイス」のセクションを参照してください。
- 自己公開動画: H.264でエンコードされた自己公開の動画ファイルを拡張動画として使用できます。
- YouTube: YouTubeの動画は、ライセンス制限の関係で拡張動画として直接使用することはできません。動画ファイルを入手できる場合は、それをH.264動画ファイルにエンコードして独自のサーバーにアップロードすれば、拡張動画として使用できます。
- Vimeo: Vimeoの動画は、ライセンス制限の関係で拡張動画として直接使用することはできません。動画ファイルを入手できる場合は、それをH.264動画ファイルにエンコードして独自のサーバーにアップロードすれば、拡張動画として使用できます。
拡張動画は、[Start Playback Immediately](再生をただちに開始)オプションを選択した場合はただちに再生されます。このオプションを選択しなかった場合は、ユーザーが動画をクリックすると再生が始まります。動画を含むターゲットがカメラの視野から外れると再生が一時停止し、視野内に戻ると再生が再開されます。
アルファチャネル付きの拡張動画
Wikitude Studioでは、標準の動画に加えて、透明の背景(アルファチャネル)を持つ動画を扱うこともできます。透過画像と同じように、動画でも背景を透明にすることができます。
透過動画を作成するときは通常、撮影用のグリーンスクリーンを使用します。これはクロマキーと呼ばれる手法で、緑の背景を透明に置き換えます。インターネットを検索すると、このトピックの参考になる詳しい情報が見つかります。
動画のアルファチャネルをサポートする動画コーデックは複数存在し、それらのほとんどが材料として使用できます。Wikitude SDKの開発時にApple ProRes 4444コーデックのテストを広範に実施しましたが、結果は満足のいくものでした。
Wikitude SDKでレンダリングできるのはH.264でエンコードされた動画だけですが、このコーデックは実際にはアルファチャネルをサポートしていません。ここではその解決策として、アルファチャネルを動画の別の可視部分に追加しています。最終的な動画では、元の動画が分割されてカラーチャネルとアルファチャネルが上下に配置されます。前処理結果は次のようになります。
画像の上半分は最終動画のカラー情報を示し、下半分にはアルファレイヤのグレースケール表現が含まれます。白の領域は完全に不透明になり、黒の領域は完全に透明になります。Photoshopでいうと、下半分はマスクに相当します。最終的に作成された動画は、高さが入力動画のちょうど2倍になります。
作成した生の動画をWikitude Studioの有効な入力動画に変換するため、動画を再エンコードし、アルファマスクを自動的に作成する必要があります。Wikitude SDKに含まれる以下のスクリプトはffmpeg
を使用してこれを実行し、さらに必要なコマンドをラップしています。以下の手順を実行してください。
MacOS X
- ターミナルアプリケーションを開きます。
cd <SDK>/tools/video/MacOSX
と入力します。<SDK>
はSDKフォルダのパスに置き換えてください。sh convert.sh <input video> <output video>
を実行します。<input video>
は透過動画のパスに置き換え、<output video>
は保存する出力動画のパスに置き換えてください。
Windows
- コマンドラインを開きます。
cd <SDK>\tools\video\Windows
と入力します。<SDK>
はSDKフォルダのパスに置き換えてください。convert.bat <input video> <output video>
を実行します。<input video>
は透過動画のパスに置き換え、<output video>
は保存する出力動画のパスに置き換えてください。
これにより、カラーチャネルとアルファチャネルが上下に分割された動画が作成されます。
アルファチャネルを含む動画をWikitude Studioに配置します。
アップロードする動画は、高さがユーザーが実際に見る動画の2倍になります。ターゲットに動画を配置するときにこの点に注意してください。
自己公開動画
アクセス可能な任意のURLで公開された動画を使用できます。たとえば、Dropboxのパブリックフォルダに保存したファイルへのURLリンクや独自サーバー上にある動画へのリンクを指定できます。拡張動画またはアルファチャネル付きの拡張動画を使用する場合は、必ずサポートされているコーデックで動画をエンコードしてください。
サポートされている動画コーデック
残念ながら、モバイルデバイスにおける動画のサポートは単純明快ではありません。デバイスおよびオペレーティングシステムによって、再生できる動画とでき ない動画が異なります。すべてのプラットフォームをサポートするには、H.264でエンコードされた最大解像度720p(1280x720ピクセル)の動 画を使用するのが最善の解決策です。H.264コーデックでは複数のプロファイルが定義されており、これが事態をさらに混乱させます。すべてのプロファイ ルがうまく再生できるとは限らないので、必ず以下のいずれかを使用してください。
- ベースライン
- Extended
- Main
広くサポートされているAndroidおよびiOSの推奨事項は、H.264(AVC)をコンテナ形式とした.mp4のコーデック(ベースラインプロファイル)として使用することです。Androidでのメディアサポートの全リストについては、公式ガイド または iOS webガイドをご覧ください。
特にAndroidデバイスで異なるプロファイルの動画を再生すると、間違いなく誤動作が起こります(再生できないか、完全にクラッシュします)。
Wikitudeでは既存の動画を正しい形式でトランスコードするためにHandbrakeを使用しています。使用時の設定内容は下のスクリーンショットで確認してください。
- コーデック(H.264)
- ベースラインプロファイル
- 最大ビットレートを1250kbpsに制限