Создание проекта Lamborghini Urus (WebGL/PlayCanvas). Часть 8.
Вступление Часть 8
Это Часть 8 из серии уроков по созданию Lamborghini Urus при помощи WebGL/PlayCanvas.
Для тех, кто не читал предыдущие части, вот демонстративное видео.
В этой части урока, мы добавим в сцену интерьер автомобиля и настроем для него материалы.
Доступ к материалам, такие как: модели в формате "FBX", текстуры, запеченные карты "AO" и другое, вы можете получить оформив подписку на Patreon.
Patreon - 3DGROUNDПриборная доска салона
Добавим объект в сцену "SM_Panel", по аналогии с предыдущей частью урока. Перетаскиваем "FBX" файл на панель "Assets" → "car". Затем "Template" с названием "SM_Panel" перетаскиваем на панель "Hierarchy" → "Car".
Для того, чтобы вам было легче работать с данным объедком, выберите все не нужные элементы автомобиля и снимите флажок "Enabled" на панели "Inspector". Таким образом, вы скроете объекты.
Практически все материалы мы будем создавать с нуля, за исключением "M_BlackMetal" - 3 слот, "M_Mirror" - 5 слот и "M_Brake" - 6 слот.
Материал M_Panel_BlackPlastic
Материал Panel_Chrome
В данном материале, хочу сделать акцент на сверток "Environment". Здесь режим "Projection" переключен на "Box", и изменены "Center" и "Half Extents", для того чтобы добиться интересного эффекта в бликах, - смазанные полосы под 30-40 градусов.
Материал InteriorDisplays
Материал Panel_BlackLeather
Материал Panel_Carbon
Материал Panel_Leather
Результат
Интерьер салона
Добавим объект в сцену "SM_Interior". Перетаскиваем "FBX" файл на панель "Assets" → "car". Затем "Template" с названием "SM_Interior" перетаскиваем на панель "Hierarchy" → "Car".
Материал "M_BlackMetal" - 4 слот и "M_ChromeClearDark" - 3 слот, возьмем из готовых. Все остальные материалы создадим с нуля.
Материал Interior_BlackPlastic
Материал Interior_Carpet
Материал Interior_Leather
Обратите внимание, что данный материал установлен на слот 5 и 7.
Материал Rubber
Материал Interior_LeatherSeat
Результат
Свечение задних фар
Создадим пустой "Entity" в "Hierarchy" → "Root" с названием "BackLight_GlowEffect", в него добавим обычный "Plane". Повернем "Plane" на "-90" градусов по оси "X". Ставим "Scale" по всем осям равным "0.7".
Также у "Plane" отключаем свойства "Cast Shadows", "Cast Lightmap Shadows", "Receive Shadows".
Теперь, для "Plane" создадим и применим материал с именем "GlowEffect". Для создания материала вызовите контекстное меню на панели "Assets" и выберите пункт "Material".
Примените настройки для материала, как показано на скриншоте ниже.
Передвиньте "BackLight_GlowEffect" к левой задней фаре и поверните по оси "Y" на "90" градусов.
Отлично. Осталось добавить "Component" - "Script" и назначить в качестве скрипта уже существующий "hotspot", который мы применяли к солнцу.
Для "hotspot" в настройках "Camera Entity", выбираем объекта "Camera". Делаем дубликат "BackLight_GlowEffect" и передвигаем вправо для правой задней фары.
Если запустить проект по кнопке "Play", вы можете увидеть, если мы перемещаем вид камеры к задней части автомобиля появляется эффект свечения. Но, если вид камеры будет направлен на переднюю часть автомобиля, благодаря скрипту, эффект свечения изчезает.
Результат
Настройки камеры
Как вы могли заметить, по нажатию кнопки "Play", вид камеры по-умолчанию улетает далеко от сцены. Сейчас мы исправим эту ситуацию.
Выберите объект "Camera" на панели "Hierarchy", при помощи инструмента "Move" и "Rotate", установите желаемый вид из камеры. Затем, в настройках на панели "Inspector", произведите настройки, как указаны на скриншоте выше.
Для скрипта "orbitCamera", выставляем максимальный и минимальный угол "80" и "2" градуса, чтобы нельзя было "проваливаться" камерой сквозь землю. "Inertia Factor"- добавит плавности кручения камере. А для "Focus Entity", выберите наш "Entity" - "Car", чтобы вид был "прибит" к нашему автомобилю.
Нажимаем "Play", - и автомобиль у нас в центре кадра, мы не проваливаемся при кручении сквозь землю и кручение стало само по себе приятнее.
Дополнительные скрипты для Camera
Добавим несколько скриптов для камеры из бесплатного магазина ассетов Playcanvas.
Для этого, нажмите кнопку "Store" на панели "Assets".
На странице "Store", отсортируйте контент по тегу "Script".
Добавим следующие скрипты: "Vignette Post Effect", "Bloom Post Effect", "FXAA Post Effect".
Нажмите на карточке со скриптом, затем нажмите кнопку "Download" и выберите ваш проект.
И так, для каждого перечисленного скрипта. Такое добавление часто-используемых эффектов, скриптов и ассетов очень удобно, за что большая благодарность разработчикам Playcanvas.
Возвращаемся в наш проект. У вас в корне панели "Assets" должны появится три скрипта. Перетяните их в папку "scripts".
Выбираем объект "Camera" на панели "Hierarchy", добавляем новые скрипты из списка "Add script": "fxaa", "bloom", "vignette" на панели "Inspector".
Настройте параметры скриптов, как показано на скриншоте ниже.
Результат
Как вы можете видеть, появилась виньетка по краям, Antialiasing стал немного лучше и стал более выражен эффект свечения.
Эффект выхлопных газов
В Playcanvas присутствует система Particles, благодаря которой можно создавать интерактивные эффекты.
Создайте пустой "Entity" и назовите "Particles", добавьте в него "Particle System". Передвиньте его к левой крайней выхлопной трубе.
В качестве текстуры "дыма", будем использовать данную текстуру.
Мой пример настроек.
Графики "Velocity", "Radial Speed", "Opacity".
Сделаем дубликат "Particle System", и передвинем немного вправо. Зададим следующие настройки.
Отлично, теперь сделаем дубликаты этих двух "Particle System" и передвинем вправо к другим выхлопным трубам.
Результат
Заключение
В этой части урока, мы полностью закончили с добавлением геометрии и настройкой материалов, сделали эффект свечения задних фар, а также настроили камеру и систему частиц.
В следующей части урока, мы будем добавлять еще больше интерактивности и улучшать освещение.
FAQ
1. О чём эта статья?
2. Что рассматривается в Part 8?
3. Почему развитие проекта разбивается на несколько частей?
4. Какие аспекты чаще всего улучшаются на поздних этапах разработки?
5. Почему качество визуализации так важно для автомобильных проектов?
6. Можно ли улучшать материалы и освещение на протяжении всей разработки?
7. Как интерактивность влияет на восприятие продукта?
8. Почему важна производительность WebGL-приложения?
9. Какие преимущества даёт PlayCanvas при создании конфигураторов?
10. Можно ли использовать аналогичные методы для других продуктов?
11. Насколько важна оптимизация ресурсов?
12. Могут ли такие проекты работать на мобильных устройствах?
13. Требуются ли знания программирования для реализации сложных функций?
14. Какие преимущества имеет WebGL перед традиционными изображениями?
15. Можно ли продолжать развивать проект после завершения основной разработки?
16. Для кого будет полезна эта статья?
Последние статьи
{{comment.text}}