本日はHoloLens 2用のオリジナルUIです。
HoloLensではMRTKExamplesでMRTKを用いてHoloLensに最適化したUIが提供されています。
これをベースに筆者のオリジナルのUIを作成していきます。
〇今回は説明ボードを作成しました。
アプリ内での使用用途は以下のようになります。
〇3Dモデル＆デザイン
筆者は新しいアイデアを考えるうえで[Pintarest]を頻繁に使用します。
今回は[FakeUI(FictionalUI)]の中からサイバーチックなアイデアを組み合わせて作成しました。
今回は下絵を用意することなく直接Blenderでメッシュを作成しました。今回のテーマは説明ボードなので縦横のアスペクト比をテレビなどのモニターに多く使用される16:9に設定し作成しています。
また、立体的な見た目をイメージしメインボードは厚みを、表層のアクセントメッシュは若干メインボードから前に出るようにしています。
〇Unityでマテリアルの作成
今回はマテリアルのShaderに[Mixed Reality Toolkit/FingerTipCursor]を使用しました。
これはMRTKによって提供されるHandTrackingの描画に使用されるShaderです。
このShaderは距離に応じたfadeやProxmity Lightに加え2色の色を用いたグラデーションの表現が行えます。
偶発的に発見した効果ですが、このような表現は非常にSFチックに感じたため今回UIのShaderとして採用しました。
また[Mixed Reality Toolkit/FingerTipCursor]ShaderはURPでも使用できるためこの点でも採用の理由になりました。
〇Shape
[Mixed Reality Toolkit/FingerTipCursor]Shaderを採用した理由はもう一つあります。
[Mixed Reality Toolkit/FingerTipCursor]ShaderではShaderのパラメータを用いて形状変化が行えることです。
[Far Center Fraction]と[Thickness]のパラメータをAnimationで変化させます。
これによって出現のアニメーションを作成できました。
以上でSFチックなオリジナル説明ボードが完成しました。
今回のUIはいかのプロジェクトで使用しています。
