夜風のMixedReality

xRと出会って変わった人生と出会った技術を書き残すためのGeekなHoloRangerの居場所

Osaka HoloLens Hackathon Online 2021 チームビルド 8日目 デザイン

このイベントは関西のxRコミュニティ大阪駆動開発が主催のHoloLensイベントで、毎年行われているイベントが今年は新型コロナウィルス感染症の影響を受けオンラインの形で行われました。

本日は8日目の取り組みになります。

〇ボッチソン『HoloLensで片手で操作できる未来感あるUI』

今回筆者が取り組むテーマは『HoloLensで片手で操作できる未来感あるUI』です。

これはHoloLens 2で使用できるHandTrackingを用いたオリジナルのUIを作成するプロダクトで、MRTKで提供されているHandMenuなどデフォルトのHandUIは片手操作ができないという門外があります。

様々な人が今後HoloLensを使っていく中で片手で操作できるUIというものを作りたいと思いテーマとして選びました。

モデリング

今回はHoloLensなので3DモデルでUIを作成しました。

MRTKで提供されているUI系はスクエアの形状が多いです。

今回のオリジナルUIを作る条件としてMRTKに基づき機能を使うというものもあったのですが、かっこよいUIを作るという目的であったため、オリジナルのモデルを作成します。

Blenderを起動します。

f:id:Holomoto-Sumire:20210313092909j:plain

②[Shift]キー+[A]キーで[]を作成します。

f:id:Holomoto-Sumire:20210313092958j:plain

③[円の追加]プロパティから[頂点]を[6]に設定し円を構成する頂点数を6に減らします。

f:id:Holomoto-Sumire:20210313093423j:plain

これによって正六角形が形成されます。

④[編集モード]へと切り替え、[E]キー+[Z]キーによって頂点を伸ばし、立体的にします。

f:id:Holomoto-Sumire:20210313093736j:plain

⑤[E]キー+[S]キー+テンキーの[0]で蓋を作成します。

f:id:Holomoto-Sumire:20210313100044j:plain

⑥上部ワールドタブから[頂点]、[頂点をマージ]→[距離で]と選択します。

f:id:Holomoto-Sumire:20210313100152j:plain

この作業によって複数の頂点が重なっていた状態から一つの頂点になります。

⑦エクスポートしてUnityへインポートします。

〇マテリアル

前回までの[Quad]の[MeshRender]をディアクティブに変更し、作成したハニカムオブジェクトを配置します。

新規でマテリアルを作成します。今回は次のようなマテリアルを作成しました。

f:id:Holomoto-Sumire:20210313204614j:plain

①Shaderを[MixedRealityToolkit standerd]に変更します。

②[RenderingMode]を[Additive]に設定します。

f:id:Holomoto-Sumire:20210313204734j:plain

これで常に透過を持つ表現が行えるようになりました。

③[RimLight]を有効にし緑系のカラーを設定します。

f:id:Holomoto-Sumire:20210313204915j:plain

④[NearFade]を有効にします。

f:id:Holomoto-Sumire:20210313205007j:plain

これはオブジェクトとの距離によってオブジェクトがフェードアウトする表現を行えます。

⑤[EnvironmentLight]を有効にします。

f:id:Holomoto-Sumire:20210313205149j:plain

これはユーザーがオブジェクトを見る角度によってライトの影響が加わる表現を行えます。

以上を設定したハニカムオブジェクトが次の様になります。

f:id:Holomoto-Sumire:20210313205313j:plain

〇実機で確認

次の様になります。 AdditiveのBlendが入ったマテリアルは実機とキャプチャで見た目が変わることがあります。

実際はこれよりも見えやすくなっています。

youtu.be