UnityでARの開発をしたいので検証メモ。
UnityでARの開発をする場合はARKitやARcore等がありますが、
今回は一度記事を書いた事があるVuforiaを使います。
今回の目標は、
「JAL都道府県シールを画像マーカーにして、複数のオブジェクトを表示させる」
です。
最初は低い目標から始めます。
![jal_シール](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r41.png?resize=311%2C207&ssl=1)
「JAL TODOFUKEN SEAL(JAL都道府県シール)」
JAL都道府県シールは、2017年10月から2019年3月までJALが行っていたイベントで、搭乗中に客室乗務員にプレゼントしてもらえるシールです。
客室乗務員さんの出身地など、ゆかりのある都道府県が描かれた切手風のシールで、なかなか出会えない都道府県の客室乗務員さんとか、レアなシールがあったり、コンプリートすると「コンプリートシール」をJALから貰えたりと、とても収集欲を促すゲーム性のあるイベントでした。
2019年11月7日から電子スタンプ「JAL TODOFUKEN STAMP」が始まってます。
使用機材:windows10 PC
webCam: logicool HD Pro Webcam C920
Unityのバージョン:Unity 2019 .2.17f1
マーカー画像:JAL都道府県シール
以前もUnityでVuforiaを使った記事を書いたことがありますが、
その時はVuforiaが配布していたカードを使って、サンプルを表示しただけなので、
今回はマーカーにする画像の登録からやってみます。
![]() |
|
![]() |
|
Vuforiaライセンスキー取得
VuforiaでARを扱うにはライセンスキーを取得する必要があります。
VuforiaのDeveloperのポータルサイトにいってログインします。
![vuforia_developer_log](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r02.png?resize=199%2C71&ssl=1)
筆者の登録は以前の記事の段階で済んでいるので、サクッとログインします。
VuforiaでARを使うためのライセンスキーを取得します。
[Get Development Key] をクリック
![Get Development Key](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r03.png?resize=600%2C142&ssl=1)
ライセンスネームを記入して [Confirm] をクリック
ライセンスネームはUnityのプロジェクトごとに複数取得できて後で変更可能なので、
ここでは適当に記入しても問題ありません。
筆者は「Vuforia_jal_ar」といれて [Confirm] をクリック
![License Name](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r04.png?resize=566%2C600&ssl=1)
ライセンスネームが登録されました
![License Name set](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r05.png?resize=600%2C48&ssl=1)
ライセンスネームをクリックすると
VuforiaでARを使うためのライセンスキーが表示されます。
これをコピーして後でUnityにペーストします。
![License Key](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r06.png?resize=600%2C251&ssl=1)
ARのマーカーにする画像を登録する為に画像ファイルのデータベース作成
Target Manager のタブを選択
![Target Manager tab](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r07.png?resize=327%2C82&ssl=1)
VuforiaのARで画像マーカーに使用する登録画像用データベースが必要なので。
[Add Database] をクリック
![add database](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r08.png?resize=600%2C169&ssl=1)
データベースの名前を記入して [Device] を選択して [Create] をクリック
![Databaseの作成](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r09.png?resize=630%2C375&ssl=1)
データベース名 「lj_Database」 が作られました。
![databese_lj_Database](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r10.png?resize=600%2C62&ssl=1)
ARのマーカーにする画像ファイルをアップロード
データベース名 「lj_Database」 をクリックすると登録した画像ファイルの
リスト表示画面になります。
データベースを作ったばかりなので今は何もありません。
それではマーカーにしたい画像ファイルをアップロードします。
[Add Target]をクリック
![Add Target](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r11.png?resize=600%2C109&ssl=1)
画像を登録したいので [Single Image] を選択
File: Browseボタンからローカルの画像ファイルを選びます。
widht: 実物のARに使用する画像マーカーの大きさを入力します。
1m はUnityの 1 と考えて 10cm は 0.1、1cm は 0.01
都道府県シールはだいたい5cmなので 0.05 にしました。
記入したら [Add] をクリック
![Single Image](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r12.png?resize=482%2C600&ssl=1)
複数の画像を登録しました。
画像登録したデータベースをダウンロードします。
[Download Database(All)] をクリック
![Download Database(All)](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r13.png?resize=600%2C310&ssl=1)
ARのマーカーにする画像を登録したDatabase(Package)をダウンロード
Unityで使うので、[Unity Editor] を選んで [Download] ダウンロードします。
![Database(Package)をダウンロード](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r14.png?resize=523%2C338&ssl=1)
Packageとしてダウンロードされました。
![Database(Package)](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r15.png?resize=143%2C154&ssl=1)
Vuforiaを扱うためのUnityの設定
Edit > Project Settings > Player
XR Settings の項目から
[Vuforia Augmented Reality Supported]
をチェック
![XR Settings](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r16.png?resize=600%2C419&ssl=1)
チェックしました。
![Vuforia Augmented Reality Supported](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r17.png?resize=307%2C98&ssl=1)
インストールが終了
VuforiaのAR用カメラを使うのでMain Camera を削除します
![Main Camera delete](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r18.png?resize=273%2C143&ssl=1)
Hierarchy で 右クリック
Vuforia Engine の項目が追加されてます。
VuforiaのAR用カメラを追加します。
Vuforia Engine > AR Camera
![ARcamera](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r19.png?resize=358%2C269&ssl=1)
[Accept]
![accept](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r20.png?resize=395%2C231&ssl=1)
AR Camera が追加されました。
![ARcamera add](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r21.png?resize=293%2C101&ssl=1)
Window > VuforiaConfigurationを選択
![VuforiaConfiguration](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r22.png?resize=300%2C135&ssl=1)
App License Key の欄に取得したライセンスキーをペーストします。
![App License Key](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r24.png?resize=381%2C288&ssl=1)
コピーしたライセンスキーをペーストしました。
![App License Key ペースト](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r25.png?resize=351%2C318&ssl=1)
ダウンロードした画像のデータベース(Package)をインポートします。
![import Package](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r26.png?resize=475%2C261&ssl=1)
![Database(Package)](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r15.png?resize=143%2C154&ssl=1)
パッケージをインポート
[Import]
Unityの事前設定完了しました。やっとvuforiaが扱えます。
Image Targetに画像マーカーを設定してオブジェクト表示
Image Target を作ります。
![Image Target](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r28.png?resize=362%2C197&ssl=1)
Image Target の Inspector に登録した画像が出てきました。
![Image Target Inspector](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r29.png?resize=387%2C374&ssl=1)
Image Target Behaviour の
Image Target に 他の画像もありました。
![Image Target Behaviour](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r30.png?resize=323%2C302&ssl=1)
とりあえず一つ選びます。OSAKA を選択しました。
![select osaka](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r31.png?resize=201%2C196&ssl=1)
Image Target の下に表示したいオブジェクトを作ります。
OSAKAマーカーで表示されるオブジェクトCubeを作りました。
![cube add](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r32.png?resize=454%2C308&ssl=1)
配置します。
![cube setting](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r33.png?resize=421%2C416&ssl=1)
今回はWebCamを使うのでカメラを選びます。
AR Camera のInspector
Vuforia Behaviour の
[Open Vuforia Engine configuration] をクリック
VuforiaConfiguration を開きます
![Open Vuforia Engine configuration](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r34.png?resize=517%2C131&ssl=1)
Webcam の項目
Camera Device から logicool HD Pro Webcam C920 を選択
![select webcam](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r35.png?resize=371%2C187&ssl=1)
実行
表示されました。
最初はライトの光が強すぎて画像認識がうまくいかなかったのですが、ライトを弱くしたら成功しました。
![play 1](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r36.png?resize=600%2C482&ssl=1)
Image Targetを増やして複数の画像マーカーを設定
複数出す場合はどうするのか分からない。
とりあえず Image Target を増やします。
![add imageTarget num3](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r37.png?resize=153%2C138&ssl=1)
それぞれの Image Target に別々の画像とオブジェクトを作ります
都道府県シール「HIROSHIMA 」と 「IWATE」にしました。
HIROSHIMA に Sphere
IWATE に Cylinder
を設定
あれ? 複数同時に表示されない
![play 2](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r38-1.png?resize=640%2C411&ssl=1)
複数のオブジェクトを表示
VuforiaConfiguration を開きます
Max Simultaneous Tracked Image で 同時にマーカー認識出来るMAXの数字にするようです。
3に変えました。
![Max Simultaneous Tracked Image](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r39.png?resize=517%2C185&ssl=1)
実行
良かった3つ同時に表示されました。 成功です
![play 3](https://i0.wp.com/liquidjumper.com/Home/wp-content/uploads/2020/01/unity_vuforia_r40.png?resize=640%2C543&ssl=1)
おわりに
とりあえず 目標だった 複数のオブジェクトを表示させる ことは出来ました。
オブジェクトをAR表示させる事自体は比較的楽にいけたので、これからもっと複雑な事が出来るように
いろいろと試してみたいと思います。
UnityでAR 画像マーカーの周りを回転[vuforia]
Unity2020で無くなったVuforiaを使用可能にする
![]() |
UnityでAR 2つの画像マーカーの距離に応じて伸び縮みするオブジェクト[vuforia] JAL都道府県シールを画像マーカーにしてUnity×vuforiaのARを検証するのも今回で4回目です。 |
![]() |
UnityでAR マーカーに追従しないでその場に留まるオブジェクト[vuforia] 今回の目標「画像マーカーを移動しても出現位置に留まるオブジェクト」画像マーカーはワールド座標で表示され |
■TechAcademy/テックアカデミー
週2回のビデオチャットや、毎日のチャットサポート、現役プロのメンターから課題のレビューを無制限に受けられる等、マンツーマンのサポートで基礎からしっかり学習できます。
プログラミングやデザインなど沢山のコースがありますが、ユニークなのは「Python + AI」「Unity + iPhoneアプリ」のような複数のコースを受講できるお得な「セット割り」がある事。
機械学習の基礎が学べる「Pythonコース」 ![]() |
短期間でPython・機械学習が学べるコースPythonを基礎から学び、機械学習プログラムの開発をめざします。 |
Unityコース ![]() |
短期間でゲームアプリを開発出来るようになるコースUnityの操作方法とゲームを動かす為のスクリプト、C#を学べます。 |
![]() |
|
![]() |
|
BTOパソコンの草分け的ブランドFRONTIER(フロンティア) 3DCG/動画編集/ゲーム用途に合わせてCPUやGPUなどパーツを自由に選べてコスパにもこだわる方にオススメ。 |
![]() |
|
![]() |
|
![]() |
|
![]() |
|
![]() |
|