3d-vrテスト用のプロトタイプをインポートするためのunityテンプレート

2024/05/16

3d-vrテスト プロトタイプ
3d-vrテスト プロトタイプ
3d-vrテスト プロトタイプ

ProtoPieプロトタイプをUnityにインポートして3DおよびVRテストを行う

3DやVR用に作られた忠実度の高いプロトタイプで、未来の空間デザインを体験することができます!デザイナーであれば、できるだけ多くの現実的なシナリオでプロトタイプをテストし、改良することが非常に重要であることをよくご存じだと思います。ProtoPie Connectを使えば、Meta Quest(Oculus)や最近発表されたApple Vision ProなどのトップクラスのVRヘッドセットとシームレスに統合できます。このテンプレートは、コーディングの経験がなくても、デザインの可能性を最大限に引き出します。

時間をかけて複雑なプロセスでデザインをUnity 3Dに取り込む時代は過ぎ去りました。ProtoPieで作成した忠実度の高いプロトタイプをインポートする方法はシンプルです。経験豊富なデザイナーでも、駆け出しのデザイナーでも、このテンプレートガイドを使えば、Unityでプロトタイプをプレビューしてテストするプロセスがより柔軟でインタラクティブなものになります。ProtoPieプロトタイプを使って、3D/VRテストの世界に飛び込みましょう!

セットアップ

Unityテンプレートに3D WebViewプラグインをインストールする

1. Unityテンプレートをダウンロードします。

2. お手持ちのパソコンにUnityをダウンロードし、インストールしてください。今回の動画ガイドのテンプレートプロジェクトはUnity 2020.3.28でテストされています。そのため、テストしたい場合は、このバージョンまたはそれ以降の長期サポートバージョンをインストールすることを推奨します。

3. テンプレートを開くと、ウィンドウが表示されます。”Ignore” を選択して次に進んでください。

Select the ignore option to proceed

4. テンプレートを開くと、プロジェクトからCanvasWebViewPrefabsが消えている場合があります。

Missing part in the project

この問題を解決するには、以下の手順に従ってください。

  1. Vuplex 3D WebView for Windows and macOSプラグインを入手します。このプラグインを使用すると、UnityにWebコンテンツを埋め込むことができます。

Vuplex 3D WebView for Windows and macOS plugin

b. Unityにて、Assets > Import Package > Custom Packageと進みます。

Go to Assets > Import Package > Custom Package

c. 公式サイトからダウンロードしたVuplexプラグインを探し、開きます。

Locate the Vuplex plugin

d. Vuplexプラグインを見つけたら、画面右下の「Import」をクリックします。

Click on "Import" at the bottom right-hand corner of the screen

e. プラグイン(.unitypackage)の読み込みが完了すると、プロジェクト内にCanvasWebViewPrefabオブジェクトが青く表示されるはずです。これはパッケージが正常にインポートされたことを意味します。

The package has been successfully imported

プロトタイプをUnityにロードする

プロトタイプをUnityにロードするには、まずプロトタイプのURLを取得する必要があります。ProtoPie Connectを使用している場合は、以下の簡単な手順に従います。ProtoPie Studioを使用している場合は、プロトタイプをクラウドにアップロードしても同じ結果を得ることができます。さっそく始めましょう!

1. プロトタイプをProtoPie Connectにドラッグまたはインポートします。以下は、最初の動画ガイドで使用したテスト用プロトタイプです。

Import your prototypes into ProtoPie Connect

2. 各プロトタイプについて、プロトタイプの横にあるモニターボタンをクリックして、ブラウザで開きます。

Open in browser by clicking the monitor button

OculusヘッドセットをMacデバイスと一緒に使用している場合、以下の手順は適用されません。直接「Build Android Apps From the Template and Load It Onto Quest」にアクセスしてください。

3. WebViewの背景を透明にするには、まずプロトタイプのURLを見つける必要があります。次に、URLの末尾に"&bg=transparent "を追加します。これはローカルとProtoPieクラウドの両方のURLに適用されます。以下がその例です。

  • 元のURL:localhost:9981/pie?pieid=2&name=Video%20Player

変更後のURL: localhost:9981/pie?pieid=2&name=Video%20Player&bg=transparent

Revise the URL of your prototype

4. Unityに戻ります。Hierarchyウィンドウから、Main Canvas > CanvasWebViewPrefabを選択します。

Locate Main Canvas > CanvasWebViewPrefab

5. Inspectorウィンドウから、Initial URL(optional)を探します。コピーしたURLをここに貼り付けます。

Paste the URL in the Unity template

動画ガイドでは、Video PlayerのURLをMain Canvas > CanvasWebViewPrefabに、Web StripeのURLをSide Canvas > CanvasWebViewPrefabに貼り付けています。

6. この時点で、テンプレートを起動する準備ができました。"Play"ボタンをクリックし、Questヘッドセットを使ってプロジェクトを体験してみましょう。

テンプレートからAndroidアプリをビルドしてQuestにロードする

残念ながら、Oculus LinkコネクションはmacOSでは利用できないため、ライブプレビューにはアクセスできません。しかし、このテンプレートをAndroidアプリケーションとしてビルドし、ヘッドセットにロードすることで実行することはできます。

Solution for macOS

1. ProtoPie Connectを開きます。ウィンドウの一番下(ユーザー名の横)で、ローカルIPアドレスを探します。

Find your local IP address

2. ブラウザでプロトタイプを開いた状態で、URLの"localhost"を実際のIPアドレスに置き換えます。以下がその例です。

  • 元のURL:http://localhost:9981/pie?pieid=2

  • 修正後のURL:http://192.168.1.4:9981/pie?pieid=2

アプリをテストする際、URLに"localhost"を使用するのは避けてください。具体的には、Questヘッドセットでアプリを実行する場合、アプリはProtoPie Connectが動作しているローカルデバイス(Macなど)では実行されません。

3. URLの末尾に&bg=transparentを追加します。以下がその例です。

  • http://192.168.1.4:9981/pie?pieid=2&bg=transparent

4. Unityに戻ります。Hierarchyウィンドウから、Main Canvas > CanvasWebViewPrefabを選択します。

Locate Main Canvas > CanvasWebViewPrefab

5. Inspectorウィンドウから、Initial URL(optional)を探します。修正したURLをここに貼り付けます。

Paste the revised URL

動画ガイドでは、Video PlayerのURLをMain Canvas > CanvasWebViewPrefabに、Web StripeのURLをSide Canvas > CanvasWebViewPrefabに貼り付けています。

6. 次に、Unityプロジェクトを保存し、File > Build Settings...の順に進みます。

Navigate to File > Build Settings...

7. サイドメニューでAndroidを選択します。初めてプログラムを実行する場合は、Androidモジュールをダウンロードする必要があります。

8. ヘッドセットをデバイスに接続します。ヘッドセットをUSB経由でMacまたはパソコンに接続する際、USBデバッグまたはデータアクセスの許可を求めるウィンドウが表示されたら、必ず「Allow(許可)」を選択してください。初めてプログラムを実行する場合は、Androidモジュールをダウンロードする必要があります。

9. Macの「Run Device」にQuestヘッドセットを表示するには、接続後に「Refresh」ボタンをクリックします。

Click the “Refresh” button after connecting

10. Refreshコマンドが実行されると、使用可能なデバイスのリストが表示されます。リストから使用するQuestデバイスを選択してください(例:Quest 2)。

Select your Quest device from the list

11. APKファイルの名前を選択し、「Save(保存)」をクリックします。

Name the APK file and click save

12. ビルドプロセスが正常に完了すると、Questヘッドセットのファイルにすぐにアクセスできるようになります。

Access the file on your Quest headset

UnityテンプレートでVRプロトタイプテストをよりシンプルに

このガイドが、ProtoPieプロトタイプをUnity 3Dにインポートするプロセスをシンプルにするお役に立てば幸いです。弊社独自のUnityテンプレートを使用することで、3DやVR環境でのテストやプレビューにおいて、より柔軟でインタラクティブなデザインをお楽しみいただけます。

弊社のテンプレートについてご質問やご意見がございましたら、お気軽にお問い合わせください。お客様のデザインニーズに最適なソリューションをご紹介できるよう、サポートさせていただきます。ぜひ、このテンプレートを使って素晴らしいデザインを作成してください!

ProtoPie Connectの詳細 




© 2023 Studio XID. All rights reserved.
Address : ProtoPie Building, 37-6, Hoenamu-ro 13ga-gil, Yongsan-gu, Seoul 04344, Republic of Korea

CEO : Tony Kim

© 2023 Studio XID. All rights reserved.

© 2023 Studio XID. All rights reserved.

© 2023 Studio XID.

© 2023 Studio XID.