夜風のMixedReality

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

パンジェスチャー HoloLens2アプリのチュートリアルその⑬

Microsoftのドキュメント[Microsoft Docs]ではHoloLens 2の入門チュートリアルが公開されています。

ツールのインストールから詳しく掲載されているためこちらを今回勉強しながらHoloLens 2が手元にないためHoloLens 1stで動かしてみます。

 チュートリアルは以下で公開されています。

docs.microsoft.com

前回は音声認識有効にして音声コマンドを付与しました。

〇パン ジェスチャ

●1. パンに使用できるクワッドオブジェクトを作成する

 [Hierarchy]ウィンドウを右クリックし、[ 3D Object > Quad] を選択して、四角形のオブジェクトをシーンに追加します。 適切な名前 (ここでは、Pangesture) を指定し、適切な場所に配置します (例: X = 0、Y =-0.2、Z = 2)。

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

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

他の[Interactable]の機能と同様に、パンジェスチャにも当たり判定である[ collider] が必要です。 デフォルトでは、[Quad]には[Mesh collider] が設定されています。 ただし、メッシュ collider はMeshの形状に沿って計算され貼られるコライダーのため処理に負荷がかかる場合があり理想的なColliderとは言えません。 [Mesh collider] を [Box collider] に置き換えます。

[Mesh Collider]がメッシュの形状にぴったり合わせて計算された当たり判定に対して[Box Collider]はその名の通り単純な箱型の当たり判定を持っています。

 [Mesh collider]コンポーネントの上部の設定アイコンをクリックし、 [Remove component] を選択して[Mesh Collider]を削除します。

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

[Inspector] ウィンドウで、[Add component]を使用して[Box collider]を追加し、[Size Z] を0.15 に変更して box collider の太さを増やします。 f:id:Holomoto-Sumire:20200321093901j:plain

●2. Near Interaction Touchable コンポーネントを追加します

[Pangesture]オブジェクトが選択された状態で、 [Near Interaction Touchable] コンポーネントを 追加します。次に、 [Fix Bounds] と[Fix Center] をクリックして、[Near Interaction Touchable]の中心と境界をcollider と一致するように更新します。

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

●3. ハンドインタラクションのパンズーム (スクリプト) コンポーネントを追加する

 Pangestureオブジェクトが選択された状態で、[Hand Interaction Pan Zoom] コンポーネントを [pangesture] に追加し、[Lock Horizontal] チェックボックスをオンにして垂直スクロールのみを許可します。

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

●4. スクロールする2Dテクスチャを追加する

 このままでは一面真っ白なオブジェクトなのでパンジェスチャーの変化がわかりずらいです。テクスチャを適応します。

 [Project]ウィンドウで、 [Pancontent]の素材を検索し[Pangesture]オブジェクトの[MeshRenderer]の[Material]プロパティにドラッグします。

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

[Inspector] ウィンドウで、新しく追加した[Pancontent]マテリアルを展開し、 [Tiling] の [Y]を0.5 に変更します。TilingはUVに対してテクスチャをどれだけの比率で並べるかの値になります。これにより X とYの値=比率が一致し、タイルが均等に表示されます。

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

●5. スクロールする3D コンテンツを追加する

[Hierarchy] ウィンドウで、 [Pangesture]オブジェクトの子オブジェクトとして4 つのキューブを作成し、そのスケールを X = 0.15、Y = 0.15、Z = 0.15 に設定します。

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

[GridObjectCollection] コンポーネントをキューブの親オブジェクト (pangesture ) に追加し、次のように構成します。

すべてのキューブが1つの行に並べられるようにするように、 [Num Rows]を1に変更します。

[Cell Width]を0.25 に変更して、行内のキューブを空白にします。

[UpdateCollection] ボタンをクリックして、適用します。

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

●6. Pan (スクリプト) コンポーネントでの移動を追加する

[Hierarchy] ウィンドウで、[Shift]キーを押しながらすべてのキューブ子オブジェクトを選択します。次に、[Inspector] ウィンドウで [Add component]を使用して、 [Move With Pan] コンポーネントをすべてのキューブに追加します。

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

すべてのキューブが選択された状態で、 Pangestureをクリックして、 [PanInputSource] にドラッグします。

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

[Hierarchy]ウィンドウで、 Pangestureオブジェクトを選択し、インスペクター で[Mesh Renderer]のチェックボックスをオフにして、メッシュレンダラーを無効にします。

これを実行すると以下のようにパンジェスチャーを確認できます。

ここでは視覚的に動作をわかりやすくするためにMeshRendererを有効にしています。

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