先日、2020年6月17日にオンライン上(Zoom)で行われたXRミーティングでこの頃取り組んでいるオリジナルのUI作成に関しての知見を共有しました。
〇XRミーティングとは？
月に一度第三水曜日に日本各地のxRコミュニティグループ同士でオンライン上で集まりxRに関するニュースや取り組んだこと等の情報を交換するイベントです。
イベントページは以下になります。
関西を中心に活動しているコミュニティ『大阪駆動開発』の主催するイベントです。
〇オリジナルのUIを作った（作っている）話
今回は本ブログでも掲載しているHoloLens用のオリジナルのUIを作っていることをシェアしました。
●何故オリシナルUIを作ることにしたか？
HoloLensの開発ツールであるMixedRealityToolkitでは数多くのUIがフレファブとして提供されています。
これらはシーンに配置してインスペクターで設定を少しカスタマイズするだけで簡単に使用することができます。
シンプルでどんなアプリケーションにもマッチしそうな考え抜かれたデザインですが、もう少しSFチックで尖ったデザインのUIが欲しくなり自作することにしました。
●HoloLensにおけるUIの考え方
MicrosoftのHoloLensに関わるShaderのドキュメントではFluent designという考え方がベースにあることが示されています。
これはあらゆるデバイスで3D空間上のデザインを実現する という目的の元、Light、depth、motionなどの要素で構成されたデザインシステムを指します。
また、もうひとつUIを考える上で考える必要があることが、機械式UIと非機械式UIという考え方です。
機械式UIは車のハンドル、ギアレバー、扉のノブ、バスの降車ボタンなどがわかりやすいですが、古典的な手で操作するUIで物理的なフィードバックが得られることが特徴です。
非機械式UIはスマートフォンのパネルなどがわかりやすいですが、複数の機能を一つの場所にまとめ必要に応じて使い分けることができるUIです。機械式UIと比べ物理的なフィードバックが少ないことが特徴で、ユーザーは『押し間違えたことすら気が付ない』といった誤動作などのトラブルが起こりやすいですが、必要な時にだけUIを使用できるので省スペースで多機能です。
●第一弾ボタン
Blenderでメッシュを作成しました。 ここではシェイプキーを用いてパラメーターで頂点を移動するアニメーションを作成しました。
頂点が移動するためUV（テクスチャ配置）座標の関係でテクスチャがつぶれてしまいます。
MRTKStandardShaderにはTriplanar Mappingと言いメッシュの持つUV座標を無視するテクスチャの配置の設定が行えます。
これでメッシュの形状変化でテクスチャがつぶれないようになりました。
ボタンとしての機能にはInteractableコンポーネントを使用しています。これはMRTKで提供されているコンポーネントでユーザーのアクションに対してのリアクション（対話）を行うことができます。
ボタンの場合OnClick()のイベントにリストを追加し、行いたいアクションを指定することで使用できます。
●第二弾説明パネル
複数のボタンを配置しラジオボタン（一つ選択したらそれ以外のものが選択できるようになる）として構成したモデルです。
InteractableコンポーネントのSelection Modeをtoggleに変更することで行うことができます。
●第三弾レバー
本ブログで現在進行中で作成中のUIです。
HoloLens2ではハンドトラッキングでユーザーの手を使った動きを反映させることができます。
ゲームセンターで見たクラシックなレバーを参考に初めてHoloLens2を体験するユーザーでも説明なしに触りに行くデザインを目指しています。
こちらに関しても進行中のこと、技術的に躓いていることをシェアしました。
