Build a simple product configurator in Unity in one hour or less
このウェブページは、お客様の便宜のために機械翻訳されたものです。翻訳されたコンテンツの正確性や信頼性は保証いたしかねます。翻訳されたコンテンツの正確性について疑問をお持ちの場合は、ウェブページの公式な英語版をご覧ください。
製品コンフィギュレーターは、顧客が製品と対話する方法を大きくTransformします。静的画像を見るだけの体験から、インタラクティブな体験へと移行することで、最終的にはビューアーに、より詳細な情報を提供できるようになります。
産業用途において、コンフィギュレーターは複雑な機器を展示したり、リアルタイムでのカスタマイズを可能にしたり、顧客が製品をそれぞれの具体的な状況で視覚化するのにヘルプ。
このチュートリアルでは、1時間以内にWeb上で展開可能な最初の製品コンフィギュレーターをビルドます。このコンフィギュレーターを使用すると、シンプルなインターフェースで3Dモデル上のさまざまな素材を変更できます。このコースを終了頃には、プロフェッショナルな製品コンフィギュレーターを作成するための基本的な機能について理解を深めているでしょう。
動画を見ながらこのチュートリアルをステップたい場合は、こちらからご覧いただけます。
詳細については、ウェビナーをご覧ください。製品コンフィギュレーターテンプレート
前提条件
このチュートリアルは、 Unityでのプロジェクト開発に関する初級から中級レベルの知識を持つ開発者を対象としています。チュートリアルを完了するには、
1.以下のをインストールしてください。
Unity Industryのトライアルライセンスまたは通常ライセンス
- UnityのIndustry Product Configuratorパッケージ（ GitHubから入手可能）
2.3Dモデルを追加する：ご自身の3Dモデルファイルを使用するか、テンプレートに含まれているファイルを使用してください。
3.基本的な材料を追加する：少なくとも2～3種類の異なる材料を用意するか、チュートリアルに既に含まれている金属材料を再利用してください。
完了までの推定時間：30～60分
サンプルプロジェクトをご覧ください
このチュートリアルでは、UnityのIndustry Product Configuratorサンプルプロジェクトを学習の基礎および出発点として使用します。このサンプルは、マテリアルやコンポーネントの切り替え、カメラ制御、ユーザーインターフェースなど、完全に動作するコンフィギュレーターを示しています。これらは、演習で実装方法を学ぶ機能そのものです。
このサンプルには、可視性、マテリアル、アニメーション、およびTransformバリアント用の既製コンポーネントが含まれているため、バリアントシステムをゼロから構築するのではなく、製品開発に集中できます。
サンプルプロジェクトを開いて、独自のシーンを作成してください。
まずサンプルプロジェクトを試してみることで、独自の製品コンフィギュレーターを構築する前に、製品コンフィギュレーターの実践的な操作経験を積むことができます。インストールするには、以下の手順に従ってください。
1.Unity Hubで、 URP （URP）に基づいたUniversal 3Dテンプレートを使用して、新しいUnityプロジェクトを作成します。
2.Industry Product Configuratorのサンプルプロジェクトをダウンロードしてインストールしてください。
パッケージをインストールするには、 GitHubリポジトリの緑色のコードボタンからURLをコピーし、UnityのPackage Managerを開きます。
プラスアイコンをクリックし、 「git URLからパッケージを追加」を選択して、リポジトリのリンクを貼り付け。Unityは必要なコンポーネントをすべてダウンロードしてインストールします。
3.ダウンロードが完了したら、サンプルシーンを開いて実行し、完全に機能するコンフィギュレーターのアクションを確認してください。このサンプルでは、マテリアルの切り替え、コンポーネントの可視性/非表示切り替え、カメラ制御などが実演されており、何が可能で、システムがどのように動作するのかをすぐに理解できます。このパッケージは、Unityの既存システムにコンフィギュレーター固有のコンポーネントを追加することで、プロトタイプの開始ようにします。
4.注意: Git URL のインストールに問題がある場合は、Package Managerのトラブルシューティングガイドを確認してください。
✓ チェックポイント：これで、階層内で右クリックするか、ゲームオブジェクトメニューから、製品コンフィギュレーターのオプションが表示されるはずです。コンフィギュレーターのサンプルに関するGitHubリポジトリには、学習効果を最大限にヘルプための優れた説明も掲載されています。
製品コンフィギュレーターをエディターで開きます
3Dモデルを取り込む
サンプルをじっくりと確認したら、次のステップは、マテリアル切り替え機能を追加する3Dモデルを取り込むことです。このチュートリアルをより早く完了させたい場合は、サンプルに既に含まれているスキッドローダーモデルを使用できます（「スキッドローダー」で検索してください）。または、次のセクションで説明する2つの変換オプションのいずれかを使用して、独自のモデルを簡単に取り込むこともできます。Unity Asset ManagerまたはUnity Asset Transformer ToolkitのOptimize and Convert特徴。サンプルプロジェクトに含まれているモデルを使用する場合は、このセクションをスキップも構いません。
Asset Manager
プロフェッショナルなコンフィギュレーターをビルド予定がある場合は、 Asset Managerをワークフローに統合することを検討してください。UnityのAsset Managerは、クラウドベースのデジタルアセット管理（DAM）ソリューションであり、チームが複雑なリアルタイム3Dアセットをアップロード、管理、Transform、共有、アクセスする方法を効率化します。Asset Managerへのアクセスは、 Unity Industryのサブスクリプションに含まれています。
Asset Manager、特にその最適化および変換特徴を使用すると、 3Dモデルを準備および最適化できます。このツールは、メッシュのクリーニング、ポリゴン数の最適化、Unity対応フォーマットへの変換によって、 3Dアセットを最適化します。この処理は1分以内に完了し、大容量ファイルの変換におけるワークフロー効率を向上させます。
Asset Managerの詳細については、こちらをご覧ください。
Asset Transformer Toolkit を使用した CADワークフロー
複雑なCADモデルを変換する必要がある場合は、さまざまなCADファイル形式に対応し、上級者向けの最適化機能を提供するUnity Asset Transformer Toolkitの使用を検討してください。CADモデルをUnityに直接インポート、Asset Transformerのツールを使用してポリゴン数を削減し、マテリアルを簡素化し、リアルタイムの可視化のためにモデルを準備します。
Asset Transformerプラグインの詳細については、こちらをご覧ください。
シーンをセットアップする
まず、コンフィギュレーター用の新しいシーンを作成します。空のシーンにスキッドローダーを追加するか、独自の3Dモデルを使用する場合は、それをシーンにインポートして適切な位置に配置してください。これで、サンプルプロジェクトで確認できたマテリアル切り替え機能を追加できる状態になりました。
✓ チェックポイント：シーンには、シーンビューで3Dモデルがはっきりと見える位置に配置されている必要があります。モデルにはマテリアルが適用されており、ゲームビューで表示されている必要があります。
マテリアル切り替え機能を構築する
次に、コアとなるコンフィギュレーター特徴を実装します。これにより、ユーザーは製品の素材をリアルタイムで切り替えることができるようになります。
マテリアルバリアントを作成する
1.まず、 ゲームオブジェクトメニューから選択するか、階層内で右クリックして、バリアントセット用のビルトインコンポーネントを使用します。さまざまなオプションがありますが、このチュートリアルではマテリアルバリアントに焦点を当てます。
- このパッケージのマテリアルバリアントシステムは、複雑なオブジェクト階層全体で、ターゲットマテリアルを使用しているすべてのメッシュレンダラーを自動的に検出するシステムを使用しています。
2.コンポーネントの [ターゲット親]オプションを使用して基本マテリアルと親オブジェクトを定義し、キャプチャツールにすべての関連するメッシュレンダラーを識別させます。これにより、複数の部品で構成される製品間で一貫性が確保され、同時に性能も維持されます。
ベースマテリアルを定義する
3.メタリック仕上げの2種類の塗料、Metalペイント（赤）とMetalペイント（青）を再利用するか、同等の塗料を自作してください。素材をバリアントフィールドにドラッグして、各バリアントスロットに割り当ててください。システムは切り替えロジックをすべて処理し、バリアントが変更されると自動的に材料を更新します。Inspectorにビルトインプレビュースライダーを使用すると、バリアントをすぐにテストして、赤と青の仕上げがモデル上でどのように外観かを確認できます。
✓ チェックポイント：これで、マテリアルバリアントセットコンポーネントに2つのマテリアルバリアント（Metalペイント- 赤とMetalペイント- 青）が表示されているはずです。Inspectorのプレビュースライダーをドラッグと、シーンビューでモデルのメタリック仕上げが赤と青の間でリアルタイムに切り替わります。
マテリアルの作成に関するヘルプについては、Unityのマテリアルに関するドキュメントを参照してください。
バリアントをユーザーインターフェースに接続します
製品コンフィギュレーターパッケージには、既存のバリアントセットのドロップダウンメニューを生成し、コンフィギュレーターを迅速に開発できるVariantSelectコンポーネントが含まれています。この特徴は、開発者以外のユーザーでもシーン内のバリエーションセットを簡単に選択できるように設計されており、Unityのイベントシステムと直接統合されているため、カスタムスクリプトをビルドできます。これは、uGUIソリューションを利用するユーザーにとって特に便利で、コンポーネントをOnClickイベントに直接割り当てることができます。
ユーザーインターフェースを作成する
マテリアルバリアントが機能するようになったら、ユーザーがこれらの設定をコントロールし、製品コンフィギュレーターと対話するできるインターフェースが必要になります。
Unityは、 ゲームオブジェクトベースのUIシステム（uGUI）と、より新しいUI Toolkitという2つのUIシステムを提供しています。このチュートリアルでは、 ゲームオブジェクトベースの uGUI システムを使用します。これは、コードを一切必要とせずに VariantSelectコンポーネントとのドラッグアンド ドロップインテグレーションを可能にするためです。
1.UIメニューからボタンをドラッグアンドドロップして階層に配置し、名前を付けます（例：「赤いMetalボタン」）。
- 最初の UI要素を作成すると、 Unity はシーン内にCanvas オブジェクトとEventSystemオブジェクトを自動的に作成します。CanvasはすべてのUI要素のコンテナとして機能し、EventSystemはボタンクリックなどのユーザー入力を処理します。
- Canvasコンポーネントが「画面サイズに合わせて拡大縮小」に設定されていることを確認してください。この設定により、UI要素はさまざまな画面解像度において一貫した比率を維持できます。参照解像度をターゲット画面の寸法に一致て設定してください。この例では、 1920x1080になります。これは、UIレイアウトの基準となる基本解像度を定義します。さらに、 [Match]プロパティを0.5に設定すると、幅と高さのスケーリングのバランスが取れ、画面がリファレンスよりも画面が広いか高さが高いかに関わらず、UI 要素が均等にスケールようになります。UIアンカーのヒント:ボタンを画面の特定の端（上端/下端）に固定するには、UI要素を選択し、Rect TransformコンポーネントのAnchor Presetsパネルで目的のアンカープリセットをクリックします。Unity UIアンカーリングガイドで詳細をご覧ください。
2.ボタンをバリアント選択に接続するには、階層でボタンを選択し、Inspectorでボタンコンポーネントを見つけて、 OnClick()セクションを外観。
3.「 + 」をクリックして新しいイベントを追加し、VariantSelectコンポーネントを含むゲームオブジェクトをオブジェクトフィールドにドラッグ、ドロップダウンからVariantSelect を選択し、 SelectVariantを選択して、ボタンがクリックされたときにマテリアルの変更をトリガー。
4.各マテリアル仕上げ（青色のMetalボタンなど）ごとにボタンを追加作成し、同じ方法で接続します。uGUIの基本についてもっと詳しく知りたい場合は、こちらのチュートリアルにアクセスして基本をマスター。
✓ チェックポイント：「再生モード」をクリックし、次に「レッドMetal」ボタンをクリックすると、モデルの色が赤いメタリック仕上げに変わります。「ブルーMetal」ボタンをクリックすると、色が青に変わります。階層構造の中にCanvasとEventSystemが表示され、ゲームビューにボタンが表示されているはずです。
ボタンが機能しない場合は、 OnClickイベントが正しく接続されていることを確認し、Unity のボタンに関するドキュメントを参照してください。
上級者向けのユーザー向け：スクリプト作成に慣れている方であれば、この動画の20分10秒あたりから、 VariantSetControllerスクリプトを使用してUIボタンを自動生成する方法が紹介されています。このスクリプトは、正しい名前と機能を持つボタンを動的に作成します。
カメラコントロールを追加する
完全なコンフィギュレーターインターフェースは、ユーザーが製品の表示方法をコントロールに選択できるようにし、さまざまな角度や視点から探るできるようにするべきである。
コンフィギュレーターのユーザーエクスペリエンスを最大限に高めるには、プロフェッショナルなカメラビューを設定するためのノーコードソリューションを提供するCinemachineパッケージを使用できます。コンフィギュレーターのサンプルプロジェクトには既にCinemachineの設定が含まれているため、すぐに独自のカメラを追加開始。
1.製品に新しいカメラ角度を作成するには、 [ゲームオブジェクト] > [Cinemachine] > [Camera]に移動して、シーンに新しいバーチャルカメラを追加します。このカメラを、製品を希望の角度から映せるように配置してください。例えば、マテリアルの変化を強調するようなクローズアップ映像などです。
- ヒント：まずは「ビューに合わせる」 （ WindowsではCtrl+Shift+F、MacではCmd+Shift+F）から始めてください。これにより、カメラの位置がシーンビューと同じ位置に移動します。この位置からだと、目的の角度を見つけやすくなります。
2.Cinemachine Cameraコンポーネントで、優先度値を設定して、このカメラをアクティブにするタイミングを決定します（数値が大きいほど優先度が高くなります）。Cinemachineカメラコンポーネントの「ソロ」ボタンを使用して、さまざまなカメラビューをテストしてください。
3.異なる視点から撮影するために、カメラを2～3台追加してください。Cinemachine Brainコンポーネント（メインカメラに自動的に追加されます）は、異なるカメラ間のブレンドを制御し、常に最も優先度の高いバーチャルカメラを使用します。Unity 6でCinemachineを使用する方法について詳しく知りたい場合は、こちらのビデオをご覧ください。
4.カメラをUIコントロールに接続する：異なるカメラビューをアクティブ化するには、UIボタンを作成します（マテリアルのバリアントボタンからコピー＆貼り付け、カメラ用の名前に変更します）。OnClickイベントでは、コントロールたいカメラをドラッグ、 [優先]オプションを使用します。これにより優先度が「最高」に設定され、このバーチャルカメラがアクティブなカメラになります。
5.インタラクティブなカメラコントロールの設定：インタラクティブなカメラ操作を行うには、マウス操作で製品の周囲を回転できるFreeLookカメラを使用してください。
6.入力アクションの設定：Cinemachine Input Axis Controllerコンポーネントには、 「Driven Axes」セクションがあり、 「Look Orbit X」 、 「Look Orbit Y」 、 「Orbit Scale」のオプションが表示されます。これらは、製品コンフィギュレーターパッケージのプレーヤー/ルック入力アクションで設定する必要があります。これらの操作を見つけるには、次の場所に操作する。
Assets/Samples/Product Configurator/1.6.0/Standard Configuration Setup/StandardUIAction
このフォルダーから「Player/Look」アクションを、 「Driven Axes」セクションの「Look Orbit X」と「Look Orbit Y」の入力フィールドにドラッグします。これにより、マウスの右ボタンをクリックした時のみ、マウス操作によるカメラ操作が可能になります。
これで、ユーザーがインターフェースを通してコントロールできる複数のカメラアングルを使用して、コンフィギュレーターをテストする準備が整いました。
最終調整とウェブデプロイ
対話型コンフィギュレーターが完成したら、最後のステップは、ユーザーがブラウザからアクセスできるように、 ウェブデプロイの準備を行うことです。
ビルドプロファイルを使用してWebGL向けにビルドする
コンフィギュレータを WebGL にデプロイするには、プラットフォームとしてWebオプションを使用します。ファイル>プロファイルの作成に移動し、ウィンドウの左側でターゲットプラットフォームとしてWebを選択します。シーンがシーンリストに表示されていることを確認し、ビルドたくない他のシーンはすべて削除してください。
コンフィギュレータを WebGL にデプロイするには、プラットフォームとして Webオプションを使用します。
「Unity Hubでインストール」ボタンとともに「Webモジュールがロードされていません」というメッセージが表示される場合は、 WebGLビルドサポートモジュールをインストールする必要があります。インストールボタンをクリックすると、 Unity HubがWebGLビルドサポートモジュールをダウンロードしてインストールします。新しいモジュールをロードには、エディタを再起動必要があります。
WebGL Build Support モジュールをインストールしたら、テクスチャ圧縮オプション、コード最適化レベル、ブラウザーデプロイに適したメモリ制約など、ビルド設定を構成します。
WebGLプラットフォームに切り替えた後は、Web固有の最適化のためにプレーヤー設定を確認してください。「編集」 ＞ 「プロジェクト設定」 ＞ 「プレーヤー」に進み、「 Web」タブを選択します。「公開設定」セクションで、圧縮形式をBrotliに設定できます（ファイルサイズが小さい場合に推奨）。これらの設定を最適化するための詳細な手順については、UnityのWeb Player設定に関するドキュメントを参照してください。
準備がすべて整ったら、 「ビルドして実行」をクリックしてください。Unityは、 ウェブブラウザーでコンフィギュレーターを起動するために必要なすべてのファイルを含むフォルダーを生成します。ブラウザーが自動的に開き、ビルドがスムーズに実行されている様子が確認できるはずです。「ビルド」ボタンをクリックするだけでは、出力をローカルまたはリモートのウェブサーバーにホストする必要があります。UnityはUnity Playを通じてホスティングオプションも提供しています。Unity 6.1以降を使用している場合、 UnityはWebGLビルド設定からUnity Playに直接公開するオプションを提供しています。
これでブラウザーウィンドウが開き、アプリが稼働状態になっているはずです。
オンラインでテストして公開する
設定ツールをさまざまなブラウザやデバイスでテストし、一貫したパフォーマンスを確認してください。パッケージのコンポーネントはWebGLビルドでは問題なく動作しますが、バリアント切り替えがターゲットデバイスでどのように動作するかを考慮し、それに応じて複雑さを調整してください。
Unityは、index.htmlファイル、圧縮されたゲームデータ、および必要なすべてのアセットを含む完全なビルドフォルダーを作成します。このフォルダーは標準的なウェブサーバー上にホストできるため、最新のウェブブラウザーから設定ツールにアクセスできます。
✓ 最終成功:これで、正常に動作する製品コンフィギュレーターが完成しました。ビルドフォルダーにはindex.htmlファイルが含まれているはずです。このファイルをブラウザーで開く（またはウェブサーバーにホストする）と、インタラクティブな「レッドMetal」と「ブルーMetal」ボタンを備えた3Dモデルが表示され、これらのボタンをクリックするとモデルの仕上げがリアルタイムで変更されます。
オプション：リアルな工業環境を再現する
よりプロフェッショナルなプレゼンテーションを実現するには、Unityのアセットストアにある環境パッケージを追加することを検討してください。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のこちらのチュートリアルをご覧ください。
オプション：上級者向けバリアント機能
基本的なマテリアルの入れ替え機能に加え、このパッケージはアニメーションやTransformバリアントもサポートしており、動的デモンストレーションを実現します。可動部品、調整可能なコンポーネント、またはアニメーションによる表示が効果的な機能を備えた製品には、これらを使用してください。変換バリアントは位置、回転、スケールの変更を処理し、アニメーションバリアントは機能のデモンストレーションや魅力的なトランジションを提供します。これらの上級者向けの機能は、製品の機能性をアピールしたい場合や、より魅力的なコンフィギュレーター体験を作成したい場合に非常に効果的です。
基本的なマテリアルの入れ替えに加えて、アニメーションやTransformバリアントを使用して、動的デモンストレーションを行うこともできます。
これで、UnityのIndustry Product Configuratorパッケージを使用してコンフィギュレーターをビルドの基本的な知識が得られました。コンシューマー向け製品、産業機器、建築ビジュア可視化など、どのような用途であれ、この基盤はビジネス成果を促進する魅力的なコンフィギュレーターを作成するために必要なすべてを提供します。
