Создание эффекта динамического освещения для облаков — краткий туториал

Для этого достаточно лишь пары текстур и обычного цилиндра.

Разработчик экшена про воздушные бои Jet Lancer Владимир Федюшкин опубликовал в Твиттере гифки, на которых показал шейдер, позволяющий менять освещение 2D-облаков.

Динамическая смена освещения

По словам Федюшкина, в этом решении нет чего-то слишком сложного — он нанёс текстуру облаков на внутреннюю поверхность цилиндра и вручную нарисовал карту нормалей. Именно благодаря normal map удалось добиться эффекта теней на облаках.

Вот так выглядит текстура облаков на цилиндре

Также разработчик рассказал, что у него есть ещё два цветовых канала, поэтому он может добавить density map для создания эффекта рассеивающего света, проходящего через облака.

Когда солнце заходит за облака, края просвечиваются, так как их плотность недостаточно высокая

Карты нормалей используются повсеместно для имитации объёма без изменения формы самой модели. В карте нормалей содержится информация о том, как свет должен отражаться от поверхности. Такой обман как раз и позволяет создать объём там, где его физически нет. Если вы хотите узнать больше о картах нормалей, прочитайте наш текст.

Вот так выглядит высокополигональная модель, на основе которой делается карта нормалей. Фиолетовые линии с чёрными точками — нормали, которые находятся перпендикулярно полигону и позволяют рассчитать угол отражения света

Программа, в которой запекается карта нормалей, «смотрит», как свет отражается от высокополигональной модели, и воссоздаёт эти свойства на плоскости

Этот подход можно применять и к 2D-играм, в которых игровые объекты состоят из плоских спрайтов, а не 3D-моделей. К примеру, разработчики Dead Cells тоже рисуют карты нормалей вручную — они нужны для того, чтобы свет, например, от факелов, отображался корректно.

Сверху — обычный спрайт, снизу — карта нормалей, нарисованная вручную

Вы можете сделать карту нормалей даже для пиксельных спрайтов, что сделает игру визуально интереснее и глубже. Вот краткий туториал по реализации такого решения:

#опыт #арт #инди