Розробка проекту Lamborghini Urus (WebGL/PlayCanvas). Частина 10
Частина 10
Це Частина 10 із серії уроків зі створення Lamborghini Urus за допомогою WebGL/PlayCanvas.
Для тих, хто не читав попередніх частин, ось демонстративне відео.
Це заключна частина серії уроків створення сцени в Playcanvas/WebGL на прикладі автомобіля Lamborghini Urus. У цій частині ми трохи попрацюємо над освітленням, щоб зробити приємнішу картинку.
Доступ до матеріалів, такі як: моделі у форматі "FBX", текстури, запечені карти "AO" та інше, ви можете отримати підписку на Patreon.
Patreon - 3DGROUNDОсвітлення салону
Спочатку підсвітимо панель приладів. Для цього створіть "Point Light" з налаштуваннями:
- Intensity: 0.4
- Range: 0.5
- Falloff Mode: Inverse Squared
Зробіть ще дві копії та розмістіть над панеллю приладів. Центральний світильник можна зробити трохи яскравішим: "0.6".
Робимо ще дві копії світильників, розміщуємо на рівні грудей водія та пасажира, з налаштуваннями:
- Intensity: 0.2
- Range: 1.0
- Falloff Mode: Inverse Squared
Ще раз дублюємо світильник і переміщуємо ближче до нижньої частини сидіння на рівні стегна водія. Налаштування:
- Intensity: 0.12
- Range: 1.0
- Falloff Mode: Inverse Squared
Дублюємо ще раз і переміщуємо на протилежний бік пасажира.
Створимо і розмістимо "Point Light", де зазвичай в салоні на стелі розміщено світильник. Налаштування:
- Intensity: 0.5
- Range: 1.0
- Falloff Mode: Linear
Створіть і розмістіть ще два джерела світла "Point Light" у багажнику автомобіля. Таким чином:
Налаштування верхнього джерела світла:
- Intensity: 0.2
- Range: 2.0
- Falloff Mode: Inverse Squared
Налаштування нижнього джерела світла:
- Intensity: 0.15
- Range: 1.0
- Falloff Mode: Inverse Squared
Висвітлення екстер'єру
Створіть два "Point Light" і розмістіть на рівні передніх фар, трохи відсунувши вперед. Налаштування:
- Intensity: 0.4
- Range: 1.0
- Falloff Mode: Linear
Створіть два "Spot Light", перемістіть до задньої частини машини, налаштуйте кут освітлення та розгорніть світильники, як показано на скріншоті нижче. Налаштування:
- Intensity: 0.25
- Range: 0.7
- Falloff Mode: Inverse Squared
- Inner Cone Angle: 60
- Outer Cone Angle : 80
Підсвітимо тіньову сторону автомобіля ще трьома "Spot Light". Підсвітимо колеса та район бічного дзеркала.
Налаштування однакові для трьох "Spot Light":
- Intensity: 0.32
- Range: 0.1
- Falloff Mode: Inverse Squared
- Inner Cone Angle: 80
- Outer Cone Angle : 10
Ще трохи покращень
Подивіться на тінь під автомобілем, - вона зовсім плоска, немає відчуття, що задіяне глобальне освітлення. Бракує додаткової тіні від небозводу.
Оскільки Playcanvas не вміє прораховувати висвітлення за реальними законами фізики, нам доведеться робити "фейк" тінь.
Ми створимо площину з прозорою текстурою у вигляді тіні і цю площину трохи піднімемо над поверхнею землі.
Для того, щоб намалювати таку тінь, перейдіть у вигляд "Bottom", зробіть скріншот "Viewport" і в Photopea або Photoshop намалюйте тінь. Не забувайте, що співвідношення сторін текстури має бути 1:1.
У мене вийшло так.
Створіть матеріал "M_FakeShadow" з наступними параметрами.
Створіть "Plane", підніміть по осі "Y" над землею на "0.01", застосуйте до нього матеріал "M_FakeShadow", підгоніть масштаб площини, так щоб тінь збігалася з автомобілем.
Висновок
Натисніть кнопку "Play", помилуємося нашим результатом. Вийшло чудово, ми проробили велику роботу! Спасибі всім, хто підтримував мене на Patreon, це допомагає випускати нові круті уроки. Сподіваюся, вам сподобався цей майстер-клас, чекаю ваші відгуки в коментарях.
FAQ
1. Про що ця стаття?
2. Що розглядається у Part 10?
3. Чому пізні етапи розробки є важливими?
4. Які завдання зазвичай вирішуються на цьому етапі?
5. Чому якість візуалізації важлива для автомобільних конфігураторів?
6. Як оптимізація покращує проєкт?
7. Чи можна додавати нові варіанти налаштування автомобіля?
8. Чому користувацький досвід є одним із головних пріоритетів?
9. Чи підходить PlayCanvas для професійних комерційних проєктів?
10. Чи можна використовувати подібні методи в інших галузях?
11. Чому важливо підтримувати правильну структуру проєкту?
12. Чи можуть такі застосунки ефективно працювати на мобільних пристроях?
13. Чи потрібні навички програмування для реалізації складних функцій?
14. Які переваги мають інтерактивні конфігуратори порівняно зі статичними презентаціями?
15. Чи може проєкт продовжувати розвиватися після цього етапу?
16. Для кого буде корисна ця стаття?
Останні статті
{{comment.text}}