Українська 
Частина 6
Це Частина 6 із серії уроків зі створення інтерактивного інтер'єру SVOYA за допомогою WebGL/PlayCanvas.
Для тих, хто не читав попередніх частин, ось демонстративне відео.
У цій серії уроків ми зробимо інтерактивну презентацію інтер'єру, яку можна переглядати в реальному часі через веб-браузер.
Доступ до матеріалів, такі як: моделі у форматі "FBX", запечені текстури та інше, ви можете отримати підписку на Patreon.
Patreon - 3DGROUNDДодавання моделей до сцени
Отже, наші текстури запеклись. Ім'я текстур містить назву моделі та постфікс "Corona_Beauty". У налаштуваннях "Bake to Texture" ми особливо нічого не змінювали.
Скрипт експорту Export2Playcanvas
Я написав скрипт, який оптимізує процес експорту моделей у формат "FBX". Код скрипта прикріплений нижче, для того щоб його скачати, прогорніть блок коду, натисніть правою кнопкою мишки на "view raw", потім "Save link as...". Щоб запустити скрипт, перетягніть завантажений файл "Export2Playcanvas.ms" у "Viewport" програми 3Ds Max.
Такий вигляд скрипт, якщо запустити його в 3Ds Max.
Можливості:
- Автоматична настройка "FBX" експорту з включенням "EmbedMedia"
- Видалення поточних матеріалів об'єктів та створення нового матеріалу "Standard" зі спеціальними налаштуваннями
- Автоматичне додавання текстур у пакет "FBX"
- Видалення зайвих "IDs" об'єктів
- Перенесення другого каналу розгортки Unwrap на перший та подальше видалення другого каналу
- Згортання всіх стеків
- Швидкий експорт у "FBX"
- Правильне найменування файлів експорту
Звичайно, можна експортувати вручну, але для економії часу зручно користуватися скриптом Export2Playcanvas.
Використання скрипту Export2Playcanvas
Перетягніть скрипт "Export2Playcanvas.ms" у "Viewport" програми 3Ds Max, виберіть шлях "Textures Path", де у вас зберігаються запечені текстури.
Важливо!
Для кожної моделі має бути запечена текстура з назвою моделі та постфіксом "Corona_Beauty"!
Якщо, при експорті не буде знайдена текстура для моделі, ви не зможете її експортувати. Про це вам повідомить сповіщення з помилкою.
Виділіть модель, натисніть "Export Selected". Моделі експортуються за однією. Після експорту в папці "Textures Path" буде створено "FBX" файл.
Вище наведено приклад, як виглядає список файлів після експорту.
Під "капотом" у скрипті відбуваються такі дії:
- Для "FBX" включається опція "EmbedMedia", що дозволяє уникнути ручного додавання текстур у Playcanvas
- Створюється матеріал "Standard", оскільки деякі його налаштування розуміє Playcanvas
- У матеріал "Standard" додається автоматично запечена текстура, яку скрипт знаходить сам
- Запечена текстура додається в слот "Self-Illumination" і в Playcanvas матеріал не потрібно буде змінювати, якщо у нього немає відблисків, в сцені Playcanvas не буде ніякого освітлення. >
- Згортаються всі стеки модифікаторів
- Призначаються правильні імена "FBX" і додається приставка "SM_"
- Експортуються файли в "тихому" режимі, без спливаючих вікон
Я рекомендую експортувати моделі по одній і потім додавати відразу їх у сцену Playcanvas. Таким чином ви відразу зможете побачити, якщо на якомусь із етапів було допущено помилку.
Експорт моделей
Перед експортом я скопіював усі об'єкти в нову сцену за допомогою скрипту CopyTo PRO. Ви можете зробити "Merge" або перенести об'єкти будь-яким іншим способом.
CopyTo PROНова сцена потрібна для того, щоб не зіпсувати поточну.
Практично для всіх моделей експорт буде відбуватися через скрипт з налаштуваннями за замовчуванням.
У мене в сцені є об'єкти, це "TV", "Oven" та "GlassDoors", для яких потрібен "Multimaterial" і при їх експорті потрібно у скрипті включити прапорець "Two Material Ids" . При цьому створиться "Multimaterial", у першому слоті буде матеріал із нашою запеченою текстурою, а у другому слоті, просто звичайний матеріал, який буде замінений на скло в Playcanvas.
Оскільки, в моєму випадку не потрібно було більше двох ID для матеріалів, я реалізував саме такий функціонал у скрипті.
Я почав експорт зі стін, стель та вікон. Як було описано вище, виділяємо модель, натискаємо "Export Selected". Експортований "FBX" перетягуємо на панель "Assets" в папку "models".
Я створив окремий "Entity" з назвою "Apartment" і почав додавати моделі.
Продовжуємо експортувати інші об'єкти, уважно, один за одним і додавати їх до Playcanvas. Поки що матеріали не чіпаємо.
Наповнюємо сцену, пам'ятаємо про об'єкти, яким потрібно включити опцію "Two Material Ids" - це "GlassDoor", "Oven" та "TV". Попередньо для цих об'єктів, я в тимчасовій сцені перепризначив "ID" в "EditablePoly" і для всіх скляних елементів я встановив "id": 2.
Як ви можете бачити зі скріншота вище, я використовував фільтр на панелі "Assets" для об'єктів "Template" і в пошуку шукаю тільки-що додану модель. Коли список моделей розростається, це найефективніший спосіб.
Усі моделі додані. Навіть у "Editor", вже виглядає красиво.
Налаштування Collisions
Тепер необхідно налаштувати "collisions", щоб ми не провалювалися крізь стіни та підлогу.
Для цього виберіть "Walls", "Podium", "Cabinet" та "ConcreteFloor", додайте до них компоненти "RigidBody" та "Collision".
Потім розгортаємо кожен "Template", вибираємо "Asset Template", і для компонента "Collision" змінюємо тип на "Mesh", вибираємо радиючий "Render Asset". Дивіться приклад нижче з "Walls" .
Спробуємо запустити проект за кнопкою "Play".
Чудово! Ми можемо пересуватися по приміщенню і не провалюємося крізь підлогу та стіни.
Залишилася одна проблема, ми не можемо підніматися на сходинки, оскільки наш "Player" може переміщатися тільки по рівній поверхні.
Я створив "Plane" в 3Ds Max, як на картинці нижче, це похила поверхня по якій "Player" буде "прослизати".
Експортував і додав у сцену Playcanvas, додав компоненти "RigidBody" та "Collision", для "Collision" вибрав тип "Mesh" і радник "Render Assets".
Ще раз запустимо проект кнопкою "Play", відмінно, тепер ми можемо перейти сходами.
Перевірка текстур
Я помітив, що після запікання деякі текстури виглядають недостатньо добре. Наприклад, текстура "Cooker", виглядає ось так, навіть якщо поставити розмір текстури "2048px".
Тому я вручну перемалював її у Photopea (Photoshop).
Текстура "Oven" теж запеклася невдало. Деякі елементи на текстурі, наприклад цифровий годинник, перемалювали вручну.
Після малювання.
З рештою текстур проблем не було.
Експортував у Playcanvas заново проблемні об'єкти, попередньо видаливши старі.
Висновок
У цій частині ми проробили великий шмат роботи - додали всі моделі, налаштували "collisions", виправили проблемні текстури і вже в режимі тесту запустили проект.
У наступній частині ми впритул займемося матеріалами.
{{comment.text}}