Как сделать туман в юнити
Перейти к содержимому

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

  • автор:

Глобальный туман

Графический эффект Global Fog создаёт эскпотенциальный туман на основе камеры. Все расчеты производятся в мировом пространстве, благодаря чему возможно использование режимов тумана на основе высоты, которые могут быть использованы для сложных эффектов (см пример).

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

Также как и в случае с другими эффектами изображения, этот эффект доступен только в Unity Pro и перед тем как он станет доступен, вы должны установить стандартные Pro ассеты.

Свойства

Свойство: Функция:
Fog Mode Доступные типы тумана, основанные на дистанции, высоте и том и другом одновременно.
Start Distance Дистанция, при которой туман начинает рассеиваться в мировых единицах координат.
Global Density Угол, при котором Fog Color увеличивается вместе с расстоянием.
Height Scale Угол, при котором плотность тумана уменьшается вместе с высотой (если активен туман, основанный на высоте).
Height Координата Y в мировом пространстве, где туман начинает рассеиваться.
#Глобальный туман Цвет тумана.

Аппаратная поддержка

Для этого эффекта требуется видеокарта с поддержкой Shader Model 2 и Depth Textures. Для более подробного ознакомления с темой и списком совместимых аппаратных средств, посетите страницу документации графические возможности аппаратных средств и их эмуляция.

Как включить Fog?

Unity 2020.1.2. Не могу включить туман. Раньше просто галку ставил в разделе Lightning, и все работало. Сейчас все перерыл, никак туман не включается. В чем может быть проблема?

  • arte_de_mort
  • Постоялец

#1
0:09, 22 янв 2021

А отображение тумана во вьюпорте включено? Сверху над вьюпортом должна быть кнопочка.

#2
0:15, 22 янв 2021
#3
4:17, 22 янв 2021

Если галку в разделе Lightning убрали, возможно в свежих версиях Unity на камеру надо весить одноимённый скрипт.

#4
8:33, 22 янв 2021

В том то и дело, что она есть. Но это ничего не даёт. В версиях 2017/18 все работало.

#5
10:51, 22 янв 2021

Какие шейдеры в сцене? Стандартные или кастомные? Шейдеры должны поддерживать туман, чтобы он работал.
Если используется Deferred rendering, то туман не будет работать вообще, его нужно добавлять в постпроцессинге.

#6
11:05, 22 янв 2021

А вот это надо перепроверить. Шейдер один кастомный и один стандарт.

#7
23:37, 22 янв 2021

Добавил Post Processing и туман заработал. Спасибо.

#8
11:03, 24 янв 2021

Выявилась другая проблема. Скайбокс не поддерживает туман. Есть ли способ это сделать или нужно искать кастомный шейдер для скайбокса?

Уроки Unity3d Как добавить на сцену туман в unity 2 или 3 или 4 или 5 версии C#

Иконка канала Сергей Хоббиток / IT - специалист C# / Unity3d

Уроки Unity3d Как добавить на сцену туман в unity 2 или 3 или 4 или 5 версии C# Привет друзья! Сегодня в уроке я вам покажу как: Как добавить на сцену туман в unity 2 или 3 или 4 или 5 версии #unityурокиcunity#game#games#туман Ваши вопросы по урокам можете задавать Позитив добавляем к коммент! Ставь лайк, если тебе понравилось видео и урок. Подписывайся на канал! — Уроки от #СергеяХоббиток Лучше закреплять материал быстрее начать делать свои игры на Unity. Всё про Unity3d Уроки Unity. Программирование С# #написание#скрипта#юнити#юнитиуроки#юнити3д#юнитиснуля Создать игру #юнитикаксоздатьигру#юнити3дсозданиеигры#юнитиурокиотадоя#урокиюнитинарусском Скрипт с# #скриптысишарп#unityурокинарусском#unitytutorial #unity3dуроки#unity3dсозданиеуроков#СергейХоббиток#unity3dурокискриптинга юнити,юнити уроки,юнити 3д,юнити с нуля,юнити как создать игру,юнити 3д создание игры,юнити уроки от а до я,уроки юнити на русском,скрипты си шарп,юнити прохождение,unity,unity уроки,unity уроки на русском,unity3d,unity tutorial,unity3d создание уроков,unity3dschool,unity3d уроки скриптинга c#,c# unity уроки,c# unity,rpg,game,games,rpg unity,rpg уроки,рпг уроки,рпг юнити,рпг unity3d,rpg unity3d,script c#,как добавить туман в юнити,туман unity

Показать больше

Войдите , чтобы оставлять комментарии

Красивый туман в Unity3d с высокой оптимизацией ⁠ ⁠

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

Красивый туман в Unity3d с высокой оптимизацией Unity3D, Gamedev, Туман, Мобильные игры, Разработка игр, Шейдеры, Indiedev, Fog, Длиннопост

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

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

Красивый туман в Unity3d с высокой оптимизацией Unity3D, Gamedev, Туман, Мобильные игры, Разработка игр, Шейдеры, Indiedev, Fog, Длиннопост

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

Если попытаться поменять цвет тумана ближе к левой стороне, то получим тот же проблемный эффект, но уже с другой стороны:

Красивый туман в Unity3d с высокой оптимизацией Unity3D, Gamedev, Туман, Мобильные игры, Разработка игр, Шейдеры, Indiedev, Fog, Длиннопост

Как же правильно поступить в данной ситуации? Есть несколько вариантов, например вместо одного цвета тумана, можно использовать градиент. Решение интересное, но не практичное в применении, небо иногда может иметь засветы (например воронка от солнца), как результат, одним градиентом здесь не обойтись.

Есть множество вариантов опробовать глобальный туман, использующий post processing, но к сожалению, данный вариант дает очень сильную нагрузку на GPU, использовать его в мобильном проекте, где GPU в основном и является проблемным местом, не рационально. На выходе получится огромное падение fps и ускоренный нагрев устройства.

К счастью, удалось найти очень интересный пост на реддите, в котором человек делится своими мыслями относительно решения этой проблемы. Он предлает накладывать вместо монотонного цвета кубомапу, которая была бы копией скайбокса, но с сильно уменьшенным разрешением + небольшим замытием. Решение великолепное, но есть небольшая загвоздка, для этого нужно переписать все шейдеры в игре, которые должны иметь этот туман. К счастью, сделать это довольно просто.

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

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

Shader «Mobile/CustomFogCube»
Properties
_FogStart(«Fog Start», float) = 0 //объявляем наши новые переменные для тумана
_FogEnd («Fog End», float) = 50

>
SubShader
Tags< "RenderType" = "Opaque" >
Fog< Mode off >
Pass
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma multi_compile _ LIGHTMAP_ON
#include «UnityCG.cginc»
half _FogStart; //определяем новые переменные в рамках CGPROGRAM
half _FogEnd;

struct appdata
float4 vertex : POSITION;
float4 color : COLOR;
float4 uv : TEXCOORD1;
>;
struct v2f
float4 pos : SV_POSITION;
float4 uv : TEXCOORD1;
half fog : TEXCOORD2; //добавляем новую переменную для расчета расстояния отображения тумана и последующей передачи в fragment функцию
float4 color : COLOR;
half3 viewDir : TEXCOORD3;
>;
v2f vert(appdata v)
v2f o;
o.color = v.color;
o.pos = UnityObjectToClipPos(v.vertex);
//lightmaps
o.uv.xy = v.uv.xy * unity_LightmapST.xy + unity_LightmapST.zw;
//fog высчитываем положение тумана в зависимости от заданных значений
half fogz = UnityObjectToViewPos(v.vertex).z;
o.fog = saturate((fogz + _FogStart) / (_FogStart — _FogEnd));

float3 worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
o.viewDir = -(normalize(UnityWorldSpaceViewDir(worldPos)));
return o;
>
half4 frag(v2f i) : COLOR
UNITY_SETUP_STEREO_EYE_INDEX_POST_VERTEX(i);
fixed4 c = i.color * 0.5;
//lightmaps
#ifdef LIGHTMAP_ON
fixed4 lm = UNITY_SAMPLE_TEX2D(unity_Lightmap, i.uv.xy);
c.rgb *= lm.rgb * 4;
#endif
//fog заменяем плавно цвет поверхности на цвет кубомапы (он же наш туман). Кубомапу нужно задать в настройках освещение (Lighting > Scene > Environment Reflection > Source = Custom > Cubemap = Ваша кубомапа)
half4 fogCube = UNITY_SAMPLE_TEXCUBE(unity_SpecCube0, i.viewDir);
return lerp(c, fogCube, i.fog);

>
ENDCG
>
>
Fallback «Mobile/VertexLit»
>

Для работы шейдера нужно выставить кастомную кубомапу в настройках освещения. Просто проследуйте по следующему пути: Lighting > Scene > Environment Reflection > Source = Custom > Cubemap = Ваша кубомапа, которая дублирует ваш скайбокс, предварительно размазанная в каком-нибудь графическом редакторе, либо просто уменьшенная до размера 32х32 пикселей)

Собственно ещё раз покажу как данный туман выглядит в сцене:

Красивый туман в Unity3d с высокой оптимизацией Unity3D, Gamedev, Туман, Мобильные игры, Разработка игр, Шейдеры, Indiedev, Fog, Длиннопост

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *