Info for Developers of Microsoft HoloLens

HoloLens 関連イベントと情報共有に努めるブログ

トップ > Tutorial > Holograms 210 ウォークスルー (公式ドキュメント日本語訳: Holograms 210)

Holograms 210 ウォークスルー (公式ドキュメント日本語訳: Holograms 210)

Tutorial Translation

この記事は、Holograms 210 のウォークスルーです。公開情報をもとにしていますが、細かくスクリーンショットを載せており、説明部分を翻訳しています。また作業過程でトラブルが発生した場合も詳細を記載しています。

 

Holograms 210

Gaze(視線) は、ユーザーの意図と意識を明らかにする最初の入力形式です。Holograms 210 (または、プロジェクト エクスプローラー) では、Windows ホログラフィック 用の Gaze ベースのコンセプトにディープ ダイブします。これから、あなたのアプリがユーザーの視線について何を理解しているか把握しながら、カーソルとホログラムに状況認識 (contextual awareness) を追加していきます。 

私たちは、Gaze コンセプトを学ぶための親切な宇宙飛行士を用意しています。Holograms 101 では、私たちは視線を追いかけるシンプルなカーソルを使用しました。今回は、シンプルなカーソルの更なる先を紹介します:

  • カーソルを作成し、ホログラムを凝視します: ユーザーがどこを見つめているか、または、どこを見ていないかによって変化します。この仕組みが状況認識になります。
  • 何がターゲットになっているか更なるユーザー状況について、カーソルとホログラムにフィードバックします。このフィードバックは、すなわち、オーディオとビジュアルです。
  • ユーザーが、小さなターゲットを狙えるように、ターゲット テクニックを紹介します。
  • 方向インディケーター (指示器) により、ユーザーの注意をホロレンズに仕向ける方法について紹介します。
  • ホログラムとユーザがあなたの世界で動くようにするテクニックを紹介します。

事前準備

プロジェクト ファイル

  • プロジェクトに必要なファイルのダウンロード
  • デスクトップなど任意の場所で、ファイルを展開

注意事項

  • コード内のブレイクポイントにヒットさせるため、Visual Studio 2015 の [ツール] - [オプション] - [デバッグ] 内の "マイ コードのみ有効にする" オプションは、無効 (チェックを外す) にしておく必要があります。

Chapter 1 - Unity Setup

目的

  • HoloLens 開発用に Unity を最適化する
  • アセットをインポートして、シーンをセットアップする
  • HoloLens で宇宙飛行士を表示する

手順

  • Unity の起動
  • New Project を選択
  • プロジェクト名に ModelExplorer と入力
  • location に事前準備で展開した Gaze フォルダを指定
  • プロジェクトが 3D であること確認
  • Create Project をクリック

HoloLens 用 Unity の設定

これからエクスポートするアプリが、2D ビューでなくホログラフィック ビューであることを Unity に設定する必要があります。HoloLens をバーチャル リアリティ デバイスとして追加することで対応します。

  • Edit > Project Settings > Player に移動します
  • Inspector Panel で、Player Setting に Windows Store アイコンを選択します
  • Other Settings グループを展開します
  • Rendering セクションで、新しい Virtual Reality SDKs を追加するために Virtual Reality Supported チェックボックスにチェックを入れます
  • Windows Holographic が表示されることを確認します。表示されない場合は、リスト下部の + ボタンを選択し Windows Holographic を選択します

    f:id:hololensdev:20161112160444p:plain

  • Edit > Project Settings > Quality に移動します
  • Windows ストア アイコン列の Default 行にある下矢印をクリックします
  • Windows ストア アプリに対して Fastest を選択します。

    f:id:hololensdev:20161112160544p:plain

*1

アート アセットのインポート

  • Project パネルの Assets フォルダーを右クリックします
  • Import Package > Custom Package をクリックします
  • ダウンロードしたプロジェクト ファイルに移動して、ModelExplorer.unitypackage をクリックします
    *2
  • Open をクリックします
  • パッケージのロード後、Import ボタンをクリックします

シーンの設定

  • Hierarchy 内の Main Camera を削除します
    *3
  • HoloToolkit フォルダー内の Utilities フォルダーを開き、Prefabs フォルダーを開きます
  • Prefabs フォルダーから、Main Camera を Hierarcky パネル内にドラッグアンドドロップします
  • Hierarchy 内の Directional Light を右クリックし Delete を選択します
    *4
  • Holograms フォルダー内から、以下のアセットを Hierarchy パネルのルートにドラッグアンドドロップします:
    • AstroMan
    • Lights
    • SpaceAudioSource
    • SpaceBackground

      f:id:hololensdev:20161112162440p:plain

  • Play Mode を開始し、宇宙飛行士を表示します

    f:id:hololensdev:20161112162413p:plain

  • Play Mode を再度クリックし、Stop します
  • Holograms フォルダー内の Fitbox アセットを確認し、Hierarchy パネルのルートにドラッグアンドドロップします
  • Hierarchy パネル内の Fitbox を選択します
  • Holograms フォルダー内の AstroMan コレクションを Fitbox の Inspector パネルの Hologram Collection プロパティにドラッグアンドドロップします
    f:id:hololensdev:20161112162819p:plain

プロジェクトのビルド

  • 新しいシーンを保存します: File > Save Scene As
  • 新しいフォルダー をクリックし、フォルダー名を Scenes にします
  • ファイル名を “ModelExplorer” にして、Scenes フォルダーに保存します
  • File > Build Settings を選択します
  • Add Open Scenes をクリックして、シーンを追加します
  • Platform リストから Windows Store を選択し、Switch Platform をクリックします
  • SDK を Universal 10 に設定し、Build Type を D3D に設定します
  • Unity C# Projects にチェックを入れます
  • Build をクリックします
  • 新しいフォルダーを作成し、フォルダー名を "App" にします
  • App フォルダーをシングルクリックします
  • フォルダーの選択 を押下します
  • Unity の処理が完了すると、ファイル エクスプローラー ウィンドウが表示されます
  • App フォルダーを開きます
  • ModelExplorer Visual Studio Solution を開きます
  • Visual Studioで、ソリューション エクスプローラー内の Package.appxmanifest を右クリックし、View Code を選択します
  • TargetDeviceFamily を定義している行を特定し、Name="Windows.Universal" から Name="Windows.Holographic" に変更します
  • Package.appxmanifest を保存します
  • Visual Studio の 上部ツールバーを使用して、ソリューション構成を Debug から Release に、ソリューション プラットフォームを ARM から x86 に変更します
  • デバイス ボタン横のドロップ ダウン矢印をクリックし、リモート コンピューターを選択します
  • HoloLens デバイスの IP アドレスを入力し、認証モードをユニバーサル (暗号化されていないプロトコル) に設定します。IP アドレスが分からない場合、HoloLens デバイスの Settings > Network & Internet > Advanced Options を確認します
  • 上部メニューバーで、デバッグ -> デバッグなしで開始 をクリックするか、Ctrl + F5 を押下します。 HoloLens デバイスで初めて展開している場合、pair it with Visual Studio が必要です
    *5

Chapter 2 - Cursor and target feedback

目的

  • カーソル ビジュアル デザインと振る舞い
  • Gaze ベースのカーソル フィードバック
  • Gaze ベースのホログラム フィードバック

カーソルのデザイン設計原則に基づいて作業を進めます:

  1. カーソルは常に現れている
  2. Don't let the cursor get too small or big.
  3. Avoid obstructing content.

Instructions

  • Click the Create menu on top of the Hierarchy panel.
  • Select Create Empty.
  • Right-click the new GameObject and rename it to "Managers".
  • In the Hierarchy panel, select the Managers object.
  • In the Inspector panel, click the Add Component button.
  • In the menu, type in the search box Gaze Manager. Select the search result.
  • In the Inspector panel, select the RaycastLayerMask dropdown and unselect TransparentFX.
  • In the HoloToolkit\Input\Prefabs folder, find the Cursor asset.
  • Drag and drop the Cursor onto the Hierarchy.
  • In the Hierarchy panel, select the Cursor object.
  • In the Inspector panel, click the Add Component button.
  • In the menu, type in the search box Cursor Manager. Select the search result.
  • Expand the Cursor object in the Hierarchy.
  • Drag and drop the CursorOnHolograms object onto the Cursor On Holograms property in the Inspector.
  • Drag and drop the CursorOffHolograms object onto the Cursor Off Holograms property in the Inspector.

At this point, you need to edit the GazeManager.cs file, and edit it to perform the following tasks:

  1. Perform a physics raycast,
  2. Store the position and normal of the raycast intersection,
  3. If the raycast did not hit anything, set the position and normal to defaults.

You can write the code yourself by locating comments in GazeManager.cs labeled "Coding Exercise" - each comment corresponds to one line of code. You can also use this completed version:

 

GazeManager.cs[show]

 

Next you will need to edit CusorManager.cs in order to achieve the following:

  1. Decide which cursor should be active,
  2. Update the cursor based on whether it's off or on a hologram,
  3. Position the cursor where the user is gazing.

Again, you are welcome to write your own code by locating the comments labeled "Coding Exercise" in CursorManager.cs, or use the following:

 

CursorManager.cs[show]

 

  • Rebuild the app from File > Build Settings.
  • Open the App Folder.
  • Open the ModelExplorer Visual Studio Solution.
  • Click Debug -> Start Without debugging or press Ctrl + F5.
  • Observe how the cursor is drawn, and how it changes appearance if it is touching a hologram.
  • In the Hierarchy panel, select the Managers object.
  • In the Inspector panel, click the Add Component button.
  • In the menu, type in the search box Interactible Manager. Select the search result.
  • In the Hierarchy panel, select the AstroMan object.
  • In the Inspector panel, click the Add Component button.
  • In the menu, type in the search box Interactible. Select the search result.

You'll need to edit both InteractibleManager.cs and Interactible.cs in order to achieve the following:

  1. In InteractibleManager.cs, fetch the point the gaze raycast hit and save the collided GameObject.
  2. Send the GazeEntered message if gazing at an object with which you can interact.
  3. Send the GazeExited message if gazing away from the object with which you can interact.
  4. Handle the GazeEntered and GazeExited callbacks in Interactible.cs.

Give it a try yourself with the coding exercises in InteractibleManager.cs and Interactible.cs, or use the following solutions:

 

InteractibleManager.cs[show]

 

 

Interactible.cs[show]

 

  • As before, build the project and deploy to the HoloLens.
  • Observe what happens when the gaze is aimed at an object, and when it's not.

Chapter 3 - Targeting Techniques

Objectives

  • Make it easier to target holograms.
  • Stabilize natural head movements.

Instructions

  1. In the Hierarchy panel, select the Managers object.
  2. In the Inspector panel, click the Add Component button.
  3. In the menu, type in the search box Gaze Stabilizer. Select the search result.

Now we'll modify our GazeManager to use the GazeStabilizer.

  1. Open the GazeManager script in Visual Studio.
  2. Copy the code below into GazeManager.cs, or complete coding exercise 3.a yourself.

 

GazeManager.cs[show]

 

Chapter 4 - Directional indicator

Objectives

  • Add a directional indicator on the cursor to help find holograms.

Instructions

We're going to use the DirectionalIndicator.cs file which will:

  1. Show the directional indicator if the user is not gazing at the holograms.
  2. Hide the directional indicator if the user is gazing at the holograms.
  3. Update the directional indicator to point to the holograms.

Let's get started.

  • Click on the AstroMan object in the Hierarchy panel and click the arrow to expand it.
  • In the Hierarchy panel, select the DirectionalIndicator object under AstroMan.
  • In the Inspector panel, click the Add Component button.
  • In the menu, type in the search box Direction Indicator. Select the search result.
  • In the Hierarchy panel, drag and drop the Cursor object onto the Cursor property in the Inspector.
  • In the Project panel, in the Holograms folder, drag and drop the DirectionalIndicator asset onto the Directional Indicator property in the Inspector.
  • Build and deploy the app to the HoloLens.
  • Watch how the direction indicator object helps you find the astronaut

Chapter 5 - Billboarding

Objectives

  • Use billboarding to have holograms always face towards you.

We will be using the Billboard.cs file to keep a GameObject oriented such that it is facing the user at all times.

  • In the Hierarchy panel, select the AstroMan object.
  • In the Inspector panel, click the Add Component button.
  • In the menu, type in the search box Billboard. Select the search result.
  • In the Inspector set the Pivot Axis to Y.
  • Try it! Build and deploy the app to the HoloLens as before.
  • See how the Billboard object faces you no matter how you change the viewpoint.
  • Delete the script from the AstroMan for now.

Chapter 6 - Tag-Along

Objectives

  • Use Tag-Along to have our holograms follow us around the room.

As we work on this issue, we'll be guided by the following design constraints:

  • Content should always be a glance away.
  • Content should not be in the way.
  • Head-locking content is uncomfortable.

The solution used here is to use a "tag-along" approach.

A tag-along object never fully leaves the user's view. You can think of the a tag-along as being an object attached to the user's head by rubber bands. As the user moves, the content will stay within an easy glance by sliding towards the edge of the view without completely leaving. When the user gazes towards the tag-along object, it comes more fully into view.

  • In the Hierarchy panel, select the Managers object.
  • In the Inspector panel, click the Add Component button.
  • In the menu, type in the search box Gesture Manager. Select the search result.

We're going to use the SimpleTagalong.cs file which will:

  1. Determine if the Tag-Along object is within the camera bounds.
  2. If not within the view frustum, position the Tag-Along to partially within the view frustum.
  3. Otherwise, position the Tag-Along to a default distance from the user.

To do this:

  • In the Holograms folder click on Tagalong asset.
  • In the Inspector, click on Tag dropdown and click Add Tag ….
  • Click on the + sign and name Tag 0 as TagAlong.
  • In the Holograms folder click on Tagalong asset and click on Tag dropdown.
  • Select TagAlong tag.
  • We first must change the Interactible.cs script to send a message to InteractibleAction.
  • Edit Interactible.cs by completing the coding exercise or use the following:

 

Interactible.cs[show]

 

The InteractibleAction.cs script performs custom actions when you gaze at the holograms. Let's update it for use with the tag-along.

  • In the Scripts folder click on InteractibleAction.cs asset to open in Visual Studio.
  • Complete the coding exercise or change it to this:
    • At the top of the Hierarchy, in the search bar type ChestButton_Center and select the result.
    • In the Inspector panel, click the Add Component button.
    • In the menu, type in the search box Interactible Action. Select the search result.
    • In Holograms folder find the Tagalong asset.
    • Select the ChestButton_Center object in the Hierarchy. Drag and drop the TagAlong object from the Project panel onto the Inspector into the Object to TagAlong property.
    • Double click the InteractibleAction script to open it in Visual Studio.

We need to add the following:

  • Add functionality to the PerformTagAlong function in the InteractibleAction script.
  • Add billboarding to the gazed-upon object, and set the pivot axis to free.
  • Then add simple Tag-Along to the object.

Here's our solution:

 

InteractibleAction.cs[show]

 

  • Try it! Build and deploy the app to the HoloLens.
  • Watch how the content follows the center of the gaze point, but not continuously and without blocking it.

*1:補足: 上記動画では、Use 16-bit Depth Buffers などにチェックを入れているが Unity のバージョンが違うため、動画の設定は行わずに上記手順のまま進めます。

*2:HolographicAcademy-Holograms-210-Gaze\Starting フォルダー配下に存在

*3:この環境では、すでに存在しなかった

*4:この環境では、すでに存在しなかった

*5:補足: ペアリング設定をしていない場合、VIsual Studio 上で以下のダイアログが表示されます。

f:id:hololensdev:20161113085204p:plain
HoloLens デバイスの Settings -> UPDATE & SECURITY -> For developers にある Paired devices セクションの [Pair] をクリックして確認した PIN を入力して OK をクリックします

f:id:hololensdev:20161113085519p:plain