Как сделать туман в юнити

Добавил пользователь Валентин П.
Обновлено: 04.10.2024

Cоздание почти трёхмерного окружения без трёхмерной графики.

Мы — это я, Егор, и Юра, наш художник, которому я упорно создаю след в сети, но он не торопится этим пользоваться. И, собственно, мы очень неспешно работаем над нашей игрой и иногда выкладываем всякие заметки о том, что там и как. В этот раз речь пойдёт о том, как мы захотели добавить водички в игру, но не смогли остановиться на слишком простом решении.

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

Началось всё с макета и от него пошло. Первоначально он выглядел чуть темнее, но, немного поигравшись, мы получили вот такую картинку.

Сразу выделим, какие детали нужно будет реализовать:

  1. собственно, вода;
  2. пенка у колон и камней;
  3. туман.

Так как вся игра в 2D, доступа к высотам в точках у меня нет, и просто перенести 3D подход возможности не было. Поэтому я придумал другую хитрость — сделать отдельную камеру, копирующую основную, подменять в ней спрайты с помощью URP Renderer и дополнительных текстур и рисовать собственную карту высот, используя её. А по ней уже строить очертания моря и тумана.

Тут оговорюсь для людей, незнакомых с Unity, что URP (Universal Render Pipeline) — это один из вариантов пайплайнов отрисовки, который позволяет гибко настраивать, собственно, отрисовку. И идея тут в том, чтобы создать специальный способ отрисовки в специальной камере для некоторых игровых объектов.

Для начала нужно придумать, как её вообще рисовать. В обычном 3D она рисуется автоматически по мере записи в Depth Buffer (иногда и иначе, не будем задерживаться на этом), остаётся только взять её и использовать. Но так как у нас 2D-спрайты, то нам это, конечно же, не подходит.

В редакторе спрайтов Unity потом достаточно просто добавить вторичную текстуру и дать ей название.

Теперь нужно написать шейдер, который будет, собственно, заменять основную текстуру на дополнительную. Помимо этого, он должен немного перекодировать данные, потому что в текстуру влезет всего 256 значений (если она не sRGB, то больше, но это детали), а высота может быть раньше. В шейдер добавляем проперти _Meta и используем те же UV-координаты + вешаем математику сверху.

После я создал URP Renderer и добавил в него фичу для подмены материалов.

Теперь остаётся только создать камеру, поменять ей Renderer и настроить слои, получаем две картинки, одна из которых выводится на экран.

Вуаля, карта высот готова.

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

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

Собираем это всё и смотрим на море.

Для отрисовки пены изначально я взял карту высот, прошёлся по ней блюром и пастеризовал в цветах воды. Сразу заметил, что пенка появляется и сверху картинки рядом с колонами, а не под ними, потому что не понимает, что колоны над ней.

На практике это выглядело вот так.

Уже получше. Далее я быстренько накинул шум, чтобы было что-то двигающееся. Выглядело оно так себе.

Но тут пришел Юра и рассказал, как делал волны на макете — просто брал три текстуры с шумом на основе фотки волн и двигал их каждую в свою сторону. После чего он же запрограммировал для этого шейкер и стало выглядеть гораздо лучше.

Но пена нам всё-таки не понравилась, решили переделать.

Для этого к каждой колоне я прикрепил спрайт с очертаниями пены, зафиксировал его на уровне воды и настроил камеру, которая рисовала только эти спрайты в отдельную текстуру.

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

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

После этого я не выдержал создать очень много нод и переписал весь шейдер клеток на HLSL. Еще была проблема с переиспользованием функций между HLSL и шейдерграфом, потому что я иногда передавал семплер текстур. Проблема заключалась в том, что нельзя просто взять и передать семплер из шейдер графа и в HLSL ноду. Это, конечно, тоже добавило очков текстовым шейдерам.

Переписав всё это добро, мы поигрались с самыми разными параметрами и добавили коня-колосса.

Для коня, кстати, руками рисовалась карта высот и вообще весь процесс довольно весело выглядел.

По итогу получилось собрать псевдо-карту высот и красивую анимацию воды, которая когда-нибудь пойдет в полноценную игру. Геймплейно мы при этом двигаемся не слишком быстро (да и в части визуальной тоже, на самом деле), но мы просто любим делать гиммики, которые радуют глаз.

Водичка чисто партиклами поверх голубой плоскости.

Интересно выглядит) А можно скрин редактора с Gizmos иконками или описание в двух словах как оно работает? Здесь несколько систем частиц, стандартный ли эмитер или вы кастомили создание частиц.

Сейчас уже не найду тот проект.
Суть такова: В инете была найдена гифка с каустикой воды. Из нее была сделана несложная 16 кадровая текстура с фейдом по краям каждого кадра. Потом на плоскости воды в рандомных местах появляются 1-3 билборда на 0,7-1,5 сек с этой текстурой. Каустика готова :)
Пена ко краям объектов еще проще - это расставленные вручную такие же партикл системы, где спавнятся так же несколько билбордов, но уже с однокадровой текстурой. К двигающимся объектам, типа лодок, ящиков эти системы просто прилинкованы, чтобы двигаться вместе с ними. Ничего сложного.
Дело лишь за красиво нарисованным градиентом глубины воды на основном плейне, имитирующем воду.

Доброго времени суток.Можете подсказать, пожалуйста, как сделать туман для 2d игры. Хочу сделать локальный туман при нажатии на паузу(возле кнопок), как лучше всего его сделать. Пытался с помощью частиц, но ничего не смог сделать чтоб было похоже на туман и знаю, что частицы отражаются на производительности. Подскажите, как можно это реализовать. Огромное спасибо

Туман
Подскажите пожалуйста, как сделать лучше туман в игре 2d, чтобы на заднем фоне появился?

Как оптимизировать туман в Unity3D
Обычный post-эффектный туман слишком сильно загружает телефон. Как сделать туман для мобильной игры?

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

если я правильно понял, то вы хотите слегка затемнить что ли сцену когда нажата пауза?
ну так сделайте руцями "маску" в виде тумана и примените ее в момент нажатия.
наложите поверх или что вы умеете)

f3hler, тут скорее имеется ввиду эффект тумана вокруг кнопок в меню паузы.

Geronimo3019, Может добавить на задний план кнопок объект с анимированной текстурой?

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

Туман войны
Вобщем стала задача реализовать на карте игры затуманеность мест где герой небыл (Туман войны).

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

Как подружить туман и gluLookAt()?
Доброго времени суток. Пытаюсь добавить туман стандартными средствами OpenGL, вот так: fogColor.

Отлично, теперь просто надо добавить сэмплинг текстуры во все шейдеры. Благо, в проекте уже используются кастомные шейдеры практически для всего. За исключением эффектов. Да и черт с ними. Пока что.

С подмешиванием все просто. Сделаем cginc, добавим туда немного функций… и макросов! Как же приятно иногда вернутся в этот дикий мир текстовых макросов, ЗАГЛАВНЫХ букв и настоящей магии! :-)

Да, так просто. И долгое время реализация тумана войны была именно такой. Да она и сейчас такая же, разве что 0.75f и 0.25f заменились константами.

Конечно, не обошлось и без сложностей. Во-первых, в проекте используются и Lambert и Standard модели освещения. Во-вторых, в проекте используется и Deferred и Forward рендеринг, зависимо от платформы. В итоге я довольно долго провозился, пытаясь добиться единообразного затенения на всех сочетаниях модели освещения и способа рендеринга. В идеале я бы хотел просто взять самый-самый финальный цвет пикселя и немного затенить его. В проекте используются Surface Shaders, которые, вроде бы предоставляют такую возможность – finalcolor и finalgbuffer. Но между ними есть ощутимая разница: finalcolor применяется после освещения, а finalgbuffer – до. Если подумать, это может быть и логично, т.к. в Deferred освещение вообще выполняется отдельным проходом… но это не снимает вопрос: как модифицировать финальный цвет?

Собственно, камнем преткновения была Standard модель освещения. Даже нулевой Albedo в ней дает очень светлые объекты:

Standard-освещение с нулевым Albedo

Все объекты как объекты, но чертовы камни! Но решение, как часто бывает, оказалось очень простым: использовать Occlusion вместо Albedo. Вот пример одного из Standard-шейдеров, использованных в проекте:

  1. Убираем лишний код на уровнях без тумана войны (есть и такие)
  2. Подключаем показанный ранее файл
  3. Прячем нужные для тумана войны входные параметры под макросом (фишка подсмотрена у Unity)
  4. Выставляем SurfaceOutputStandard.Occlusion зависимо от тумана войны

В случае с Lambert-освещением вместо Occlusion просто модулируем Albedo. Для Emissive-материалов также модулируем Emission. С Terrain-шейдерами пришлось повозиться чуть подольше. Дело в том, что стандартные Unity’вские заголовки не дают способа подменить структуру, передаваемую из вершинного шейдера в пиксельный. Поэтому пришлось скопировать заголовок Unity и внести в него нужные изменения (опечатка в комментарии – не моя):

И вот он долгожданный результат:

Первая версия: сильно пикселизированный туман войны

Обратите внимание, как видимая область распространяется вверх на всю высоту здания. Как раз то, чего хотелось! Да вот только эти пиксели…

Туман в Unity 5 / Как создать игру [Урок 36]

Туман в Unity 5 / Как создать игру [Урок 36]

Туман в Unity 5 / Как создать игру [Урок 36]

Туман в Unity 5 / Как создать игру [Урок 36]


fog has no effect on opaque objects when Using
Вылазит ошибка что делать?

как включить туман в скрипте ,в нужный момент отключить

Какая самая стабильная версия Юнити на данный момент?

а где находится этот лайтинг

Как сделать онлайн игру скажи пж

А можно ли сделать так,что бы небо было видно немного?

Бля ну прям неожидано, что сразу на твой канал

Поставил unity 2017 и там оба фога %уй работают.
Один жалуется на opacue objects а скиптовый либо ничего не даёт либо всё черное становится.
приехали 6ляtь )))

Нету GlobalFog, искал скрипт не нашел, есть простой Fog в Lighting, но там не такой густой туман

Можно спросить в чем проблема, у меня перестал работать unity и он просто не хочет открывать меню с моими проектами?
сылка на скрин тут (сылка удалена)

Помогите,у меня unity 3d 3.5 f2.Проблема в том что у меня в режиме
полета не работают клавиши w s, а другие a d q e работают,я не могу
спокойно пользоватся движком. Что делать?!

Владимир, перезалей пожалуйста первые уроки. Очень нужно

Владимир, сделайте, пожалуйста, урок по мультиплееру, было бы очень интересно.

Владимир ,столкнулся с такой проблемой в юнити: при наложении текстуры (материала) на наклонную стену с выгрызом (обвалившийся кусок стены) , материал накладывается криво. На фронтальную плоскость материал ложится нормально, но там где выгрыз (дырка) текстура как бы растягивается и получаются тонкие полоски. В некоторых 3д визуализаторах (например Артлантис) ,есть функция различного типа наложения материала для таких случаев (например UV) в этом случае текстура правильно ложиться на все плоскости объекта без искажения ! Есть ли подобная функция в Юнити , чтобы текстура фронтально проецировалась на все плоскости объекта . Очень не хочется делать развертки, у меня дохрена зданий и для них запаришься делать развертки

Хотелось бы знать в чем смысл удаления первых четырех видео уроков? Есть ли смысл начинать смотреть уроки начиная с 5го не имея информации данной в начальных четырех?

Что за игра будет хорор тогда класс .

Запилил по вашим урокам игру "Пляжный Хулиган" для андроида.

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

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

* Ваша задача - ломать детские песочные замки, зарабатывая тем самым очки.
* Замков три типа, различающихся по количеству HP. Чем больше HP у замка - тем больше очков за него дается.
* После уничтожения замка вас начнет преследовать папаша детей, чей замок вы сломали. Скорость и изворотливость папаши зависит от типа замка, который вы сломали. Чем круче замок - тем круче папаша.
* Если хоть один из папаш вас догонит и ударит - игра закончится.
* По ходу игры вам нужно будет бегать от огромной толпы папаш, в попыхах пытаясь рассчитать время, требуемое, чтобы сломать очередной замок и не попасться ни одному из папаш.
* С первых попыток не получится набрать хоть мало-мальски серьезное количество очков, для этого потребуется немало тренироваться.

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

Читайте также: