Vuforiaを使ったAR開発の入門

https://gyazo.com/b6783cc33926b1bdd8e4ec7e339cc307

はじめに

また,筆者はこういった公開する記事の執筆が初めてなので,至らない部分があるかと思いますが温かい目で読んでいただけますと幸いです.

hr.icon

Vuforiaとは

Vuforiaは,拡張性に優れた包括的なエンタープライズARプラットフォームです.

Vuforia EngineはIOSやAndroid,Windowsなどさまざまなデバイスに対応していたりUnityでの開発が可能であったりと, かなり拡張性が高いソフトウェアです.筆者自身がUnityで開発を行っているので今回の記事もUnityでの開発を想定しています.

hr.icon

Vuforiaの使い方

さて,つらつらと前置きを書きましたが,ここからが本記事のメインとなります！Vuforiaを使いUnityでARを体験してみましょう！

環境

MacOS Ventura

Unity 2022.3.9f1

Webカメラ(あってもなくてもいい)

Vuforia側の手順

登録編

https://gyazo.com/380cd9e886a65a1f869c54f661a18e04

右上の「Regiater」をクリックし,登録を行います.

https://gyazo.com/26ec5a52b5e9f8fa2e499925e434c7ed

名前やユーザ名,Emailアドレス,パスワードを記入して登録を行います.

この時,会社名は適当で大丈夫です.

全ての項目を記入しチェックをクリックすると,「Create account 」がアクティブになるのでクリックします.

すると認証のメールが届くので,メール内のURLをクリックすることで登録が完了します.

hr.icon

ライセンスキーの発行編

「Develop」から「License Manager」から「Get Basic」をクリックします.

https://gyazo.com/3c35844f47ac276788a9e239c1e3b613

ライセンスの名前を入力し,「Confirm」をクリックします.

https://gyazo.com/1fa1e3fd2a134e718fbd080df7f2f650

すると,「License Manager」に追加されます.

https://gyazo.com/701104fe03405cb947e64dd111b8d2c2

登録したライセンスをクリックするとライセンスキーが発行されるのでコピーします.

このライセンスキーは後でUnityで使います.

※外部公開なのでライセンスキーは一部隠しています.

https://gyazo.com/234f06ea90b42567a664c0e0848ac9ff

hr.icon

画像登録編

Unityでマーカ(目印)として使用する画像の登録を行います.

「License Manager」の隣にある「Target Manager」から「Add Databese」をクリックします.

https://gyazo.com/313c6ba367f2aa03f68a44cc65132361

データベース名を入力し,「Device」にチェックを入れて「Create」をクリックします.

https://gyazo.com/d1879c575f44dd8c09c36b3b0c0fefc8

すると,「Target Manager」に追加されます.

https://gyazo.com/0ea5b59d36dcd4db4a10d91eb73606de

今,追加された「dclab_test」をクリックして「Add Target」で画像を登録します.

https://gyazo.com/51fb128505475eea82642fd07a22d2d5

今回は画像を登録するので「Image」を選択します.そして,画像と大きさ,名前を入力し「Add」で追加します

※詳しい説明は省きますがVuforiaでは画像だけではなく,直方体や円柱,それ以外の3Dオブジェクトもマーカとして登録できます.

Widthの大きさは現実の大きさに合わせます.

1m = 1なので今回は10cmである0.1に設定します.

↑登録した画像

すると,今登録した画像が追加されています.

https://gyazo.com/0d3bf2113b60398050a1f898a244057f

「Download Database(All)」をクリックし,データベースのダウンロードをします.

今回はUnityでの開発になるので「Unity Editor」にチェックを入れて「Download」をクリックします.

https://gyazo.com/98a5f19c1c4f967323a44ffb3dfd7bdd

するとunitypackageがダウンロードされます.

hr.icon

Vuforia Engineのダウンロード編

Vuforia最後の工程としてVuforia Engineのダウンロードをします.

「Downloads」から「SDK」にあるUnity用のVuforia Engineをクリックして,unitypackageをダウンロードします.

https://gyazo.com/1f60a84fc392ebccb5b378f8102c6426

ここまでがVuforiaでやることになります.

hr.icon

Unity側の手順

実装の下準備編

Unityの新規プロジェクトを作成します

コアは3D

作成が終わったら「Assets」から「Import Package」→「Custom Package」をクリックし,ダウンロードした２つのunitypackageをインポートします.

このような画面になると思います

https://cdn.discordapp.com/attachments/848882412507496463/1179662106304446525/2023-11-30_14.54.27.png?ex=657a98f3&is=656823f3&hm=d75ffed5980f6c83bf724687ffaa31d1dc81c8a64f698410cce6d17092e0d184&

次にカメラの準備をします

「Hierarchy」から「Vuforia Engine」→「AR Camera」をクリックします.

https://gyazo.com/7acdfb3eb343c2875ddaf547c8c5f053

「AR Camera」の「Inspector」から「Vuforia Behaviour」スクリプトの「Open Vuforia Engine Configuration」をクリックします.

https://gyazo.com/b946e2be1aa7c3c0e115c7fa79e5f4da

クリックしたら「Inspector」の一番上に「Add License Key」という項目に先ほどコピーしたライセンスキーをペーストします.

https://gyazo.com/83e8c515d9ac5b0588ee9c5c45c5c911

また同じ「Inspector」にあるCamera Deviceを使用するWebカメラに設定します.

前述しましたがここはあってもなくてもいいです.

筆者は内蔵カメラが使いにくいと感じているのでWebカメラを使用しています.

https://gyazo.com/ebbe9dc8324823a158574a27c1d97744

そして, 「Main Camera」は使わないので削除します.

https://gyazo.com/039a09591e060e6c6f3f6fbef08dce6b

ここまでが実装の下準備になります.

hr.icon

実装編

「Hierarchy」から「Vuforia Engine」→「ImageTarget」をクリックします.

https://gyazo.com/0e206dc7ea6f9d0115eeaec6122bb0f9

「ImageTarget」の「Inspector」から「Image Target Behaviour」の設定をします.

Type : From Database

Database : dclab_test(登録したデータベース名)

Image Target : dclab(登録した画像の名前)

https://gyazo.com/6b039424e5677c88a1c015d4cff5c42c

すると,先ほど登録した画像が表示されます.

https://gyazo.com/e1f66fb22c077bc9caae23b5b2c92f60

マーカを認識した時に表示するオブジェクトを生成します.今回は入門編ですので球を表示します.

「Hierarchy」から「3D Object」→「Sphere」をクリックします.

https://gyazo.com/7d742e7047ee480afbcd9e7873412109

生成した球とImage Targetをいい感じに調整します.

球のScaleを全て0.05

Image Targetと球の距離を調整

https://cdn.discordapp.com/attachments/848882412507496463/1179663642594119760/2023-11-30_15.01.59.png?ex=657a9a61&is=65682561&hm=4358ac68c14e70993650cbf26919aafe28cd58e3bd22ef146a642b0650f33abf&

このような感じになればOKです.

生成した球を「Image Target」の子オブジェクトにします.

https://gyazo.com/bd2db2c8f423ccc22ce59bb9785f74c8

以上で実装は終了です！実際に表示されるかを確認してみましょう！

https://scrapbox.io/files/656828099da083002252eaa7.mov

無事,表示されました！

hr.icon

まとめ

いかがでしたでしょうか？本記事はVuforiaを使ったUnityでのAR開発のやりかたについて紹介しました.Vuforiaは手順は多いですがその分ARらしい開発が簡単に行える非常に使い勝手の良いARプラットフォームです.今回は入門編ということで球の表示でしたが,3Dモデルやゲームなどを表示することができるので自分のやりたいようにできるというのもVuforiaのいいところだと思います.今回紹介したのはVuforiaの氷山の一角に過ぎません.本記事を読んでAR開発に興味が湧いたという方は,ぜひ自分で調べて色々な実装をしてみてください.

それでは,またどこかでお会いしましょう！おつやっぴー！！