MRが楽しい

MRやVRについて学習したことを書き残す

MRTK 2.5のカラーピッカーでマテリアル色の変更を試す

本日は MRTK の技術調査枠です。
MRTK 2.5のカラーピッカーでマテリアル色の変更を利用する手順を記事にします。
f:id:bluebirdofoz:20201007231905j:plain

MRTKのカラーピッカー

実行時に任意のオブジェクトのマテリアルの色を簡単に変更できるようにする実験的なコントロールです。
microsoft.github.io
f:id:bluebirdofoz:20201007231915j:plain

MRTK 2.5 現在は Experimental(実験的) の機能に分類されます。

サンプルシーンの利用方法

MRTK の Examples パッケージからカラーピッカーを利用したサンプルシーンを確認できます。
Package Manager を利用する場合は[Experimental - ColorPicker]を取得します。
bluebirdofoz.hatenablog.com

Assets/Samples/MixedRealityToolkitExamples/2.5.0/Experimental-ColorPicker配下を開きます。
ColorPickerExample.unity のシーンを開くと、サンプルシーンを確認できます。
f:id:bluebirdofoz:20201007231933j:plain

自作シーンでのカラーピッカーの利用

自作したシーンのオブジェクトに対してカラーピッカーによる色の変更を試してみます。

Cubeオブジェクトの作成

プロジェクトを作成し、カメラの前方に Cube オブジェクトを作成しました。
この Cube オブジェクトの色を変更してみます。
f:id:bluebirdofoz:20201007231945j:plain

Cube オブジェクトに MixedRealityToolkit/Standard シェーダを設定したマテリアルを反映します。
カラーピッカーはマテリアルの color の値を変更するため、通常の Standard シェーダのままでも利用可能です。
f:id:bluebirdofoz:20201007231955j:plain

カラーピッカーパネルの配置

色変更の操作を行うカラーピッカーパネルを配置します。
今回はサンプルに含まれる ColorPickerPrefab.prefab を利用します。
Assets/Samples/MixedRealityToolkitExamples/2.5.0/Experimental-ColorPicker/Prefabs 配下にあります。
f:id:bluebirdofoz:20201007232006j:plain

このカラーピッカーパネルは起動時に非アクティブになります。
f:id:bluebirdofoz:20201007232016j:plain

カラーピッカーの起動ボタンの配置

次にカラーピッカーを起動するためのボタンを配置します。
こちらは PressableButtonHoloLens2_48x48.prefab を利用します。
Package/MixedRealityToolkitFoundation/SDK/Features/UX/Interactable/Prefabs 配下にあります。(UnityPackageManager利用時)
f:id:bluebirdofoz:20201007232026j:plain

ボタン押下時のイベントを設定します。
ボタンの[Inspector]ビューを開き、OnClick()のイベントを追加してカラーピッカーのオブジェクトを指定します。
実行イベントとして ColorPicker.SummonColorPicker 関数を指定します。
f:id:bluebirdofoz:20201007232036j:plain

SummonColorPickerの引数

SummonColorPicker の引数で色を変更するオブジェクトを指定しますが、設定方法が少し特殊になります。
初めに、引数で指定するための空のゲームオブジェクトを作成します。
f:id:bluebirdofoz:20201007232045j:plain

色を変更したい Cube オブジェクトを空オブジェクトの子オブジェクトに移動します。
f:id:bluebirdofoz:20201007232056j:plain

Cube オブジェクトの名前を"TargetObject (Mesh)"に変更します。
色の変更は ColorPicker.SummonColorPicker 関数で指定した子オブジェクトに存在する同名のオブジェクトの MeshRenderer に作用するためです。
f:id:bluebirdofoz:20201007232106j:plain

更にもう一つ空の子オブジェクトを作成し、オブジェクトの名前を"Anchor"に変更して任意の位置に配置します。
これはカラーピッカーパネルの表示位置を指定します。
f:id:bluebirdofoz:20201007232116j:plain

これらの設定を行ったゲームオブジェクトを ColorPicker.SummonColorPicker 関数の引数として指定します。
f:id:bluebirdofoz:20201007232127j:plain

動作確認

シーンを再生して動作を確認します。
ボタンをクリックすると、カラーピッカーパネルが表示されます。
f:id:bluebirdofoz:20201007232139j:plain

カラーピッカーパネルを操作して、オブジェクトの色が変わることを確認します。
f:id:bluebirdofoz:20201007232150j:plain