Добавление интерактивности интерьеру SVOYA (Playcanvas/WebGL). Часть 3
Вступление
Это Часть 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” не относится к тканям никаким образом, просто крутите настройки и смотрите визуально, как это можно использоваться в своих целях.
На основе данного материала создайте несколько вариантов разных цветов, для нашего конфигуратора.
Сделайте дубликат кнопки “ChangeColor”, переименуйте в “ChangeMaterial”.
Передвиньте кнопку и установите ее над диваном.
Кнопка готова!
Добавьте скрипт “change-material.js” в папку “scripts/configurator”.
Скрипт “change-material.js”.
Примените скрипт к объекту дивана.
Укажите в “Trigger Button” нашу кнопку “ChangeMaterial”.
В параметре “Materials” введите число, отвечающее за количество меняемых материалов.
Назначьте материалы на слоты.
Запустите проект, материалы меняются поочередно по нажатию кнопки “ChangeMaterial”.
Заключение
В этой части урока мы сделали конфигуратор смены материалов и научились создавать сложные материалы ткани.
Для подписчиков Patreon будет возможность просматривать проект SVOYA Apartment в режиме чтения, а также быстрое копирование-вставка необходимых ассетов и скриптов в свой личный проект.
Для всех остальных все необходимое найдете на странице этого урока.
PatreonFAQ
1. О чём эта статья?
2. Что нового добавляется в Part 3?
3. Нужно ли изучать предыдущие части?
4. Какие задачи решает Part 3?
5. Подходит ли этот подход для коммерческих проектов?
6. Можно ли использовать показанные методы в других проектах?
7. Почему важно постепенно добавлять интерактивность?
8. Можно ли расширять пользовательский интерфейс?
9. Помогает ли интерактивность улучшить пользовательский опыт?
10. Насколько важна производительность при разработке интерактивных сцен?
11. Можно ли добавлять новые настройки и параметры объектов?
12. Подходит ли PlayCanvas для создания виртуальных шоурумов?
13. Нужно ли знать JavaScript для реализации сложных функций?
14. Можно ли обновлять проект после публикации?
15. Какие преимущества даёт интерактивная WebGL-презентация?
16. Для кого предназначена эта статья?
Последние статьи
{{comment.text}}