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

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

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

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

Итак, наши текстуры запеклись. Имя текстур содержит название модели и постфикс "Corona_Beauty". В настройках "Bake to Texture" мы особо ничего не меняли.

Loading...

Я написал скрипт, который оптимизирует процесс экспорта моделей в формат "FBX".  Код скрипта прикреплен ниже, для того чтобы его скачать, пролистните блок кода, нажмите правой кнопкой мышки на "view raw", затем "Save link as...". Для запуска скрипта, перетяните загруженный файл "Export2Playcanvas.ms" во "Viewport" программы 3Ds Max.

Так выглядит скрипт, если запустить его в 3Ds Max.

Loading...

Возможности:

Конечно, можно экспортировать вручную, но для экономии времени удобно пользоваться скриптом Export2Playcanvas.

Loading...

Перетяните скрипт "Export2Playcanvas.ms" во "Viewport" программы 3Ds Max, выберите путь "Textures Path", где у вас хранятся запеченные текстуры.

Важно!
Для каждой модели должна быть запечена текстура с названием модели и постфиксом "Corona_Beauty"!
Если, при экспорте не будет найдена текстура для модели, вы не сможете ее экспортировать. Об этом вам сообщит уведомление с ошибкой.

Выделите модель, нажмите "Export Selected". Модели экспортируются по одной. После экспорта в папке "Textures Path" будет создан "FBX" файл.

Loading...

Выше показан пример, как выглядит список файлов после экспорта.

Под "капотом" в скрипте происходят следующие действия: 

Я рекомендую экспортировать модели по одной и затем добавлять сразу же их в сцену Playcanvas. Таким образом вы сразу сможете увидеть, если на каком-то из этапов была допущена ошибка.

Перед экспортом, я скопировал все объекты в новую сцену при помощи скрипта CopyTo PRO. Вы можете сделать "Merge" или перенести объекты любым другим способом.

Новая сцена нужна для того, чтобы не испортить текущую.

Практически для всех моделей, экспорт будет происходить через скрипт с настройками по-умолчанию.

У меня в сцене есть объекты, это "TV", "Oven" и "GlassDoors", для которых нужен "Multimaterial" и при их экспорте нужно в скрипте включить флажок "Two Material Ids". При этом создастся "Multimaterial", в первом слоте будет материал с нашей запеченной текстурой, а во втором слоте, просто обычный материал, который будет заменен на стекло в Playcanvas.

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

Я начал экспорт со стен, потолков и окон. Как было описано выше, выделяем модель, нажимаем "Export Selected". Экспортированный "FBX" перетягиваем на панель "Assets" в папку "models".

Я создал отдельный "Entity" с названием "Apartment" и начал добавлять модели.

Loading...

Продолжаем экспортировать другие объекты, внимательно, один за другим и добавлять их в Playcanvas. Пока материалы не трогаем.

Loading...

Наполняем сцену, помним об объектах, которым нужно включить опцию "Two Material Ids" - это "GlassDoor", "Oven" и "TV". Предварительно для этих объектов, я во временной сцене переназначил "ID" в "EditablePoly" и для всех стеклянных элементов я установил "id": 2.

Loading...

Как вы можете видеть из скриншота выше, я использовал фильтр на панели "Assets" для объектов "Template" и в поиске ищу только-что добавленную модель. Когда список моделей разрастается, это самый эффективный способ.

Loading...

Все модели добавлены. Даже в "Editor", уже выглядит красиво.

Теперь необходимо настроить "collisions", чтобы мы не проваливались сквозь стены и пол.

Для этого выберите "Walls", "Podium", "Cabinet" и "ConcreteFloor", добавьте к ним компоненты "RigidBody" и "Collision".

Loading...

Затем разворачиваем каждый "Template, выбираем "Asset Template", и для компонента "Collision"  меняем тип на "Mesh", выбираем советующий "Render Asset". Смотрите пример ниже с "Walls".

Loading...

Попробуем запустить проект по кнопке "Play".

Loading...

Отлично! Мы можем передвигаться по помещению и не проваливаемся сквозь пол и стены.

Осталась одна проблема, мы не можем взбираться на ступеньки, поскольку наш "Player", может перемещаться только по ровной поверхности.

Я создал "Plane" в 3Ds Max, как на картинке ниже, это наклонная поверхность по которой "Player" будет "проскальзывать".

Loading...

Экспортировал и добавил в сцену Playcanvas, добавил компоненты "RigidBody" и "Collision", для "Collision" выбрал тип "Mesh" и советующий "Render Assets".

Loading...

Еще раз запустим проект кнопкой "Play", отлично, теперь мы можем перейти по ступенькам.

Я заметил, что после запекания, некоторые текстуры выглядят недостаточно хорошо. Например, текстура "Cooker", выглядит вот так, даже если поставить размер текстуры "2048px".

Loading...

Поэтому я вручную перерисовал ее в Photopea (Photoshop).

Loading...

Текстура "Oven" тоже запеклась неудачно. Некоторые элементы на текстуре, например цифровые часы, перерисовал вручную.

Loading...

После отрисовки.

Loading...

С остальными текстурам проблем не было.

Экспортировал в Playcanvas заново проблемные объекты, предварительно удалив старые.

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

В следующей части мы вплотную займемся материалами.