こんにちは！ エンジニアの宮Pです😎
前回に引き続き、Vuforiaを使ってARコンテンツを作ってみます。

前回は「Image」をマーカーにして、A4用紙に印刷したイラストを読み込ませてARを表示させました。

今回は「Cylinder」、つまり円筒をマーカーにしてみます。

VuforiaのDatabaseを登録

まずはVuforiaのDeveloper Portalを開いて、ターゲットを追加していきましょう。

ログインしてみたら、この数週間の間にホーム画面のメニューが変更されたようです。
…でも前回のVuforiaの記事への影響は小さいので、アップデートは無しにしましょう😅

前回の記事では「Develop」を選んでから「Target Manager」と述べましたが、今回（2024年3月時点で）は直接「Target Manager」を選んでください。

Target Manager画面に移ったら[Add Database]ボタンをクリックしてDatabaseを作成します。
Database Nameには任意の名前を入れてください。
Typeは前回と同様に「Device」のままにしておきます。

今回使うCylinder用のターゲットが追加されました。

この追加されたデータベースを選択、[Add Target]ボタンをクリックして新たにターゲットを追加します。

Cylinder情報を設定

A4用紙に弊社ロゴを印刷して、これを円筒にしたものをターゲットとして使います。
この円筒の情報をVuforiaで定義していきます。

Add Targetダイアログが表示されたら、「Cylinder」を選択して必要な情報を入れていきます。
Bottom Diameter / Top Diameterは上面と下面の直径です。今回はA4用紙を丸めて円筒を作るので、21センチ÷π(3.14)で約6.7センチ。Unity上で「1.0」は1メートルなので、0.067と入力します。
Side Lengthは円筒の高さです。A4縦サイズの29.7センチを0.297と入力します。
Nameには何か分かりやすそうな名前を入力してください😉

こんな感じでCylinderターゲットが追加されました。

このターゲット（画面の例では「Bunmeisha_Cylinder」）をクリックすると、実際のマーカーの様子が表示されます。

この円筒にテクスチャを貼り付けます。
いつもの弊社ロゴをA4縦にレイアウトしたものです。ロゴ自体は正方形に近いサイズなので、用紙の3分の1くらいには何も書かれていませんが、全面に描かれたイラストをテクスチャとしても問題はありません。

「Upload Side」をクリックして、この画像をアップロードすると、Cylinderにテクスチャが貼り付けられます。

上部メニューの「Cylinder_Sample」部分をクリックして、Databaseの管理画面に戻ります。
テクスチャを貼ったデータベースにチェックを入れて、[Download Database  (1)]ボタンをクリックしてください。

Download Databaseダイアログでは「Unity Editor」を選択します。

Vuforiaのエンジンもアップデートされていたので、ver.10.21をダウンロードしておきます。

Unityプロジェクトを作成

前回と同様に、Unityで3Dのプロジェクトを新規作成します。
Vuforiaを使うために、Unity側で以下の設定をおこないます。
・Build SettingsでAndroidを選択してSwitch Platformする
・Player Settingsを開いて、RederingのAutoGraphics APIのチェックを外す
・Graphics APIsからVulkanを削除する
・IdetificationのMinimum API LevelをAndroid 8.0 ‘Oreo’ (API lever 26)にする
・ConfigurationのScripting BackendをMonoからIL2CPPにする
・同じくConfigurationのTarget ArchitecturesのARMv7のチェックを外し、ARM64にチェックを入れる

AssetメニューのImport Package > Custom Packageの順に選択して、ダウンロードしたVuforiaエンジン（add-vuforia-package-10-21-3.unitypackage）をインポートします。
チェック項目はそのままで[Import]ボタンをクリックしてください。
インストール中にVuforia Engineのアップデートを促すダイアログが表示されたら、[Update]ボタンをクリックしてエンジンを更新してください。

初期設定はこれで終わりです。
いよいよARコンテンツを作っていきます。
前回の記事ではちょっと省略しすぎたようなので、今回はもう少し丁寧に解説していきます😉

Hierarchyウィンドウを右クリック、Vuforia Engine > AR Cameraの順に選択して、シーンにARカメラを追加します。
元からあったMain Cameraは削除してください。

Vuforiaライセンスキーの登録

この先の処理を進めるために、Vuforiaのライセンスキーも登録しておきます。
AR CameraのInspectorダイアログで「Open Vuforia Engine Configuration」をクリックしてください。

App License Keyに前回のImage Targetと同じライセンスキーを貼ります。
ライセンスキーをメモしておいたファイルを無くしてしまった場合には、[Add License]ボタンをクリックしてください。
VuforiaのLicenseページが開かれるので、そこからライセンスキーをコピーして貼り付けてください。

Cylinderマーカー登録

AssetメニューのImport Package > Custom Packageの順に選択して、Vuforiaのサイトで生成したCyliderマーカーのunitypackageファイルを選択します。

ProjectダイアログでAssets > Editor > Vuforia > CylinderTargetTexturesの中を確認すると、Vuforiaのサイトで作ったターゲットが追加されていることが分かります。

Hierarchyウィンドウを右クリックして、Vuforia Engineの中からCylinder Targetを追加します。

Inspectorを見ると、Database、Cylinder Targetに今回作ったターゲットが設定されています。
もしも設定されていない場合は、それぞれのプルダウンメニューから設定してください。
Sceneビューでズームアップすると、例のターゲットが見つかります。

ARオブジェクトを追加

この円筒マーカーを検出したときに表示させるオブジェクトを作ります。
今回はオレンジ色のCubeを作りました。
サイズは10センチ四方にしたいので、ScaleのXYZをそれぞれ0.1にしています。
このCubeがCylinder Tagetの子オブジェクトクトになるようにHierarchyダイアログにドラッグ＆ドロップしてください。

CubeをDuplicateして4つに増やしてみました。

なおかつ、前回使ってスクリプトを貼り付けて、円筒の上空でCubeがクルクル回るようにします。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class rotate : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        Transform myTransform = this.transform;
        myTransform.Rotate(0.5f, 0.5f, 0.5f);
    }
}

ビルドをした後、Android端末にインストールして、正常に動作するかを確認してみます。

Unity上で定義したように、円筒の上空に4つのCubeが表示されました。

まとめ

今回はVuforiaを使って、Cylinderターゲットを認識するARコンテンツを作ってみました。
Cylinderを作成する画面では、上面と下面のサイズをそれぞれ異なる値にも設定できます。つまり「先端が細くなっている」ものや「逆三角形に見える」ものもターゲットにすることができます。

この記事の前半のほう、Vuforiaのサイト内での設定は一見複雑そうに見えますが、実際にやってみると割とサクサクと進められます。
前回の記事も参考に、ぜひ色んなマーカーを作って試してみてください😋

私たちは、お客様のご要望にあわせて様々なコンテンツ、アプリを制作いたします。
ご質問やご要望は、＜お問い合わせページ＞よりお送りください。