Как сделать простые Nebula облака⁠⁠

Всем привет!

Недавно захотелось нам в игру добавить туманности в виде Nebula облаков.

Попробовали поискать информацию в интернете, нашли такие варианты:

1. Использовать Raymarching алгоритм в шейдере, облака выглядят очень красиво и объемно, но результат очень ресурсоемкий.

2. Использовать набор плоскостей, на которые отрисовывается 3D текстура облака. Такой вариант работает быстрее, чем Raymarching, но требуется особая текстура (атлас), где будут отрисованы все "разрезы" облака.

3. Использовать системы частиц. Работает быстро, очень гибко в настройке. Такой подход используется в мобильной игре Galaxy on Fire 2.

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

Ниже мы расскажем, как его добиться :)

Подготовка

Мы начали работу с анализа Nebula облаков. И выделили три составляющих - сами облака, черные скопления и звезды.

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

Здесь мы выбрали картинки для черных скоплений, картинки для самого облака и картинки для звезд. Сформировали новый атлас 4х4. Наборы расположили таким образом, чтобы первая строка картинок относилась к черным скоплениям, вторая и третья строки - к облаку, а последняя строка картинок - к звездам. Таким образом, мы будем использовать одну текстуру в нескольких системах частиц, это увеличит производительность.

Теперь нужно определиться с цветами. По запросу "nebulas gradient color" в интернете можно найти множество разных наборов цветов. Мы выбрали такую палитру:

Система частиц для основного облака

Теперь создаем систему частиц для основного облака, выставляем такие параметры:

Duration: 20

Looping: ✔️

Prewarm: ✔️

Start lifetime: 20

Start size: 100 - 150

Start rotation: 0 - 360

Simulation Space: World

Start Color: выбираем Gradient, режим Mode - fixed

Прозрачность выставляем 150 (верхний ползунок)

Вкладка Emission

Rate over Time: 2

Вкладка Shape

Здесь задаем форму для появления частиц, выберем полусферу, чтобы частицы появлялись "впереди" корабля

Shape: Hemisphere

Radius: 150

Radius thickness: 0.1

Вкладка Color over Lifetime

Тут зададим плавное появление и исчезание частиц через прозрачность (верхние ползунки)

Вкладка Texture Sheet Animation

Теперь надо указать, что в текстуре используется атлас и задать, какие картинки брать из атласа

Mode: Grid

Tiles: X = 4, Y = 4

Animation: Whole sheet

Time mode: Lifetime

Frame over Time (выбираем Random between two constants): 4 - 11.998

Вкладка Renderer

Задаем максимальный размер частицы относительно экрана и указываем материал

Max Particle Size: 10

Material: создать материал

Материал

Для этой системы частиц создаем материал с нашей текстурой-атласом. Шейдер выбираем обычный для частиц Mobile/Particles/Additive

В результате получим примерно такой вид облака:

Система частиц для черных туманностей

Копируем систему частиц для облаков и модифицируем ее под черные туманности.

Для этого изменим следующие параметры:

Start size: 200 - 400

Start Color: выбираем черный цвет

Вкладка Emission

Rate over Time: 0.2

Вкладка Shape

Если оставить полусферу, то черные пятна могут появиться на пути игрока, что выглядит не очень красиво. Поэтому форму генерации мы изменили на конус.

Shape: Cone

Angle: 15

Radius: 100

Length: 160

Вкладка Texture Sheet Animation

меняем индексы картинок на индексы под черную туманность

Frame over Time: 0 - 3.998

Материал для черной туманности

Создаем новый материал и выбираем шейдер Mobile/Particles/Multiply.

Этот шейдер будет делать обратный эффект - затенять картинку. Т.е. делать полностью черные частицы.

Получим примерно такую систему:

Система частиц для звезд

Третью систему частиц мы также сделаем копированием из первой системы. И изменим следующие параметры:

Start size: 5-10

Start color: в градиенте выставляем несколько ярких цветов и у всех выставляем яркость 40 (параметр V в палитре HSV). Ниже будет пояснение.

Вкладка Emission

Rate over Time: 1

Вкладка Texture Sheet Animation

меняем индексы картинок на индексы под звезды

Frame over Time: 12 - 15.998

Материал для звезд

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

Сам шейдер будет основан на простом Additive шейдере, но с нюансом - будет умножать цвет на 4. Таким образом, края текстуры будут иметь цветовой оттенок, а середина станет "засвеченной", т.е. белой. Именно поэтому мы уменьшили яркость цвета в палитре у системы частиц.

Код шейдера доступен по этой ссылке, пользуйтесь на здоровье :)

На этом настройки систем частиц окончены. Также, можно поиграть с разными формами генерации и попробовать сгенерировать само облако отдельно. Конечно, есть некоторые проблемы с отображением черных пятен, но это из-за перекрытия частиц друг другом

#комплиментдня за то, что дочитал до конца.

Ты очень добрый и отзывчивый участник PGD сообщества!