Пятничное мое: рендеринг облаков на мобильных.⁠⁠

Как и обещал в предыдущем посту https://pikabu.ru/story/_5527137 , рассказываю как я вот такое рендерю на мобильных:

Отрисовывать облака в реальном времени -- сложная задача даже для компьютеров.

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

Очевидно, что если хочется рисовать облака на мобильных -- придется читерить.

Подготовительная стадия

Формируются карта глубины мира, карта глубины и нормали облаков.

A -- канал прозрачности. Чем темнее -- тем прозрачнее.

RGB -- цветовой канал

Глубина мира:

Глубина облаков:

Нормали облаков:

Стадия преобразования карт:

Карта нормалей размывается. Это делается в два прохода.

По горизонтали:

По вертикали:

Как видите, получается размытый, немного облачный контур.

Аналогично размывается карта глубины облаков (тоже в два прохода):

Теперь к карте глубины облаков применяется шум:

Фаза освещения

Тут все происходит в 1 шейдерной программе, т.е. в 1 шаг. Но для удобства восприятия я разобью на несколько шагов.

Диффузное(матовое) освещение.

Из направления источника света и нормали облаков, получаем базовое освещение.

Просвечивание.

Около краев облаков (там где высокая прозрачность) добавляем просвечивание если солнце спряталось за облаком.

Шум нормалей (на самом деле это происходит ПЕРЕД диффузным освещением, но иначе ничего не будет понятно)

Шум displacement (отображаем на экране не текущий пиксель, а случайный из небольшого радиуса вокруг)

Совмещаем с остальным миром

Зная глубину облака, глубину мира, и прозрачность облака, мы можем наложить облако поверх остального мира.

Конечный результат:

P.S. Так как это не технический ресурс, я не стал углубляться в тонкости реализации. Более подробную статью я опубликую на хабре:

https://habrahabr.ru/users/marsermd/posts/