Українська 
Частина 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".
Змінимо налаштування "Specular" та "Diffuse", як на скріншоті вище.
Зайдемо в сувій "Environment", біля параметра "CubeMap", натиснемо на іконку олівця і виберемо "CubeMap" - "Sky" в панелі "Assets", в папці "env → cubemap ". Під час вибору ви можете переходити в підпапки. Ставимо значення "Reflectivity" рівним "1.56".
І останній штрих, додамо карту "AO". Завантажимо її спочатку в папку "car", потім додамо її в сувої "Ambient". Нижче наведено приклад текстури "Ambient Occlusion", який ми використовуємо.
Крім підключення карти, включимо прапорець "Tint", встановимо "Color" рівним "180,180,180" та режим змішування в режим "Multiply".
Результат, який у нас вийшов.
Матеріал BlackPlastic
Переходимо до налаштування наступного матеріалу. Виберіть екстер'єр автомобіля у Viewport, відкрийте матеріал "BlackPlastic" на панелі "Inspector", перейменуємо на "M_BlackPlastic".
Вимкнемо прапорець "Apply To All Maps" у сувої "Offset & Tiling".
Завантажимо текстуру "Noise". Відразу призначимо її в сувої "Normals" зі значенням "Bumpiness" рівним "0.1" та "Tiling" рівним "200" і "200".
У свитку "Environment" призначимо як "CubeMap" наш "cubemap_blurred". Встановимо значення "Reflectivity" рівним "0.4".
"Projection" встановимо в режим "Box". Режим "Box" - інакше накладає відображення, що дає цікавий ефект.
Для "Diffuse" та "Specular" встановіть значення, як на скріншоті нижче.
Результат, який у нас вийшов.
Матеріал BlackMetal
Результат, який у нас вийшов.
Матеріал Chrome_Exterior
Призначимо "Ambient" текстуру "AO", з панелі "Assets" - "T_Exterior_AO.png", режим змішування "Multiply", з включеним "Tint" та кольором "0, 0, 0".
Ось такий результат вийшов.
Матеріал GlassWinds
Результат.
Матеріал FrontGlass
Шостий за рахунком матеріал відповідає за переднє скло. Назвемо його як "M_FrontGlass". У моделі він названий трохи інакше, нічого страшного.
Призначимо карту прозорості "T_BackGlassInverted" в слот "Opacity". Далі налаштування, як на скріншоті нижче.
Результат.
Висновок
У наступній частині уроку ми продовжимо налаштовувати матеріали для об'єкта "SM_CarExterior".
{{comment.text}}