Unity+Vuforia: ARで画像と動画を表示する

今回はUnity とVuforiaを使ってマーカー上に画像と動画の表示方法をまとめました！

目標

youtu.be

目次

環境

• Mac Catalina ver10.15.3
• Unity 2019.3.9.f1
• Vuforia Engine 9.0

事前準備

教材

drive.google.com

UnityとVuforiaのセットアップ

UnityとVuforiaの準備は以下の記事に書いてあるので，こちらの準備が終わってから進んでください.

note.com

画像の表示

1. Assetsの中にimagesフォルダを作りcat.jpegをいれる

2. catのTexture TypeをSprite (2D and UI)にする

3. catをImageTargetの子オブジェクトにする

4. catの角度を調整して，マーカーと動画が平行になるようにする

5. 再生する

youtu.be

動画の表示

1. Assetsの中にvideosフォルダを作りcat.mp4をいれる

2. videosの中にRender TextureとMaterialを作成する

3. testMaterialにtestTextureを貼り付ける

4. ImageTarget の下に Quad を作成する

5. QuadにVideoPlayerを追加する

6. Quadにcat.mp4, testTexture, testMaterialを追加する

7. Quadの角度を調整して，マーカーと動画が平行になるようにする

8. 再生する

youtu.be

おまけ: 動画の縦横比を変える

先ほどの手順だけでは，動画とQuadの縦横比があっていないため，黒い部分ができてしまいます．

ここではQuadの縦横比を動画と同じにして，黒い部分ができない方法を教えます．

1. AssetsにGetVideoAspectRatioEditor.csを追加する

2. VideoPlayerを右クリックしてGet Aspect Ratio for Meshを押します

3. Render ModeをMaterial Overrideにする

4. 再生する

youtu.be

参考資料

www.sejuku.net

ekulabo.com

unitycoder.com