Українська 
Частина 3
Це Частина 3 із серії уроків зі створення Lamborghini Urus за допомогою WebGL/PlayCanvas.
У попередній частині ми підготували всі необхідні CubeMap та змінили фон у нашому проекті.
Для тих, хто не читав попередніх частин, ось демонстративне відео.
У цій частині уроку ми закінчимо створення оточення і навіть зробимо першу анімовану текстуру, а ще розберемося з освітленням та створимо ефект сонця.
Не будемо втрачати жодної хвилини, за справу...
Створення поверхні землі
Доступ до матеріалів, такі як: моделі у форматі "FBX", текстури, запечені карти "AO" та інше, ви можете отримати підписку на Patreon.
Patreon - 3DGROUNDНам необхідно створити поверхню, на якій стоятиме автомобіль для відкидання тіні. І застосуємо невеликий трюк, – зробимо анімацію Tiling Offset для імітації руху. У нас немає потреби рухати весь автомобіль, - ми зробимо ілюзію руху.
Створимо підпапку "ground" у папці "env" панелі "Assets". До неї ми додаватимемо текстури та шейдера, що стосуються підкладки.
Відразу додамо до папки текстури: градієнтну кругову чорно-білу текстуру для "Alpha" і "Normal" карту нерівної поверхні.
У мене вийшло так.
Далі, створимо площину, для цього в "Hierarchy" натиснемо на кнопку плюс і зі списку виберемо "Primitive & Plane".
Назвіть площину "ground". Оскільки в PlayCanvas неможливо задати розмір стандартним примітивам, ми збільшимо Scale до 120, дивіться скріншот нижче.
Створимо новий матеріал для нашої поверхні. У панелі "Assets", за допомогою контекстного меню створіть "Material".
Переходимо в налаштування матеріалу подвійним клацанням мишки по шейдеру. Називаємо матеріал "M_Ground". У налаштуваннях матеріалу, у свитку "Offset & Tiling" знімаємо прапорець для "Apply to All Maps".
Переходимо в сувій "Diffuse" і змінюємо колір на "226, 226, 226". Цей колір підбирається досвідченим шляхом, головне щоб колір матеріалу збігався з кольором піску з оточення. Поки залишимо такі значення, пізніше їх можна буде підкоригувати, коли буде повністю налаштовано світло.
Призначаємо в свитку "Opacity" чорно-білу карту "ground_alpha3", ставимо "Blend Type" в режим "Alpha".
У сувої "Normals" підключаємо карту "ground_4K_Normal" і ставимо повторення текстури "Tiling" рівним 8.
Призначаємо матеріал для поверхні, традиційним перетягуванням матеріалу в "Viewport" на об'єкт "ground".
Як ми бачимо, чорно-біла карта прозорості з радіальним градієнтом дає плавний перехід між поверхнею землі та нашим оточенням.
Створення анімованої текстури
Нижче наведено приклад JavaScript, який відповідає за анімацію текстури. Подивіться на скріншоті нижче, як можна легко скачати. Вам необхідно на посиланні з написом "view raw", викликати контекстне меню та натиснути "Save link as...". Код скрипта дивіться під скріншотом.
Якщо ви все правильно зробите, ви побачите завантажений скрипт у папці завантажень.
Перейдіть в PlayCanvas, відкрийте папку "scripts" в панелі "Assets" і перетягніть туди файл "scrollingTexture.js".
Застосуємо цей скрипт, виберіть об'єкт "ground" в панелі "Hierarchy" і в панелі "Inspector" натисніть "Add Component". Зі списку компонентів, виберіть "Script".
З випадаючого списку скриптів, виберіть "scrollingTexture". Ось такими не хитрими рухами ми можемо призначати будь-які скрипти на об'єкти.
Після використання скрипта, вам будуть доступні його налаштування. По факту, вам не потрібно лізти в код, щоб внести зміни, наприклад змінити швидкість руху текстури, все робиться через зручний інтерфейс. У цьому є зручність PlayCanvas, перед іншими веб-движками.
На панелі "Assets" перейдіть до папки "env → ground". Натисніть на іконку олівця біля "materialAsset" для "scrollingTexture" та виберіть матеріал "ground" зі списку ассетів. Перше значення параметра "speed" встановіть у "0.05".
Спробуйте запустити проект кнопкою "Play". Якщо ви зробили все правильно, ви повинні побачити, як текстура буде зміщуватися.
Налаштування освітлення
Виберіть "Light" зі списку об'єктів, в панелі "Inspector" встановіть нижченаведені значення зі скріншота. Також ви можете вказати аналогічні значення для "Position" та "Rotation".
Після того, як позиція сонця виставлена, ви можете помітити, що практично не відчувається перехід між підкладкою та оточенням. За бажання, ви завжди можете змінити колір підкладки в матеріалі "ground" у сувої "Diffuse".
На даному етапі можна закінчити налаштування освітлення. Надалі ще додаватимуться джерела світла для підсвічування салону та деяких частин автомобіля, але це вже після налаштування всіх матеріалів.
Ефект сонця
Для створення ефекту сонця, я зайшов у "Google Картинки", написав запит "Sun lens", виставив налаштування пошуку великих та безкоштовних картинок.
Мені сподобався варіант, на зображенні нижче. Я трохи зробив контрастним у Photopea і замалював трохи краю чорним кольором.
При збереженні я вказав розмір "1024x1024px" незважаючи на інші пропорції картинки. Це зроблено, оскільки для Playcanvas необхідно готувати кратні текстури 2 і бажано квадратного розміру. Зрештою у мене вийшло якось так.
Потім я створив новий "Entity", натиснувши плюс на панелі "Hierarchy" і вибравши зі списку пункт "Entity".
У цей "Entity", ми додамо новий "Plane", на який призначимо матеріал з текстурою сонця. Додатковий "Entity" нам необхідний для роботи скрипта, який ми повісимо на сонці.
Називаємо "Entity" наприклад "Sun Glow", не знімаючи виділення з "Sun Glow", створюємо "Plane" з наступними параметрами.
Зверніть увагу, ми зняли всі налаштування для відкидання тіней. Тепер створимо матеріал у папці "env" з назвою "M_SunGlow" та наступними параметрами. І призначимо матеріал на наш "Plane".
Думаю параметри "Diffuse", "Opacity" та "Emissive" вам зрозумілі. А ось у свитку "Other", ми відключили абсолютно всі прапорці. Завдяки цьому сонце промальовуватиметься поверх інших об'єктів і на нього не впливатимуть налаштування світла та оточення.
Для "Entity" - "Sun Glow", додатково ще налаштували параметри позиції та обертання.
Таким чином ми відсунули сонце на приблизно потрібну позицію щодо оточення. Важливо, щоб "Plane" перебував у позиції "0,0,0", а всі маніпуляції щодо позиціонування проводити з батьківським "Entity".
Повісимо на "Entity" - "Sun Glow" скрипт "hotspot", який буде обертати сонце так, щоб воно крутилося разом з камерою і завжди перпендикулярно виду камери.
Код скрипта дивіться нижче. Натисніть правою кнопкою мишки на посилання "view raw" і збережіть файл "Save link as...".
Більшість потрібних скриптів вже написано кимось і їх можна використовувати. Наприклад скрипт "hotspot.js", я знайшов в офіційних туторіалах:
https://developer.playcanvas.com/en/tutorials/information-hotspots/Просто відкрив проект за посиланням та скачав потрібний скрипт.
Завантажимо "hotspot.js" у Playcanvas в панель "Assets", в папку "scripts". За аналогією з попереднім прикладом, для "Sun Glow" додаємо новий компонент через "Add Component", зі списку вибираємо "Script" і в меню скриптів, вибираємо "hotspot".
У налаштуваннях скрипта, необхідно вибрати "Camera Entity". Натискаємо на "Select Entity" навпроти параметра "Camera Entity" і потім в "Hierarchy" вибираємо об'єкт "Camera".
Висновок
Готово! Тепер, якщо запустити проект за кнопкою "Play", ви зможете побачити як сонце крутиться за камерою, а якщо поворот перевищує 90 градусів, то сонце пропадає, чого ми й хотіли досягти.
У наступній частині уроку ми розберемося як завантажувати 3D моделі в сцену, а також налаштуємо камеру.
{{comment.text}}