Це Частина 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 тисяч полігонів. Обсяг всіх текстур становив 25 Мб.

Я веду до того, що треба розуміти, що великі проекти з великою кількістю об'єктів, де багато текстур, швидше за все, не вдасться реалізувати.

Мені довелося перебрати багато інтер'єрів, поки я зупинився на відповідному мінімалістичному SVOYA - See The Sea. Тут все ідеально – мало блискучих об'єктів, мінімалізм у дизайні, невелика площа, нескладні об'єкти, просте освітлення.

Loading...

Головні правила при створенні інтер'єрів під Playcanvas:

Якщо, переглянути реальний інтер'єр на сайті SVOYA, ви зможете помітити деякі відмінності з поточним, а саме:

І це не випадково, все максимально оптимізувалося, спрощувалося та замінювалося аналогами. Оптимізація – наше все!

Час, який ви витратите на Playcanvas проект буде безперечно більше, ніж якщо робити звичайні рендери або панорами. Але, такий проект робиться швидше ніж Unreal проекти.

Відповідно проект на Playcanvas коштуватиме дорожче ніж панорамо-тур і дешевше ніж Unreal проект. Зважимо все - ми отримуємо реалістичний інтер'єр з повною інтерактивністю без стороннього софту, прямо в браузері, з можливістю переглядати з будь-якого пристрою. А якщо, враховувати, що складання проекту все ж таки легше, ніж на Unreal. То така подача візуалізації, безперечно, виправдано все більше завойовує ринок.

Playcanvas - це відмінний спосіб отримати інтерактивність з мінімумом зусиль і час-витратами.

Не дивлячись на те, що WebGL – це простий 3D двигун, на ньому можна робити цікаві реалістичні проекти. А якщо враховувати, що ви отримуєте повну інтерактивність, витрачаючи при цьому менше часу, ніж у Unreal Engine, цей спосіб подачі презентації клієнту виправдовує себе і заслужено займає свою нішу.