Українська 
Частина 2
Це Частина 2 із серії уроків зі створення Lamborghini Urus за допомогою WebGL/PlayCanvas.
Отже, в попередній частині ми ознайомилися з тим, що таке WebGL, спробували на практиці ігровий веб-рух PlayCanvas, створили проект і почали налаштування оточення.
Ми вивчили деякі основи PlayCanvas, без яких ми не зможемо рушити далі, а саме: гарячі клавіші, що часто використовуються, структура інтерфейсу, типи проектів, де шукати документацію та базові налаштування проекту.
Для тих, хто не читав попередніх частин, ось демонстративне відео.
У цій частині уроку ми продовжимо створення оточення і розберемося, як замінити тло іншою.
У цій серії уроків ми не вдаватимемося до стороннього софту, крім Autodesk 3Ds Max для підготовки моделі. Всі інструменти – це безкоштовні веб-сервіси: PlayCanvas, Photopea, Matheowis та інші...
Ну що готові? Тоді, починаємо...
Підготовка фону
Доступ до матеріалів, такі як: моделі у форматі "FBX", текстури, запечені карти "AO" та інше, ви можете отримати підписку на Patreon.
Patreon - 3DGROUNDПерше, що необхідно зробити, це замінити фон. Він відразу надасть розуміння, як необхідно поставити світло і загалом задасть загальний настрій картинки.
Головна ідея, яку хотів реалізувати, - це машина, що їде по висохлому озеру, де на десятки кілометрів попрощається безкрайній пісок і десь у дали видно гори. Це мало створити ілюзію усамітнення і сконцентрувати погляд на авто. А головне, це досить просто реалізувати ????
Написавши в Google запит "Sand Pit HDRI", за першим посиланням знайшов відповідну безкоштовну HDRI на DeviantArt.
Оскільки PlayCanvas "не товаришує" зі сферичними картами, нам необхідно перетворити цю HDRI на кубічну.
Написавши в Google запит "HDRI to cubemap online" за першим посиланням переходимо на сайт:
https://matheowis.github.io/HDRI-to-CubeMap/Як ви можете бачити зі скріншоту нижче, інтерфейс сервісу дуже простий. Натискаємо "Upload HDRI", вибираємо наш "SandPit_10000x5000.hdr" і чекаємо на завантаження.
Не змінюючи жодних налаштувань, натискаємо "Save" і вибираємо опцію розміру "4096" та "png".
І третій варіант розкладки, де кожен бік буде окремим файлом. Натискаємо "Process", а після обробки - "Save", у цьому ж діалоговому вікні.
Відразу ж, про всяк випадок збережемо ще проміжні варіанти, з розмірами "512" та "256". Пізніше ми будемо використовувати ці cubemap для відображення.
Варіанти на "512" та "256" зробимо розмитими, для імітації розмитих відблисків. Можна було звичайно використовувати функцію Prefilter для автоматичної генерації атласів прямо в PlayCanvas, з різними ступенями розмитості, але мені такий варіант не підійшов, тому я просто зробив вручну ще 2 варіанти розмитих фонів.
Наприклад варіант на "512" я розмив до такого стану. Процес простий, потрібно всі картинки завантажити в Photopea зайти в меню "Filter", далі "Gaussian Blur" і поставити значення "5.0px".
https://www.photopea.com/
Потім зберегти кожну картинку. Цей процес треба зробити і для варіанта з розміром "256", тільки зробити ще більш розмитим у 2-3 рази.
Процес нескладний, тому не будемо докладно на ньому зупинятись.
На цьому етапі підготовки фону закінчено і переходимо до завантаження його в PlayCanvas.
Додавання фону до PlayCanvas
Переходимо в PlayCanvas і насамперед видаляємо все непотрібне. Вибираємо папки cube та cubemap в панелі "Assets" і видаляємо за допомогою контекстного меню. Аналогічно надаємо і з об'єктом "playcanvas" в панелі "Hierarchy".
У нас має залишитися папка scripts в панелі "Assets" і два об'єкти в панелі "Hierarchy" - камера та світло.
Створимо папку "env" і в ній підпапку "cubemap", таким чином:
Для перейменування папки необхідно вибрати її і в панелі "Inspector" праворуч, ввести нове ім'я.
Переконаємося, що у нас обрана папка "cubemap", потім просто перетягуванням, завантажуємо наступні файли в PlayCanvas. Зверніть увагу, ми завантажуємо варіант із розміром "4096".
Після перетягування, через деякий час у списку з'являться шматочки cubemap.
Ось так просто відбувається будь-яке завантаження ассетів у PlayCanvas. Необхідно лише стежити за порядком у проекті та правильно розділяти на папки, для зручнішого пошуку та навігації у проекті.
Наступним кроком, ми створимо шейдер "CubeMap", для цього викличте контекстне меню в панелі "Assets", потім "New Asset" і зі списку можливих ассетів виберіть "CubeMap". Як ви могли здогадатися, саме цей шейдер і братиме участь як фон в налаштуваннях "Rendering".
Називаємо шейдер "Sky" і перетягуємо шматочки картинок у потрібні слоти "Faces".
Я намалював схему, які імена мають відповідати кожній стороні куба.
В результаті, у вас має вийти так.
Тепер, переходимо в "Settings", сувій "Rendering" і простим перетягуванням, призначаємо шейдер "Sky" як "Skybox".
Запускаємо проект кнопкою "Play". Чудово! Ми тепер бачимо панораму пустелі, все спрацювало!
Підготовка інших CubeMap
У нас ще залишилися інші cubemap з розмірами "512" та "256". За аналогією з попереднім розділом, створимо папки "cubemap_blurred" та "cubemap_superblurred".
У кожну папку додамо відповідні текстури cubemap, створимо шейдери в кожній папці з назвою "cubemap_blurred" та "cubemap_superblurred".
Продублюю ще раз розкладку "Faces".
І для варіанта з розміром "256" буде ось так.
Висновок
У наступній частині уроку ми закінчимо роботу над оточенням, не пропустіть!
{{comment.text}}