Создание проекта Lamborghini Urus (WebGL/PlayCanvas). Часть 4.

Vasyl Lukianenko
3D Artist and Technical Author

Дата: Июнь 12, 2022 Обновлено: Июль 25, 2023 Время чтения: 4 min Просмотры: 429

Вы читаете часть: 1 2 3 4 5 6 7 8 9 10

Вступление Часть 4

Это Часть 4 из серии уроков по созданию Lamborghini Urus при помощи WebGL/PlayCanvas.

В предыдущей части мы полностью закончили подготовку окружения, разобрались как использовать скрипты JavaScript, а также настроили базовый свет.

Для тех, кто не читал предыдущие части, вот демонстративное видео.

В этой части урока, мы разберемся как добавлять геометрию в сцену и разберем базовые настройки материалов.

Хочу выразить огромную благодарность пользователю Мельниченко Яна за подготовку 3D модели автомобиля Urus. Мельниченко Яна - топовый специалист в области GameDev и ArchViz под Unreal Engine. Урок по подготовке 3D модели - оптимизация, подготовка текстуры, запекание LightMap и др. будет позже и зависит от Вас. Напишите комментарий или необходим такой урок.

Также прикреплю ссылочку на Behance - Мельниченко Яна.

Behance - Яна Мельниченко

Добавление геометрии в сцену

Мы не будем подробно останавливаться на описании процесса подготовки 3D модели Urus. Если, вы считаете, что нужно дополнение к данному уроку, напишите об этом в комментариях и мы совместно с Мельниченко Яна подготовим такой урок.

Доступ к материалам, такие как: модели в формате "FBX", текстуры, запеченные карты "AO" и другое, вы можете получить оформив подписку на Patreon.

Patreon - 3DGROUND

Ниже приведен список заранее подготовленных частей Urus. Вся подготовка происходила в 3Ds Max, а затем необходимые части были экспортированы в отдельные FBX файлы.

Такие элементы, как передние двери, задняя дверь багажника, три варианта дисков, колеса и интерьер должны быть разделены на отдельные FBX файлы для удобства.

Создайте папку "car" в корне панели "Assets". В будущем в эту папку, мы будем добавлять геометрию, текстуры и материалы, связанные с нашим автомобилем.

Добавим кузов нашего автомобиля в PlayCanvas. Для этого, просто перетащите "SM_CarExterior.fbx" в панель "Assets", в папку "car".

В процессе загрузки, у вас автоматически создадутся различные ассеты, материалы, "GLB" и "Template".

Перед тем, как добавить в сцену экстерьер машины, необходимо сначала создать пустой "Entity". Это будет служить контейнером, в который будем добавлять другие части модели.

Создаем "Entity" в панели "Hierarchy", называем его "Car". Затем перетягиваем "Template" с названием "SM_CarExterior" на "Entity" - "Car".

Кузов автомобиля должен появиться во Viewport.

Повернем "Entity" - "Car", на 90 градусов по оси Y.

При добавлении других частей в сцену, а именно в "Entity" - "Car", дополнительное кручение объектам не понадобиться.

Настройка материалов

Материал CarPaint

Выберите объект во Viewport, в панели "Inspector", вы увидите материалы принадлежащие кузову нашего автомобиля. Начнем с первого материала - это "CarPaint".

Нажмите на "CarPaint" в панели "Inspector", у вас откроется редактор материалов. Сразу же переименуем материал в "M_CarPaint_Exterior".

playcanvas material carpaint diffuse and specular settings

Изменим настройки "Specular" и "Diffuse", как на скриншоте выше.

Зайдем в свиток "Environment", возле параметра "CubeMap", нажмем на иконку карандаша и выберем "CubeMap" - "Sky" в панели "Assets", в папке "env → cubemap". Во время выбора, вы можете переходить в подпапки. Ставим значение "Reflectivity" равным "1.56".

playcanvas material carpaint environment settings

И последний штрих, добавим карту "AO". Загрузим ее сначала в папку "car", затем добавим ее в свитке"Ambient". Ниже пример текстуры "Ambient Occlusion", который мы используем.

Кроме подключения карты, включим флажок "Tint", установим "Color" равным "180,180,180" и режим смешивания в режим "Multiply".

Результат, который у нас получился.

Материал BlackPlastic

playcanvas material black plastic preview

Переходим к настройке следующего материала. Выберите экстерьер автомобиля во Viewport, откройте материал "BlackPlastic" в панели "Inspector", переименуем в "M_BlackPlastic".

Выключим флажок "Apply To All Maps" в свитке "Offset & Tiling".

playcanvas material black plastict disable tiling and offset

Загрузим текстуру "Noise". Сразу назначим ее в свитке "Normals" со значением "Bumpiness" равным "0.1"и "Tiling" равным "200" и "200".

В свитке "Environment" назначим в качестве "CubeMap" наш "cubemap_blurred". Установим значение "Reflectivity" равным "0.4".
"Projection" установим в режим "Box". Режим "Box" - по-другому накладывает отражения, что дает интересный эффект.

Для "Diffuse" и "Specular" установите значения, как на скриншоте ниже.

playcanvas material black plastic settings 3

Результат, который у нас получился.

playcanvas material black plastic result 2

Материал BlackMetal

playcanvas material black metal specular and diffuse settings

playcanvas material black metal environment settings

Результат, который у нас получился.

Материал Chrome_Exterior

playcanvas material chrome exterior preview

playcanvas material chrome exterior abmient and diffuse settings

Назначим "Ambient" текстуру "AO", из панели "Assets" - "T_Exterior_AO.png", режим смешивания "Multiply", с включенным "Tint" и цветом "0,0,0".

playcanvas material chrome exterior specular and environment settings

Вот такой результат получился.

playcanvas material chrome exterior result

Материал GlassWinds

playcanvas material glass winds diffuse and specular settings

playcanvas material glass winds environment settings

Результат.

Материал FrontGlass

Шестой по счету материал у нас отвечает за переднее стекло. Назовем его как "M_FrontGlass". В модели он назван немного по-другому, ничего страшного.

playcanvas material front glass diffuse and specular settings

Назначим карту прозрачности "T_BackGlassInverted" в слот "Opacity". Дальше настройки, как на скриншоте ниже.

playcanvas material front glass opacity and environment settings

Результат.

Заключение

В следующей части урока, мы продолжим настраивать материалы для объекта "SM_CarExterior".

Вы читаете часть: 1 2 3 4 5 6 7 8 9 10

FAQ

1. О чём эта статья?

Статья продолжает разработку WebGL-проекта Lamborghini Urus в PlayCanvas и посвящена дальнейшему развитию, оптимизации и совершенствованию интерактивной автомобильной презентации.

2. Что рассматривается в Part 4?

В четвёртой части описываются дополнительные функции, улучшения проекта и расширенные возможности, которые повышают качество визуализации и взаимодействия пользователя.

3. Почему непрерывное развитие важно для WebGL-проектов?

Крупные интерактивные проекты требуют постепенного совершенствования, что позволяет тестировать новые функции, оптимизировать производительность и поддерживать стабильность работы.

4. Подходит ли PlayCanvas для профессиональных автомобильных проектов?

Да. При правильной оптимизации и управлении ресурсами PlayCanvas может использоваться для создания профессиональных автомобильных конфигураторов и презентаций.

5. Почему оптимизация остаётся важной?

По мере добавления новых функций, текстур и интерактивных возможностей требования к производительности растут, поэтому оптимизация остаётся критически важной.

6. Могут ли пользователи настраивать конфигурацию автомобиля?

Да. Интерактивные автомобильные проекты часто позволяют изменять цвета, материалы, диски, интерьер и другие параметры в режиме реального времени.

7. Улучшает ли Part 4 пользовательский опыт?

Да. Повышение удобства использования, улучшение навигации и логики взаимодействия являются важными задачами данного этапа разработки.

8. Можно ли реализовать расширенные системы управления камерой?

Да. Разработчики могут создавать собственные режимы обзора, анимированные переходы, точки фокусировки и другие интерактивные возможности.

9. Подходит ли PlayCanvas для коммерческих автомобильных презентаций?

Да. Многие компании используют WebGL для демонстрации продукции и создания интерактивного опыта для клиентов.

10. Можно ли использовать эти подходы в других сферах?

Да. Подобные решения подходят для конфигураторов мебели, презентаций недвижимости, промышленной продукции и других 3D-проектов.

11. Почему структура проекта становится важнее по мере роста его сложности?

Хорошо организованный проект упрощает разработку, поддержку, обновление и добавление нового функционала.

12. Могут ли такие приложения работать на мобильных устройствах?

Да. Грамотная оптимизация позволяет проектам PlayCanvas эффективно работать на смартфонах, планшетах и компьютерах.

13. Требуются ли навыки программирования для создания сложных функций?

Да. Для реализации нестандартных систем и сложного взаимодействия обычно необходимы знания JavaScript и PlayCanvas API.

14. Какие преимущества имеет WebGL по сравнению с традиционными презентациями?

WebGL обеспечивает взаимодействие в реальном времени, позволяя пользователям изучать продукт, изменять конфигурации и взаимодействовать с контентом непосредственно в браузере.

15. Можно ли продолжать развивать проект после запуска?

Да. В течение жизненного цикла проекта можно добавлять новые функции, улучшать графику, оптимизировать работу и расширять возможности конфигуратора.

16. Для кого будет полезна эта статья?

Для разработчиков PlayCanvas, технических художников, специалистов по автомобильной визуализации, дизайнеров интерактивного опыта и всех, кто интересуется созданием современных WebGL-приложений.

Vasyl Lukianenko
3D Artist and Technical Author

Vasyl Lukianenko is a 3D artist and technical author focused on practical workflows, optimization, and production-ready techniques. He publishes tutorials, courses, and tools to help artists work faster and get cleaner results.