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

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

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

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

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

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

Loading...

Loading...

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

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

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

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

Loading...

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

Loading...

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

Loading...

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

Loading...

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

Loading...

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

Loading...

Loading...

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

Loading...

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

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

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

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

Loading...

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

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

Loading...

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

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

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

Loading...

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

Loading...

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

Loading...

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

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

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