夜風のMixedReality

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

HoloLensでファンタジー世界を作る 手から炎を出そう! HoloLensアドベントカレンダー2020 17日目

本日はHoloLens 2での表現の実験調査枠です。

初心者の方向けの記事になります。

〇HoloLens2で手から炎をだそう!

アニメや映画などではよくてから炎を出すという場面が見られます。

炎ではないですが、大ヒット映画『アナと雪の女王』でも主人公の姉、雪の女王エルザが手から氷を出しています。

今回はこれをHoloLens 2で再現します。

〇環境

・Unity2019.3.9f1

・MixedRealityToolkit v2.51

〇実装

今回はHoloLens 2 のHandTrackingの機能を用いてユーザーの手を検知してエフェクトを出します。

〇HoloLens用の構成

①MRTKが導入されているプロジェクトを用意します。

②上部のワールドタブから[MixedRealityToolkit]→[Add to Configure...]を選択してシーンに[MixedRealityToolkit]オブジェクトおよび[MixedRealityPlaySpace]オブジェクトを追加します。

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

③hierarchyウィンドウの[MixedRealityToolkit]オブジェクトを開いて、inspectorウィンドウから[MixedRealityToolkit]を表示します。

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

 これがMRTKの構成プロパティになります。デバイスや使う機能ごとに設定を行うことで同じシーンでもさまざまなプラットフォームに展開が行えます。

 HoloLensの場合、特徴的な要素であるSpatialAwareness(空間認識)やHandTracking、EyeTracking(目線認識)に関してもここで設定を行います

④profileを[DefaulrHoloLens2ConfigurationProfile]に設定して[Clone]を選択します。

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

MRTKの構成はデフォルトで提供されている構成を複製することで初めてカスタマイズすることができます。

ここではHoloLens 2用の構成を最初に設定してそれをベースにカスタマイズします。

[Clone]を行うことで個々の設定を編集できるようになります。

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

⑤サイドタブから[Input]を選択します。

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

 ここではHandTrackingやPointerなど入力系の設定を行います。

⑥[Input]タブの最下部にある[HandTracking]の設定を表示します。

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

ここではHandTrackingに関する見た目などを設定します。

⑦[HandMeshVisualization Modes]を[Everything]、[HandJoint Visualization Modes]を[Editor]に設定します。

[HandMeshVisualization Modes]がHandTrackingで取得した手にメッシュを貼るかどうかの設定です。[Ecerything]に設定することでUnityEditor、HoloLens 2実機両方で表示されるようになります。

[HandJoint Visualization Modes]は取得しているJointの描画に関する設定です。[Editor]に設定されていることでUnityEditor、でのみHandJointが描画されます。

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

〇エフェクトの導入

今回は炎のエフェクトとして次のフリーのアセットを用いました。

assetstore.unity.com

シーン上に[!VibrantEffectTexturesFreePack]の[EnegyPoint]を配置します。

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

これが今回使用する炎のエフェクトになります。

〇手の検知

今回は手の向きに合わせて炎が出るようにします。

ここでは手の検知を行うコンポーネントを使用します。

①空のゲームオブジェクトを作成して[EfectRoot]と名付けます。

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

②[EfectRoot]オブジェクトを選択してinspectorウィンドウから[SolverHandler]コンポーネントと[HandConstraint]コンポーネントをアタッチします。(これによって自動的に手の判定を担う[HandBounds]コンポーネントもアタッチされます。)

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

③[SolverHandler]コンポーネントの[TrackTargetType]を[HandJoint]に変更します。

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

[SolverHandler]コンポーネントはMRTKでサポートされている各ユーザーの動きを検知するコンポーネントで、今回は手から炎を出したいのでHandJointを指定します。

[TrackedHandness]はどちらの手を取得するかを指定します。今回は[Both(両手)]を指定しました。

[TrackedHandJoint]は検知する手の部位を指定します。

HoloLens 2のHandTrackingでは20点が取得できるためこのうちのどの部位を検知するかを指定します。

f:id:Holomoto-Sumire:20200805214630p:plain

今回は[Palm(手の甲)]を指定します。

これで手の検知が可能になりました。

〇手から炎を出す。

①[EfectRoot]の子オブジェクトに[EnegyPoint]を配置します。

 これによって手の動きに合わせてエフェクトが動くようになります。

f:id:Holomoto-Sumire:20201217223310g:plain

 しかしこのままでは常に手に沿ってエフェクトが出ています。

 手の角度によって炎が出るようにします。

②[HandConstraint]コンポーネントのイベントを次のように設定します。

 ・[OnFirstHandDetected()]に[EnegyPoint]を指定してイベントには[GameObject]→[SetActive Bool()]を指定してチェックボックスにチェックを入れます。

 このイベントは手を検知した時に起動するイベントです。これで手を検知した際にエフェクトが表示されるようになりました。

 ・[OnLostHandLost()]は[EnegyPoint]を指定してイベントには[GameObject]→[SetActive Bool()]を指定してチェックボックスにチェックを外します。

 このイベントは手をロストした時に発動するイベントです。これでロストした際に非表示になりようになります。

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

f:id:Holomoto-Sumire:20201217223440g:plain

③hierarchyウィンドウから[EnegyPoint]を選択してinspectorウィンドウから[PerticleSystem]を表示します。

 [StartSize]をそれぞれ20分の1に設定します。

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

④[EnegyPoint]の子オブジェクトの[layer2]を選択して[PerticleSystem]を表示して[StartSize]を20分の1に指定します。

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

これで炎のサイズが手のひらサイズになりました。

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

炎の大きさが程よくなることで手のひらからの炎の位置のずれを確認できます。

これを修正します。

⑤[SafeZone]を[Atop Palm]に指定します。

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

SafeZoneはどの場所に配置するか?という設定です。これによって手のひらに合わせて炎が表示されます。

これで常に手に沿ってエフェクトが表示されるようになりました。

ここからは手のひらを向けた際に初めて炎が表示されるようにします。

⑥[HandConstraint]コンポーネントを一度ディアクティブ(無効化)します。

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

⑦[HandConstraintPalmUp]コンポーネントを追加します。

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

 このコンポーネントは[HandConstraint]コンポーネントの機能拡張版と呼べるコンポーネントで手の向きに合わせてイベントを発火できます。

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

⑧[HandConstraintPalmUp]コンポーネントのイベントを次のように設定します。

 ・[OnFirstHandDetected()]に[EnegyPoint]を指定してイベントには[GameObject]→[SetActive Bool()]を指定してチェックボックスにチェックを入れます。

 このイベントは手を検知した時に起動するイベントです。これで手を検知した際にエフェクトが表示されるようになりました。

 ・[OnLostHandLost()]は[EnegyPoint]を指定してイベントには[GameObject]→[SetActive Bool()]を指定してチェックボックスにチェックを外します。

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

⑨[SafeZone]を[Atop Palm]に指定します。

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

以上で手のひらを顔に向けることで炎が表示されるようになりました。

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

〇実機で確認

www.youtube.com

実機でも手のひらを顔に向けると炎が現れるようになりました。

今回最終的には右手と左手で違う色の炎にしてみました。

〇HoloLensアドベントカレンダーとは?

冒頭でもお知らせしましたが、本日の記事はHoloLensアドベントカレンダー17日目の記事になります。

qiita.com

昨日は熊本を拠点に活動されるHoloRanger、Shoさんの『HoloLens2チュートリアルの補足メモ(前編)』でした。

sy0690.hateblo.jp

明日は sbubu12さんの記事です。