AR空間に画像付きのオブジェクトを生成する④

　ここから２回の手順に分けて、AR 空間内に画像の添付された３Ｄオブジェクトを生成します。
なお２Ｄオブジェクトにも応用できます。

Scene ビュー画像

Game ビュー画像(エディター)

実行動画　エディター

設計

　まずは AR 空間に生成するゲームオブジェクトを作成します。
作成したらプレハブにしておき、ゲーム実行時にスクリプトから動的な生成ができるようにします。

　ゲームオブジェクトには画像を添付しますが、画像をそのまま添付出来ませんので、マテリアルを作成します。

　また後程になりますが、画像はゲーム内で変更する必要もあります。こちらはマテリアルを変更する機能を利用することで画像変更が可能になりますので、
マテリアル制御を行うための処理を持つスクリプトも作成した上でプレハブにします。

　最後に、プレハブのゲームオブジェクトを生成する機能を持つスクリプトを作成し、実際にプレハブのゲームオブジェクトが生成されるかデバッグを行います。
ゲームオブジェクトを生成する機能が正常に動作していることを検証しておくことにより、生成機能には問題がないことを実証しておきます。

　例えば、AR 空間において上手くゲームオブジェクトが生成されない時、すでに生成機能には問題がないことが判明していれば、
問題となっているのは生成機能ではなく、平面感知機能などの AR 側の問題の可能性である、という風に、問題点を絞って検証していくことが出来るためです。

　問題点の切り分け手法を効果的に活用するためにも、各機能ごとに事前検証を行っておくことをお勧めします。

　まずここまでをこの手順で行い、次の手順では平面感知機能と
タップ時にプレハブにしたゲームオブジェクトを生成する機能を実装して完成させます。

画像のインポート

　任意の画像ファイルを Unity にインポートしてください。
Unity で扱える画像ファイルの拡張子は JPG や PNG などです。マニュアルを確認しておくとよいでしょう。
　
　インポートする際には、事前に Textures といったフォルダを作成しておいてから、
そのフォルダ内にドラッグアンドドロップして画像ファイルを追加すると管理しやすくなります。

参考サイト

Unity 公式マニュアル
テクスチャ

Unity 公式マニュアル
テクスチャのインポート

３Ｄオブジェクトの作成と設定

　３Ｄオブジェクトに画像ファイルを割り当てるには画像を元にしたマテリアルが必要になります。
マテリアルは手動で作成も出来ますが、３Ｄオブジェクトがあれば自動的に作成してくれる機能があります。

　そこでマテリアルの作成の前に、３Ｄオブジェクトを作成しておきます。
その方がマテリアル作成が楽になるためです。

　ヒエラルキーの空いている場所で右クリックをしてメニューを開き、3D Object → Quad を選択します。
名前を TextureView に変更します。

　Quad は薄い形状の３Ｄオブジェクトです。ゲーム画面に映画館のスクリーンのようなものを作ったり、
今回のように画像を片面に貼り付けて展示するようなケースに役立つメッシュ形状のオブジェクトです。

　Quad は表面側にのみマテリアルを貼り付けることが出来ます。

ヒエラルキー画像

インスペクター画像

Scene ビュー画像①

Scene ビュー画像②

マテリアルの作成

　３Ｄモデルの場合、インポートした画像をそのままゲームオブジェクトに貼り付けることは出来ません。
マニュアルにもあるように、画像を使ったマテリアルを作成し、シェーダーの設定をすることにより、
ゲームオブジェクトに画像を貼り付けることが出来ます。

　マテリアルの作成方法はいくつかありますが、最も簡単なのはシーン内にある３Ｄオブジェクトに画像ファイルをドラッグアンドドロップすることです。
この手順を行うと、画像を元にしたマテリアルを自動的に作成してくれます。

　それ以外にはスクリプトを作成するのと同じようにメニューからマテリアルが作成できます。
その場合には MainMaps 内の Albedo に画像ファイルをドラッグアンドドロップしてアサインします。

　いずれの場合にも Shader の設定は Standard になります。
こちらはそのまま利用しますので変更する必要はありません。

マテリアル設定時のゲームオブジェクト

　マテリアルを作成したら、マテリアルを選択します。
まずは名前をわかりやすい名称に変更しておきます。ここでは material_0 としました。
画像が増えるということは同じだけマテリアルも増えるため、連番式の名前にすることで管理しやすくするためです。

　またマテリアル専用のフォルダも用意しておくとよいでしょう。

　マテリアルを選択するとインスペクターがマテリアル用の設定に切り替わりますので、こちらで Rendering Mode を設定します。

　PNG 形式の画像ファイルで画像に透過性がある場合、Fade に設定します。
それ以外は Opaque に設定します。設定に合わせてシーン内あるゲームオブジェクトの見た目も変わります。

Rendering Mode　ーOpaqueー

Rendering Mode　ーFadeー

参考サイト

Unity 公式マニュアル
マテリアル Rendering Mode

TextureView スクリプトの作成

　作成したゲームオブジェクトにアタッチし、マテリアルの変更を行うためのメソッドを仮で用意しておきます。
マテリアルは MeshRenderer コンポーネント内に含まれている機能の１つです。
そのため、マテリアルを制御する場合には、マテリアルを管理している MeshRenderer コンポーネントの制御が必要になります。

　今回はまだマテリアルの差し替えは行いませんが、TODO の形で次回以降の修正に向けてコメントを残しておきます。

　またメソッド内にはデバッグを活用することにより、メソッドへの実行命令が正常に動作しているかを検証しておきます。

TextureView.cs

<= クリックすると開きます。

using UnityEngine;

public class TextureView : MonoBehaviour
{
    private MeshRenderer meshRenderer;　　　　// マテリアルの制御に必要なコンポーネント


    public void SetUpTextureView(int dataNo) {
        
        if(TryGetComponent(out meshRenderer)) {

　　　　　　LogDebugger.instance.DisplayLog("画像のID番号 : " + dataNo);

            // TODO マテリアルの変更処理により、マテリアルを差し替えることで画像を変える
            
        }
    }
}

　スクリプトを作成したらセーブします。

TextureView ゲームオブジェクトに TextureView スクリプトをアタッチし、プレハブにする

　TextureView ゲームオブジェクトに TextureView スクリプトをドラッグアンドドロップしてアタッチします。

　アタッチの有無をインスペクターにて確認します。

インスペクター画像

　正常にアタッチされていることを確認後、TextureView ゲームオブジェクトをプレハブにします。
Prefabs フォルダを事前に用意しておいて、その中にプレハブ化することで管理しやすくなります。

　プレハブにしたら、ヒエラルキーより TextureView ゲームオブジェクトを削除します。

Prefabs フォルダ

プレハブ編集モード

TextureGenerator スクリプトの作成

　プレハブを生成するためのスクリプトを作成します。
生成後の管理も合わせて行います。

　今回は Start メソッドを利用して、生成する機能を持つメソッドを実行しています。
そのため、ゲーム実行時にプレハブのゲームオブジェクトを生成されるようになるので、生成機能のデバッグを行っています。

　平面感知機能と連動して動くように、プレハブのゲームオブジェクトを生成する機能の他、
すでにプレハブのゲームオブジェクトが生成されている場合には重複生成せずに移動させる機能などをメソッドで用意しています。

TextureGenerator.cs

<= クリックすると開きます。

using UnityEngine;

/// <summary>
/// AR 空間にオブジェクトを生成/移動するシングルトンクラス
/// </summary>
public class TextureGenerator : MonoBehaviour
{
    public static TextureGenerator instance;
    
    [SerializeField, Tooltip("AR空間に生成する画像オブジェクト")]
    private TextureView textureViewPrefab;
    
    private TextureView spawnedObject;    // 生成した画像オブジェクトを代入しておく

    
    void Awake() {
        // シングルトン化する
        if (instance == null) {
            instance = this;
            DontDestroyOnLoad(gameObject);
        } else {
            Destroy(gameObject);
        }
    }

    void Start() {
　　　　// デバッグ用
        GenerateTextureImage(0, Vector3.zero);
    }

    /// <summary>
    /// 画像オブジェクトの生成
    /// </summary>
    /// <param name="textureId"></param>
    /// <param name="generatePosition"></param>
    public void GenerateTextureImage(int textureId, Vector3 generatePosition) {
        spawnedObject = Instantiate(textureViewPrefab, generatePosition, Quaternion.identity);
        spawnedObject.SetUpTextureView(textureId);
        Debug.Log("生成");
        LogDebugger.instance.DisplayLog("生成");
    }

    /// <summary>
    /// 生成されている画像オブジェクトの移動
    /// </summary>
    /// <param name="nextPosition"></param>
    public void MoveTextureImage(Vector3 nextPosition) {
        spawnedObject.transform.position = nextPosition;
    }

    /// <summary>
    /// 画像オブジェクトの生成の有無
    /// true なら生成済
    /// </summary>
    /// <returns></returns>
    public bool GetSpawnedObject() {
        return spawnedObject != null;
    }
}

　スクリプトを作成したらセーブします。

TextureGenerator ゲームオブジェクトを作成し、設定を行う

　ヒエラルキーの空いている場所で右クリックをしてメニューを開き、Create Empty を選択します。
新しいゲームオブジェクトが作成されますので、名前を TextureGenerator に変更します。

ヒエラルキー画像

　その後、先ほど作成した TextureGenerator スクリプトをドラッグアンドドロップしてアタッチします。

　インスペクターを確認してアタッチの有無を見た上で、アサイン情報が表示されていますので
プレハブの TextureView ゲームオブジェクトをドラッグアンドドロップしてアサインします。

インスペクター画像

　以上で設定は完了です。

ゲームを実行して動作を確認する

　まずはエディターにてゲームを実行し、実行時にプレハブのゲームオブジェクトを生成されるか確認します。
LogDebugger によってゲーム画面にログが表示されるかも一緒に確認しておきましょう。

実行動画　エディター

動画ファイルへのリンク

　問題なければ、実機でもテストを行ってください。

次の手順のための準備を行う

　１点、修正を行います。

　TextureGenerator スクリプト、Start メソッド内の処理をコメントアウトします。
この処理によって、ゲーム実行時にプレハブのゲームオブジェクトを生成していましたが、これはあくまでも生成機能が正常に動作しているかを確認するためのデバッグ用の処理であるため、
次回以降は不要となるためです。

TextureGenerator.cs

    void Start() {
　　　　// デバッグ用
        //GenerateTextureImage(0, Vector3.zero);   //  ←　コメントアウトします
    }

　以上でこの手順は終了です。

　=>　次は　手順５　AR空間に画像付きのオブジェクトを生成する⑤　です。

このページを編集するこのページを元に新規ページを作成

印刷する

コメント（0）

AR空間に画像付きのオブジェクトを生成する④ - i-school 先頭へ

コメントをかく

名前	ユーザIDを使用しないで書き込む	ユーザーIDを使う	ログインする
画像コード	画像に記載されている文字を下のフォームに入力してください。
備考	「http://」を含む投稿は禁止されています。
本文
利用規約をご確認のうえご記入下さい

i-school