前回、Android用の ARCore SDK についている、２D画像をマーカーとして ARオブジェクトを表示する Augmented Image の設定の仕方を説明しました。
【 ARCore のサンプル Augmented Image を試す Part1 】
【 ARCore のサンプル Augmented Image を試す Part1 】
今回は、実際にそれを利用して自分の ARアプリを作るための基礎として、マーカー画像の変更方法と、ARオブジェクトとして表示される３Dオブジェクトの変更の方法を説明します。
（以下の画像が３Dオブジェクトまで変えた例です。）
【４．マーカー画像を変更】
4.1. マーカー画像の確認
まずは、サンプルとして登録してあるマーカー画像を確認してみましょう。Projectビューから以下のフォルダを開きます。
Assets > GoogleARCore > Example > AugmentedImage > Images
そこに、「Example Database」と言うDatabaseがありますので、クリックします。
Inspectorビューに このサンプルの Databaseに登録されている画像が表示されます。前回使用した、地球の画像が1行目に登録されています。
サンプルとして、10枚の画像が登録されています。
この Databaseには 1000枚の画像を登録することができます。
まずは、サンプルとして登録してあるマーカー画像を確認してみましょう。Projectビューから以下のフォルダを開きます。
Assets > GoogleARCore > Example > AugmentedImage > Images
そこに、「Example Database」と言うDatabaseがありますので、クリックします。
Inspectorビューに このサンプルの Databaseに登録されている画像が表示されます。前回使用した、地球の画像が1行目に登録されています。
サンプルとして、10枚の画像が登録されています。
この Databaseには 1000枚の画像を登録することができます。
4.2. マーカー画像の変更
では自分の新たな画像を、この Databaseに登録してみましょう。新規登録しても良いですが、ここでは最も簡単な方法として、既存の画像を自分の画像に変更してみます。
では自分の新たな画像を、この Databaseに登録してみましょう。新規登録しても良いですが、ここでは最も簡単な方法として、既存の画像を自分の画像に変更してみます。
まず準備として、自分の画像をUnityにコピーします。ファイルエクスプローラーから自分の画像をUnityエディタの Projectビューのサンプル画像が保存してあるフォルダにドラックアンドドロップします。
（私は Lab7からリリースしているゲームアプリ Merlion Adventure のアイコンを選択。ちなみに、現在Merlion Adventure２を開発中です！（宣伝））
また、ARCore のサイトによると、このマーカーとして使用する画像は、以下の仕様に沿っている必要があるそうです。
・PNG または JPEGファイルフォーマット。（高圧縮されているとパフォーマンスが悪くなる可能性あり）
・カラー画像でも白黒画像でも対応。
・解像度は 300 X 300ピクセル以上にすべき。
・Database 登録時に出るスコアは 75以上であるべき。
（私は Lab7からリリースしているゲームアプリ Merlion Adventure のアイコンを選択。ちなみに、現在Merlion Adventure２を開発中です！（宣伝））
また、ARCore のサイトによると、このマーカーとして使用する画像は、以下の仕様に沿っている必要があるそうです。
・PNG または JPEGファイルフォーマット。（高圧縮されているとパフォーマンスが悪くなる可能性あり）
・カラー画像でも白黒画像でも対応。
・解像度は 300 X 300ピクセル以上にすべき。
・Database 登録時に出るスコアは 75以上であるべき。
そして、Inspectorビュー上の「Example Database」の1行目にある地球のマーカー画像を変更してみます。画像の右下にある「Select」をクリックすると、Unityエディタ上のイメージ画像が選択肢として表示されます。そこから、今 Unity エディタ上にコピーした画像を選択します。
設定は以上です。では、新しい自分の画像が認識されるか試してみましょう。
設定は以上です。では、新しい自分の画像が認識されるか試してみましょう。
4.3. 新しいマーカー画像を試してみる
前回、実機テストでやったように、USBケーブルで Android端末を接続します。「Build And Run」をクリックして、ビルドとアプリのインストールを実行させます。ビルド時に聞かれるファイル名は何でもけっこうです。
前回、実機テストでやったように、USBケーブルで Android端末を接続します。「Build And Run」をクリックして、ビルドとアプリのインストールを実行させます。ビルド時に聞かれるファイル名は何でもけっこうです。
実機側でアプリが立ち上がります。アプリが「Fit the image you're scanning」と表示してマーカー画像を探し始めます。
また、PCの画面を直接認識させます。あっさり認識してくれました。
【５．表示３Dオブジェクトを変更】
5.1. 新規Databaseを登録
次に、マーカー画像を認識時に新たな３Dオブジェクトを表示するように変更してみましょう。ここでも、より簡単な方法をとり、既存のサンプルを極力使うことにします。
しかし、Databaseは新たに登録してみましょう。（既存の Databaseを使う場合は、ここはスキップです。）
Projectビュー上に先ほどコピーした自分のマーカー画像（フォルダ：Assets > GoogleARCore > Example > AugmentedImage > Images）を右クリックします。
そこから、以下のようにたどり、AugmentedImageDatabase をクリックします。
Create > GoogleARCore > AugmentedImageDatabase
すると、新たな Databaseができますので、Projectビュー上で名前を変更します。ここでは、「AR Image Test」と変更しました。
次に、Projectビュー上の以下のフォルダにある AugmentedImagesSessionConfig をクリックします。
Assets > GoogleARCore > Examples > AugmentedImage > Configurations > AugmentedImagesSessionConfig
Assets > GoogleARCore > Examples > AugmentedImage > Configurations > AugmentedImagesSessionConfig
そして、Inspetorビュー上の「Augmented Image Database」に、先ほど作成した Databaseをドラックアンドドロップします。
5.2. 関連C#スクリプトを確認
今回はより簡単に行う目標があるので、スクリプトをいじることはしません。しかし、Augmented Image に関連する C#スクリプトにどんなものがあるかだけ確認しておきましょう。（もちろんオプションです。）
今回はより簡単に行う目標があるので、スクリプトをいじることはしません。しかし、Augmented Image に関連する C#スクリプトにどんなものがあるかだけ確認しておきましょう。（もちろんオプションです。）
Projectビュー上のフォルダ：Assets > GoogleARCore > Examples > AugmentedImage > Scripts に２つの C#スクリプトがあります。それぞれ確認してみます。
【AugmentedImageExampleController】
Hierarchyビュー上のオブジェクトにアタッチされたスクリプト。Updateメソッド内で状態が Trackableの画像の有無を確認して、３Dオブジェクトを表示させます。
【AugmentedImageVisualizer】
３Dオブジェクト Prefabにアタッチされているので、Prefab作成後に毎フレーム 以下の Updateメソッドが呼ばれます。
5.3. 新たな３Dオブジェクトを登録
ここでも、より簡単な作業で新たな３Dオブジェクトの表示を実現してみましょう。そのため、スクリプトはいじらず、既存のサンプルを Unityエディタ上で少しいじるだけとします。
ここでも、より簡単な作業で新たな３Dオブジェクトの表示を実現してみましょう。そのため、スクリプトはいじらず、既存のサンプルを Unityエディタ上で少しいじるだけとします。
まず、現在表示している Prefabを確認します。Projectビュー上の、 Assets > GoogleARCore > Examples > AugmentedImage > Prefabs フォルダに「AugmentedImageVisualizer」と言うPrefabがあります。
この Prefabがサンプルプログラムから呼び出されているので、この Prefabを変更してしまいましょう。
この Prefabを Hierarchyビューにドラックアンドドロップします。
Inspectorビューをみると４つのゲームオブジェクトが登録されています。
これらの４つのゲームオブジェクトが認識したマーカー画像の4隅に額縁のように表示されています。
Hierarchyビューをみると、これらは今見ているPrefabの子オブジェクトとしてあります。
それら４つのゲームオブジェクトを右クリックメニューから削除します。
そして、他の自分の３Dオブジェクトを同じように Prefab「AugmentedImageVisualizer」の子オブジェクトにします。そして、Inspectorビューからそれらを登録します。
この Prefabの名前を変更します。ここでは「AR Image Test」としました。そして、これをHierarchyビューからProjectビューにドラックアンドドロップして、新たなPrefab化を行います。
Prefab化したら、Hierarchyビュー上には必要ないので、右クリックメニューから削除を行います。
この Prefabがサンプルプログラムから呼び出されているので、この Prefabを変更してしまいましょう。
この Prefabを Hierarchyビューにドラックアンドドロップします。
Inspectorビューをみると４つのゲームオブジェクトが登録されています。
これらの４つのゲームオブジェクトが認識したマーカー画像の4隅に額縁のように表示されています。
Hierarchyビューをみると、これらは今見ているPrefabの子オブジェクトとしてあります。
それら４つのゲームオブジェクトを右クリックメニューから削除します。
そして、他の自分の３Dオブジェクトを同じように Prefab「AugmentedImageVisualizer」の子オブジェクトにします。そして、Inspectorビューからそれらを登録します。
この Prefabの名前を変更します。ここでは「AR Image Test」としました。そして、これをHierarchyビューからProjectビューにドラックアンドドロップして、新たなPrefab化を行います。
Prefab化したら、Hierarchyビュー上には必要ないので、右クリックメニューから削除を行います。
次に、Hierarchyビュー上の「Examplecontroller」をクリックして、Inspectorビュー上に「Augmented Image Example Controller」コンポーネントを表示させます。
そこにある、「Augmented Image Visualizer」項目に、今作成した Prefabを Projectビューからドラックアンドドロップします。
これで、設定は終了です。それでは実機で試してみましょう。
USBケーブルで Android端末を接続します。「Build And Run」をクリックして、ビルドとアプリのインストールを実行させます。
先ほどと同じように PC画面上の画像を直接認識させてみます。以下のように自分で登録した３Dオブジェクトが元の額縁に変わって表示されました。
そこにある、「Augmented Image Visualizer」項目に、今作成した Prefabを Projectビューからドラックアンドドロップします。
これで、設定は終了です。それでは実機で試してみましょう。
USBケーブルで Android端末を接続します。「Build And Run」をクリックして、ビルドとアプリのインストールを実行させます。
先ほどと同じように PC画面上の画像を直接認識させてみます。以下のように自分で登録した３Dオブジェクトが元の額縁に変わって表示されました。
このように、Augmented Image はマーカー画像を登録、認識する部分の機能となります。
これで、マーカー画像認識後ただ３Dオブジェクトを表示するアプリは簡単に作れます。そんなものは今更珍しくもないので、これを利用して何が実現できるか考えていく必要がありますね。
これで、マーカー画像認識後ただ３Dオブジェクトを表示するアプリは簡単に作れます。そんなものは今更珍しくもないので、これを利用して何が実現できるか考えていく必要がありますね。
Sponsored Link
E-Mail: 