Это Часть 2 из серии уроков по созданию интерактивного интерьера SVOYA при помощи WebGL/PlayCanvas.

Для тех, кто не читал предыдущие части, вот демонстративное видео.

В этой серии уроков мы сделаем интерактивную презентацию интерьера, которую можно просматривать в реальном времени через веб браузер. 

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

Прежде, чем погрузиться в рабочий процесс, давайте поговорим об инструментах, с которыми мы будем работать.

Вам необходимо будет зарегистрироваться на сайте Playcanvas, если вы еще этого не сделали. 

Я уже давно не пользуюсь Photoshop, вместо него я нашел удобный аналог Photopea - это онлайн редактор, работает без установки в веб-браузере. Пользоваться можно бесплатно.

Для работы использую 3Ds Max 2022 и это очень важно, поскольку в этой версии доработали до ума раздел запекания текстур. Вы конечно можете повторить все и на более старых версиях при желании, это просто моя рекомендация.

В качестве рендера я использовал Corona Renderer 7.

Скрипты для 3Ds Max: Prune Scene и Stock Model Fixer.

Для удаления лишнего мусора и исправления проблемной геометрии.

Еще для работы использовал собственный скрипт для экспорта, он будет прикреплён в одной из частей урока.

Процесс создания архитектуры, подбора 3D моделей и освещения, я не буду подробно описывать. С этим мне помогла моя помощница Мельниченко Яна, за что ей огромная благодарность. Я не думаю, что вам составит большого труда сборка такой сцены, тем более в интернет есть много хороших уроков.

Прикреплю ссылочку на Behance - Мельниченко Яна.

На сайте svoya-studio.com можно найти план интерьера.

Loading...

Загружаем в 3Ds Max план, создаем архитектуру. Она здесь довольно простая. На примере ниже, видно что даже не создавался изгиб, для экономии полигонов.

Loading...

Стены сделаны толщиной в 1 полигон. Окна - это небольшой "Extrude". Пол и потолок, также толщиной в 1 полигон и сделаны отдельными объектами.

Шкафчики это обычный "Plane", с сегментами и небольшим "Extrude" граней для имитации дверц.

Loading...

Затем были добавлены окна и смоделированы потолочные светильники.

Loading...

Постепенно в интерьер добавлялись другие предметы: паркетная доска, диван, смеситель, мойка, картина.

Loading...

Некоторые модели использовались из готовых, некоторые создавались с нуля.

Loading...

Например, телевизор был сделан с нуля и в нем всего 18 полигонов.

Loading...

При добавлении сторонних моделей в сцену, не забываем их открывать в другом окне 3Ds Max, затем чистить при помощи скриптов Prune Scene и Stock Model Fixer.

Loading...

После того, как сцена наполнена, можно выставить свет и поработать с материалами. Должен признаться, сначала хотел сделать сцену под V-Ray, но к сожалению я потратил много времени на настройку освещения и не добился желаемого результата. В Corona Renderer желаемый результат получился практически сразу.

У меня была идея запечь текстуры через модификатор "Projection". Т.е. с "hi-poly" на "low-poly" модель перенеслась бы вся детализация. Но, к сожалению Corona Renderer до сих пор не научился с ним работать. 

В конечном результате отказ от "Projection" модификатора, сэкономил кучу времени на подготовку и настройку, а результат обычного запекания текстур был не сильно хуже.

Сделав несколько тестовых рендеров, у меня получился таткой результат.

Обратите внимание!
Для всех материалов максимально скручены отражения или сделаны размытые отражения. В будущем мы добавим необходимые отражения в Playcanvas!

Loading...

Качество освещения и материалов полностью меня устроило и я перешел к следующему этапу оптимизации моделей.

Но, об этом поговорим уже в следующей части урока.

Настройка сцены, освещения и материалов закончена. Это был приятный этап, поскольку нас ждет оптимизация моделей и Unwrap.

Не пропустите следующий урок, впереди еще много интересного...