Создайте простой конфигуратор продукта в Unity за один час или меньше
Конфигуратор продукта может изменить способ взаимодействия клиентов с вашими продуктами, перемещая опыт от просмотра статических изображений к интерактивному, в конечном итоге предоставляя зрителю более богатые детали и больше информации.
В промышленных приложениях конфигураторы могут демонстрировать сложное оборудование, позволять настраивать в реальном времени и помогать клиентам визуализировать продукты в их конкретных контекстах.
В этом учебном пособии вы создадите свой первый веб-деплойный конфигуратор продукта за час или меньше. Ваш конфигуратор позволит пользователям изменять различные материалы на 3D-модели с помощью простого интерфейса. К концу вы получите представление о базовых функциях для создания профессиональных конфигураторов продуктов.
Если вы предпочитаете проходить это учебное пособие с видео, вы можете посмотреть его здесь.
Примечание: Не пропустите наш вебинар о Шаблоне конфигуратора продукта, который состоится 15 июля!
Требования
Это учебное пособие предназначено для разработчиков, имеющих начальные и средние знания разработки проектов в Unity. Чтобы завершить учебное пособие, вам нужно будет
1. Установить следующее:
- Unity 6 с поддержкой сборки WebGL
- Лицензия пробная или обычная для Unity Industry
- Пакет конфигуратора продуктов Industry от Unity, доступный на GitHub
2. Добавить 3D модель: Используйте свой собственный файл 3D модели или тот, который включен в шаблон.
3. Добавить основные материалы: Иметь под рукой как минимум 2-3 различных материала или повторно использовать металлические материалы, уже включенные в учебное пособие.
Оценочное время для завершения: 30-60 минут
Изучите образец проекта
Этот учебник использует образец проекта Industry Product Configurator от Unity в качестве основы для обучения и отправной точки. Образец демонстрирует полностью рабочий конфигуратор с переключением материалов и компонентов, управлением камерой и пользовательским интерфейсом – именно те функции, которые вы научитесь реализовывать в упражнении.
Образец включает готовые компоненты для видимости, а также варианты материалов, анимации и трансформации, чтобы вы могли сосредоточиться на своем продукте, а не на создании систем вариантов с нуля.
Откройте образец проекта и создайте свою собственную сцену
Сначала изучив образец проекта, вы получите практический опыт работы с конфигуратором продукта, прежде чем создавать свой собственный. Следуйте этим шагам для установки:
1. В Unity Hub создайте новый проект Unity, используя шаблон Universal 3D, основанный на Universal Render Pipeline (URP).
2. Скачайте и установите образец проекта Industry Product Configurator:
- Чтобы установить пакет, скопируйте URL из зеленой кнопки Code на репозитории GitHub и откройте Менеджер пакетов Unity.
- Нажмите на значок плюса и выберите Добавить пакет из git URL, затем вставьте ссылку на репозиторий. Unity загрузит и установит все необходимые компоненты.
3. После завершения загрузки откройте образец сцены и запустите его, чтобы увидеть полностью функциональный конфигуратор в действии. Образец демонстрирует переключение материалов, переключатели видимости компонентов и управление камерой, давая вам немедленное представление о том, что возможно и как работает система. Пакет добавляет специфические для конфигуратора компоненты в существующие системы Unity, чтобы ускорить создание вашего прототипа.
4. Примечание. Если у вас возникли проблемы с установкой Git URL, проверьте руководство по устранению неполадок Менеджера пакетов.
✓ Контрольная точка: Теперь вы должны увидеть опции Product Configurator, когда щелкаете правой кнопкой мыши в иерархии или в меню GameObject. В репозитории GitHub также есть хорошие инструкции для образца конфигуратора, которые помогут вам извлечь максимальную пользу из обучения.
Конфигуратор продукта открыт в редакторе
Импортируйте 3D модель
После того как вы потратите некоторое время на изучение примера, следующим шагом будет импорт 3D модели, к которой вы добавите функциональность переключения материалов. Если вы хотите быстрее завершить этот учебник, вы можете использовать модель Skidloader, уже включенную в образец (поиск Skidloader). Или вы можете легко импортировать свою собственную модель с помощью одного из двух вариантов конвертации, объясненных в следующем разделе: Функция Оптимизация и конвертация в Unity Asset Manager или Unity Asset Transformer Toolkit. Вы также можете пропустить этот раздел, если хотите использовать модель, включенную в проект образца.
Asset Manager
Если вы планируете создавать профессиональные конфигураторы, подумайте о том, чтобы интегрировать Asset Manager в ваш рабочий процесс. Unity Asset Manager — это облачное решение для управления цифровыми активами (DAM), которое упрощает процесс загрузки, управления, преобразования, обмена и доступа к сложным активам 3D в реальном времени. Доступ к Asset Manager включен в подписку Unity Industry.
Вы можете подготовить и оптимизировать свои 3D модели с помощью Asset Manager, в частности с его функцией Оптимизация и конвертация. Это преобразует ваши 3D активы, очищая сетки, оптимизируя количество полигонов и конвертируя их в форматы, готовые для Unity. Этот процесс завершается менее чем за минуту и улучшает эффективность рабочего процесса для больших конвертаций файлов.
Узнайте больше об Asset Manager здесь:
- Как использовать Unity Asset Manager
- Введение в методы передачи Asset Manager.
CAD рабочий процесс с Asset Transformer Toolkit
Если вам нужно конвертировать сложные CAD модели, подумайте о том, чтобы использовать Unity Asset Transformer Toolkit, который обрабатывает различные форматы CAD файлов и предоставляет расширенные функции оптимизации. Импортируйте CAD модели непосредственно в Unity, затем используйте инструменты Asset Transformer для уменьшения количества полигонов, упрощения материалов и подготовки моделей для визуализации в реальном времени.
Узнайте больше о плагине Asset Transformer здесь:
Настройте свою сцену
Начните с создания новой сцены для вашего конфигуратора. Добавьте Скидалодер в пустую сцену, или если вы используете свою 3D модель, импортируйте ее в сцену и расположите соответствующим образом. Модель теперь готова для добавления функциональности переключения материалов, которую вы наблюдали в примере проекта.
✓ Контрольная точка: Ваша сцена должна содержать вашу 3D модель, расположенную так, чтобы вы могли четко ее видеть в представлении Сцены. Модель должна иметь примененные материалы и быть видимой в представлении Игры.
Создайте функциональность переключения материалов
Теперь вы реализуете основную функцию конфигуратора – позволяя пользователям переключать материалы на вашем продукте в реальном времени.
Создать варианты материалов
1. Начните с использования встроенного компонента для наборов вариантов, выбрав его в меню GameObject или щелкнув правой кнопкой мыши в иерархии. У вас будут разные варианты, но для этого учебника мы сосредоточимся на Вариантах материалов.
- Система вариантов материалов пакета использует систему обнаружения, которая автоматически находит все рендереры сетки, использующие ваш целевой материал в сложных иерархиях объектов.
2. Определите свой базовый материал и родительский объект, используя опцию Целевой родитель в компоненте, затем позвольте инструменту Захват определить все соответствующие рендереры сетки. Это обеспечивает согласованность между продуктами с несколькими компонентами, сохраняя при этом производительность.
Определите свой базовый материал
3. Повторно используйте эти два материала с металлическими отделками, Металлическая краска - Красная и Металлическая краска - Синяя (или создайте свои собственные эквиваленты). Назначьте материалы каждому слоту Варианта, перетаскивая их в поля Варианта. Система обрабатывает всю логику переключения, автоматически обновляя материалы при изменении вариантов. Используйте встроенный ползунок предварительного просмотра в Инспекторе, чтобы немедленно тестировать варианты и видеть, как ваши красные и синие отделки выглядят на вашей модели.
✓ Контрольная точка: Теперь вы должны увидеть два варианта материалов (Металлическая краска - Красный и Металлическая краска - Синий) в вашем Наборе вариантов материалов компоненте. Когда вы перетаскиваете ползунок предварительного просмотра в Инспекторе, ваша модель должна изменяться между красной и синей металлическими отделками в реальном времени в представлении Сцены.
Для помощи в создании материалов смотрите документацию по материалам Unity.
Подключите варианты к пользовательскому интерфейсу
Пакет Product Configurator включает компонент VariantSelect, который генерирует выпадающие меню существующих наборов вариантов для быстрого развития конфигуратора. Эта функция предназначена для недевелоперов, чтобы легко выбирать наборы вариантов в сцене и интегрируется напрямую с системой событий Unity, позволяя вам создавать функциональные конфигураторы без пользовательского скриптинга. Это особенно полезно для пользователей, которые используют решение uGUI, позволяя им напрямую назначать компонент на событие OnClick.
Создайте пользовательский интерфейс
С вашими работающими вариантами материалов вам нужен интерфейс, который позволяет пользователям управлять этими конфигурациями и взаимодействовать с вашим конфигуратором продукта.
Unity предлагает две системы пользовательского интерфейса: систему пользовательского интерфейса на основе GameObject (uGUI) и новую систему UI Toolkit. Для этого учебника мы будем использовать систему uGUI на основе GameObject, так как она позволяет интеграцию перетаскиванием с компонентом VariantSelect без необходимости в коде.
1. Перетащите кнопку из меню пользовательского интерфейса в Иерархию и назовите ее (например, "Красная металлическая кнопка").
- Когда вы создаете свой первый элемент пользовательского интерфейса, Unity автоматически создаст объекты Canvas и EventSystem в вашей сцене. Canvas действует как контейнер для всех элементов пользовательского интерфейса, в то время как EventSystem обрабатывает ввод пользователя, такой как нажатия кнопок.
- Убедитесь, что компонент Canvas установлен на Масштабировать с размером экрана. Эта настройка позволяет элементам пользовательского интерфейса сохранять постоянные пропорции на разных разрешениях экрана. Установите Референсное разрешение, чтобы соответствовать вашим целевым размерам экрана – в этом примере это может быть 1920x1080. Это определяет базовое разрешение, на котором основана ваша компоновка пользовательского интерфейса. Кроме того, установите свойство Match на 0.5, что обеспечивает баланс между масштабированием ширины и высоты, гарантируя, что ваши элементы пользовательского интерфейса масштабируются равномерно, независимо от того, шире или выше экран, чем референс.Совет по анкерованию UI: Чтобы закрепить кнопки к определённым краям экрана (верх/низ), выберите ваш элемент UI и нажмите желаемый предустановленный якорь в панели Предустановки якорей компонента Rect Transform. Узнайте больше в Руководстве по якорению Unity UI
2. Чтобы связать вашу кнопку с выбором варианта, выберите вашу кнопку в иерархии, найдите компонент Кнопка в инспекторе и найдите раздел OnClick().
3. Нажмите "+", чтобы добавить новое событие, перетащите ваш GameObject с компонентом VariantSelect в поле объекта, выберите VariantSelect из выпадающего списка и выберите SelectVariant, чтобы вызвать изменение материала при нажатии кнопки.
4. Создайте дополнительные кнопки для каждого отделки материала (Кнопка синего металла) и свяжите их так же. Если вы хотите узнать больше о основах uGUI, посетите этот учебник, чтобы освоить основы.
✓ Контрольная точка: Нажмите на режим воспроизведения, затем нажмите кнопку Красного Металла, и ваша модель должна измениться на красное металлическое покрытие. Нажмите кнопку Синего Металла, чтобы изменить её на синюю. Вы должны увидеть Canvas и EventSystem в вашей иерархии, и ваши кнопки должны быть видны в игровом представлении.
Если кнопки не работают, проверьте, что ваши OnClick события правильно связаны, и проверьте документацию по кнопкам Unity.
Для продвинутых пользователей: Если вы уверены в программировании, это видео с 20:10 показывает, как автоматически генерировать кнопки UI с помощью скрипта VariantSetController, который динамически создает кнопки с правильными именами и функциональностью.
Добавьте управление камерой
Полный интерфейс конфигуратора также должен давать пользователям контроль над тем, как они видят продукт, позволяя им исследовать разные углы и перспективы.
Чтобы обеспечить вашему конфигуратору лучший пользовательский опыт, вы можете использовать пакет Cinemachine, который предоставляет решение без кода для настройки профессиональных видов камеры. Пример проекта конфигуратора уже включает настройку Cinemachine, так что вы можете сразу начать добавлять свои собственные камеры.
1. Чтобы создать новый угол камеры для вашего продукта, перейдите в GameObject > Cinemachine > Camera, чтобы добавить новую виртуальную камеру в вашу сцену. Разместите эту камеру так, чтобы показать ваш продукт с желаемого угла, например, крупным планом, который подчеркивает изменения материала.
- Совет: Используйте Выравнивание с видом (Ctrl-Shift-F на Windows или Cmd-Shift-F на Mac) в качестве отправной точки. Это перемещает вашу камеру в то же положение, что и в вашем представлении сцены. С этой позиции легче найти желаемый угол.
2. В компоненте камеры Cinemachine установите значение Приоритет, чтобы определить, когда эта камера должна быть активной (более высокие числа имеют приоритет). Используйте кнопку Соло в компоненте камеры Cinemachine, чтобы протестировать различные виды камер.
3. Добавьте две-три камеры для различных углов обзора. Компонент Cinemachine Brain (автоматически добавленный к вашей основной камере) управляет переходами между различными камерами, всегда выбирая виртуальную камеру с наивысшим приоритетом. Смотрите это видео, чтобы узнать больше о использовании Cinemachine в Unity 6.
4. Подключение камер к элементам управления UI: Чтобы активировать различные виды камер, создайте кнопки UI (скопируйте и вставьте из ваших кнопок варианта материала и переименуйте их для камер). Для события OnClick перетащите камеру, которую хотите контролировать, и используйте опцию Приоритизировать. Это установит приоритет на Высший, и поэтому эта виртуальная камера будет активной камерой.
5. Настройка интерактивного управления камерой: Для интерактивного движения камеры используйте камеру FreeLook, которая позволяет управлять орбитальным движением с помощью мыши вокруг вашего продукта.
6. Настройка действий ввода: В компоненте Контроллер осей ввода Cinemachine вы увидите раздел Управляемые оси с опциями Орбита взгляда X, Орбита взгляда Y и Масштаб орбиты. Эти должны быть настроены с действиями ввода Игрок/Взгляд из пакета Конфигуратора продукта. Чтобы найти эти действия, перейдите к:
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 проверьте настройки Player для оптимизации, специфичной для веба. Перейдите в Правка > Настройки проекта > Игрок и выберите вкладку Web. В разделе Настройки публикации вы можете установить Формат сжатия на Brotli (рекомендуется для меньших размеров файлов). Смотрите документацию Unity по настройкам веб-плеера для подробных рекомендаций по оптимизации этих настроек
Когда все будет готово, нажмите Собрать и запустить. Unity создаст папку со всем необходимым для запуска вашего конфигуратора в веб-браузере. Браузер откроется автоматически, и вы должны увидеть, как ваша сборка работает плавно. Если вы просто нажмете Собрать, вам нужно будет разместить выходные данные на локальном или удаленном веб-сервере. Unity также предоставляет вариант хостинга через Unity Play.
Теперь вы должны увидеть открытое окно браузера, и ваше приложение в сети.
Тестируйте и публикуйте онлайн
Тестируйте ваш конфигуратор на разных браузерах и устройствах, чтобы обеспечить стабильную работу. Компоненты пакета хорошо работают в сборках WebGL, но учитывайте, как переключение вариантов работает на целевых устройствах, и соответственно корректируйте сложность.
Unity создает полную папку сборки, содержащую файл index.html, сжатые игровые данные и все необходимые ресурсы. Эта папка может быть размещена на любом стандартном веб-сервере, что делает ваш конфигуратор доступным через любой современный веб-браузер.
✓ Финальный успех: Теперь у вас есть работающий конфигуратор продукта. Ваша папка сборки должна содержать файл index.html, который, когда открыт в браузере (или размещен на веб-сервере), отображает вашу 3D-модель с интерактивными кнопками Красного Металла и Синего Металла, которые изменяют отделку вашей модели в реальном времени.
Дополнительно: Создайте реалистичную промышленную среду
Для улучшенной профессиональной презентации рассмотрите возможность добавления одного из пакетов окружения из магазина активов Unity. Unity предоставляет официальные промышленные окружения, такие как Unity Factory и Unity Warehouse, или ищите чистые студийные установки с предварительно настроенным освещением и профилями постобработки. Эти пакеты обеспечивают основу для реалистичной визуализации продукта без необходимости в обширном создании окружения. Кроме того, Unity Hub включает шаблон URP 3D Sample Scene, который демонстрирует оптимизированные настройки освещения и рендеринга.
Дополнительно: Расширенный интерфейс пользователя с UI Toolkit
Для более продвинутой разработки интерфейса пользователя 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, смотрите этот учебник на Unity Learn.
Дополнительно: Расширенная функциональность варианта
Помимо базовой замены материалов, пакет поддерживает анимацию и варианты трансформации для динамических демонстраций. Используйте их для продуктов с подвижными частями, регулируемыми компонентами или функциями, которые выигрывают от анимированных показов. Варианты трансформации обрабатывают изменения позиции, вращения и масштаба, в то время как анимационные варианты демонстрируют функциональность или обеспечивают увлекательные переходы. Эти расширенные функции отлично работают, когда вы хотите продемонстрировать функциональность продукта или создать более увлекательные конфигураторы.
Помимо базовой замены материалов, вы также можете использовать анимацию и варианты трансформации для динамических демонстраций.
Теперь у вас есть базовые знания о том, как построить конфигуратор с помощью пакета Unity's Industry Product Configurator. Независимо от того, строите ли вы для промышленного оборудования, потребительских товаров или архитектурной визуализации, эта основа предоставляет все необходимое для создания привлекательных конфигураторов, которые приносят бизнес-результаты.
Read the article
Fill out this form to stay up-to-date with Unity’s latest offerings and solutions
