Synamon’s Engineer blog

Synamonはリアルとデジタルの融合を加速させるため、メタバース領域で法人向けにサービス提供を行うテックカンパニーです。現在開発を進めている「メタバース総合プラットフォーム」をはじめ、メタバース市場の発展に向けた事業展開を行っています。このブログでは、メタバース技術とその周辺の技術、開発全般に関してエンジニアがお話しします。

HoloLens2をさわってみた [第2回_他の人と使えるHololens2アプリをつくる]

f:id:kazuyaplus:20220214152337p:plain

はじめに

こんにちは、エンジニアの伊藤(@kazuyaplus)です。
前回はMRTKを使い、キューブを動かしたり回したりできるようにしました。

第2回ではPUN2を使い、UnityエディタとHololens2でキューブの動きを共有する方法を紹介していきたいと思います。

  • 第1回 : ひとりで使えるHololens2アプリをつくる ~Unity・VisualStudio・MRTKのインストールからビルドまで ~
  • 第2回 : 他の人と使えるHololens2アプリをつくる ~PUN2を使ってオブジェクトを共有~
  • 第3回 : Tips ~Wi-Fiを使ってアプリをインストール~
  • 第4回 : 他の人と同じ空間で使えるHololens2アプリをつくる ~AzureSpatialAnchorsを使った空間同期~

用語集

  • MRTK
    • [Mixed Reality Toolkit]の略で、AR、VRで使えるUIライブラリ
  • PUN2
    • [Photon Unity Networking2]の略で、Unityにオンライン機能を組み込むためのサービス
  • AzureSpatialAnchors
    • 複数のユーザーが同じ物理的な場所にデジタルコンテンツを配置できるようにするためのサービス

検証環境

  • Unity:2020.3.26f1
  • MRTK:2.7.3
  • VisualStudio:2019
  • Device:HoloLens2

手順

追加機能を有効にする

第1回のプロジェクトの続きから始めるので、不明な点がある場合は第1回目を確認してみてください。

さっそく始めていきましょう、Unityメニューで、Edit > Project Settings を選択して[Player]ウィンドウを開き、

Universal Windows Platform Settingsタブから [Publishing Settings]を見つけます。

[Capabilities]の設定で[InternetClient] [Microphone] [SpatialPerception] [GazeInput]が有効になっていることを確認します。

さらに追加で以下の機能を有効にします。

  • InternetClientServer機能
  • PrivateNetworkClientServer機能

f:id:kazuyaplus:20220215203329j:plain

空間認識システムを有効にする

[Hierarchy]でMixedRealityToolkitオブジェクトを選択して、[Inspector]を開きます。

[DefaultHololens2 Configuration Profile]をクローンして新しいプロファイルを作成します。

f:id:kazuyaplus:20220215203442j:plain

次に、[Spatial Awareness]セクション で [Enable Spatial Awareness System] を有効にします。

有効にしたら[DefaultMixedRealitySpatialAwarenessSystemProfile] をクローンします。

f:id:kazuyaplus:20220215203612j:plain

クローンができたら[XR SDK WindowsMixedRealitySpatialMesh Observer] を展開します。

展開したら、[DefaultMixedRealitySpatialAwarenessMeshObserverProfile] をクローンします。

f:id:kazuyaplus:20220219141902j:plain

クローンができたら DisplaySettings > DisplayOption をOcclusionにします。

f:id:kazuyaplus:20220215203829j:plain

オリジナルの空間データを使用するには

引き続き[Spatial Awareness]セクションで新たに [SpatialObjectMeshObserver] タイプのオブザーバーを追加します。

[DefaultObjectMeshObserverProfile] をクローンします。

f:id:kazuyaplus:20220401172617p:plain

チュートリアルアセットのインポート

次のUnityパッケージをこのリンクからダウンロードして、下記の順番にUnityにインポートしていきます。

  1. MRTK.HoloLens2.Unity.Tutorials.Assets.GettingStarted.2.7.2.unitypackage
  2. MRTK.HoloLens2.Unity.Tutorials.Assets.AzureSpatialAnchors.2.7.2.unitypackage
  3. MRTK.HoloLens2.Unity.Tutorials.Assets.MultiUserCapabilities.2.7.2.unitypackage

※MultiUserCapabilitiesアセットパッケージをインポートした後、コンソールウィンドウに、タイプまたは名前空間がないという大量のCS0246エラーが表示されます。これは、PUNアセットをインポートしたら解決されるので、次に進んでください。

PUNアプリケーションの作成

Photonアカウントの作成につきましては省略します。作成手順につきましては参考サイトを確認してください。

準備ができたら、下記のような画面になっていると思いますので[App ID] をコピーしておきます。

f:id:kazuyaplus:20220218171307j:plain

Unityに戻り、メニューの Window > Asset Store を選択して開き、[PUN2-FREE]を検索して選択し、アセットをインポートします。

インポートしたら、Window > Photon Unity Networking > PUN Wizardを選択してPunWizardウィンドウを開き、 [Setup Project]ボタンをクリックして[PUN Setup]メニューを開きます。

[App ID]フィールドに、前の手順でコピーしたPUNの[App ID]を貼り付けます。

次に、[Setup Project]ボタンをクリックして、アプリIDを適用します。

f:id:kazuyaplus:20220215204557j:plain

PUN Setupに[App ID]をいれると Assets > Photon > PhotonUnityNetworking > Resources に[PhotonServerSettings]ができます。

f:id:kazuyaplus:20220218171538j:plain

これで、PUNアプリと、Unityのプロジェクトを同期する準備ができました。

同期するシーンの準備

プロジェクトウィンドウで、 Assets > MRTK.Tutorials.MultiUserCapabilities > Prefabsフォルダーに移動し、次のプレハブをクリックして[Hierarchy]にドラッグし、シーンに追加します。

  • NetworkLobby
  • SharedPlayground

f:id:kazuyaplus:20220215205455j:plain

プロジェクトウィンドウで、 Assets > MRTK.Tutorials.AzureSpatialAnchors > Prefabsフォルダーに移動し、[ DebugWindow ]をクリックして[Hierarchy]にドラッグし、シーンに追加します。

f:id:kazuyaplus:20220215205623j:plain

プロジェクトウィンドウで、 Assets >  MRTK.Tutorials.MultiUserCapabilities > Resourcesフォルダーに移動します。

[Hierarchy]で、NetworkLobbyオブジェクトを展開し、 NetworkRoomを選択します。次に、Inspectorで、[Photon Room]コンポーネントを見つけて、次のように構成します。

[Photon User Prefab]フィールドに、ResourcesフォルダーからPhotonUserプレハブを割り当てます。

f:id:kazuyaplus:20220215205934j:plain

[Hierarchy] で、MixedRealityPlayspaceオブジェクトを展開し、[MainCamera] オブジェクトを選択します。

次に、[Inspector]から [AR Camera Manager]を追加します。

f:id:kazuyaplus:20220219144656p:plain

続いて、 Assets > MRTK.Tutorials.MultiUserCapabilities > Prefabsフォルダーに移動し、TableAnchorプレハブを[Hierarchy] のSharedPlaygroundオブジェクトにドラッグして、SharedPlaygroundの子としてシーンに追加します。

f:id:kazuyaplus:20220219145045p:plain

TableAnchorオブジェクトを選択し、[MainCamera] コンポーネントをTableAnchorの[AR Session Origin] のカメラフィールドにドラッグします。

f:id:kazuyaplus:20220219145234p:plain

キューブなどを同期する

ここまでは、だいたい参考サイトのチュートリアル通りになりますが、自分で用意したオブジェクトも同期させてみたいので、第1回目で作成したキューブの同期もできるように、色々追加していきたいと思います。

  1. [ cube ] をプレハブにして開きます。
  2. [ PhotonView ]スクリプトをつけます、そのまま展開して[Ownership] > [Ownership Transfer] > [Takeover]にします。
  3. [ Generic Net Sync ] スクリプトをつけます。
  4. [ OwnershipHandler ] スクリプトをつけます。
  5. [ Table Anchor As Parent ] スクリプトをつけます。

f:id:kazuyaplus:20220219161326p:plain

キューブを同期するために、[PhotonRoom.cs] に少しコードを追加しましょう。

PhotonRoom.cs

        public static PhotonRoom Room;

        [SerializeField] private GameObject photonUserPrefab = default;
        [SerializeField] private GameObject roverExplorerPrefab = default;
        [SerializeField] private GameObject TestExplorerPrefab = default;  //←追加
        [SerializeField] private Transform roverExplorerLocation = default;

PhotonRoom.cs

        private void Start()
        {
            if (PhotonNetwork.PrefabPool is DefaultPool pool)
            {
                if (photonUserPrefab != null) pool.ResourceCache.Add(photonUserPrefab.name, photonUserPrefab);

                if (roverExplorerPrefab != null) pool.ResourceCache.Add(roverExplorerPrefab.name, roverExplorerPrefab);

                if (TestExplorerPrefab != null) pool.ResourceCache.Add(TestExplorerPrefab.name, TestExplorerPrefab); //←追加
            }
        }

PhotonRoom.cs

        private void CreateInteractableObjects()
        {
            var position = roverExplorerLocation.position;
            var positionOnTopOfSurface = new Vector3(position.x, position.y + roverExplorerLocation.localScale.y / 2,
                position.z);

            var go = PhotonNetwork.Instantiate(roverExplorerPrefab.name, positionOnTopOfSurface,
                roverExplorerLocation.rotation);

            var goTest = PhotonNetwork.Instantiate(TestExplorerPrefab.name, positionOnTopOfSurface,
                roverExplorerLocation.rotation); //←追加

コードの追加ができたら、PhotonRoom.cs のフィールドにオブジェクトを追加していきましょう。

  1. プロジェクトウィンドウで、 Assets > MRTK.Tutorials.MultiUserCapabilities > Resourcesフォルダーに移動します。
  2. [Hierarchy]で、NetworkLobbyオブジェクトを展開し、 NetworkRoomオブジェクトを選択します。
  3. 次に、[Inspector]で、[Photon Room]コンポーネントを見つけて、Rover Explorer Prefabフィールドに、Resourcesフォルダーから[RoverExplorer_Complete_Variant]プレハブを割り当てます。
  4. 同様に、[Inspector]で、[Photon Room]のTest Explorer Prefabフィールドに、Resourcesフォルダーから[cube]プレハブを割り当てます。
  5. [Photon Room]コンポーネントのRover Explorer Locationフィールドに、 HierarchyウィンドウからTableAnchorの子の[Table]オブジェクトを割り当てます。

f:id:kazuyaplus:20220219172256p:plain

できたらホロレンズにビルドして確認してみましょう、Photonで同期したことにより、Unityやホロレンズで動かしたものが互いに共有されていることが確認できると思います。

f:id:kazuyaplus:20220219173744p:plain

おわりに

ここまで出来たら2台目のホロレンズにビルドを入れて遊んでみたい人が多いのではないのでしょうか?

ということで、次は、Wi-Fi経由でビルドをインストールする方法を紹介します。

参考リンク

docs.microsoft.com

yotiky.hatenablog.com