注意

Mixed Reality Academy チュートリアルでは、HoloLens として設計された (第 1 世代) と混在の現実イマーシブ ヘッドセットに注意してください。The Mixed Reality Academy tutorials were designed with HoloLens (1st gen) and Mixed Reality Immersive Headsets in mind. そのため、これらのデバイス向けの開発にガイダンスがまだ必要な開発者のための場所でこれらのチュートリアルのままにすることが重要と思われます。As such, we feel it is important to leave these tutorials in place for developers who are still looking for guidance in developing for those devices. これらのチュートリアルは いない 最新のツールセットや相互作用が使用されている HoloLens 2 で更新されます。These tutorials will not be updated with the latest toolsets or interactions being used for HoloLens 2. サポートされているデバイスで作業を続行するが保持されます。They will be maintained to continue working on the supported devices. 一連の新しい HoloLens 2 を開発する方法を示すチュートリアルは、今後投稿があります。There will be a new series of tutorials that will be posted in the future that will demonstrate how to develop for HoloLens 2. この通知が投稿されるときにこれらのチュートリアルへのリンクが更新されます。This notice will be updated with a link to those tutorials when they are posted.


MR と Azure 302:コンピューター ビジョンMR and Azure 302: Computer vision

このコースでは複合現実のアプリケーションで Azure の Computer Vision の機能を使用して、指定されたイメージ内のビジュアルのコンテンツを認識する方法についてはします。In this course, you will learn how to recognize visual content within a provided image, using Azure Computer Vision capabilities in a mixed reality application.

認識の結果がわかりやすいタグとして表示されます。Recognition results will be displayed as descriptive tags. このサービスは、機械学習モデルをトレーニングすることがなく使用できます。You can use this service without needing to train a machine learning model. 実装では、機械学習モデルをトレーニングする必要がある場合は、次を参照してください。 MR と Azure 302bします。If your implementation requires training a machine learning model, see MR and Azure 302b.

ラボの結果

Microsoft Computer Vision には、すべてクラウドから高度なアルゴリズムを使用してイメージ処理と (戻り値情報の場合) を使用した分析を開発者に提供するように設計 Api のセットです。The Microsoft Computer Vision is a set of APIs designed to provide developers with image processing and analysis (with return information), using advanced algorithms, all from the cloud. 開発者は、イメージまたは画像の URL をアップロードし、Microsoft Computer Vision API アルゴリズムがビジュアルのコンテンツを分析し、情報を返すことができる、ユーザーを選択した入力に基づいて人の顔 (を検出を含む、型と、イメージの品質を識別します。それぞれの座標を返す)、およびタグ付け、または画像を分類します。Developers upload an image or image URL, and the Microsoft Computer Vision API algorithms analyze the visual content, based upon inputs chosen the user, which then can return information, including, identifying the type and quality of an image, detect human faces (returning their coordinates), and tagging, or categorizing images. 詳細については、次を参照してください。、 Azure Computer Vision API ページします。For more information, visit the Azure Computer Vision API page.

このコースを完了すると、複合現実は、次のことが、HoloLens のアプリケーションが用意されます。Having completed this course, you will have a mixed reality HoloLens application, which will be able to do the following:

  1. タップ ジェスチャを使用して、HoloLens のカメラはイメージをキャプチャします。Using the Tap gesture, the camera of the HoloLens will capture an image.
  2. イメージは、Azure コンピューター ビジョンの API サービスに送信されます。The image will be sent to the Azure Computer Vision API Service.
  3. 認識されるオブジェクトは、Unity シーンに配置されている単純な UI グループに表示されます。The objects recognized will be listed in a simple UI group positioned in the Unity Scene.

アプリケーションでは、責任ですが、設計と、結果を統合する方法について。In your application, it is up to you as to how you will integrate the results with your design. このコースは、Unity プロジェクトで Azure サービスを統合する方法を説明する設計されています。This course is designed to teach you how to integrate an Azure Service with your Unity project. 複合現実アプリを強化するためには、このコース得た知識を使用することがあります。It is your job to use the knowledge you gain from this course to enhance your mixed reality application.

デバイスのサポートDevice support

コースCourse HoloLensHoloLens イマーシブ ヘッドセットImmersive headsets
MR と Azure 302:コンピューター ビジョンMR and Azure 302: Computer vision ✔️✔️ ✔️✔️

注意

このコースは、HoloLens で主にフォーカスします、Windows Mixed Reality 没入型 (VR) ヘッドセットには、このコースで学習する内容を適用することもできます。While this course primarily focuses on HoloLens, you can also apply what you learn in this course to Windows Mixed Reality immersive (VR) headsets. (VR) のイマーシブ ヘッドセットはアクセス可能な cameras があるないため、外部のカメラを PC に接続されている必要があります。Because immersive (VR) headsets do not have accessible cameras, you will need an external camera connected to your PC. コースを実行するとき、没入型の (VR) ヘッドセットをサポートするために使用する必要があります変更でノートが表示されます。As you follow along with the course, you will see notes on any changes you might need to employ to support immersive (VR) headsets.

前提条件Prerequisites

注意

このチュートリアルは、Unity を使用した基本的な経験がある開発者向けに設計およびC#します。This tutorial is designed for developers who have basic experience with Unity and C#. また、前提条件やこのドキュメント内の書面の手順を表すテストおよび (2018 年 5 月) の書き込み時に検証されたがどのようなことに注意してください。Please also be aware that the prerequisites and written instructions within this document represent what has been tested and verified at the time of writing (May 2018). 内に一覧表示するには自由に最新のソフトウェアを使用して、ツールをインストールすることについては、このコースでとまったく同じで見つかりますの下に記載されているものよりも新しいソフトウェアでどのようなことは仮定されませんが、記事.You are free to use the latest software, as listed within the install the tools article, though it should not be assumed that the information in this course will perfectly match what you'll find in newer software than what's listed below.

次のハードウェアとソフトウェアこのコースをお勧めします。We recommend the following hardware and software for this course:

開始前の作業Before you start

  1. このプロジェクトのビルドの問題の発生を避けるため、強くお勧めのルートまたはルート近くフォルダーでこのチュートリアルで説明したようにプロジェクトを作成すること (長いフォルダー パスはビルド時に問題を発生できます)。To avoid encountering issues building this project, it is strongly suggested that you create the project mentioned in this tutorial in a root or near-root folder (long folder paths can cause issues at build-time).
  2. 設定して、HoloLens をテストします。Set up and test your HoloLens. 場合は、HoloLens の設定をサポートする必要があるHoloLens のセットアップ記事を参照してください。 確認します。If you need support setting up your HoloLens, make sure to visit the HoloLens setup article.
  3. (場合によって役立ちますユーザーごとにこれらのタスクを実行する) 新しい HoloLens アプリの開発を始めるときに、調整とセンサーのチューニングを実行することをお勧めします。It is a good idea to perform Calibration and Sensor Tuning when beginning developing a new HoloLens App (sometimes it can help to perform those tasks for each user).

調整に関するヘルプを参照するに従ってくださいこのHoloLens 調整記事へのリンクします。For help on Calibration, please follow this link to the HoloLens Calibration article.

センサーの調整に関する詳細についてに従ってくださいこのHoloLens センサー チューニング記事へのリンクします。For help on Sensor Tuning, please follow this link to the HoloLens Sensor Tuning article.

第 1 章 – Azure PortalChapter 1 – The Azure Portal

使用する、 Computer Vision APIサービス、Azure でアプリケーションに使用可能にするサービスのインスタンスを構成する必要があります。To use the Computer Vision API service in Azure, you will need to configure an instance of the service to be made available to your application.

  1. 最初に、ログイン、 Azure Portalします。First, log in to the Azure Portal.

    注意

    Azure アカウントがいない場合は、1 つを作成する必要があります。If you do not already have an Azure account, you will need to create one. クラスルームまたはラボのような状況では、このチュートリアルをフォローしている場合は、講師または新しいアカウントのセットアップについて proctors のいずれかにお問い合わせください。If you are following this tutorial in a classroom or lab situation, ask your instructor or one of the proctors for help setting up your new account.

  2. ログインした後は、をクリックして新規左上隅にある検索してComputer Vision API、 をクリックEnterします。Once you are logged in, click on New in the top left corner, and search for Computer Vision API, and click Enter.

    Azure で新しいリソースを作成します。

    注意

    単語新規に置き換えられましたリソースの作成、新しいポータルでします。The word New may have been replaced with Create a resource, in newer portals.

  3. 新しいページがの説明を入力、 Computer Vision APIサービス。The new page will provide a description of the Computer Vision API service. このページの左下にある at、作成ボタンは、このサービスとの関連付けを作成します。At the bottom left of this page, select the Create button, to create an association with this service.

    コンピューター ビジョンの api サービスについて

  4. クリックすると作成:Once you have clicked on Create:

    1. 必要な挿入名前このサービス インスタンス。Insert your desired Name for this service instance.

    2. 選択、サブスクリプションします。Select a Subscription.

    3. 選択、価格レベル場合、これは、最初に、適切な時間を作成する、 Computer Vision APIサービス、(F0 という名前)、free レベルを使用可能にする必要があります。Select the Pricing Tier appropriate for you, if this is the first time creating a Computer Vision API Service, a free tier (named F0) should be available to you.

    4. 選択、リソース グループか新規に作成します。Choose a Resource Group or create a new one. リソース グループは、監視、プロビジョニングのアクセスを制御および Azure の資産のコレクションの課金を管理する方法を提供します。A resource group provides a way to monitor, control access, provision and manage billing for a collection of Azure assets. 勧めします (例: これらのラボ) など一般的なリソース グループの下の 1 つのプロジェクトに関連付けられているすべての Azure サービスを保持する)。It is recommended to keep all the Azure services associated with a single project (e.g. such as these labs) under a common resource group).

      詳細にする場合、Azure リソース グループについてのごリソース グループの記事を参照してください。します。If you wish to read more about Azure Resource Groups, please visit the resource group article.

    5. (新しいリソース グループを作成する) 場合は、リソース グループの場所を決定します。Determine the Location for your resource group (if you are creating a new Resource Group). 場所は、アプリケーションが実行リージョンにあるが理想的です。The location would ideally be in the region where the application would run. 一部の Azure 資産は特定のリージョンでのみ使用できます。Some Azure assets are only available in certain regions.

    6. また、このサービスに適用される条件を理解したことを確認する必要があります。You will also need to confirm that you have understood the Terms and Conditions applied to this Service.

    7. [作成] をクリックします。Click Create.

      サービスの作成情報

  5. クリックすると作成サービスを作成するを待機する必要があります、これは少し時間がかかる場合があります。Once you have clicked on Create, you will have to wait for the service to be created, this might take a minute.

  6. 通知は、サービス インスタンスが作成されたら、ポータルに表示されます。A notification will appear in the portal once the Service instance is created.

    新しいサービスの新しい通知を参照してください。

  7. 新しいサービス インスタンスを探索する通知をクリックします。Click on the notification to explore your new Service instance.

    リソースに移動 ボタンを選択します。

  8. をクリックして、リソースに移動通知では、新しいサービス インスタンスを表示するボタンをクリックします。Click the Go to resource button in the notification to explore your new Service instance. 新しい Computer Vision API サービスのインスタンスに表示されます。You will be taken to your new Computer Vision API service instance.

    Computer Vision API の新しいサービス

  9. このチュートリアルでは、内でアプリケーションがサービスのサブスクリプション キーを使用して、これは、サービスへの呼び出しを実行する必要があります。Within this tutorial, your application will need to make calls to your service, which is done through using your service’s Subscription Key.

  10. クイック スタート ページのComputer Vision APIサービスは、最初のステップに移動し、キーを取得する、 をクリックキー (これを行うキー アイコンによって示される、サービスのナビゲーション メニューにある青いハイパーリンク キーをクリックして)。From the Quick start page, of your Computer Vision API service, navigate to the first step, Grab your keys, and click Keys (you can also achieve this by clicking the blue hyperlink Keys, located in the services navigation menu, denoted by the key icon). これが明らかに、サービスキーします。This will reveal your service Keys.

  11. このプロジェクトの後半で必要になるため、表示されているキーの 1 つのコピーを実行します。Take a copy of one of the displayed keys, as you will need this later in your project.

  12. 戻り、クイック スタートページ、およびそこから、エンドポイントを取得します。Go back to the Quick start page, and from there, fetch your endpoint. 自分、お住まいの地域に応じて異なる可能性がありますに注意してください (これは、後で、コードに、変更を行う必要があります)。Be aware yours may be different, depending on your region (which if it is, you will need to make a change to your code later). 後で使用するには、このエンドポイントのコピーを作成するには。Take a copy of this endpoint for use later:

    Computer Vision API の新しいサービス

    ヒント

    さまざまなエンドポイントをチェックするここします。You can check what the various endpoints are HERE.

第 2 章 – Unity プロジェクトの設定Chapter 2 – Set up the Unity project

次のコード例が複合現実での開発の一般的な設定して、そのため、他のプロジェクトの適切なテンプレートには。The following is a typical set up for developing with mixed reality, and as such, is a good template for other projects.

  1. 開いているUnityクリック新規します。Open Unity and click New.

    新しい Unity プロジェクトを開始します。

  2. これで、Unity プロジェクト名を指定する必要があります。You will now need to provide a Unity Project name. 挿入MR_ComputerVisionします。Insert MR_ComputerVision. 必ず、プロジェクトの種類に設定されて3Dします。Make sure the project type is set to 3D. 設定、場所に該当する別の場所 (ただし、ルート ディレクトリに近づけるためのより良い)。Set the Location to somewhere appropriate for you (remember, closer to root directories is better). をクリックし、プロジェクトの作成です。Then, click Create project.

    新しい Unity プロジェクトの詳細を提供します。

  3. 既定値を確認する必要が開いている Unity、スクリプト エディターに設定されているVisual Studioします。With Unity open, it is worth checking the default Script Editor is set to Visual Studio. 移動して編集 > 設定し、新しいウィンドウに移動外部ツールします。Go to Edit > Preferences and then from the new window, navigate to External Tools. 変更External Script EditorVisual Studio 2017します。Change External Script Editor to Visual Studio 2017. 閉じる、設定ウィンドウ。Close the Preferences window.

    スクリプト エディターの基本設定を更新します。

  4. 次に移動ファイル > Build Settingsを選択し、ユニバーサル Windows プラットフォーム、をクリックして、スイッチ プラットフォーム選択内容を適用するボタンをクリックします。Next, go to File > Build Settings and select Universal Windows Platform, then click on the Switch Platform button to apply your selection.

    [設定] ウィンドウ切り替え UWP プラットフォームをビルドします。

  5. ファイル > Build Settingsことを確認してください。While still in File > Build Settings and make sure that:

    1. デバイスを対象にに設定されているHoloLensTarget Device is set to HoloLens

      イマーシブ ヘッドセット、設定ターゲット デバイス任意のデバイスします。For the immersive headsets, set Target Device to Any Device.

    2. ビルドの種類に設定されているD3DBuild Type is set to D3D

    3. SDKに設定されているインストールされている最新SDK is set to Latest installed

    4. Visual Studio バージョンに設定されているインストールされている最新Visual Studio Version is set to Latest installed

    5. ビルドおよび実行に設定されているローカル マシンBuild and Run is set to Local Machine

    6. シーンを保存し、ビルドに追加します。Save the scene and add it to the build.

      1. これには、選択開くシーンを追加します。Do this by selecting Add Open Scenes. 保存ウィンドウが表示されます。A save window will appear.

        開いているシーン ボタンの追加 をクリック

      2. 新しいフォルダーを作成と、任意の将来、シーン、し、選択、新しいフォルダーボタンは、新しいフォルダーを作成する名前を付けますシーンします。Create a new folder for this, and any future, scene, then select the New folder button, to create a new folder, name it Scenes.

        新しいスクリプト フォルダーを作成します。

      3. 新たに作成した開くシーンフォルダー、し、ファイル名: テキスト フィールドに「 MR_ComputerVisionScene、順にクリックします保存.Open your newly created Scenes folder, and then in the File name: text field, type MR_ComputerVisionScene, then click Save.

        シーンの新しい名前を付けます。

        注意してください、内の Unity シーンを保存する必要があります、資産フォルダー、Unity プロジェクトに関連付けられている必要があります。Be aware, you must save your Unity scenes within the Assets folder, as they must be associated with the Unity Project. Unity プロジェクトの構造の一般的な方法は、シーン フォルダー (およびその他の同様のフォルダー) を作成します。Creating the scenes folder (and other similar folders) is a typical way of structuring a Unity project.

    7. 設定に残っているBuild Settings、ここでは既定値として残しておく必要があります。The remaining settings, in Build Settings, should be left as default for now.

  6. Build Settingsウィンドウのプレーヤー設定ボタン、領域に関連するパネルが開き、インスペクターが配置されています。In the Build Settings window, click on the Player Settings button, this will open the related panel in the space where the Inspector is located.

    プレーヤー設定を開きます。

  7. このパネルは、いくつかの設定を確認する必要があります。In this panel, a few settings need to be verified:

    1. その他の設定 タブ。In the Other Settings tab:

      1. ランタイム バージョンをスクリプトする必要があります安定した(.NET 3.5 相当)。Scripting Runtime Version should be Stable (.NET 3.5 Equivalent).

      2. バックエンドの scriptingべき .NETScripting Backend should be .NET

      3. API の互換性レベルべき .NET 4.6API Compatibility Level should be .NET 4.6

        その他の設定を更新します。

    2. 内で、発行の設定] タブの [機能、確認してください。Within the Publishing Settings tab, under Capabilities, check:

      1. InternetClientInternetClient

      2. Web カメラWebcam

        発行の設定を更新しています。

    3. パネル、下の方にXR 設定(次に示します発行設定)、ティック仮想現実サポート、ことを確認、 Windows Mixed Reality SDKが追加されます。Further down the panel, in XR Settings (found below Publish Settings), tick Virtual Reality Supported, make sure the Windows Mixed Reality SDK is added.

      X の R の設定を更新します。

  8. 戻りBuild Settings Unity C# プロジェクトが不要になったグレー; これの横にあるチェック ボックスをオンにします。Back in Build Settings Unity C# Projects is no longer greyed out; tick the checkbox next to this.

  9. ビルド設定ウィンドウを閉じます。Close the Build Settings window.

  10. シーンとプロジェクトを保存 (ファイル > シーン保存/ファイル > プロジェクトを保存)。Save your Scene and Project (FILE > SAVE SCENE / FILE > SAVE PROJECT).

第 3 章 – メイン カメラのセットアップChapter 3 – Main Camera setup

重要

スキップする場合、 Unity を設定するコンポーネントのこのコースで、コードにまっすぐコンティニュし、自由にこれをダウンロード.unitypackage、としてプロジェクトにインポート、カスタム パッケージから続けて第 5 章します。If you wish to skip the Unity Set up component of this course, and continue straight into code, feel free to download this .unitypackage, import it into your project as a Custom Package, and then continue from Chapter 5.

  1. 階層パネルを選択、 Main Cameraします。In the Hierarchy Panel, select the Main Camera.

  2. すべてのコンポーネントを参照してください。 選択すると、ができる、 Main Cameraで、インスペクター パネルします。Once selected, you will be able to see all the components of the Main Camera in the Inspector Panel.

    1. Camera オブジェクト名前を指定する必要がありますMain Camera (スペルに注意してください)。The Camera object must be named Main Camera (note the spelling!)

    2. Main Cameraタグに設定する必要がありますMainCamera (スペルに注意してください)。The Main Camera Tag must be set to MainCamera (note the spelling!)

    3. 必ず、変換位置に設定されている0, 0, 0Make sure the Transform Position is set to 0, 0, 0

    4. 設定フラグをクリア単色(イマーシブ ヘッドセットの無視) します。Set Clear Flags to Solid Color (ignore this for immersive headset).

    5. 設定、バック グラウンドにカメラのコンポーネントの色黒、アルファ 0 (16 進コード: #00000000) (イマーシブ ヘッドセットの無視) します。Set the Background Color of the Camera Component to Black, Alpha 0 (Hex Code: #00000000) (ignore this for immersive headset).

      カメラのコンポーネントを更新します。

  3. 次に接続されている単純な"Cursor"オブジェクトを作成する必要が、 Main Camera、画像分析を配置するのに役立つ出力は、アプリケーションが実行されています。Next, you will have to create a simple “Cursor” object attached to the Main Camera, which will help you position the image analysis output when the application is running. このカーソルでは、カメラのフォーカスの中心点を決定します。This Cursor will determine the center point of the camera focus.

カーソルを作成します。To create the Cursor:

  1. 階層パネルを右クリックし、 Main Cameraします。In the Hierarchy Panel, right-click on the Main Camera. [ 3D オブジェクト、] をクリックしてします。Under 3D Object, click on Sphere.

    カーソル オブジェクトを選択します。

  2. 名前の変更、カーソル(カーソル オブジェクトをダブルクリックまたはオブジェクトを選択した 'F2' キーボード ボタンを押す) の子であるかどうかを確認して、 Main Camera.Rename the Sphere to Cursor (double click the Cursor object or press the ‘F2’ keyboard button with the object selected), and make sure it is located as child of the Main Camera.

  3. 階層パネル、左クリックしてで、カーソルします。In the Hierarchy Panel, left click on the Cursor. カーソルが選択されている、調整では、次の変数、インスペクター パネル:With the Cursor selected, adjust the following variables in the Inspector Panel:

    1. 設定、位置を変換0, 0, 5Set the Transform Position to 0, 0, 5

    2. 設定、スケール0.02、0.02、0.02Set the Scale to 0.02, 0.02, 0.02

      変換の位置とスケールを更新します。

第 4 章 – ラベルのシステムのセットアップChapter 4 – Setup the Label system

HoloLens のカメラでは、イメージをキャプチャした、そのイメージに送信する、 Azure Computer Vision API分析のためのサービス インスタンス。Once you have captured an image with the HoloLens’ camera, that image will be sent to your Azure Computer Vision API Service instance for analysis.

分析の結果と呼ばれる、認識されているオブジェクトのリストが返されますタグします。The results of that analysis will be a list of recognized objects called Tags.

(としてワールド空間における 3D テキスト)、写真の撮影場所にこれらのタグを表示するラベルは使用します。You will use Labels (as a 3D text in world space) to display these Tags at the location the photo was taken.

次の手順では説明を設定する方法、ラベルオブジェクト。The following steps will show how to setup the Label object.

  1. 階層のパネル (場所がこの時点で関係ありませんが)、任意の場所を右クリックして3D オブジェクト、追加、 3D テキストします。Right-click anywhere in the Hierarchy Panel (the location does not matter at this point), under 3D Object, add a 3D Text. 名前を付けますLabelTextします。Name it LabelText.

    3D テキスト オブジェクトを作成します。

  2. 階層パネル、左クリックしてで、 LabelTextします。In the Hierarchy Panel, left click on the LabelText. LabelTextで次の変数を選択すると、調整、インスペクター パネル:With the LabelText selected, adjust the following variables in the Inspector Panel:

    1. 設定、位置0,0,0Set the Position to 0,0,0
    2. 設定、スケール0.01、0.01、0.01Set the Scale to 0.01, 0.01, 0.01
    3. コンポーネントでテキスト メッシュ:In the component Text Mesh:
    4. 内のすべてのテキストを置き換えるテキスト、with「...」Replace all the text within Text, with "..."
    5. 設定、アンカー中央Set the Anchor to Middle Center
    6. 設定、配置センターSet the Alignment to Center
    7. 設定、 タブ サイズ4Set the Tab Size to 4
    8. 設定、フォント サイズ50Set the Font Size to 50
    9. 設定、#FFFFFFFFSet the Color to #FFFFFFFF

    テキストのコンポーネント

  3. ドラッグ、 LabelTextから、階層パネルに、アセット フォルダー内でのプロジェクト パネルします。Drag the LabelText from the Hierarchy Panel, into the Asset Folder, within in the Project Panel. これは、ように、 LabelTextプレハブ、コードでその it をインスタンス化できるようにします。This will make the LabelText a Prefab, so that it can be instantiated in code.

    LabelText オブジェクトのプレハブを作成します。

  4. 削除する必要があります、 LabelTextから、階層パネル、開くシーンでは表示されません。You should delete the LabelText from the Hierarchy Panel, so that it will not be displayed in the opening scene. プレハブを Assets フォルダーから個々 のインスタンスで呼び出すが、これは現在、シーン内に収まる必要はありません。As it is now a prefab, which you will call on for individual instances from your Assets folder, there is no need to keep it within the scene.

  5. 最終的なオブジェクトの構造、階層パネル次の図に示すようになります。The final object structure in the Hierarchy Panel should be like the one shown in the image below:

    階層のパネルの最終的な構造体。

第 5 章 – ResultsLabel クラスを作成します。Chapter 5 – Create the ResultsLabel class

最初のスクリプトを作成する必要がありますが、 ResultsLabelクラスは、次の原因となっています。The first script you need to create is the ResultsLabel class, which is responsible for the following:

  • カメラの位置を基準とした、適切なワールド空間で、ラベルを作成します。Creating the Labels in the appropriate world space, relative to the position of the Camera.
  • イメージれたからタグを表示します。Displaying the Tags from the Image Anaysis.

このクラスを作成します。To create this class:

  1. 右クリックし、プロジェクト パネル、し作成 > フォルダーします。Right-click in the Project Panel, then Create > Folder. フォルダーの名前スクリプトします。Name the folder Scripts.

    [スクリプト] フォルダーを作成します。

  2. スクリプトフォルダーの作成、アイコンをダブルクリックして開きます。With the Scripts folder create, double click it to open. そのフォルダーを右クリックし、内作成 >C#スクリプトします。Then within that folder, right-click, and select Create > then C# Script. スクリプトの名前ResultsLabelします。Name the script ResultsLabel.

  3. 新しいをダブルクリックします。 ResultsLabelスクリプト ファイルを開くVisual Studioします。Double click on the new ResultsLabel script to open it with Visual Studio.

  4. クラス内で次のコードを挿入、 ResultsLabelクラス。Inside the Class insert the following code in the ResultsLabel class:

        using System.Collections.Generic;
        using UnityEngine;
    
        public class ResultsLabel : MonoBehaviour
        {   
            public static ResultsLabel instance;
    
            public GameObject cursor;
    
            public Transform labelPrefab;
    
            [HideInInspector]
            public Transform lastLabelPlaced;
    
            [HideInInspector]
            public TextMesh lastLabelPlacedText;
    
            private void Awake()
            {
                // allows this instance to behave like a singleton
                instance = this;
            }
    
            /// <summary>
            /// Instantiate a Label in the appropriate location relative to the Main Camera.
            /// </summary>
            public void CreateLabel()
            {
                lastLabelPlaced = Instantiate(labelPrefab, cursor.transform.position, transform.rotation);
    
                lastLabelPlacedText = lastLabelPlaced.GetComponent<TextMesh>();
    
                // Change the text of the label to show that has been placed
                // The final text will be set at a later stage
                lastLabelPlacedText.text = "Analysing...";
            }
    
            /// <summary>
            /// Set the Tags as Text of the last Label created. 
            /// </summary>
            public void SetTagsToLastLabel(Dictionary<string, float> tagsDictionary)
            {
                lastLabelPlacedText = lastLabelPlaced.GetComponent<TextMesh>();
    
                // At this point we go through all the tags received and set them as text of the label
                lastLabelPlacedText.text = "I see: \n";
    
                foreach (KeyValuePair<string, float> tag in tagsDictionary)
                {
                    lastLabelPlacedText.text += tag.Key + ", Confidence: " + tag.Value.ToString("0.00 \n");
                }    
            }
        }
    
  5. 変更を保存することを確認するVisual Studioに戻る前にUnityします。Be sure to save your changes in Visual Studio before returning to Unity.

  6. 戻り、 Unity エディター をクリックし、ドラッグ、 ResultsLabelクラスから、スクリプトフォルダーをMain Camera 内のオブジェクト階層パネルします。Back in the Unity Editor, click and drag the ResultsLabel class from the Scripts folder to the Main Camera object in the Hierarchy Panel.

  7. をクリックして、 Main Cameraを見て、インスペクター パネルします。Click on the Main Camera and look at the Inspector Panel.

カメラにドラッグしたスクリプトからが 2 つのフィールドが表示されます。カーソルPrefab ラベルします。You will notice that from the script you just dragged into the Camera, there are two fields: Cursor and Label Prefab.

  1. 呼ばれるオブジェクトをドラッグしてカーソルから、階層パネルという名前のスロットにカーソル、次の図に示すようにします。Drag the object called Cursor from the Hierarchy Panel to the slot named Cursor, as shown in the image below.

  2. 呼ばれるオブジェクトをドラッグしてLabelTextから、 Assets フォルダーで、プロジェクト パネルという名前のスロットにラベル Prefabように、次の図。Drag the object called LabelText from the Assets Folder in the Project Panel to the slot named Label Prefab, as shown in the image below.

    Unity 内で参照のターゲットを設定します。

第 6 章 – ImageCapture クラスを作成します。Chapter 6 – Create the ImageCapture class

次のクラスを作成することには、 ImageCaptureクラス。The next class you are going to create is the ImageCapture class. このクラスは、責任を負います。This class is responsible for:

  • HoloLens のカメラを使用して、アプリ フォルダーに格納することとイメージをキャプチャします。Capturing an Image using the HoloLens Camera and storing it in the App Folder.
  • ユーザーからのタップ ジェスチャをキャプチャします。Capturing Tap gestures from the user.

このクラスを作成します。To create this class:

  1. 移動して、スクリプト以前に作成したフォルダーです。Go to the Scripts folder you created previously.

  2. フォルダー内を右クリックして作成 >C#スクリプトします。Right-click inside the folder, Create > C# Script. スクリプトを呼び出すImageCaptureします。Call the script ImageCapture.

  3. 新しいをダブルクリックします。 ImageCaptureスクリプト ファイルを開くVisual Studioします。Double click on the new ImageCapture script to open it with Visual Studio.

  4. ファイルの先頭には、次の名前空間を追加します。Add the following namespaces to the top of the file:

        using System.IO;
        using System.Linq;
        using UnityEngine;
        using UnityEngine.XR.WSA.Input;
        using UnityEngine.XR.WSA.WebCam;
    
  5. 内で、次の変数を追加し、 ImageCaptureクラス上、 Start() メソッド。Then add the following variables inside the ImageCapture class, above the Start() method:

        public static ImageCapture instance; 
        public int tapsCount;
        private PhotoCapture photoCaptureObject = null;
        private GestureRecognizer recognizer;
        private bool currentlyCapturing = false;
    

TapsCount変数で、ユーザーからキャプチャされたタップ ジェスチャの数を格納します。The tapsCount variable will store the number of tap gestures captured from the user. この番号は、キャプチャしたイメージの名前付けで使用されます。This number is used in the naming of the images captured.

  1. コードをAwake()Start() 今すぐメソッドを追加する必要があります。Code for Awake() and Start() methods now needs to be added. これらが、クラスの初期化時に呼び出されます。These will be called when the class initializes:

        private void Awake()
        {
            // Allows this instance to behave like a singleton
            instance = this;
        }
    
        void Start()
        {
            // subscribing to the Hololens API gesture recognizer to track user gestures
            recognizer = new GestureRecognizer();
            recognizer.SetRecognizableGestures(GestureSettings.Tap);
            recognizer.Tapped += TapHandler;
            recognizer.StartCapturingGestures();
        }
    
  2. タップ ジェスチャが発生したときに呼び出されるハンドラーを実装します。Implement a handler that will be called when a Tap gesture occurs.

        /// <summary>
        /// Respond to Tap Input.
        /// </summary>
        private void TapHandler(TappedEventArgs obj)
        {
            // Only allow capturing, if not currently processing a request.
            if(currentlyCapturing == false)
            {
                currentlyCapturing = true;
    
                // increment taps count, used to name images when saving
                tapsCount++;
    
                // Create a label in world space using the ResultsLabel class
                ResultsLabel.instance.CreateLabel();
    
                // Begins the image capture and analysis procedure
                ExecuteImageCaptureAndAnalysis();
            }
        }
    

TapHandler() メソッドは、ユーザーからキャプチャされたタップ数をインクリメントし、現在のカーソル位置を使用して、新しいラベルを配置する場所を決定します。The TapHandler() method increments the number of taps captured from the user and uses the current Cursor position to determine where to position a new Label.

このメソッドを呼び出して、 ExecuteImageCaptureAndAnalysis() メソッドをこのアプリケーションのコア機能を開始します。This method then calls the ExecuteImageCaptureAndAnalysis() method to begin the core functionality of this application.

  1. イメージをキャプチャして保存すると、以下のハンドラーが呼び出されます。Once an Image has been captured and stored, the following handlers will be called. 結果が渡されるプロセスが成功した場合、 VisionManager (まだ作成としています) を分析します。If the process is successful, the result is passed to the VisionManager (which you are yet to create) for analysis.

        /// <summary>
        /// Register the full execution of the Photo Capture. If successful, it will begin 
        /// the Image Analysis process.
        /// </summary>
        void OnCapturedPhotoToDisk(PhotoCapture.PhotoCaptureResult result)
        {
            // Call StopPhotoMode once the image has successfully captured
            photoCaptureObject.StopPhotoModeAsync(OnStoppedPhotoMode);
        }
    
        void OnStoppedPhotoMode(PhotoCapture.PhotoCaptureResult result)
        {
            // Dispose from the object in memory and request the image analysis 
            // to the VisionManager class
            photoCaptureObject.Dispose();
            photoCaptureObject = null;
            StartCoroutine(VisionManager.instance.AnalyseLastImageCaptured()); 
        }
    
  2. 次に、イメージのキャプチャ プロセスを開始し、イメージを格納するアプリケーションが使用するメソッドを追加します。Then add the method that the application uses to start the Image capture process and store the image.

        /// <summary>    
        /// Begin process of Image Capturing and send To Azure     
        /// Computer Vision service.   
        /// </summary>    
        private void ExecuteImageCaptureAndAnalysis()  
        {    
            // Set the camera resolution to be the highest possible    
            Resolution cameraResolution = PhotoCapture.SupportedResolutions.OrderByDescending((res) => res.width * res.height).First();    
    
            Texture2D targetTexture = new Texture2D(cameraResolution.width, cameraResolution.height);
    
            // Begin capture process, set the image format    
            PhotoCapture.CreateAsync(false, delegate (PhotoCapture captureObject)    
            {    
                photoCaptureObject = captureObject;    
                CameraParameters camParameters = new CameraParameters();    
                camParameters.hologramOpacity = 0.0f;    
                camParameters.cameraResolutionWidth = targetTexture.width;    
                camParameters.cameraResolutionHeight = targetTexture.height;    
                camParameters.pixelFormat = CapturePixelFormat.BGRA32;
    
                // Capture the image from the camera and save it in the App internal folder    
                captureObject.StartPhotoModeAsync(camParameters, delegate (PhotoCapture.PhotoCaptureResult result)
                {    
                    string filename = string.Format(@"CapturedImage{0}.jpg", tapsCount);
    
                    string filePath = Path.Combine(Application.persistentDataPath, filename);
    
                    VisionManager.instance.imagePath = filePath;
    
                    photoCaptureObject.TakePhotoAsync(filePath, PhotoCaptureFileOutputFormat.JPG, OnCapturedPhotoToDisk);
    
                    currentlyCapturing = false;
                });   
            });    
        }
    

警告

この時点で表示されるエラーが表示されます、 Unity エディターのコンソール パネルします。At this point you will notice an error appearing in the Unity Editor Console Panel. これは、コードを参照しているため、 VisionManagerクラスは次の章で作成されます。This is because the code references the VisionManager class which you will create in the next Chapter.

第 7 章 – Azure と画像分析への呼び出しChapter 7 – Call to Azure and Image Analysis

最後のスクリプトを作成する必要がありますが、 VisionManagerクラス。The last script you need to create is the VisionManager class.

このクラスは、責任を負います。This class is responsible for:

  • バイト配列としてキャプチャされた最新のイメージを読み込んでいます。Loading the latest image captured as an array of bytes.
  • 送信するバイト配列、 Azure Computer Vision API分析のためのサービス インスタンス。Sending the byte array to your Azure Computer Vision API Service instance for analysis.
  • JSON 文字列としての応答を受信します。Receiving the response as a JSON string.
  • 応答を逆シリアル化し、結果として得られるタグを渡す、 ResultsLabelクラス。Deserializing the response and passing the resulting Tags to the ResultsLabel class.

このクラスを作成します。To create this class:

  1. ダブルクリック、スクリプトフォルダーを開きます。Double click on the Scripts folder, to open it.

  2. 内側を右クリックし、スクリプトフォルダー、をクリックして作成 >C#スクリプトRight-click inside the Scripts folder, click Create > C# Script. スクリプトの名前VisionManagerします。Name the script VisionManager.

  3. Visual Studio で開くことに新しいスクリプトをダブルクリックします。Double click on the new script to open it with Visual Studio.

  4. 上部にある、次と同じである名前空間の更新、 VisionManagerクラス。Update the namespaces to be the same as the following, at the top of the VisionManager class:

        using System;
        using System.Collections;
        using System.Collections.Generic;
        using System.IO;
        using UnityEngine;
        using UnityEngine.Networking;
    
  5. スクリプトの上部にあるVisionManagerクラス (上、 Start() メソッド)、2 つ作成する必要がありますクラスですAzure からの逆シリアル化された JSON 応答を表します。At the top of your script, inside the VisionManager class (above the Start() method), you now need to create two Classes that will represent the deserialized JSON response from Azure:

        [System.Serializable]
        public class TagData
        {
            public string name;
            public float confidence;
        }
    
        [System.Serializable]
        public class AnalysedObject
        {
            public TagData[] tags;
            public string requestId;
            public object metadata;
        }
    

    注意

    TagDataAnalysedObjectクラスが必要です、 [System.Serializable] Unity で逆シリアル化できる宣言の前に追加された属性ライブラリ。The TagData and AnalysedObject classes need to have the [System.Serializable] attribute added before the declaration to be able to be deserialized with the Unity libraries.

  6. VisionManager クラスでは、次の変数を追加する必要があります。In the VisionManager class, you should add the following variables:

        public static VisionManager instance;
    
        // you must insert your service key here!    
        private string authorizationKey = "- Insert your key here -";    
        private const string ocpApimSubscriptionKeyHeader = "Ocp-Apim-Subscription-Key";
        private string visionAnalysisEndpoint = "https://westus.api.cognitive.microsoft.com/vision/v1.0/analyze?visualFeatures=Tags";   // This is where you need to update your endpoint, if you set your location to something other than west-us.
    
        internal byte[] imageBytes;
    
        internal string imagePath;
    

    警告

    挿入することを確認、認証キーに、 authorizationKey変数。Make sure you insert your Auth Key into the authorizationKey variable. メモは、認証キーのこのコースでは、先頭に第 1 章します。You will have noted your Auth Key at the beginning of this course, Chapter 1.

    警告

    VisionAnalysisEndpoint変数は、この例で指定されている異なる場合があります。The visionAnalysisEndpoint variable might differ from the one specified in this example. 西部、米国厳密に言うと、米国西部リージョンに作成されたサービス インスタンスにします。The west-us strictly refers to Service instances created for the West US region. これを更新、エンドポイント URL。 ここではその例をいくつかのようになります。Update this with your endpoint URL; here are some examples of what that might look like:

    • 西ヨーロッパ: https://westeurope.api.cognitive.microsoft.com/vision/v1.0/analyze?visualFeatures=TagsWest Europe: https://westeurope.api.cognitive.microsoft.com/vision/v1.0/analyze?visualFeatures=Tags
    • 東南アジア。 https://southeastasia.api.cognitive.microsoft.com/vision/v1.0/analyze?visualFeatures=TagsSoutheast Asia: https://southeastasia.api.cognitive.microsoft.com/vision/v1.0/analyze?visualFeatures=Tags
    • オーストラリア東部: https://australiaeast.api.cognitive.microsoft.com/vision/v1.0/analyze?visualFeatures=TagsAustralia East: https://australiaeast.api.cognitive.microsoft.com/vision/v1.0/analyze?visualFeatures=Tags
  7. 今すぐ、Awake のコードは、追加する必要があります。Code for Awake now needs to be added.

        private void Awake()
        {
            // allows this instance to behave like a singleton
            instance = this;
        }
    
  8. によってキャプチャされたイメージの分析の結果を取得する (ストリームの静的メソッドで下にある)、コルーチンを次に、追加、 ImageCaptureクラス。Next, add the coroutine (with the static stream method below it), which will obtain the results of the analysis of the image captured by the ImageCapture Class.

        /// <summary>
        /// Call the Computer Vision Service to submit the image.
        /// </summary>
        public IEnumerator AnalyseLastImageCaptured()
        {
            WWWForm webForm = new WWWForm();
            using (UnityWebRequest unityWebRequest = UnityWebRequest.Post(visionAnalysisEndpoint, webForm))
            {
                // gets a byte array out of the saved image
                imageBytes = GetImageAsByteArray(imagePath);
                unityWebRequest.SetRequestHeader("Content-Type", "application/octet-stream");
                unityWebRequest.SetRequestHeader(ocpApimSubscriptionKeyHeader, authorizationKey);
    
                // the download handler will help receiving the analysis from Azure
                unityWebRequest.downloadHandler = new DownloadHandlerBuffer();
    
                // the upload handler will help uploading the byte array with the request
                unityWebRequest.uploadHandler = new UploadHandlerRaw(imageBytes);
                unityWebRequest.uploadHandler.contentType = "application/octet-stream";
    
                yield return unityWebRequest.SendWebRequest();
    
                long responseCode = unityWebRequest.responseCode;     
    
                try
                {
                    string jsonResponse = null;
                    jsonResponse = unityWebRequest.downloadHandler.text;
    
                    // The response will be in Json format
                    // therefore it needs to be deserialized into the classes AnalysedObject and TagData
                    AnalysedObject analysedObject = new AnalysedObject();
                    analysedObject = JsonUtility.FromJson<AnalysedObject>(jsonResponse);
    
                    if (analysedObject.tags == null)
                    {
                        Debug.Log("analysedObject.tagData is null");
                    }
                    else
                    {
                        Dictionary<string, float> tagsDictionary = new Dictionary<string, float>();
    
                        foreach (TagData td in analysedObject.tags)
                        {
                            TagData tag = td as TagData;
                            tagsDictionary.Add(tag.name, tag.confidence);                            
                        }
    
                        ResultsLabel.instance.SetTagsToLastLabel(tagsDictionary);
                    }
                }
                catch (Exception exception)
                {
                    Debug.Log("Json exception.Message: " + exception.Message);
                }
    
                yield return null;
            }
        }
    
        /// <summary>
        /// Returns the contents of the specified file as a byte array.
        /// </summary>
        private static byte[] GetImageAsByteArray(string imageFilePath)
        {
            FileStream fileStream = new FileStream(imageFilePath, FileMode.Open, FileAccess.Read);
            BinaryReader binaryReader = new BinaryReader(fileStream);
            return binaryReader.ReadBytes((int)fileStream.Length);
        }  
    
  9. 変更を保存することを確認するVisual Studioに戻る前にUnityします。Be sure to save your changes in Visual Studio before returning to Unity.

  10. 戻る Unity エディターで、をクリックし、ドラッグ、 VisionManagerImageCaptureクラスをスクリプトフォルダーをMain Cameraオブジェクト、階層パネルします。Back in the Unity Editor, click and drag the VisionManager and ImageCapture classes from the Scripts folder to the Main Camera object in the Hierarchy Panel.

第 8 章: ビルドする前にChapter 8 – Before building

アプリケーションの徹底的なテストを実行するには、必要がありますをサイドロードすること、HoloLens にします。To perform a thorough test of your application you will need to sideload it onto your HoloLens. 実行する前にいることを確認します。Before you do, ensure that:

  • 説明されているすべての設定第 2 章が正しく設定されています。All the settings mentioned in Chapter 2 are set correctly.
  • 関連付けられているすべてのスクリプト、 Main Cameraオブジェクト。All the scripts are attached to the Main Camera object.
  • 内のすべてのフィールド、カメラ インスペクター [メイン] パネルが適切に割り当てられます。All the fields in the Main Camera Inspector Panel are assigned properly.
  • 挿入することを確認、認証キーに、 authorizationKey変数。Make sure you insert your Auth Key into the authorizationKey variable.
  • エンドポイントもチェックすることを確認、 VisionManagerスクリプト、およびに合わせて配置 リージョン (このドキュメントでは西-ご既定)。Ensure that you have also checked your endpoint in your VisionManager script, and that it aligns to your region (this document uses west-us by default).

9 – 章ビルド UWP ソリューションおよびサイドロード アプリケーションChapter 9 – Build the UWP Solution and sideload the application

このプロジェクトの Unity のセクションの必要なすべてが今すぐ完了したら、ので、Unity から構築するための時間。Everything needed for the Unity section of this project has now been completed, so it is time to build it from Unity.

  1. 移動しますビルド設定 - ファイル > の設定を作成しています.Navigate to Build Settings - File > Build Settings…

  2. Build Settingsウィンドウで、をクリックしてビルドします。From the Build Settings window, click Build.

    Unity からのアプリの構築

  3. まだ行っていない場合、ティックUnityC#プロジェクトします。If not already, tick Unity C# Projects.

  4. [Build] をクリックします。Click Build. Unity を起動、ファイル エクスプ ローラーウィンドウを作成しにアプリをビルドするフォルダーを選択する必要があります。Unity will launch a File Explorer window, where you need to create and then select a folder to build the app into. ここで、そのフォルダーを作成し、名前アプリします。Create that folder now, and name it App. 使用し、アプリフォルダーを選択すると、キーを押してフォルダーの選択します。Then with the App folder selected, press Select Folder.

  5. Unity にプロジェクトをビルドを開始、アプリフォルダー。Unity will begin building your project to the App folder.

  6. 1 回 Unity には、(少し時間がかかる場合があります) ビルドが完了したが開き、ファイル エクスプ ローラービルドの位置にあるウィンドウ (上の windows では、常に表示されないの新しい追加の通知をタスク バーを確認ウィンドウ)。Once Unity has finished building (it might take some time), it will open a File Explorer window at the location of your build (check your task bar, as it may not always appear above your windows, but will notify you of the addition of a new window).

HoloLens に章 – 10 を展開します。Chapter 10 – Deploy to HoloLens

HoloLens の展開。To deploy on HoloLens:

  1. 必要になります、HoloLens の IP アドレス (リモート) を展開し、HoloLens をことを確認するには開発者モードします。You will need the IP Address of your HoloLens (for Remote Deploy), and to ensure your HoloLens is in Developer Mode. これには、次の手順を実行します。To do this:

    1. ソックスを着けずに、HoloLens 中を開く、設定します。Whilst wearing your HoloLens, open the Settings.
    2. 移動してネットワークとインターネット > Wi-fi > 詳細オプションGo to Network & Internet > Wi-Fi > Advanced Options
    3. 注、 IPv4アドレス。Note the IPv4 address.
    4. 次に移動します設定、し更新とセキュリティ > 開発者向けNext, navigate back to Settings, and then to Update & Security > For Developers
    5. 開発者モードを設定します。Set Developer Mode On.
  2. 新しい Unity ビルドに移動します (、アプリフォルダー) とソリューション ファイルを開くとVisual Studioします。Navigate to your new Unity build (the App folder) and open the solution file with Visual Studio.

  3. ソリューション構成の選択でデバッグします。In the Solution Configuration select Debug.

  4. ソリューション プラットフォーム で選択x86リモート マシンします。In the Solution Platform, select x86, Remote Machine.

    Visual Studio からソリューションをデプロイします。

  5. 移動して、ビルド メニューの をクリックソリューションの配置サイドロード、HoloLens をアプリケーションにします。Go to the Build menu and click on Deploy Solution, to sideload the application to your HoloLens.

  6. アプリが、起動する準備ができて、HoloLens にインストールされているアプリの一覧に表示されます。Your App should now appear in the list of installed apps on your HoloLens, ready to be launched!

注意

イマーシブ ヘッドセットを展開するには、設定、ソリューション プラットフォームローカル マシン、設定と、構成デバッグx86として、プラットフォームします。To deploy to immersive headset, set the Solution Platform to Local Machine, and set the Configuration to Debug, with x86 as the Platform. ローカルにデプロイし、machine を使用して、ビルド メニューの選択ソリューションの配置します。Then deploy to the local machine, using the Build menu, selecting Deploy Solution.

完成した Computer Vision API アプリケーションYour finished Computer Vision API application

これで、現実世界のオブジェクトを認識し、内容は、発生の信頼度を表示する Azure の Computer Vision API を利用している mixed reality アプリを構築します。Congratulations, you built a mixed reality app that leverages the Azure Computer Vision API to recognize real world objects, and display confidence of what has been seen.

ラボの結果

ボーナスの演習Bonus exercises

手順 1Exercise 1

使用したのと同様、タグパラメーター (内からわかるように、エンドポイント内で使用される、 VisionManager)、その他の情報を検出するためにアプリを拡張; を見てその他のパラメーターへのアクセスがあるここします。Just as you have used the Tags parameter (as evidenced within the endpoint used within the VisionManager), extend the app to detect other information; have a look at what other parameters you have access to HERE.

手順 2Exercise 2

おそらく、番号を非表示より会話で読みやすい方法で返される Azure のデータを表示します。Display the returned Azure data, in a more conversational, and readable way, perhaps hiding the numbers. いなくても、ボットは、ユーザーに話す可能性があります。As though a bot might be speaking to the user.