Українська 
Частина 3
Це Частина 3 із серії уроків зі створення інтерактивного інтер'єру SVOYA за допомогою WebGL/PlayCanvas.
Для тих, хто не читав попередніх частин, ось демонстративне відео.
У цій серії уроків ми зробимо інтерактивну презентацію інтер'єру, яку можна переглядати в реальному часі через веб-браузер.
Доступ до матеріалів, такі як: моделі у форматі "FBX", запечені текстури та інше, ви можете отримати підписку на Patreon.
Patreon - 3DGROUNDОптимізація моделей
Нам необхідно зменшити полігональну сітку кожної моделі, для того щоб наша підсумкова сцена в Playcanvas була легковагою, швидко завантажувалася і не просідала "fps".
Дуже небажано застосовувати модифікатор "Optimize", оскільки після нього залишаються артефакти у вигляді чорних затяжок у місцях згинів моделі або псується розгортка "Unwrap".
Моделі були підібрані таким чином, щоб вони мали квадратну сітку і їх можна було легко оптимізувати, видаляючи грані по колу ("loops").
На прикладі вище показано софа з деталізацією в 1.5 мільйона полігонів. Це надмірна деталізація для інтерактиву, яку ми побачимо. Таку софу можна легко оптимізувати до 15 000 полігонів.
Софа
Існують різні способи оптимізації моделей. Наприклад один з них, вибрати ребро по колу "Loop" і в панелі "Graphite Tools" натиснути на кнопку "Dot Ring".
При цьому грані будуть вибрані через одну.
Потім ще раз натиснути на "Loop".
Тепер натискаємо Ctrl+Backspace для видалення виділених ребер.
Таку операцію можна зробити кілька разів.
Ще один спосіб оптимізації, це "Optimize" в "Graphite Tools".
Затисніть клавіші Ctrl+Shift, і робіть клік по "loop" грані для видалення. Для подушки софи, з такою щільною сіткою, я просто хаотично кликаю по різних гранях.
Коли граней стає менше, я роблю більш прицільні кліки. При такому способі важливо дивитися, щоб не "попливла" розгортка "Unwrap" і деталізація.
Після оптимізації подушки вона стала виглядати ось так.
А вся софа почала виглядати як на скріншоті нижче. Близько 15 тисяч полігонів.
Стіл та стілець
За таким же принципом оптимізуємо стіл зі стільцем.
Було 43 тисячі полігонів, стало 1 400.
Витяжка
Модель була зроблена повністю з нуля і в ній лише 360 полігонів.
Диван
Оригінальна модель – 1 мільйон полігонів. Після видалення деяких частин моделі та оптимізації 14 000 полігонів.
Інші моделі
Деякі прості моделі створювалися з нуля, а деякі оптимізовані вручну.
Для кожної ручної оптимізації використовувалися ці два прийоми. Так робота трудомістка, але використовувати модифікатор "Optimize" взагалі не варіант.
Unwrap
Абсолютно для всіх оптимізованих моделей було застосовано Unwrap. Правильна розгортка потрібна для якісного запікання текстур.
Принцип простий. На 1 каналі ми залишаємо оригінальну розгортку, на 2 каналі буде нова. Розгортка на 2 каналі повинна повністю вписуватися в квадратну область "Edit UVWs". Цей канал використовується для запікання текстури.
Софа
Такий вигляд має другий канал моделі софи.
Здебільшого користувався одним способом швидкої розгортки. Виділяємо ребра, зазвичай, на краях. потім натискаємо кнопку "Convert Edge Selection To Seams".
Наприклад, так виглядають "Seams" подушки.
Після призначення всіх "Seams", натискаємо "Quick Peel". Далі вже в "Edit UVWs", повертаємо шматочки розгортки, щоб вони були плюс-мінус рівно.
І останнім штрихом робимо упаковку, в Arrange Elements натискаємо іконку показану на скріншоті.
У налаштуваннях змінюємо тільки Padding на "0.02", щоб елементи були подалі один від одного.
І так для кожної моделі.
Диван
Стіл
Стілець
Стіни
Стать
Інші моделі
Принцип розгортки всіх моделей був однаковий. Цей процес у мене зайняв 2-3 дні.
Висновок
Етапи оптимізації та розгортки найвідповідальніші і забирають більшу частину часу. Але цю роботу потрібно зробити якісно, від неї залежатиме фінальний результат.
У наступному уроці ми будемо запікати текстури.
{{comment.text}}