【Unity】インタラクティブなAR Androidプログラムを自作する

1 ARシーンを作る

前回の記事でのAR顔特撮Androidプログラムの作成に続き、今回はインタラクティブなARプログラムを自作します。前のプロジェクトも使用し、Ctrl+N を使用して新しいシーンを作成し (または [ファイル] → [新しいシーン])、Assets のシーン フォルダーの下に AR シーンを選択し、[作成] をクリックして作成します。

2 ARカメラをフロントカメラとして設定

ここでも顔が認識されるので、モバイル端末のフロントカメラも使う必要があります

1. Hierarchy で AR Session Origin オブジェクトを見つけ、折りたたまれたオブジェクトを展開し、AR Camera オブジェクトを見つけます。
2. AR Camera の Inspector パネルで AR Camera Manager コンポーネントを見つけ、Facing Direction プロパティを User に設定します。
   

3 パッケージシーンの設定

メニュー バーから [ファイル] → [ビルド設定] を選択し、新しく作成したシーンをパッケージ リストに追加して、前のシーンを非表示または削除します。

4 公式の InteractiveFaceFilterAssets リソースをダウンロードします

zip のダウンロード場所はこちらです。クリックしてダウンロードしてください。
ダウンロードして解凍したら、InteractiveFaceFilter.unitypackage をプロジェクトの Assets フォルダーにインポートできます。

インポート方法:

zipファイルを解凍したフォルダ内にあるunitypackageを探して、UnityのAssetsフォルダにドラッグすると、リソースをインポートするウィンドウが出てくるので、右下のImportをクリックしてインポートします。

インポートされたリソース:

• メッシュ: スタイルの異なる 5 つのメガネ モデルがあります。
• プレハブ: インタラクション用の UI である AR_Canvas プレハブ。
• リソース: これには、独自の UI テンプレートを作成するための PSD 形式の UI テンプレートが含まれています。
• スプライト: ユーザー インターフェイスを作成するための UI が含まれています。

5 AR Face Manager の設定

このステップでは、AR Face Manager を使用して、検出されたときに顔に表示される特殊効果を AR Session Origin に伝えます。

1. Hierarchy の Cube オブジェクトを削除します。これはテスト用です。

2. AR セッション オリジン オブジェクトを選択し、AR Face Manager コンポーネントを検索してそのインスペクター ウィンドウに追加します。これは、顔の検出に使用されます。
   

6 メガネのプレハブを作成する

このステップでは、ユーザーがメガネを選択できるように、「GlassesGroup」と呼ばれる使用可能なすべてのメガネのプレハブを作成します。

1. Assets フォルダーで _InteractiveFaceFilter → Meshes を見つけ、モバイル デバイスにインストールする 3 つのメガネを Hierarchy ウィンドウにドラッグし、Inspector パネルでそれらの位置を (0,0,0) に設定します。
2. 3 組の眼鏡を選択した状態で、Create Empty Parent を右クリックして 3 組の眼鏡の空の親オブジェクトを作成し、空のオブジェクトに「GlassesGroup」という名前を付けます。
   

7 AR 顔追跡の設定

メガネが目の位置に正確に表示されるようにするには、GlassesGroup を AR Face プレハブにする必要があります。

1. AR Face コンポーネントを Inspector パネルの GlassesGroup に追加して、GlassGroup が顔の動きを追跡できるようにします。
   

2. Hierarchy の GlassesGroup を Assets → _InteractiveFaceFilter → Prefabs にドラッグして、プレハブを作成します。
   

3. 準備したプレハブを、AR Session Origin オブジェクトの AR Face Manager コンポーネントの Face Prefab にドラッグします。
   

8 試験結果

8.1 Unity でのテスト

まず、Game ビューが携帯電話の 16:9 解像度に適合していることを確認してから、Scene ウィンドウに戻り、Hierarchy ウィンドウで GlassesGroup オブジェクトを選択し、Z 軸上の位置を 0.4 に変更します。

同様に、これらのメガネをモバイル デバイスの視野の中心に表示するには、GlassesGroup プレハブの PositionZ 軸を 0.4 に変更する必要があります。

8.2 Android デバイスでのテスト

Unity でテストする場合は、Hierarchy で GlassesGroup プレハブを使用し、Android モバイル デバイスでテストする場合は、Hierarchy で GlassesGroup プレハブを非表示にする必要があります。

1. Hierarchy で GlassesGroup プレハブを非表示にします。
2. プロジェクトの構成については、この記事のセクション 3.2を参照してください。
3. Ctrl+S でシーンを保存し、メニュー バーの [ファイル] → [ビルドの設定] を選択し、[ビルドして apk をパッケージ化] を選択し、テスト用に Android デバイスにエクスポートします。
4. プログラムが開いて顔を検出すると、3 つのメガネがすべて顔に表示されます。

9 この AR シーンに基づいて独自のアイデアを追加します

9.1 眼鏡モデルのサイズ変更

プロジェクトの眼鏡モデルのサイズは、一般的な人間の顔に基づいています. 眼鏡のサイズ比率を変更したり、回転させたりして、より面白くすることができます.

9.2 インターネットから新しいモデルをインポートする

Sketchfabなどの Web サイトには、ダウンロードしてプロジェクトにインポートできる眼鏡のモデルが多数あります。モデルの選択に関しては、次の 3 つの一般的な考慮事項があります。

• モデル形式。FBX 形式など、モデルの形式が Unity でサポートされていることを確認してください。
• モデルの複雑さ: 複雑すぎて顔が多すぎて、モバイル最適化に適さないモデルを見つけないことが最善です。
• モデルのライセンス: モデルには、アーティストが使用できるものを指定する CC ライセンスがあることに注意してください。CCライセンスについてはこちらをご覧ください。
  このスチーム パンクな眼鏡のリソースは、クリエイティブ コモンズ 表示の下でライセンスされているKisielev Mikhail によるのように使用してください。

9.3 独自のモデルを作成する

独自のメガネ モデルを作成する場合は、次の点に注意してください。

• メガネの前面のみが含まれています: メガネ モデルのすべての部分が常に表示されるため、ユーザーが頭を回転させると、テンプルが耳に重なり、没入感が損なわれる場合があります。メガネが耳にかかるくらいまではモデリングできたのですが、ユーザーの顔がもう少し長いと、モデルが耳に当たらないかもしれません。
• モデルの面数を少ない範囲に保つ: 最終的なプロジェクトはモバイル デバイスで使用されるため、モデルは可能な限り最適化する必要があります。
• モデルを 1 つのマテリアルに制限する: 後でメガネの色を変更する機能を実装するため、メガネを 1 つのマテリアルに制限する必要があります。
• モデルの原点と方向: 作成した眼鏡モデルの原点はシステムの原点にある必要があり、眼鏡の向きは AR 顔に合わせる必要があります。Face_Reference_Mesh モデルは参照としてインポートできます。

10 UI インターフェイスを構成する

10.1 AR_Canvas プレハブの追加

このプロジェクトは UGUI システムを使用します。つまり、すべての UI は、すべて Canvas のサブオブジェクトである Canvas コンポーネントを使用して管理されます。

1. Assets の _InteractiveFaceFilter → Prefabs で AR_Canvas プレハブを見つけ、Hierarchy ウィンドウにドラッグします。
2. ゲーム ウィンドウで UI 表示効果を確認できます。AR_Canvas
   
   はスクリーン スペースでオーバーレイとしてレンダリングされます。つまり、AR_Canvas は常に他のオブジェクトの上にレンダリングされ、ゲーム ウィンドウの固定位置に正確に表示できます。
3. AR_Canvas は 3 つのサブオブジェクトで構成されています。メガネ ボタンとマテリアル ボタンは、それぞれメガネとメガネ マテリアルの切り替えを制御するために使用されます。EventSystem は、ユーザー入力の検出に使用されます。
   

10.2 カスタムメガネボタン

メガネの切り替えボタンは円で表示されるようになりましたが、ユーザーがどのボタンでどのメガネに切り替わったかをより直感的に区別できるようにするために、円を特定のメガネ アイコンに置き換える必要があります。

Unity はスプライト シートを使用してアトラスを保存します。これをスライスして、画像を Unity だけで使用できるようにします。

1. Assets の _InteractiveFaceFilter → Sprites の下にある UI_Icon_Glasses アトラスを見つけ、その横にある ">" をクリックして展開すると、スライスされた Sprites を観察できます。
   
2. メガネ アイコンをメガネ ボタンにマップします。ボタンの画像コンポーネントの下にあるソース画像にスプライトをドラッグ アンド ドロップして、次のことを実現します。
   

10.3 カスタム素材ボタン

眼鏡をより美しくするために、異なる素材 (色) のボタンをここで定義する必要があります。

1. Hierarchy ウィンドウで Materials Buttons を展開し、その下にある 3 つのサブオブジェクトを見つけて、Image コンポーネントの下の Color をそれぞれ変更します。
2. 最終的な効果は次のとおりです。
   

10.4 その他の試み

また、次のいくつかを試すこともできます。

• ボタンをユーザー インターフェイスの他の位置 (上部など) に移動します。アイコン コンポーネントの Rect Transform コンポーネントを変更するか、ショートカット キー W を直接使用して適切な位置に移動します。
  

• 独自のメガネ アイコンを作成する: 独自のメガネ モデルを使用している場合は、PSD ファイル UI_Icon_Glasses_Template を変更して独自のメガネ アイコンを作成できます。

11 Visual Scripting との相互作用

11.1 ビジュアル スクリプトの概要

ロジックを視覚化する方法である Visual Scripting を使用して、プロジェクトの論理関数を作成できます。

次の左右の図は、同じ論理式です。

Visual Scripting は、コーダー以外のユーザーにも、Unity Scripting アプリケーション プログラミング インターフェイス(API) 全体へのアクセスを提供します。この API には、Unity スクリプトで操作できるクラス、イベント、メソッド (動作)、およびプロパティ (設定) の定義の完全なセットが含まれています。

11.2 グラフの作成

ビジュアル スクリプトはグラフに格納され、コンポーネントの形式で任意のゲーム オブジェクトに適用できます。
1. Create Empty in the Hierarchy で空のオブジェクトを作成し、その座標が (0,0,0) であることを確認して、「Visual Scripts」という名前を付けます。
2. 「スクリプト マシン」コンポーネントを「Visual Scripts」のインスペクタ ウィンドウに追加します。

「スクリプト マシン」コンポーネントは、ビジュアル スクリプトを実行するためのツールです。

3. 「新規」を選択して新しいグラフを作成し、「MeshChanger」という名前を付けて、新しく作成された「Visual Scripts」フォルダーの下に保存します。
4. 新しく作成された「MeshChanger」グラフが「Script Machine」コンポーネントの Graph パ​​ラメーターに表示され、2 つの新しいパラメーター (Title と Summary) が表示されていることがわかります。これら 2 つのパラメータを使用して、異なる「スクリプト マシン」を区別できます。
   
5. タイトルと概要を次のように変更して、ビジュアル スクリプトの目的を示します。
   

11.3 視覚化スクリプトの編集

11.3.1 ボタンコンソール出力情報をクリックします

1. スクリプト マシン コンポーネントの [グラフの編集] をクリックして、ビジュアル スクリプト ワークスペースを開きます。初めて開く場合は、ダイアログ ボックスが表示されるので、[今すぐ変更] を選択します。
   

   そして、VisualScripting SceneVariables と呼ばれる新しいゲームオブジェクトが Hierarchy に自動的に生成されます。

2. ノードは、グラフでロジックを構築するために使用されるコンポーネントであり、いくつかの異なるタイプのノードがあります。新しいグラフが作成されるたびに、On Start ノードと On Update ノードが読み込まれます。
   
   スクリプト グラフ ウィンドウの右側には、グラフィックス ロジックが確立されるグラフ エディタがあります。ウィンドウの左側には、選択したオブジェクトの詳細を表示するグラフ インスペクタがあります。グラフ インスペクタ ウィンドウの下には、変数が作成される黒板。

3. グラフ エディタでの操作:

   • マウスの中ボタンを押したままビューをドラッグして移動を制御します。
   • ビューをズームするには、Ctrl キーを押しながらマウス ホイールをスクロールします。
   • 右クリックして新しいノードを作成します。

4. On Start ノードを選択すると、左側の Inspector ウィンドウに、ノードに「Trigger」という出力があることがリストされます。フロー (Flow) の入力 (および出力) によって、グラフの論理フローが決まります。
   

5. ここで実装する必要がある関数は、On Start ノードと On Update ノードを使用する必要はありません。したがって、それらを選択した後、右クリックして [削除] を選択して削除するか、直接 Delete キーを押して削除します。

6. 右クリックして On Button Click ノードを作成するか、[Events] > [GUI] > [On Button Click] をクリックして作成します。
   
   以前の On Start および On Update ノードとは異なり、On Button Click には Inputs セクションがあります。

   入力には、制御入力とデータ入力の 2 種類があります。

   • 制御入力は、グラフのロジック フローを制御します。
   • データ入力は、受信ノードがタスクを実行するために必要な特定のタイプの値を他のノードから受け取ります。
    

   On Button Click ノードは、ボタンが押されたときにのみイベントを実行するため、どのボタンを監視する必要があるかを知る必要があります。

   Graph Inspector ウィンドウでは、On Button Click ノードの入力がゲームオブジェクト ターゲットを探しています。このゲームオブジェクトは、On Button Click ノードが監視する入力ボタンです。

   デフォルトでは、On Button Click ノードには This というラベルの付いたパラメーターがあり、ターゲット入力が接続されます。入力ノードが接続されていない場合、ノードにはセーフガードがあります。割り当てられているゲームオブジェクトでターゲット入力を探します。

   この場合、パラメーターを空白のままにすると、On Button Click ノードは、作成した Script Machine にアタッチされた Visual Scripts ゲームオブジェクトで Button コンポーネントを探します。スクリプト イメージが AR_Canvas のボタンに添付されている場合、これは問題ありません。

   しかし、グラフが異なるゲームオブジェクト上にある場合は、変数を使用してそれを制御する必要があります。

   変数は、さまざまな種類のデータのコンテナーです。これらのデータは、数値、ゲームオブジェクト、サウンド、またはその他のものです。変数は、グラフ自体で生成することも、アプリケーション内の他のオブジェクトへの参照として生成することもできます。この例では、ユーザー インターフェイスのボタンを参照する変数を作成します。

7. 変数を作成します。変数は Blackboard で作成され、Blackboard の上部に次のようないくつかのタブがあります。
   

   • グラフ
   • 物体
   • シーン
   • アプリ
   • 保存しました
    

   これらのラベルは、作成できるさまざまなカテゴリ変数です。シーン内のゲームオブジェクトを参照する変数を作成する必要があるため、オブジェクト変数を作成します。

8. まず、オブジェクト ラベルを選択し、「glasses1Button」と入力して「+」記号をクリックするか、「Enter」を押して変数を追加します。次に、変数のタイプ (Type) を Button に設定し、階層で Glasses1Button を選択します。 Value パラメータ; 最後に設定 Blackboard で作成した「glasses1Button」変数を Graph にドラッグし、Get Variable ノードにします。
   
   
   Glasses1Button の Get Variable ノードにも This パラメータがあります。これは、On Button Click と同様に、Get Variable の戻り値が入力されていない場合のバックアップ オプションです。ただし、このノードはglasses1Buttonとして定義されているため、戻り値を持つ必要はありません。

9. Get Variable ノードと On Button Click ノードを接続し、Glasses1Button ボタンが押されたというイベントの検出を実現します。
   
   On Button Click ノードの This 値が消えていることを確認します。これは、glasses1Button 変数を受け入れるようになったためです。
   この接続後、[再生] をクリックしてプロジェクトを実行します。最初のメガネ アイコンをクリックすると、[ボタン クリック時] ノードが点滅します。これは、ボタン クリックを受信したことを意味します。

10. ボタンをクリックした後にコンソール ウィンドウにメッセージを出力するには、グラフにデバッグ ログ (メッセージ) ノードと文字列リテラル ノードを追加して、テキスト メッセージを出力します。
    
    そのうち、Debug Log (Message) ノードの機能は、Unity コンソールにメッセージを出力することです。このノードには Flow および Object 入力があり、Object 入力の内容は文字列または表示に便利な文字列表現に変換されたオブジェクトです。そのため、文字列リテラル (文字列) ノードを作成する必要があります。
    On Button Click ノードの右側にある Flow 出力を Debug Log ノードの左側にある Flow 入力に接続し、「Button 1 press!」という String Literal ノードの出力を Message 入力に接続します。 Debug Log ノードの左側。
    
    実行後、ボタンが押されたことを検出した後、コンソールが「ボタン 1 が押されました!」を出力することがわかります。

さらに、Get Name、String、および Concat ノードを使用して GameObject 名を取得し、文字列を接合して出力することを試みることができます。

11.3.2 ボタンをクリックして表示モデル イベントをトリガーする

1. ボタンをクリックしたときに表示されるメガネ モデルの効果を実現するには、まずメガネ モデルの Mesh Renderer コンポーネントを無効にする必要があります.このコンポーネントは、GameObject の可視性を管理するために使用されます.
   

2. Unity では、スクリプト内で指定したゲームオブジェクトをすばやく見つける方法がいくつかあります。その方法の 1 つは、GameObject に一意のタグであるラベルを割り当てることです。ここでは、3 つのグラスのそれぞれに固有のラベルを追加して、それらをより明確に識別および区別できるようにしています。
   

3. Hierarchy ウィンドウで GlassesGroup オブジェクトを選択し、Inspector ウィンドウの Overrides の右側にあるドロップダウン メニューを選択し、Apply All をクリックしてラベル設定をプレハブに保存します。
   

4. スクリプト グラフを更新します。タグを使用してゲーム オブジェクトを識別するには、Find With Tag ノードを使用する必要があります。
   
   You can see that this node returns an active GameObject in the scene. 前にメガネ モデルのメッシュ レンダラーを無効にしたので、それらはまだアクティブな状態にあるため、Find With Tag を使用して見つけることができます。このノードには、検索するタグの名前であるデータ (フロー) 入力が必要です。

5. On Button Click ノードの Data (Flow) 出力を Find with Tag ノードの Data (Flow) 入力に接続します。
   

6. Mesh Renderer: Set Enabled ノードを使用して、ユーザーがボタンをクリックしてメガネ モデルを表示する機能を実現します。
   
   このノードの詳細は次のとおりです。
   

   このノードを使用するには、次の 2 つのデータが必要であることがわかります。

   • ターゲット: ノードが鳴る特定のメッシュ レンダラー
   • 値: The mesh renderer is enabled or disabled. Bool 値が true (有効) に設定されている場合、指定された Mesh Renderer が有効になります。Bool 値が false (無効) に設定されている場合、メッシュ レンダラーは無効になります。

7. Find with Tag ノードのデータ (フロー) 出力を Set Enabled ノードの入力に接続し、Find with Tag ノードの結果出力を Set Enabled ノードの入力に接続し、ブール値にチェックマークを付けます。これは、ボタンをクリックすると、特定のタグのメガネ モデルが表示されることを意味します。
   
   Play Test をクリックすると、最初のボタンをクリックしたことがわかり、ボタンに表示されているメガネもシーンに表示されます。

8. 準備された 2 つのスクリプト グラフをコピーし、2 つのオブジェクト変数を追加し、残りの 2 つのボタンをそれぞれの値にドラッグして、Get Variable ノードの対応する値を変更します。次に、Find with Tag ノードの Tag 値を、以前に設定したメガネ固有のタグに変更します。
   
   
   再生テストをクリックすると、ボタンをクリックした後、メガネがシーンに 1 つずつ表示されますが、メガネを非表示にする機能がまだ追加されていないため、重なっています。

その後、apk にパッケージ化し、Android デバイスでテストを実行できます。階層内の GlassesGroup を無効にする必要があることに注意してください。

11.3.3 ボタンをクリックしてモデル切り替えイベントをトリガーする

前のセクションで眼鏡モデルが重ねて表示されたので、Mesh Renderer: Set Enabled ノードを使用して眼鏡モデルの可視性を無効にする必要があります。

1. スクリプト グラフの 3 つのボタンの Find With Tag ノードと Set Enabled ノードをコピーし、Set Enabled ノードのチェックを外します。
   

2. ユーザーがいずれかのボタンをクリックしたときにすべてのメガネ モデルが表示されないように、スクリプト グラフを変更します。Visual Script は非常に高速に実行されるため、順次実行される隠しメガネが同時に隠されているように見えます。
   

3. 次に、対応するメガネ モデルを表示する前に、すべてのメガネ モデルを非表示にする必要があるため、上記の接続されたノードを下図の矢印で示すプロセスに入れる必要があります。
   
   ただし、上の赤いボックスのシーケンスは比較的長いため、カスタム イベントに変換する必要があることがわかります。これにより、イベントを呼び出す単一のノードとして使用できます。

4. 新しいカスタム イベント ノードを作成し、「DisableRenderers」という名前を付けて、その右側の出力ストリームを上記のシーケンスの左側の入力ストリームに接続します。
   

   グラフ インスペクター パネルから、Custom Event ノードの入力ストリームが GameObject または String であることがわかります。
   
   ここでは、文字列「DisableRenderers」を使用してカスタム イベントに名前を付け、それを使用してイベントを呼び出します。

5. Trigger Custom Event ノードを使用して、上記のカスタム イベントを呼び出します。新しいトリガー カスタム イベント ノードを作成し、2 つ複製します。ノードの出力ストリームまたは入力ストリームを右クリックして切断し、OnButtonClick ノードの後に​​ノードを挿入します。
   
   Trigger Custom Event ノードはリンク (リンク) と考えることができます。このノードが呼び出されると、関連するカスタム イベントで一連のノードが開始されます。
   

[再生] をクリックしてエディターでテストを実行します。対応するボタンをクリックすると、対応するモデルが表示され、重ねて表示されないことがわかります。

その後、apk にパッケージ化し、Android デバイスでテストを実行できます。階層内の GlassesGroup を無効にする必要があることに注意してください。

11.3.4 ボタンをクリックして、モデルの色の切り替えイベントをトリガーする

スクリプト グラフを使用してロジック関数を GameObject に追加する場合、グラフが乱雑にならないように、グラフを使用して関数を実装するのが最善です。

1. [階層] パネルで、Visual Scripts オブジェクトを選択し、[インスペクター] パネルで [コンポーネントの追加] をクリックして、「スクリプト マシン」コンポーネントを追加します。次に、[新規] をクリックし、ビジュアル スクリプトに「Material Changer」という名前を付け、そのタイトル列に「Material Changer」と入力し、「マテリアル ボタンが選択されたときに、すべてのグラスに割り当てられたマテリアルを変更します」と入力します。ビジュアル スクリプトを使用してボタンをクリックし、メガネ モデルのマテリアルを変更します。
   

2. 同様に、この関数では、On Start ノードと On Update ノードを使用する必要がないため、それらを選択し、delete キーを押して削除します。最初に、新しい On Button Click ノードを作成し、オブジェクト変数を黒板に設定して、マテリアルの変更ボタンを取得します。
   
   

3. Assets の下の _InteractiveFaceFilter フォルダーに新しいフォルダーを作成し、「Materials」という名前を付けます。ボタンの色に対応する 3 つのカラー マテリアルを作成し、それぞれに「Material1」、「Material2」、「Material3」という名前を付けます。
   

4. blackboard で、3 つのマテリアルを参照する Object タイプの 3 つの変数を作成します。それらのタイプは Material であり、それらに「Material1」、「Material2」、および「Material3」という名前を付けます。
   

5. メガネ モデルの色を変更するには、メガネ モデルを取得し、そのマテリアルを変更する必要があります。したがって、Find With Tag ノードを使用して、特定のタグを持つ対応するメガネ モデルを取得する必要があります。
   

6. Mesh Renderer: Set Material ノードを使用して、メガネ モデルのマテリアルを変更します。
   

Set Material ノードには 2 つの入力があります。

• ターゲット: 変更中のゲームオブジェクトへの参照。
• 値: 適用するマテリアル。
  

その中で、Target は Find With Tag ノードから取得したメガネ モデルを使用し、Value は対応するマテリアルの変数を使用します。

7. 2 つの Find With Tag ノードと Set Material ノードを複製し、それらのタグを他の 2 つの眼鏡のタグに変更します。次の図に示すように接続して、最初のマテリアルを 3 つのメガネに同時に適用できるようにします。 [
   
   再生] をクリックしてテストすると、最初のマテリアルを 3 つのメガネに割り当てることができることがわかります。
   

同様に、他の 2 つの色材割り当て関数をスクリプト グラフに追加できます。ただし、ここではノード シーケンスの繰り返しが実際に使用されているため、次のセクションではカスタム イベントとパラメーターを使用して、他の 2 つのマテリアルの機能をさらに追加します。

11.3.5 カスタム イベントを作成し、パラメータで呼び出す

1. 最初に、すべての「Find With Tag」ノードと「Set Material」ノードをカスタム イベントに分離する必要があります。これにより、各マテリアル変更ボタンが押されたときにイベントを呼び出して呼び出すことができます。
   

2. 引数をイベントまたは関数に渡して、イベントの結果または関数の出力を変更できます。メガネ モデルには 3 つの異なるマテリアルを適用する必要があるため、どのボタンをクリックしたかによって異なります。パラメータと呼ばれる Custom Event ノードのデータ出力を追加して、これらの Set Material ノードにさまざまなデータを渡します。
   

3. 定義済みの ChangeMaterial イベントを呼び出すには、トリガー カスタム イベント ノードを使用する必要があり、これにはパラメーターも必要です。
   
   この時点で、[再生] をクリックしてテストし、最初のマテリアルを 3 つのメガネに割り当てます。

4. 手順 3 のノードを 2 回複製し、2 つの Get Variable ノードのボタンとマテリアルをそれぞれ他の 2 つのボタンとマテリアルに変更します。
   

   再生ボタンを押してエディターでテストすると、すべてのボタンが機能します。
   

次に、Hierarchy で GlassesGroup オブジェクトを無効にし、テスト用に Android デバイスにパッケージ化できます。メガネが顔の動きに追従して動く様子が観察できます。

11.3.6 ユーザーの選択をロードする

前のセクションのテストでは、ユーザーの頭が画面から離れてからビューに戻ると、以前のメガネが顔に再び表示されないことがわかりました。これは、ユーザーの選択を保存しなかったためです. ユーザーの顔が画面から離れた後、AR Face Manager は GlassesGroup コンポーネントを削除し、ユーザーの顔が再び画面に戻ると、AR Face Manager は GlassesGroup プレハブを再インスタンス化します.これはデフォルト設定のみが構成され、前のユーザーが選択したマテリアルはメガネ モデルに適用されません。

1. まず、Hierarchy 内の GlassesGroup オブジェクトが有効になっていることを確認してから、MeshChanger 視覚化スクリプトを編集し、黒板に「currentGlassesTag」という名前の文字列型変数 (オブジェクト) を作成して、ユーザーが現在選択しているメガネ タグを格納します。グラフに表示する "Set currentGlassesTag" を検索して、"currentGlassesTag" 変数の Set Variable ノードを見つけます。
   
   

2. currentGlassesTag の値は、ユーザーが選択したボタンに応じて変化する必要があるため、3 つのボタンから呼び出せるように「SaveTag」というカスタム イベントを作成し、取得したタグを出力するためのパラメータを持たせる必要があります。別のノードを追加して、現在のモデルのタグを取得するために使用されるオブジェクト タグを取得します。
   

3. Trigger Custom Even ノードを使用してタグの SaveTag イベントを呼び出し、パラメータの数を 1 に変更して、次の接続を行います。
   

4. 前のステップで、現在のユーザーが選択したメガネへの参照を取得しました。したがって、この手順では、新しい GroupGlasses プレハブがインスタンス化されるときに、ユーザーが選択したメガネを GroupGlasses に適用します。
   ここで、スクリプト マシンで「FilterUpdater」という名前の別のグラフを作成し、そのタイトル列に「Filter Updater」と入力し、「ユーザーの顔が失われ、AR によって再発見された後、最後に着用したメガネと選択された素材を再読み込みします」と入力します。これは、ユーザーの顔がカメラから離れた後に、以前に選択したメガネと素材が再読み込みされることを意味します。
   

5. ユーザーの顔がカメラの検出範囲内にあるかどうかをリアルタイムで検出する必要があるため、最初に On Start ノードを削除し、On Update ノードを保持します。On Update ノードは、アプリケーションの実行中に継続的に実行されます。FilterUpdater グラフの機能は、currentGlassesTag 変数を通じてユーザーが現在選択しているメガネ モデルを取得し、そのメッシュ レンダラーを有効にすることです。
   

6. 上記のスクリプトの機能は、次の方法でエディターでテストできます。

   • [再生] ボタンをクリックしてプログラムを実行すると、アプリケーションがリアルタイムで特定のタグを持つオブジェクトを探しているが、タグがまだ空であるため、FilterUpdater グラフの [タグで検索] ノードが赤くなることがわかります。
   • そのため、Game ウィンドウでメガネ ボタンを任意に選択して、 currentGlassesTag 変数に値が設定されるようにします。
   • 次に、Hierarchy ウィンドウで、GlassesGroup プレハブを選択して削除します。
   • 最後に、Project ウィンドウで、GlassesGroup プレハブを Assets → _InteractiveFaceFilter → Prefabs の下の Hierarchy ウィンドウに再度ドラッグすると、以前に選択したメガネ モデルが再び表示されることがわかります。

7. 同様に、MaterialChanger グラフの編集を選択し、ユーザーが現在選択しているメガネ マテリアルを格納するために、blackboard に「currentMaterial」という名前のマテリアル タイプ変数 (オブジェクト) を作成します。グラフ変数の変数設定ノード。
   
   

8. ChangeMaterial の Cutom Event は、ユーザーが選択したマテリアルを転送するために使用されるため、Set Variable ノードを使用して直接取得できます。
   

9. 最後に、FilterUpdater ダイアグラムに戻り、Mesh Renderer Set Material ノードを使用してリアルタイムで更新し、ユーザーが選択したマテリアルをメガネ モデルに割り当てます。
   

10. この時点で [再生] をクリックしてテストすると、メガネを選択したときに、メガネの素材が欠落していることがわかります. これは、ユーザーが最初にメガネの素材を選択しなかったためです。 currentMaterial 変数の値が空です。したがって、 currentMaterial 変数に初期値を設定する必要があります。
    

11. blackboard で currentMaterial 変数を見つけ、その値を Lambert1 に設定します。これはデフォルトで灰色のマテリアルです。
    

12. もう一度 Play Test をクリックすると、すべてが正常に表示されることがわかります。次に、Hierarchy で GlassesGroup プレハブを無効にし、テスト用に Android デバイスにパッケージ化できます。