1時間以内にUnityでシンプルな製品コンフィギュレーターを構築します。
製品コンフィグレーターは、顧客が静的な画像を見るだけでなく、インタラクティブな体験を通じて製品と対話する方法を変えることができます。最終的には、ビューアーにより豊富な詳細と情報を提供します。
産業用途では、コンフィグレーターは複雑な機器を展示し、リアルタイムでのカスタマイズを可能にし、顧客が特定の文脈で製品を視覚化するのを助けることができます。
このチュートリアルでは、1時間以内に最初のウェブ展開可能な製品コンフィグレーターをビルドします。あなたのコンフィグレーターは、シンプルなインターフェースを使用して3Dモデルの異なる材料を変更できるようにします。最終的には、プロフェッショナルな製品コンフィグレーターを作成するための基本的な機能を理解することができます。
このチュートリアルをビデオで進めたい場合は、こちらで視聴できます。
注：7月15日に開催される製品コンフィグレーター テンプレートに関するウェビナーをお見逃しなく！
前提条件
このチュートリアルは、Unityでプロジェクトを開発する初心者から中級者の開発者を対象としています。チュートリアルを完了するには、次のものが必要です。
1.次のものをインストールしてください：
- Unity 6 と WebGLビルドサポート
- トライアル または Unity Industry の通常ライセンス
- GitHub から入手可能なUnityのIndustry Product Configuratorパッケージ
2.3Dモデルを追加：自分の3Dモデルファイルまたはテンプレートに含まれているものを使用してください。
3.基本的な材料を追加：少なくとも2-3種類の異なる材料を用意するか、チュートリアルに既に含まれている金属材料を再利用してください。
完了までの推定時間：30-60分
サンプルプロジェクトを探る
このチュートリアルでは、Unityの業界製品コンフィギュレーターサンプルプロジェクトを学習の基盤および出発点として使用します。このサンプルは、マテリアルとコンポーネントの切り替え、カメラコントロール、ユーザーインターフェースを備えた完全に機能するコンフィギュレーターを示しており、演習で実装する機能そのものです。
このサンプルには、可視性、マテリアル、アニメーション、トランスフォームのバリアント用の既製のコンポーネントが含まれているため、バリアントシステムをゼロから構築するのではなく、製品に集中できます。
サンプルプロジェクトを開いて、自分のシーンを作成する
最初にサンプルプロジェクトを探索することで、自分の製品コンフィギュレーターを構築する前に、実践的な経験を得ることができます。次の手順に従ってインストールします：
1.Unity Hubで、ユニバーサル3Dテンプレートを使用して新しいUnityプロジェクトを作成します。これはユニバーサルレンダーパイプライン（URP）に基づいています。
2.業界製品コンフィギュレーターサンプルプロジェクトをダウンロードしてインストールします：
- パッケージをインストールするには、GitHubリポジトリの緑のコードボタンからURLをコピーし、Unityのパッケージマネージャーを開きます。
- プラスアイコンをクリックし、git URLからパッケージを追加を選択し、リポジトリリンクを貼り付けます。Unityは必要なすべてのコンポーネントをダウンロードしてインストールします。
3.ダウンロードが完了したら、サンプルシーンを開いて実行し、完全に機能するコンフィギュレーターを確認します。このサンプルは、マテリアルの切り替え、コンポーネントの可視性トグル、カメラコントロールを示しており、何が可能であり、システムがどのように機能するかについて即座に洞察を与えます。このパッケージは、プロトタイプを迅速に開始するために、Unityの既存のシステムにコンフィギュレーター特有のコンポーネントを追加します。
4.注意：Git URLのインストールに問題がある場合は、パッケージマネージャートラブルシューティングガイドを確認してください。
✓ チェックポイント：階層で右クリックするか、GameObjectメニューの下で製品コンフィギュレーターオプションが表示されるはずです。コンフィギュレーターサンプルに関する良い指示もGitHubリポジトリにあり、最大限の学びを得るのに役立ちます。
エディターで開いた製品コンフィギュレーター
3Dモデルを取り込む
サンプルを探索した後、次のステップは、マテリアル切り替え機能を追加する3Dモデルを取り込むことです。このチュートリアルをより早く完了したい場合は、サンプルに既に含まれているスキッドローダーモデルを使用できます（スキッドローダーを検索してください）。または、次のセクションで説明する2つの変換オプションのいずれかを使用して、自分のモデルを簡単に取り込むことができます。Unity Asset Manager内の最適化と換算機能またはUnity Asset Transformer Toolkit。サンプルプロジェクトに含まれているモデルを使用したい場合は、このセクションをスキップしても構いません。
Asset Manager
プロフェッショナルなコンフィギュレーターを構築する予定がある場合は、アセットマネージャーをワークフローに統合することを検討してください。Unityのアセットマネージャーは、チームが複雑なリアルタイム3Dアセットをアップロード、管理、変換、共有、アクセスする方法を効率化するクラウドベースのデジタルアセット管理（DAM）ソリューションです。アセットマネージャーへのアクセスは、Unity Industryサブスクリプションに含まれています。
アセットマネージャーを使用して3Dモデルを準備し、最適化できます。特にその最適化と換算機能を使用して。これにより、メッシュをクリーンアップし、ポリゴン数を最適化し、Unity対応フォーマットに変換することで、3Dアセットが変換されます。このプロセスは1分以内に完了し、大きなファイルの変換におけるワークフローの効率を向上させます。
アセットマネージャーについて詳しくはこちら：
アセットトランスフォーマーツールキットを使用したCADワークフロー
複雑なCADモデルを変換する必要がある場合は、さまざまなCADファイル形式を処理し、高度な最適化機能を提供するUnityのアセットトランスフォーマーツールキットを使用することを検討してください。CADモデルをUnityに直接インポートし、アセットトランスフォーマーのツールを使用してポリゴン数を削減し、マテリアルを簡素化し、リアルタイム可視化のためにモデルを準備します。
アセットトランスフォーマープラグインについて詳しくはこちら：
シーンを設定する
コンフィギュレーターのために新しいシーンを作成することから始めます。空のシーンにスキッドローダーを追加するか、自分の3Dモデルを使用している場合は、それをシーンにインポートし、適切に配置します。モデルは、サンプルプロジェクトで観察したマテリアル切り替え機能を追加する準備が整いました。
✓ チェックポイント：シーンには、シーンビューで明確に見ることができる位置に配置された3Dモデルが含まれている必要があります。モデルにはマテリアルが適用され、ゲームビューで表示される必要があります。
マテリアル切り替え機能を構築します。
今、あなたはコアのコンフィギュレーター機能を実装します – ユーザーがリアルタイムで製品のマテリアルを切り替えられるようにします。
マテリアルバリアントを作成する
1.ゲームオブジェクトメニューから選択するか、階層で右クリックして、バリアントセットのためのビルトインコンポーネントを使用することから始めます。異なるオプションがありますが、このチュートリアルでは、マテリアルバリアントに焦点を当てます。
- パッケージのマテリアルバリアントシステムは、複雑なオブジェクト階層全体でターゲットマテリアルを使用しているすべてのメッシュレンダラーを自動的に見つける検出システムを使用します。
2.コンポーネントのターゲット親オプションを使用して基本マテリアルと親オブジェクトを定義し、キャプチャツールに関連するすべてのメッシュレンダラーを特定させます。これにより、パフォーマンスを維持しながら、複数のコンポーネントを持つ製品間での一貫性が確保されます。
基本マテリアルを定義します。
3.金属仕上げのこれら2つのマテリアルを再利用します、メタルペイント - 赤とメタルペイント - 青（または自分の同等品を作成します）。バリアントフィールドにドラッグして、各バリアントスロットにマテリアルを割り当てます。システムはすべての切り替えロジックを処理し、バリアントが変更されると自動的にマテリアルを更新します。インスペクターのビルトインプレビュースライダーを使用して、バリアントをすぐにテストし、モデル上の赤と青の仕上がりを確認します。
✓ チェックポイント：今、あなたはマテリアルバリアントセットコンポーネントに2つのマテリアルバリアント（メタルペイント - 赤とメタルペイント - 青）を見ることができるはずです。インスペクターでプレビュー スライダーをドラッグすると、モデルはシーンビューで赤と青の金属仕上げの間でリアルタイムに変化するはずです。
マテリアル作成のヘルプについては、Unityのマテリアルドキュメントを参照してください。
ユーザーインターフェースにバリアントを接続する
製品コンフィギュレーター パッケージには、迅速なコンフィギュレーター開発のために既存のバリアントセットのドロップダウンメニューを生成するVariantSelectコンポーネントが含まれています。この機能は、非開発者がシーン内でバリアントセットを簡単に選択できるように設計されており、Unityのイベントシステムと直接統合されているため、カスタムスクリプトなしで機能的なコンフィギュレーターを構築できます。これは、uGUIソリューションを利用するユーザーに特に便利で、コンポーネントをOnClickイベントに直接割り当てることができます。
ユーザーインターフェースを作成する
マテリアルバリアントが機能しているので、ユーザーがこれらの構成を制御し、製品コンフィギュレーターと対話できるインターフェースが必要です。
Unityは、GameObjectベースのUIシステム（uGUI）と新しいUI Toolkitの2つのUIシステムを提供しています。このチュートリアルでは、VariantSelectコンポーネントとのドラッグアンドドロップ統合を可能にするため、GameObjectベースのuGUIシステムを使用します。
1.UIメニューからボタンを階層にドラッグアンドドロップし、名前を付けます（例："赤金属ボタン"）。
- 最初のUI要素を作成すると、Unityは自動的にシーン内にキャンバスとイベントシステムオブジェクトを作成します。キャンバスはすべてのUI要素のコンテナとして機能し、イベントシステムはボタンクリックなどのユーザー入力を処理します。
- キャンバスコンポーネントが画面サイズに合わせてスケールに設定されていることを確認してください。この設定により、UI要素は異なる画面解像度で一貫した比率を維持できます。参照解像度をターゲット画面の寸法に合わせて設定します。この例では1920x1080になる可能性があります。これは、UIレイアウトの基準解像度を定義します。さらに、マッチプロパティを0.5に設定し、幅と高さのスケーリングのバランスを取ります。これにより、画面が参照よりも広いか高いかに関係なく、UI要素が均等にスケールします。UIアンカリングのヒント:ボタンを特定の画面の端（上/下）に固定するには、UI要素を選択し、Rect Transformコンポーネントのアンカープリセットパネルで希望のアンカープリセットをクリックします。Unity UIアンカリングガイドで詳細を学びましょう。
2.ボタンをバリアント選択に接続するには、Hierarchyでボタンを選択し、InspectorでButtonコンポーネントを見つけ、OnClick()セクションを探します。
3.「+」をクリックして新しいイベントを追加し、VariantSelectコンポーネントを持つGameObjectをオブジェクトフィールドにドラッグし、ドロップダウンからVariantSelectを選択し、ボタンがクリックされたときにマテリアル変更をトリガーするためにSelectVariantを選択します。
4.各マテリアル仕上げ（青い金属ボタン）のために追加のボタンを作成し、同じ方法で接続します。uGUIの基本をもっと学びたい場合は、このチュートリアルを訪れて基本をマスターしてください。
✓ チェックポイント：Playモードをクリックし、次に赤い金属ボタンをクリックすると、モデルが赤い金属仕上げに変わるはずです。青い金属ボタンをクリックして青に変更します。HierarchyにCanvasとEventSystemが表示され、Gameビューにボタンが表示されるはずです。
ボタンが機能していない場合は、OnClickイベントが正しく接続されていることを確認し、UnityのButtonドキュメントを確認してください。
上級者向け:スクリプトに自信がある場合は、このビデオの20:10のマークから、VariantSetControllerスクリプトを使用してUIボタンを自動的に生成する方法を示しています。これは、正しい名前と機能を持つボタンを動的に作成します。
カメラコントロールを追加する
完全なコンフィギュレーターインターフェースは、ユーザーが製品をどのように表示するかを制御できるようにし、さまざまな角度や視点を探ることを可能にするべきです。
コンフィギュレーターに最適なユーザーエクスペリエンスを提供するために、Cinemachineパッケージを使用できます。これは、プロフェッショナルなカメラビューを設定するためのノーコードソリューションを提供します。コンフィギュレーターサンプルプロジェクトにはすでにCinemachineのセットアップが含まれているため、すぐに自分のカメラを追加し始めることができます。
1.製品の新しいカメラアングルを作成するには、GameObject > Cinemachine > Cameraに移動して、シーンに新しいバーチャルカメラを追加します。このカメラを配置して、希望の角度から製品を表示します。たとえば、マテリアルの変更を強調するクローズアップビューです。
- ヒント:ビューに合わせる（WindowsではCtrl-Shift-F、MacではCmd-Shift-F）を出発点として使用します。これにより、カメラがシーンビューと同じ位置に移動します。この位置から、希望の角度を見つけるのが容易になります。
2.Cinemachineカメラコンポーネントで、優先度の値を設定して、このカメラがアクティブになるタイミングを決定します（高い数値が優先されます）。Cinemachineカメラコンポーネントのソロボタンを使用して、異なるカメラビューをテストします。
3.異なる視点のために2〜3台のカメラを追加します。Cinemachine Brainコンポーネント（メインカメラに自動的に追加される）は、異なるカメラ間のブレンドを制御し、常に最も優先度の高いバーチャルカメラを使用します。CinemachineをUnity 6で使用する方法については、このビデオを参照してください。
4.カメラをUIコントロールに接続する:異なるカメラビューをアクティブにするには、UIボタンを作成します（マテリアルバリアントボタンからコピー＆ペーストし、カメラ用に名前を変更します）。OnClickイベントでは、制御したいカメラをドラッグし、優先度を設定オプションを使用します。これにより、優先度が最高に設定され、このバーチャルカメラがアクティブなカメラになります。
5.インタラクティブカメラ制御の設定:インタラクティブなカメラ移動には、マウスで制御されるオービット移動を可能にするフリールックカメラを使用します。
6.入力アクションの設定:Cinemachine Input Axis Controllerコンポーネントでは、駆動軸セクションにルックオービットX、ルックオービットY、オービットスケールオプションが表示されます。これらは、Product Configuratorパッケージのプレイヤー/ルック入力アクションで設定する必要があります。これらのアクションを見つけるには、次の場所に移動します:
Assets/Samples/Product Configurator/1.6.0/Standard Configuration Setup/StandardUIAction
このフォルダーからプレイヤー/ルックアクションをドラッグして、駆動軸セクションのルックオービットXおよびルックオービットYの入力フィールドに配置します。これにより、右マウスボタンがクリックされたときのみ、マウスで制御されるカメラが有効になります。
これで、ユーザーがインターフェースを通じて制御できる複数のカメラアングルで、コンフィギュレーターをテストする準備が整いました。
最終調整とウェブデプロイメント
インタラクティブコンフィグレーターが完成したら、最終ステップはウェブデプロイメントの準備をして、ユーザーがブラウザーからアクセスできるようにすることです。
WebGL用にビルドする
WebGLにコンフィグレーターをデプロイするには、プラットフォームとしてWebオプションを使用します。ファイル > ビルドプロファイルに移動し、ウィンドウの左側でターゲットプラットフォームとしてWebを選択します。シーンリストにシーンが存在することを確認し、ビルドしたくない他のシーンは削除します。
WebGLにコンフィグレーターをデプロイするには、Webオプションをプラットフォームとして使用します。
WebモジュールがロードされていませんというメッセージとUnity Hubでインストールボタンが表示された場合、WebGLビルドサポートモジュールをインストールする必要があります。インストールボタンをクリックすると、Unity HubがWebGLビルドサポートモジュールをダウンロードしてインストールします。新しいモジュールをロードするためにエディターを再起動する必要があります。
WebGLビルドサポートモジュールがインストールされたら、テクスチャ圧縮オプション、コード最適化レベル、ブラウザー展開に適したメモリ制約を含むビルド設定を構成します。
WebGLプラットフォームに切り替えた後、ウェブ特有の最適化のためにプレイヤー設定を確認します。編集 > プロジェクト設定 > プレイヤーに移動し、Webタブを選択します。公開設定セクションで、圧縮形式をBrotli（ファイルサイズを小さくするために推奨）に設定できます。これらの設定を最適化するための詳細なガイダンスについては、UnityのWebプレイヤー設定ドキュメントを参照してください。
すべてが準備できたら、ビルドして実行をクリックします。Unityは、ウェブブラウザーでコンフィグレーターを起動するために必要なすべてのものを含むフォルダーを生成します。ブラウザーが自動的に開き、ビルドがスムーズに実行されているのを見ることができます。ビルドをクリックするだけの場合、出力をローカルまたはリモートのウェブサーバーでホストする必要があります。Unityはまた、Unity Playを通じてホスティングオプションを提供しています。
ブラウザーウィンドウが開いて、アプリがライブになっているのが見えるはずです。
テストしてオンラインで公開
異なるブラウザーやデバイスでコンフィグレーターをテストして、一貫したパフォーマンスを確保してください。パッケージコンポーネントはWebGLビルドでうまく機能しますが、ターゲットデバイスでのバリアント切り替えのパフォーマンスを考慮し、複雑さを調整してください。
Unityはindex.htmlファイル、圧縮されたゲームデータ、およびすべての必要なアセットを含む完全なビルドフォルダーを作成します。このフォルダーは、任意の標準ウェブサーバーでホストできるため、コンフィグレーターに現代のウェブブラウザーを通じてアクセスできます。
✓ 最終成功:あなたは今、動作する製品コンフィグレーターを持っています。ビルドフォルダーにはindex.htmlファイルが含まれている必要があり、ブラウザーで開くと（またはウェブサーバーでホストすると）、インタラクティブなレッドメタルとブルーメタルのボタンで3Dモデルが表示され、リアルタイムでモデルの仕上げが変更されます。
任意:リアルな工業環境を作成する
プロフェッショナルなプレゼンテーションを強化するために、Unityのアセットストア環境パッケージの1つを追加することを検討してください。Unityは、Unity FactoryやUnity Warehouseのような公式の工業環境を提供しており、事前に設定された照明やポストプロセッシングプロファイルを持つクリーンなスタジオセットアップを探すこともできます。これらのパッケージは、広範な環境作成を必要とせずにリアルな製品の可視化の基盤を提供します。さらに、Unity Hubには、最適化された照明とレンダリングセットアップを示すURP 3Dサンプルシーンテンプレートが含まれています。
任意:UI Toolkitを使用した高度なUI
より高度なUI開発のために、UnityはUI Toolkitを提供しており、これはウェブ開発の実践から引き出され、CSSやXMLに似た構造を使用しています（UI Toolkitでは、同等のものはUSSとUXMLと呼ばれます）。UI Toolkitを使用してコンフィグレーターインターフェースを構築するには、ボタンの機能を定義し、タイミングを設定するためにC#でのコーディングが必要です。これは、UI Toolkitがボタンクリックと機能を接続するための即時の方法を提供しないためです。サンプルプロジェクトのユーザーインターフェースはUnity UI Toolkitで構築されており、その実装に関する貴重な洞察を提供します。
以下に、特定のボタン（changeと呼ばれる）がバリアント選択コンポーネントから定義されたアクションを実行する方法を示す小さなコードスニペットを示します。
using IndustryCSE.Tool.ProductConfigurator.Runtime;
using UnityEngine;
using UnityEngine.UIElements;
public class SimpleUIController : MonoBehaviour
{
[SerializeField]
private VariantSelect variantSelect; // Reference to the VariantSelect instance
[SerializeField]
private UIDocument uiDocument; // Reference to the UI Document
private void Start()
{
if (variantSelect == null || uiDocument == null) return;
// Get the root visual element
var root = uiDocument.rootVisualElement;
// Query the button named "change"
var changeButton = root.Q<Button>("change");
if (changeButton != null)
{
// Add a callback to the button
changeButton.clicked += () =>
{
variantSelect.SelectVariant(); // Trigger the variant selection
};
}
}
}
UI Toolkitを使用してUIにボタンを追加する方法を学ぶには、このUnity Learnのチュートリアルを参照してください。
任意:上級者向けのバリアント機能
基本的なマテリアルのスワッピングを超えて、このパッケージはダイナミックなデモのためのアニメーションとトランスフォームバリアントをサポートしています。動く部品、調整可能なコンポーネント、またはアニメーションされたショーケースから利益を得る機能を持つ製品にこれらを使用してください。トランスフォームバリアントは位置、回転、スケールの変更を処理し、アニメーションバリアントは機能を示したり、魅力的な遷移を提供したりします。これらの上級機能は、製品の機能を紹介したり、より魅力的なコンフィギュレーター体験を作成したりしたいときに非常に効果的です。
基本的なマテリアルのスワッピングを超えて、アニメーションとトランスフォームバリアントをダイナミックなデモに使用することもできます。
これで、UnityのIndustry Product Configuratorパッケージを使用してコンフィギュレーターを構築するための基本的な知識が得られました。産業機器、消費者製品、または建築の可視化のために構築しているかどうかにかかわらず、この基盤はビジネスの成果を促進する魅力的なコンフィギュレーターを作成するために必要なすべてを提供します。
Read the article
Fill out this form to stay up-to-date with Unity’s latest offerings and solutions
