ZawaWorks’s diary

プログラミング技術メモ

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をいれる

f:id:ZawaWorks:20200423031751j:plain

2. catTexture TypeSprite (2D and UI)にする

f:id:ZawaWorks:20200423031745j:plain

3. catImageTargetの子オブジェクトにする

f:id:ZawaWorks:20200423031741j:plain

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

f:id:ZawaWorks:20200423040619j:plain

5. 再生する

youtu.be

動画の表示

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

f:id:ZawaWorks:20200423031732j:plain

2. videosの中にRender TextureMaterialを作成する

f:id:ZawaWorks:20200423031737j:plain

3. testMaterialtestTextureを貼り付ける

f:id:ZawaWorks:20200423031727j:plain

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

f:id:ZawaWorks:20200423031723j:plain

5. QuadVideoPlayerを追加する

f:id:ZawaWorks:20200423031719j:plain

6. Quadcat.mp4, testTexture, testMaterialを追加する

f:id:ZawaWorks:20200423031715j:plain

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

f:id:ZawaWorks:20200423040540j:plain

8. 再生する

youtu.be

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

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

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

1. AssetsGetVideoAspectRatioEditor.csを追加する

f:id:ZawaWorks:20200423031710j:plain

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

f:id:ZawaWorks:20200423031706j:plain

3. Render ModeMaterial Overrideにする

f:id:ZawaWorks:20200423031702j:plain

4. 再生する

youtu.be

参考資料

www.sejuku.net

ekulabo.com

unitycoder.com