おもちゃラボ

Unityで遊びを作っていきます

【Unity】Vuforiaを使ってARを表示する手順(2018年版)

Unity2018から、Vuforiaが標準機能としてUnityの一部に組み込まれるようになり、
さらに便利に使えるようになりました。

f:id:nn_hokuson:20180828191934j:plain:w400

実際に、Maker Faire 2018で展示したこちらのアプリも
Unity2018とVuforiaを使って作成しています。

nn-hokuson.hatenablog.com

ここではUnity2018からVuforiaを使う方法を紹介していきます。

Vuforiaを使用できるようにする

まずはUnityプロジェクトを作成します。2D/3Dは3Dを選択しておきましょう。

f:id:nn_hokuson:20180823201514p:plain:w450

続いてVuforiaのライブラリをインポートします。

メニューバーから「Edit」→「Project Settings」→「Player」を選択して、インスペクタのXR Settingsから「Vuforia Augmented Reality Support」にチェックを入れてください。

f:id:nn_hokuson:20180823194043p:plain:w500

Vuforiaにマーカー画像を登録する

続いて、ARマーカーとして使いたい画像を登録します。

ARマーカー用の画像は、そのままUnityプロジェクトに入れるのではなく一旦サーバーで特徴点解析をしてから、その結果をプロジェクトに追加します。

まずはデータベース(Database)を作成し、そのデータベースに対してマーカー(Target)を追加していきましょう。

データベースを作成する

Vuforiaのページに移動し「Develop→Target Manager→Add Database」をクリックします。
f:id:nn_hokuson:20180822191242p:plain:w600

Create Databaseの画面で、Nameにデータベース名、TypeはDeviceにチェックを入れてCreateボタンをクリックしてください。
f:id:nn_hokuson:20180822192239p:plain:w500

マーカー用の画像(Target)をデータベースに追加する

作成したSampleデータベースをクリックし、「Add Target」ボタンをクリックします。

f:id:nn_hokuson:20180822192754p:plain

Add Targetの画面で、Typeは「Single Image」、FileはBrowseボタンを押してマーカーにしたい画像をアップロードします。Widthには「1」を設定し、Addボタンをクリックします。
f:id:nn_hokuson:20180822193159p:plain:w400

アップロードしたマーカー画像はサーバーで特徴点解析を行い、マーカーとしての認識精度を5つ星で評価してくれます。

実用的には★2以下はマーカーとして使うには難しいイメージです。
f:id:nn_hokuson:20180822193450p:plain

特徴点ファイルをダウンロードする

最後に作成した特徴点ファイルをダウンロードするため、「Download Database(All)」をクリックしてください。

f:id:nn_hokuson:20180823194611p:plain

Unity Editorを選択してダウンロードボタンをクリックします。

f:id:nn_hokuson:20180823194508p:plain:w300

Vuforiaで表示する3Dモデルを配置する

先程ダウンロードしたUnityのパッケージをダブルクリックして
プロジェクトにインポートしてください。

f:id:nn_hokuson:20180823195310p:plain:w300

Vuforiaでは通常のMain Cameraではなく、AR Camera を使います。

ヒエラルキーウインドウでMain Cameraを選択し、「右クリック」→「Delete」でカメラを消したうえで、「Create」→「Vuforia」→「AR Camera」を選択してAR用のカメラを追加しましょう。

f:id:nn_hokuson:20180823195531p:plain:w250

次にマーカーになる画像を追加します。ヒエラルキーウインドウから「Create」→「Vuforia」→「Image」 を選択してください。

f:id:nn_hokuson:20180823200525j:plain

マーカにはVuforiaのサイトで設定した画像が自動的に設定されます。マーカーの画像を変更したい場合は、ヒエラルキーウインドウでimageTargetを選択した状態でインスペクタから、「Image Target Behaviour」の「Image Target」を設定します。

f:id:nn_hokuson:20180823200829p:plain:w300

マーカー上に表示する3Dオブジェクトはマーカー画像の子要素にする必要があるあります。ここでは、立方体をマーカー上に表示してみましょう。

ヒエラルキーウインドウから「Create」→「3D Object」→「Cube」を選択して立方体を生成し、マーカー上に移動し、ヒエラルキーウインドウでCubeをimageTargetにドラックして子要素に設定します。

f:id:nn_hokuson:20180823201141j:plain:w600

ライセンスキーを作成して設定する

最後にVuforia を使うために必要なライセンスキーの設定をおこなないましょう。

ヒエラルキーウインドウでAR Cameraを選択した状態で、インスペクタから「Vuforia Behaviour」→「Open Vuforia Configuration」をクリックしてください。開いたエディタで「Add License」をクリックします。

f:id:nn_hokuson:20180823202102p:plain:w350

f:id:nn_hokuson:20180823202109p:plain:w350

Vuforiaのサイトに移動するので、「License Manager」→「Get License Key」をクリックしてください。

f:id:nn_hokuson:20180823202546p:plain:w550

AppNameを適当に設定し、チェックボックスにチェックを入れたら「Confirm」ボタンを押してください。

f:id:nn_hokuson:20180823202855p:plain:w350

ライセンスキーが生成されるので、それをコピーしてUnityのインスペクタから「App License Key」の欄に貼り付けます。

f:id:nn_hokuson:20180823203035p:plain:w300f:id:nn_hokuson:20180823203304p:plain:w300

実行結果

エディタの実行ボタンを押すとWebカメラが起動し、カメラにマーカーをかざすと指定した立方体がARで表示されます。
f:id:nn_hokuson:20180828191410j:plain

Vuforiaを実際に使うときにハマりやすいポイントは、こちらにまとめています。合わせで御覧ください!
nn-hokuson.hatenablog.com

Unityの教科書もよろしくおねがいします!

Unityの教科書 Unity 2018完全対応版 2D&3Dスマートフォンゲーム入門講座 (Entertainment&IDEA)

Unityの教科書 Unity 2018完全対応版 2D&3Dスマートフォンゲーム入門講座 (Entertainment&IDEA)