Українська 
Частина 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" і посунемо праворуч до інших вихлопних труб.
Результат
Висновок
У цій частині уроку ми повністю закінчили з додаванням геометрії та налаштуванням матеріалів, зробили ефект свічення задніх фар, а також налаштували камеру та систему частинок.
У наступній частині уроку, ми будемо додавати ще більше інтерактивності та покращувати освітлення.
{{comment.text}}