Розробка проекту Lamborghini Urus (WebGL/PlayCanvas). Частина 4

Vasyl Lukianenko
3D Artist and Technical Author

Дата: Червень 12, 2022 Оновлено: Липень 25, 2023 Час читання: 4 min Перегляди: 423

Ви читаєте частину: 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.