Автор: MastaMan
Дата: Февраль 23, 2022
Обновлено: Июль 25, 2023
Вы читаете часть: 1 2 3 4 5 6 7 8

Вступление Часть 3

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

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



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

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

Patreon - 3DGROUND

Оптимизация моделей

Нам необходимо уменьшить полигональную сетку каждой модели, для того, чтобы наша итоговая сцена в Playcanvas была легковесной, быстро загружалась и не проседал "fps".

Очень нежелательно применять модификатор "Optimize", поскольку после него остаются артефакты в виде черных затяжек в местах изгибов модели или портится развертка "Unwrap".

Модели были подобраны таким образом, чтобы у них была квадратная сетка и их можно было легко оптимизировать, удаляя грани по кругу ("loops").

model hi poly wire
Loading...

На примере выше, показана софа с детализацией в 1.5 миллиона полигонов. Это избыточная детализация для интерактива, которую мы не увидим. Такую софу можно запросто оптимизировать до 15 000 полигонов.

Софа

Есть различные способы оптимизации моделей. Например один из них, выбрать ребро по кругу "Loop" и в панели "Graphite Tools" нажать на кнопку "Dot Ring".

select loop on model
Loading...

При этом грани будут выбраны через одну.

dot ring graphite tools
Loading...

Затем еще раз нажать на "Loop".

loop graphite tools
Loading...

Теперь нажимаем Ctrl+Backspace, для удаления выделенных ребер.

Такую операцию можно проделать несколько раз.

Еще один способ оптимизации, это "Optimize" в "Graphite Tools".

free form optimize graphite tools
Loading...

Зажмите клавиши Ctrl+Shift,  и делайте клик по "loop" грани для удаления. Для подушки софы, с такой плотной сеткой, я просто хаотически кликаю по разным граням.

graphite tools optimize click shift ctrl
Loading...

Когда граней стает меньше, я делаю более прицельные клики. При таком способе важно смотреть, чтобы не "поплыла"  развертка "Unwrap" и детализация. 

После оптимизации подушки, она стала выглядеть вот так.

pillow optimized
Loading...

А вся софа стала выглядеть как на скриншоте ниже. Около 15 тысяч полигонов.

sofa optimized
Loading...

Стол и стул

По такому-же принципу оптимизируем стол со стулом.

table before optimization
Loading...

Было 43 000 полигонов, стало 1 400.

table after optimization
Loading...

Вытяжка

hood model
Loading...

Модель была сделана полностью с нуля и в ней всего 360 полигонов.

Диван

bed before optimizing
Loading...

Оригинальная модель 1 миллион полигонов. После удаления некоторых частей модели и оптимизации 14 000 полигонов.

bed after optimiation
Loading...

Другие модели

Некоторые, простые модели создавались с нуля, а некоторые оптимизированы вручную.

Для каждой ручной оптимизации использовались эти два приема. Да работа трудоемкая, но использовать модификатор "Optimize" вообще не вариант.

Unwrap

Абсолютно для всех оптимизированных моделей был применен Unwrap. Правильная развертка необходима для качественного запекания текстур.

Принцип простой. На 1 канале мы оставляем оригинальную развертку, на 2 канале будет новая. Развертка на 2 канале должна полностью вписываться в квадратную область "Edit UVWs". Этот канал служит для запекания текстуры.

apply unwrap
Loading...

Софа

Так выглядит второй канал модели софы. 

sofa unwrap
Loading...

В основном пользовался одним способом быстрой развертки. Выделяем ребра, обычно на краях. затем нажимаем кнопку "Convert Edge Selection To Seams".

convert edges to seams
Loading...

Например, так выглядят "Seams" подушки.

pillow seams example
Loading...

После назначения всех "Seams",  нажимаем "Quick Peel". Далее уже в "Edit UVWs", поворачиваем кусочки развертки, чтобы они были плюс-минус ровно.

quick peel
Loading...

И последним штрихом делаем упаковку, в "Arrange Elements" нажимаем иконку показанную на скриншоте.

pack custom
Loading...

В настройках изменяем только Padding на "0.02", чтобы элементы были подальше друг-от-друга.

pack unwrap settings
Loading...

И так для каждой модели.

Диван

bed unwrap
Loading...

Стол

unwrap table
Loading...

Стул

chair unwrap
Loading...

Стены

wall unwrap
Loading...

Пол

floor unwrap
Loading...

Другие модели

Принцип развертки для всех моделей был одинаков. Этот процесс у меня занял 2-3 дня.

Заключение

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

В следующем уроке, мы будем запекать текстуры.



Вы читаете часть: 1 2 3 4 5 6 7 8
{{commentsMsg}}
  

Никто не оставил комментариев
{{comment.lastname}} {{comment.name}} {{comment.date}}
{{comment.text}}
Sponsored content