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

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

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

С WebGL все намного проще, данный проект весит всего 40 Мб и загружается за 5 секунд. Производительности мобильного устройства или среднего десктопного компьютера хватает с лихвой, чтобы запускать такие проекты. Здесь не нужно иметь много ресурсов оперативной памяти или видео-карты, поскольку для такого типа проектов используется особый подход, о котором мы поговорим дальше.

Кроме текущей серии уроков из 8 частей, на основе данного интерьера SVOYA, сделаны более продвинутые уроки, которые включают в себя следующие темы:

Я рекомендую прочитать продвинутый урок, уже после этих 8-ми частей.

Подход к созданию данного проекта кардинально отличается от урока Lamborghini Urus. Если, для конфигуратора машин, мы запекали только карты Ambient Occlusion, а все материалы максимально создавали в Playcanvas. То, для проекта SVOYA, все текстуры будут запекаться для каждого объекта отдельно. 

В каждой текстуре будет запечено освещение с тенями, diffuse, normal и т.д. Пример такой текстуры показан ниже.

Loading...

Как вы могли уже догадаться, для каждого объекта необходимо будет сделать полную Unwrap развертку. Это немного трудоёмкий процесс, похожий подход используется при сборке сцен под Unreal Engine, только запекание текстур происходит в 3Ds Max. 

Процесс будет следующим. Мы создаем обычный интерьер в 3Ds Max, настраиваем свет. Затем в этой же сцене оптимизируем каждую модель и делаем Unwrap развертку. Далее в 3Ds Max запекаем каждую текстуру и последним этапом - модели и текстуры добавляем в Playcanvas.

По факту в 3Ds Max у нас будет больше всего работы, около 80%. Благодаря привычному всем процессу рендеринга сцен в 3Ds Max, все объекты будут выглядеть реалистично и результат будет однозначно лучше чем в Unreal.

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

Некоторые материалы придется дорабатывать в Playcanvas добавляя отражения. Но, в основном сборка материалов будет происходить также в 3Ds Max. Запеченную текстуру нужно будет добавить в слот Self Illumination в материале Standard. В самом же Playcanvas не будет никакого освещения. Все объекты - это модели с само-святящемися текстурами.

Для данного урока я написал скрипт автоматического экспорта 3D моделей, который упрощает процесс удаления ненужных каналов Unwrap, создания материалов, нейминга и др. Данный скрипт будет приложен в одной из частей, не пропустите.

Хочу также добавить, что не каждый интерьер возможно выполнить на Playcanvas. Нужно понимать, что классический интерьер, где много полигональных объектов, вы не сможете загрузить в Playcanvas. Необходимо ориентироваться, что весь проект должен уместиться в 150 000 полигонов.

150 000 полигонов, -  оптимальная цифра для адекватной отрисовки кадров на большинстве устройств. Нужно учитывать, что WebGL это очень урезанный 3D движок, поэтому чем меньше полигонов, тем лучше. 

На проект SVOYA у меня ушло 40 000 полигонов. Размер всех текстур соствил 25 Мб. 

Я веду к тому, что нужно понимать, что большие проекты с большим количеством объектов, где много текстур скорее всего не получится реализовать.

Мне пришлось перебрать много интерьеров, пока я остановился на подходящем минималистичном SVOYA - See The Sea. Здесь все идеально, - мало блестящих объектов, минимализм в дизайне, небольшая площадь, несложные объекты, простое освещение.

Loading...

Главные правила при создании интерьеров под Playcanvas:

Если, посмотреть реальный интерьер на сайте SVOYA, вы сможете заметить некоторые отличия с текущим, а именно:

И это не случайно, все максимально оптимизировалось, упрощалось и заменялось аналогами. Оптимизация - наше все!

Время, которое вы потратите на Playcanvas проект будет несомненно больше, чем если делать обычные рендеры или панорамы. Но, такой проект делается быстрее чем Unreal проекты. 

Соответственно проект на Playcanvas будет стоить дороже чем панорамо-тур и дешевле чем Unreal проект. Давайте взвесим все - мы получаем реалистичный интерьер с полной интерактивностью без стороннего софта, прямо в браузере, с возможностью просматривать с любого устройства. А если, учитывать, что сборка проекта все же легче, чем на Unreal. То такая подача визуализации, несомненно оправданно все больше завоевывает рынок.

Playcanvas - это отличный способ получить интерактивность с минимум усилий и время-затратами.

Не смотря на то, что WebGL - это простой 3D движок, на нем можно делать интересные реалистичные проекты. А если учитывать, что вы получаете полную интерактивность, тратя при этом меньше времени чем в Unreal Engine, данный способ подачи презентации клиенту оправдывает себя и заслуженно занимает свою нишу.