How to Prototype HMI in 3D Virtual Reality

このステップバイステップガイドでは、3Dバーチャルリアリティ（VR）環境でHMI（ヒューマン・マシン・インターフェース）デザインをテストする方法をご紹介します。私たちはProtoPieを使用してインタラクティブなHMIプロトタイプを作成し、それをProtoPie Connect経由で3D VR Unityプロジェクトに統合することで、真に没入感のあるテスト体験を実現しました。

各ステージを順に見ていき、これらのツールが自動車デザインの品質をどう高められるかを発見しましょう。自動車業界におけるHMIデザインとプロトタイピングへのこの刺激的な旅を始めましょう！

下のデモをご覧いただくと、最終的な見た目のイメージがわかります。

3Dプロトタイピングに関するニュースやヒントを受け取るためにサインアップ！

動画

要点

1. HMIプロトタイプを作成する

2. Unityでプロジェクトを作成する

3. ProtoPieのプロトタイプを埋め込むためにUnityを設定する

4. Unity内でプロトタイプを表示する

5. ProtoPieとUnityの間にデータ接続を確立する

6. プロのヒント: このカスタムテンプレートを使ってプロトタイプをインポートする

1. HMIプロトタイプを作成する

これを始めるには、ProtoPieでHMIプロトタイプを作成する必要があります。すでにプロトタイピングでProtoPieを使っている場合は、このステップを飛ばしてかまいません。そうでない場合は、ぜひ ProtoPieを使って自分だけの車載ダッシュボードをデザインする方法を学んでください。

2. Unityでプロジェクトを作成する

1. HMIプロトタイプを作成したら、ProtoPieと一緒に使っているノートPCまたはPCに Unity をダウンロードしてインストールします。デモではUnityバージョン2021.3.14f1を使用しており、このバージョン、またはその後にリリースされたLTS（長期サポート）版のインストールを推奨します。

2. 次に、Unity Hubから新規プロジェクトを作成します。Test Trackテンプレートを選び、Project nameとLocationを設定します。このテンプレートはVolvoから提供されており、Unity Editorのインストール時に提供され、このデモで使用する3D環境を提供します。

私たちと同じくらい3Dプロトタイピングにワクワクしていますか？ それなら、3Dプロトタイピングに関する最新情報やヒントを受け取るためにサインアップしましょう。

3. ProtoPieのPies（プロトタイプ）を埋め込むためのUnityの設定

💡 UnityプロジェクトにWebview（Webブラウザ）を埋め込み、ProtoPie ConnectのWeb Player機能を使ってPiesを表示します。

1. このステップバイステップガイドでは、Unity用のVuplex 3D Webview for Windows and macOSプラグインを使用します。これは、他の代替手段と比べて3DプロジェクトでのWebビュー設定をかなり簡単にしてくれます。

2. Unityで、 Assets > Import Package > Custom Package. に移動します。ダウンロードしたVuplexプラグインを見つけ、Openを選択し、プラグインをプロジェクトにImportします。

3. Unityプロジェクトで、Hierarchyペインの検索ボックスを使って**Canvas **オブジェクトを見つけます。右クリックしてPrefab > Open Asset in Context. を選択します。

4. Hierarchy paneで、ProtoPieのPiesに置き換えるため、**Speed and Gear **オブジェクトを削除します。

Projectペインで、検索するか手動で Assets > Vuplex > WebView> Core > Prefabs > Resources をたどって、CanvasWebViewPrefabを見つけます。

Projectペインから**CanvasWebViewPrefab **をドラッグ＆ドロップして、HierarchyペインのCanvasの下に配置します。

5. 2つのWebビューが必要なので、もう1つ作成し、名前をWebViewClusterと**WebViewCenter. **に変更します。

WebViewClusterはドライバー前のクラスターディスプレイを担当し、WebViewCenterはドライバーと助手席の間にある中央ディスプレイを担当します。

6. **Scene pane **の適切なツールを使って、**WebViewCluster ** と WebViewCenter オブジェクトのサイズと位置を調整します。

下のInspectorペインの2枚の画像を確認して、私がWebViewClusterとWebViewCenterオブジェクトをどのように調整したかを見てください。

4. Unity内でPiesを表示する

💡 ProtoPie Connectには、Pies用のWeb URLを作成する機能があり、ここではそのURLを使ってUnityに表示します。

1. ProtoPie Connectで、Unity内に表示したいPiesを追加します。今回は2つのPies、Cluster Display と Center Display を使用します。

下に、クラウド上の2つのPies（プロトタイプ）があります。

クラスターディスプレイ Pie

センターディスプレイ Pie

2. pieはウェブブラウザで開けます。2つのpieのURLを確認してください。（ProtoPie Connectが同じPC/ラップトップ上にない場合は、'localhost:9981'をProtoPie Connectの左下に表示されているIPアドレスに置き換えてください。スクリーンショット上では192.168.68.56:9981です）

3. UnityのHierarchy paneで、上で作成したWebViewCluster と **WebViewCenter ** オブジェクトを見つけます。各オブジェクトのInspector pane（右側）で、Canvas Web View Prefab (Script) を見つけます。

ProtoPie ConnectのWeb Playerから取得したpieのURLに、the** 初期URL（任意）** を変更します。

4. Playを押して、Unity内に埋め込まれたPiesをテストして確認しましょう！ （Simulator paneを使い、キーボードでCを押すと、表示を車内に切り替えてより見やすくできます）。

💡 この時点で、プロトタイプに加えた変更や編集はProtoPie Connect経由で自動的に反映されます！（ProtoPie Connectに追加した同じPieで、URLが変わらない限り）

5. ProtoPieとUnityの間にデータ接続を確立して、相互にやり取りできるようにする

💡 ProtoPie Connectは、他のアプリケーションとの統合を可能にするためにsocket.io技術を使用しています。

1. このステップバイステップガイドでは、itisnajimによるUnity向けSocketIOライブラリを使用します。GitHubからダウンロードできます。

2. Projectペインで、Assetsフォルダに移動し、その中にSocketIOというフォルダを作成します。上でダウンロードしたSocketIOUnity zipファイルを解凍し、そのフォルダをProjectペインのSocketIOフォルダにドラッグ＆ドロップします。

3. Assets > SocketIO フォルダを右クリックし、C# Script を作成します。これを SocketIOManager と名付けます。

4. SocketIOManager.cs ファイルに以下のコードを挿入し、保存します。

💡 これはProtoPie Connectの Bridgeアプリ として機能し、ProtoPie Connectの Socket.io サーバー（Enterpriseプランの機能）に接続します。Socket.ioメッセージをProtoPie Connectに送受信し、PiesがUnityのデータと連携できるようにします。

5. Hierarchyペインで、WebViewClusterとWebViewCenterオブジェクトの親オブジェクトであるCanvasオブジェクトを見つけます。右側のInspectorペインのかなり下にあるAdd Componentボタンを見つけ、SocketIOManagerスクリプトを追加します。

6. プロのヒント: このカスタムテンプレートを使ってプロトタイプをインポートする

作業をもっと簡単にするため、Creative Technologist の Freddie が、高忠実度のProtoPieプロトタイプをUnityにインポートするためのUnityテンプレートを作成しました。テンプレートはこちら。

7. さあ、ドライブの準備完了です！

おめでとうございます！これで、ProtoPie ConnectとUnityを使って、3Dバーチャルリアリティ環境でHMIデザインをテストする準備が整いました。

これらの強力なツールを活用して、没入感とインタラクティブ性の高いプロトタイプを作成し、自動車向けプロトタイピングとテストのプロセスをさらに高いレベルへ引き上げましょう。バーチャルリアリティの世界で、デザインの可能性を最大限に引き出す準備をしましょう。

ProtoPieで自動車デザインを革新しよう！

ProtoPieを無料で始める ことで、今日から自動車デザインとHMIプロトタイピングプロジェクトの可能性を最大限に引き出しましょう。

楽しいプロトタイピングを！

[無料で始める] {3Dプロトタイピングに関する最新情報やヒントを受け取る}