3d-vrテスト用のプロトタイプをインポートするためのunityテンプレート
2024/05/16
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” を選択して次に進んでください。
4. テンプレートを開くと、プロジェクトからCanvasWebViewPrefabsが消えている場合があります。
この問題を解決するには、以下の手順に従ってください。
Vuplex 3D WebView for Windows and macOSプラグインを入手します。このプラグインを使用すると、UnityにWebコンテンツを埋め込むことができます。
b. Unityにて、Assets > Import Package > Custom Packageと進みます。
c. 公式サイトからダウンロードしたVuplexプラグインを探し、開きます。
d. Vuplexプラグインを見つけたら、画面右下の「Import」をクリックします。
e. プラグイン（.unitypackage）の読み込みが完了すると、プロジェクト内にCanvasWebViewPrefabオブジェクトが青く表示されるはずです。これはパッケージが正常にインポートされたことを意味します。
プロトタイプをUnityにロードする
プロトタイプをUnityにロードするには、まずプロトタイプのURLを取得する必要があります。ProtoPie Connectを使用している場合は、以下の簡単な手順に従います。ProtoPie Studioを使用している場合は、プロトタイプをクラウドにアップロードしても同じ結果を得ることができます。さっそく始めましょう！
1. プロトタイプをProtoPie Connectにドラッグまたはインポートします。以下は、最初の動画ガイドで使用したテスト用プロトタイプです。
2. 各プロトタイプについて、プロトタイプの横にあるモニターボタンをクリックして、ブラウザで開きます。
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
4. Unityに戻ります。Hierarchyウィンドウから、Main Canvas > CanvasWebViewPrefabを選択します。
5. Inspectorウィンドウから、Initial URL(optional)を探します。コピーしたURLをここに貼り付けます。
動画ガイドでは、Video PlayerのURLをMain Canvas > CanvasWebViewPrefabに、Web StripeのURLをSide Canvas > CanvasWebViewPrefabに貼り付けています。
6. この時点で、テンプレートを起動する準備ができました。"Play"ボタンをクリックし、Questヘッドセットを使ってプロジェクトを体験してみましょう。
テンプレートからAndroidアプリをビルドしてQuestにロードする
残念ながら、Oculus LinkコネクションはmacOSでは利用できないため、ライブプレビューにはアクセスできません。しかし、このテンプレートをAndroidアプリケーションとしてビルドし、ヘッドセットにロードすることで実行することはできます。
1. ProtoPie Connectを開きます。ウィンドウの一番下（ユーザー名の横）で、ローカルIPアドレスを探します。
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を選択します。
5. Inspectorウィンドウから、Initial URL(optional)を探します。修正したURLをここに貼り付けます。
動画ガイドでは、Video PlayerのURLをMain Canvas > CanvasWebViewPrefabに、Web StripeのURLをSide Canvas > CanvasWebViewPrefabに貼り付けています。
6. 次に、Unityプロジェクトを保存し、File > Build Settings...の順に進みます。
7. サイドメニューでAndroidを選択します。初めてプログラムを実行する場合は、Androidモジュールをダウンロードする必要があります。
8. ヘッドセットをデバイスに接続します。ヘッドセットをUSB経由でMacまたはパソコンに接続する際、USBデバッグまたはデータアクセスの許可を求めるウィンドウが表示されたら、必ず「Allow（許可）」を選択してください。初めてプログラムを実行する場合は、Androidモジュールをダウンロードする必要があります。
9. Macの「Run Device」にQuestヘッドセットを表示するには、接続後に「Refresh」ボタンをクリックします。
10. Refreshコマンドが実行されると、使用可能なデバイスのリストが表示されます。リストから使用するQuestデバイスを選択してください（例：Quest 2）。
11. APKファイルの名前を選択し、「Save（保存）」をクリックします。
12. ビルドプロセスが正常に完了すると、Questヘッドセットのファイルにすぐにアクセスできるようになります。
UnityテンプレートでVRプロトタイプテストをよりシンプルに
このガイドが、ProtoPieプロトタイプをUnity 3Dにインポートするプロセスをシンプルにするお役に立てば幸いです。弊社独自のUnityテンプレートを使用することで、3DやVR環境でのテストやプレビューにおいて、より柔軟でインタラクティブなデザインをお楽しみいただけます。
弊社のテンプレートについてご質問やご意見がございましたら、お気軽にお問い合わせください。お客様のデザインニーズに最適なソリューションをご紹介できるよう、サポートさせていただきます。ぜひ、このテンプレートを使って素晴らしいデザインを作成してください！