Русский 
Вступление
Это Часть 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 в режиме чтения, а также быстрое копирование-вставка необходимых ассетов и скриптов в свой личный проект.
Для всех остальных все необходимое найдете на странице этого урока.
Patreon
{{comment.text}}