Создание проекта 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}}