Це Частина 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.

Не пропустіть наступного уроку, попереду ще багато цікавого...