Вступление Часть 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 000 полигонов, стало 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 дня.
Заключение
Этапы оптимизации и развертки самые ответственные и отнимают большую часть времени. Но эту работу нужно сделать качественно, от нее будет зависеть финальный результат.
В следующем уроке, мы будем запекать текстуры.