Додання інтерактивності інтер'єру SVOYA (Playcanvas/WebGL). Частина 3

Vasyl Lukianenko
3D Artist and Technical Author

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

Ви читаєте частину: 1 2 3 4 5

Вступ

Це Частина 3 із 5 серії уроків з додавання інтерактивності інтер'єру SVOYA Apartment.

Доступ до матеріалів, такі як: моделі у форматі "FBX", запечені текстури, скрипти та інше, ви можете отримати підписку на Patreon.

Patreon

Переглянути Playcanvas проект онлайн.

View Playcanvas Project Online

Створення матеріалу дивану

З моменту запуску проекту SVOYA Apartment пройшов уже рік, і за цей час Playcanvas встиг отримати чимало цікавих оновлень та налаштувань матеріалів. Веб-движок Playcanvas продовжує розвиватися, постійно покращуючи свої можливості та інструменти для створення високоякісних 3D-додатків та ігор.

Одним з найбільш важливих та цікавих інструментів є "Falloff". Ця функція давно доступна в 3Ds Max, і дозволяє легко та швидко налаштувати матеріали тканин. До того ж, у 3Ds Max є можливість змішувати різні карти за допомогою "Mix" та створювати унікальні ефекти, такі як вельвет.

Однак, при роботі з Playcanvas необхідно розуміти, що ці ефекти не можуть бути запечені, і створення матеріалів такого типу може бути непростим або зовсім неможливим.

За рік існування проекту SVOYA Apartment веб-движок Playcanvas встиг значно розвинутись та розширити свої можливості. Великий внесок у це внесли налаштування матеріалів, серед яких особливо виділяються нові опції "Sheen" та "Clearcoat". Використовуючи їх разом, можна створювати неймовірно реалістичні ефекти, такі як шовкова тканина вельвету, яка змінює свій відтінок і яскравість в залежності від кута огляду і відстані від об'єкта.

Щоб краще зрозуміти, як ці налаштування працюють, рекомендую спробувати на практиці. Я можу продемонструвати на прикладі одного матеріалу, як різні поєднання налаштувань впливають на якість рендерингу та візуальну привабливість матеріалу. Головне не боятися експериментувати та творчо підходити до налаштування матеріалів у Playcanvas!

Матеріал Sofa Green

Давайте створимо унікальний матеріал і дамо йому назву "Sofa Green". Для початку, ми призначимо запечену карту тіней у "Lightmap", щоб покращити освітлення та надати матеріалу більше об'ємності. Потім, додамо готову cubemap "Helipad" в розділ "Environment" з певними налаштуваннями.

Однак, щоб "Sheen" та "Clearcoat" почали працювати належним чином, необхідно переконатися, що "Reflectivity" має значення "0". Тільки так ми зможемо досягти найкращого результату та отримати візуально привабливий матеріал з працюючими параметрами "Sheen" та "Clearcoat".

Додати карту тіней і в “Diffuse”. Увімкніть “Tint” та використовуйте зелений колір.

У розділі “Specular” необхідно увімкнути “Use Metalness”. Параметр "Metalness" встановити в "0".
"Glossiness" на "50".

Переконаємося, що “Emissive” у нас повністю вимкнено.

Займемося налаштуванням "Sheen". "Sheen" це по суті і є всім відомий "Falloff" в 3Ds Max. Тут ви можете вказати колір, який буде видно на вигинах моделі, а також силу ефекту. Змінюючи колір і “Glossiness”, можна досягти різних варіантів шорсткості тканин. Мені найбільше подобаються значення від 0.8 до 0.92.

Для надання матеріалу ефекту вельвет, відмінно підходить "Clearcoat". Я використовував текстуру потертостей в слотах "Clear Coat" і "Clear Coat Gloss".

Я використовував різні параметри "Tiling" текстур. Для "Clear Coat Normals" використовував наступну текстур.

Таким чином, ми створили універсальний матеріал і його можна використовувати для різних тканин, змінюючи параметри “Bumpiness”, “Glossiness” та “Clear Coat Factor”.

"Clear Coat Factor" - відповідає за силу ефекту вельвету. "Glossiness" - прийде ефект гумовості, рекомендую використовувати від "0" до "0.3".
"Bumpiness" - шовковистість матеріалу.

Комбінуючи ці налаштування та чорно-білі текстури потертостей можна досягти цікавих результатів.

Експериментуйте, не важливо, що "Use Metalness" не відноситься до тканин ніяким чином, просто крутіть налаштування і дивіться візуально, як це можна використовувати в своїх цілях.

На основі даного матеріалу створіть кілька варіантів різних кольорів для нашого конфігуратора.

Зміна матеріалів дивана за натисканням UI-кнопки

Налаштування UI елементів

Зробіть дублікат кнопки “ChangeColor”, перейменуйте “ChangeMaterial”.

Пересуньте кнопку та встановіть її над диваном. Кнопка готова!

Застосування та налаштування скрипта changeMaterial

Додайте скрипт “change-material.js” до папки “scripts/configurator”.

Скрипт "change-material.js".

Застосуйте скрипт до об'єкта дивана.
Вкажіть у “Trigger Button” нашу кнопку “ChangeMaterial”.
У параметрі “Materials” введіть число, що відповідає за кількість матеріалів, що змінюються.
Призначте матеріали на слоти.

Запустіть проект, матеріали змінюються по черзі після натискання кнопки “ChangeMaterial”.

Висновок

У цій частині уроку ми зробили конфігуратор зміни матеріалів та навчилися створювати складні матеріали тканини.

Для передплатників Patreon буде можливість переглядати проект SVOYA Apartment у режимі читання, а також швидке копіювання-вставка необхідних ассетів та скриптів у свій особистий проект.

Для всіх інших все необхідне знайдете на сторінці цього уроку.

Patreon

Ви читаєте частину: 1 2 3 4 5

FAQ

1. Про що ця стаття?

Стаття продовжує розробку інтерактивного проєкту SVOYA Apartment у PlayCanvas і розглядає нові функції, які покращують взаємодію користувача зі сценою.

2. Що нового додається у Part 3?

Третя частина присвячена подальшому розвитку проєкту, додаванню нових інтерактивних можливостей та вдосконаленню користувацького інтерфейсу.

3. Чи потрібно вивчати попередні частини?

Так. Part 3 базується на функціональності, реалізованій у попередніх частинах, тому рекомендується ознайомитися з ними заздалегідь.

4. Які завдання вирішує Part 3?

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

5. Чи підходить цей підхід для комерційних проєктів?

Так. Розглянуті рішення можуть використовуватися в комерційних презентаціях, конфігураторах та інтерактивних WebGL-застосунках.

6. Чи можна використовувати показані методи в інших проєктах?

Так. Більшість технік легко адаптуються для будь-яких проєктів на базі PlayCanvas.

7. Чому важливо поступово додавати інтерактивність?

Покроковий підхід дозволяє краще контролювати логіку проєкту, продуктивність і зручність використання.

8. Чи можна розширювати користувацький інтерфейс?

Так. PlayCanvas дозволяє створювати додаткові панелі, меню, кнопки та елементи керування для більш зручної взаємодії зі сценою.

9. Чи допомагає інтерактивність покращити користувацький досвід?

Так. Користувачі отримують більше можливостей для дослідження проєкту та взаємодії з його елементами.

10. Наскільки важлива продуктивність під час розробки інтерактивних сцен?

Дуже важлива. Навіть добре реалізовані функції можуть погіршити користувацький досвід за недостатньої оптимізації.

11. Чи можна додавати нові налаштування та параметри об'єктів?

Так. Користувачі можуть отримувати доступ до різних варіантів матеріалів, кольорів і конфігурацій об'єктів.

12. Чи підходить PlayCanvas для створення віртуальних шоурумів?

Так. Завдяки інтерактивності та роботі в браузері PlayCanvas часто використовується для створення віртуальних презентацій і шоурумів.

13. Чи потрібно знати JavaScript для реалізації складних функцій?

Так. Для створення нестандартної логіки та розширених можливостей зазвичай потрібне програмування на JavaScript.

14. Чи можна оновлювати проєкт після публікації?

Так. PlayCanvas дозволяє розвивати проєкт, додавати нові функції та вдосконалювати наявний функціонал.

15. Які переваги дає інтерактивна WebGL-презентація?

Вона дозволяє користувачам досліджувати простір, взаємодіяти з об'єктами та отримувати більш повне уявлення про проєкт порівняно зі статичними зображеннями.

16. Для кого призначена ця стаття?

Для розробників PlayCanvas, технічних художників, архітектурних візуалізаторів, дизайнерів інтер'єрів і всіх, хто цікавиться створенням інтерактивних 3D-проєктів для браузера.

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.