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

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

Пятничное мое: рендеринг облаков на мобильных. Unity, Asset store, Облака, Рендер, Гифка, Видео, Длиннопост

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


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


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


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


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


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

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

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

Пятничное мое: рендеринг облаков на мобильных. Unity, Asset store, Облака, Рендер, Гифка, Видео, Длиннопост

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

Пятничное мое: рендеринг облаков на мобильных. Unity, Asset store, Облака, Рендер, Гифка, Видео, Длиннопост

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

Пятничное мое: рендеринг облаков на мобильных. Unity, Asset store, Облака, Рендер, Гифка, Видео, Длиннопост

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

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

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

Пятничное мое: рендеринг облаков на мобильных. Unity, Asset store, Облака, Рендер, Гифка, Видео, Длиннопост

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

Пятничное мое: рендеринг облаков на мобильных. Unity, Asset store, Облака, Рендер, Гифка, Видео, Длиннопост

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


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

Пятничное мое: рендеринг облаков на мобильных. Unity, Asset store, Облака, Рендер, Гифка, Видео, Длиннопост

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

Пятничное мое: рендеринг облаков на мобильных. Unity, Asset store, Облака, Рендер, Гифка, Видео, Длиннопост

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

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


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

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

Пятничное мое: рендеринг облаков на мобильных. Unity, Asset store, Облака, Рендер, Гифка, Видео, Длиннопост

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

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

Пятничное мое: рендеринг облаков на мобильных. Unity, Asset store, Облака, Рендер, Гифка, Видео, Длиннопост

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

Пятничное мое: рендеринг облаков на мобильных. Unity, Asset store, Облака, Рендер, Гифка, Видео, Длиннопост

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

Пятничное мое: рендеринг облаков на мобильных. Unity, Asset store, Облака, Рендер, Гифка, Видео, Длиннопост

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


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

Пятничное мое: рендеринг облаков на мобильных. Unity, Asset store, Облака, Рендер, Гифка, Видео, Длиннопост

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

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


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

Unity

215 постов2.6K подписчика

Добавить пост

Правила сообщества

• Запрещается постить вопросы, мемы и прочую ерунду - для этого есть форумы и другие специализированные ресурсы.


• Распространение и обсуждение пиратского ПО, кейгенов, ключей и прочих пиратских файлов запрещено.


• Соблюдайте сетевой этикет. Оскорбительное поведение и мат (в том числе сокращенный или завуалированный) караются баном.


• Запрещается разводить полемики на тему "какой движок круче". Здесь мы обсуждаем только Unity.


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

3
Автор поста оценил этот комментарий

Про рендеринг мне понятно. Я всё же надеялся, что вы не юзаете меш. Ваш подход довольно давно был описан в какой-то каноничной книжке по OGL, уже не помню в какой именно. Там, конечно, не так круто всё выходило, но смысл был похож.


В любом случае, довольно годно получилось. Правда, по-моему мнению, ваш метод больше подойдёт для тумана или дыма. Облака слишком "волосатые" получаются, что ли. Хотя, если поиграть с шумом...

раскрыть ветку (1)
3
Автор поста оценил этот комментарий

Идея с размытием стара как мир.

Но накрутки, которая основывается на 3d шуме, который получается трипланарной проекцией, я нигде не встречал. А основная сложность -- применить зашумление правильным способом).


Ну и сам шум у меня малость нестандартный (см. предыдущий пост).


Про волосатость -- прошу простить мой отвратительный художественный вкус:) Я просто так вижу облака:)

показать ответы
2
Автор поста оценил этот комментарий

Таки облака всё же меши?

раскрыть ветку (1)
3
Автор поста оценил этот комментарий

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

Но процесс рендеринга математически схож с рейтрейсингом, просто вместо того чтобы численно интегрировать функцию плотности, я в результате использую шум умноженный на глубину облака (можно так интерпретировать прозрачность от размывания и прозрачность от наложения на остальной мир)

показать ответы
Автор поста оценил этот комментарий

А, они просто к прозрачному мешу прилеплены получается?

раскрыть ветку (1)
2
Автор поста оценил этот комментарий

Они выполняются как полноэкранный эффект после рендеринга всего остального мира.

Автор поста оценил этот комментарий

Спасибо за ответ! Планируется выпускать на asset store? Выглядит очень здорово.

раскрыть ветку (1)
1
Автор поста оценил этот комментарий

Планировал выпустить еще когда писал предыдущий пост. Сейчас -- выпустил.

https://assetstore.unity.com/packages/vfx/shaders/fullscreen...

показать ответы
Автор поста оценил этот комментарий

Пробовалось проверить облака на реальной мобильной игре? Ну или хотя бы сцену на 50-80к вертексов + 30-50 draw calls? Интересно какое будет падение в производительности на мобилках. А к требованиям есть какие-либо ограничения, будит ли сие дело работать на том же Opengl es 2.0 к примеру?


А что будет, если камера вплотную подойдет к облаку или вовсе войдет внутрь?


Сори за тонну вопросов :)

раскрыть ветку (1)
1
Автор поста оценил этот комментарий

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


Весь мир перерисовывается еще раз чтобы получить карту глубины. Это может быть тяжелым ударом при большом количестве треугольников или дроу коллов. Но мобильные игры гораздо чаще упираются в overdraw. А вот overdraw увеличивается в 1 + 1/(downscale ^ 2) при рекомендуемом downscale около 4. Т.е. в 1.0625 раз. В общем, слабо влияет.


На современных девайсах вроде хорошее дефолтное ограничение около 200к вершин, а дроу коллов так и вообще под 500 можно, так что не должно быть проблем. Но тут нужно тестировать на конкретном железе, которое собираетесь поддерживать.


OpenglEs 2.0 поддерживается. Я утверждаю что на всем, что способно выдавать нормальные fps -- будет работать. Если это вдруг не так, обязательно починю. Но я тестировал много на чем, так что проблем быть не должно:)


Изнутри облака ничего хорошего не будет:)

показать ответы
DELETED
Автор поста оценил этот комментарий

Ваш ассет можно приобрести в сторе? Было бы здорово использовать его для тумана!

раскрыть ветку (1)
1
Автор поста оценил этот комментарий

Спасибо, пока добавлю в wishlist, думаю через какое-то время куплю.

раскрыть ветку (1)
Автор поста оценил этот комментарий

ok:)

Автор поста оценил этот комментарий

А шейдером такое сделать слишком накладно выходит?

раскрыть ветку (1)
Автор поста оценил этот комментарий

так это все и есть шейдеры:)

показать ответы