Розробка проекту Lamborghini Urus (WebGL/PlayCanvas). Частина 3

Vasyl Lukianenko
3D Artist and Technical Author

Дата: Червень 12, 2022 Оновлено: Липень 25, 2023 Час читання: 6 min Перегляди: 396

Ви читаєте частину: 1 2 3 4 5 6 7 8 9 10

Частина 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".

playcanvas add script component to object

З випадаючого списку скриптів, виберіть "scrollingTexture". Ось такими не хитрими рухами ми можемо призначати будь-які скрипти на об'єкти.

Після використання скрипта, вам будуть доступні його налаштування. По факту, вам не потрібно лізти в код, щоб внести зміни, наприклад змінити швидкість руху текстури, все робиться через зручний інтерфейс. У цьому є зручність PlayCanvas, перед іншими веб-движками.

playcanvas scrollig textures script settings

На панелі "Assets" перейдіть до папки "env → ground". Натисніть на іконку олівця біля "materialAsset" для "scrollingTexture" та виберіть матеріал "ground" зі списку ассетів. Перше значення параметра "speed" встановіть у "0.05".

Спробуйте запустити проект кнопкою "Play". Якщо ви зробили все правильно, ви повинні побачити, як текстура буде зміщуватися.

Налаштування освітлення

Виберіть "Light" зі списку об'єктів, в панелі "Inspector" встановіть нижченаведені значення зі скріншота. Також ви можете вказати аналогічні значення для "Position" та "Rotation".

Після того, як позиція сонця виставлена, ви можете помітити, що практично не відчувається перехід між підкладкою та оточенням. За бажання, ви завжди можете змінити колір підкладки в матеріалі "ground" у сувої "Diffuse".

На даному етапі можна закінчити налаштування освітлення. Надалі ще додаватимуться джерела світла для підсвічування салону та деяких частин автомобіля, але це вже після налаштування всіх матеріалів.

Ефект сонця

Для створення ефекту сонця, я зайшов у "Google Картинки", написав запит "Sun lens", виставив налаштування пошуку великих та безкоштовних картинок.
Мені сподобався варіант, на зображенні нижче. Я трохи зробив контрастним у Photopea і замалював трохи краю чорним кольором.

https://commons.wikimedia.org/wiki/File:High-quality_lens_flare_rendering.png

При збереженні я вказав розмір "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 моделі в сцену, а також налаштуємо камеру.

Ви читаєте частину: 1 2 3 4 5 6 7 8 9 10

FAQ

1. Про що ця стаття?

Стаття продовжує розробку WebGL-проєкту Lamborghini Urus у PlayCanvas та розглядає наступний етап створення якісної інтерактивної автомобільної презентації.

2. Що розглядається у Part 3?

У третій частині описуються додаткові функції, удосконалення проєкту та покращення, які наближають конфігуратор до готового комерційного продукту.

3. Чому поетапна розробка важлива для WebGL-проєктів?

Поступове впровадження функцій дозволяє простіше тестувати можливості проєкту, контролювати продуктивність і забезпечувати стабільність роботи.

4. Чи може PlayCanvas працювати зі складною автомобільною візуалізацією?

Так. За умови правильної оптимізації PlayCanvas здатний відображати високодеталізовані автомобілі з реалістичними матеріалами та інтерактивними можливостями безпосередньо у браузері.

5. Чому оптимізація залишається важливою на цьому етапі?

У міру додавання нових функцій і ресурсів складність проєкту зростає, тому оптимізація є необхідною для підтримання плавної роботи.

6. Чи можуть користувачі змінювати зовнішній вигляд автомобіля в реальному часі?

Так. Конфігуратор може дозволяти змінювати кольори кузова, матеріали, дизайн дисків, варіанти інтер'єру та інші параметри.

7. Чи приділяється увага покращенню користувацького досвіду?

Так. Поліпшення навігації, взаємодії та загальної зручності використання є важливою частиною розробки.

8. Чи можна налаштовувати поведінку камери?

Так. Розробники можуть створювати власні системи керування камерою, фіксовані ракурси, плавні переходи та режими детального огляду автомобіля.

9. Чи підходить PlayCanvas для комерційних автомобільних проєктів?

Так. Платформа широко використовується для створення онлайн-конфігураторів, інтерактивних презентацій і маркетингових рішень для автомобільної галузі.

10. Чи можна застосовувати ці підходи в інших галузях?

Так. Аналогічні рішення підходять для конфігураторів меблів, нерухомості, промислової продукції та електронної комерції.

11. Наскільки важлива організація проєкту на пізніх етапах розробки?

Добре структурований проєкт спрощує підтримку, оновлення та ефективне керування великою кількістю ресурсів.

12. Чи можуть такі проєкти працювати на мобільних пристроях?

Так. За належної оптимізації застосунки PlayCanvas можуть забезпечувати комфортну роботу на смартфонах і планшетах.

13. Чи потрібні навички програмування для реалізації складних функцій?

Так. Для створення нестандартної логіки та складних інтерактивних систем зазвичай потрібні знання JavaScript і PlayCanvas API.

14. Які переваги дає WebGL для автомобільного маркетингу?

WebGL дозволяє клієнтам взаємодіяти з продуктом, переглядати його з будь-яких ракурсів і налаштовувати конфігурацію в режимі реального часу.

15. Чи можна продовжувати розвиток конфігуратора після запуску?

Так. Нові опції, функції, оптимізації та візуальні покращення можуть додаватися протягом усього життєвого циклу проєкту.

16. Для кого буде корисна ця стаття?

Для розробників PlayCanvas, технічних художників, спеціалістів з автомобільної візуалізації та всіх, хто цікавиться створенням сучасних інтерактивних WebGL-застосунків і конфігураторів.

Vasyl Lukianenko
3D Artist and Technical Author

Vasyl Lukianenko is a 3D artist and technical author focused on practical workflows, optimization, and production-ready techniques. He publishes tutorials, courses, and tools to help artists work faster and get cleaner results.