Shader magic: Breakdown of popular visual effects for games

Магия шейдеров
Разбор эффектов из
видеоигр

Про докладчика
Сергей
Кормишин
• 8 лет в геймдеве
• Работаю рендер
инг-инженером
в
компании Spera
soft
• Работал в EA
Mobile, Nival
• Принимал
участие в
разработке игр:
Star wars: Galaxy
of Heroes
Rainbow Six:
Siege
Assassin’s Creed:
Odyssey

Наша
компания15 лет
Основана в 2004: 5 офисов в 3 странах
500+
Профессионалов в команде
Sperasoft является частью
Keywords Studios
Международного поставщика технических услуг для
глобальной индустрии видеоигр

О чем доклад?
Меня интересует визуальная составляющая игр,
поэтому я исследую как устроены различные
эффекты, несколько мы воспроизведем в Unity:

водоворот, портал

[1 / 3] Водоворот, портал

Нужно вспомнить
Нам нужно знать, что такое:
• Полярные координаты
• UV-координаты

Полярные координаты

Лучшее объяснение UV-координат
3d-модель (Mesh)
представляет собой оболочку,
а 2d текстура цвет и другие
свойства материала.

Лучшее объяснение UV-координат
В каждой вершине этой
модели в Blender'e (3Ds Max,
Maya и тп) заданы
координаты внутри текстуры

Выведем uv-координаты плоскости
float4 frag (v2f i) : SV_Target
{
// Original UV output
return float4(i.uv, 0, 1);
}
RGBa

Преобразуем в полярные координаты
{
i.uv -= float2(0.5, 0.5);
float2 uv = i.uv;
// Polar UV
float2 p = i.uv;
float a = atan2(p.y ,p.x);
uv = float2(length(p), (a / M_2PI));
return float4(uv, 0, 1);
}

Пространство плоскости «заворачивается»
{
…
float t = saturate(sin(_Time.y));
uv = lerp(i.uv, uv, t);
}

мы можем заворачивать и по спирали
{
i.uv -= float2(0.5, 0.5);
i.uv *= 2.0;
float2 uv = i.uv;
float d = length(uv);
float angle = atan2(uv.y, uv.x);
float с = sin(d * DistanceMultiplier +
angle * _AngleMultiplier - _Time.y *
_Speed);
return float4(с, с, с, 1);
}

вся слава гипно-жабе!

добавим смещение к полярным координатам
{
…
float offset = _Time.x * _Speed;
uv += float2(offset, offset);
}

если _Speed будет отрицательной
{
…
float offset = _Time.x * _Speed;
uv += float2(offset, offset);
}

текстура для водоворота
Источник – enemyhideout.com
Вертикальные паттерны в полярном
преобразовании будут
закручиваться.

закрученный паттерн
Полярное преобразование превратит
вертикальный паттерн в круговой
Текстуру нужно сделать стыкующейся
в Photoshopе

добавим смещение

инвертируем смещение

текстура с шумом перлина

Применяем шум для смещения

придадим форму
{
…
float noise = tex2D(_NoiseMap, i.uv).x;
float edgeNoise = noise * _Impact;
float edge = 1.0 - smoothstep(0.3,
0.4 + edgeNoise,
length(i.uv));
return edge * tex2D(_ColorMap, uv);
}

Добавим движения по границе
{
…
float noise = tex2D(_NoiseMap,
i.uv polar_uv).x;
float edgeNoise = noise * _Impact;
float edge = 1.0 - smoothstep(0.3,
0.4 + edgeNoise,
length(i.uv));
return edge * tex2D(_ColorMap, uv);
}

Можно варьировать вид и количество текстур
Portal Shader by Nadir Khabibullin

Какие математические
инструменты мы
применяли?

математические инструменты
• Тригонометрические функции
• Векторная алгебра

[2 / 3] parallax-based эффекты
Cracked Ice Material by Ali Youssef

Magic Marble by Harry Alisavakis

Cards by Mihajlo Djokic

Пересчитаем normal в view-space
void vert(inout appdata_full v, out Input
o)
{
UNITY_INITIALIZE_OUTPUT(Input,o);
o.normal_vs = normalize( mul(
(float3x3)UNITY_MATRIX_MV,
v.normal)
);
}

Используем смещение normal в UV
void surf(Input IN, inout SurfaceOutputStandard o)
{
float4 top = tex2D(_TopMap, IN.uv_TopMap);
float2 offset_uv = IN.uv_BottomMap +
_OffsetScale * IN.vs_normal.xy;
float4 bottomColor = tex2D(_BottomMap, offset_uv);
o.Albedo = lerp(bottomColor, topColor.rgb, topColor.a);
}

получаем нужный нам эффект глубины

Используем MIP-уровни нижней текстуры
void surf(Input IN, inout SurfaceOutputStandard o)
{
const uint MAX_MIP = 9;
float4 bottomColor = tex2Dlod(_BottomMap,
float4(offset_uv, 0, MAX_MIP * topColor.a
));
o.Albedo = lerp(bottomColor,
topColor.rgb, topColor.a);
}

Примеры из игр
Проект Никиты Булатова «Luscus»

Примеры из популярных
игр
[2 / 3] Parallax-based эффекты

Примеры из игр
Изображение из статьи A Game Art Tricks (simonschreibt.de)

layered parallax
[2 / 3] Parallax-based эффекты

Нужно вспомнить
Нам нужно знать, что такое:
• Касательное пространство (Tangent-space)

визуализация касательного пространства в unity

tangent-space (касательное пространство)

вершинный шейдер: касательное пространство
void vert(inout appdata_full v, out Input o)
{
...
float3 camera_ls = mul(unity_WorldToObject,
float4(_WorldSpaceCameraPos, 1.0)).xyz;
float3 viewDir_ls = v.vertex.xyz - camera_ls;
float tangentSign = v.tangent.w * unity_WorldTransformParams.w;
float3 binormal = cross(v.normal.xyz, v.tangent.xyz) * tangentSign;
o.view_dir_ts = float3(
dot(viewDir_ls, v.tangent.xyz),
dot(viewDir_ls, binormal.xyz),
dot(viewDir_ls, v.normal.xyz)
);
}

surface-шейдер: цикл со смещением
void surf(Input IN, inout SurfaceOutputStandard o) {
float3 parallax = float3(0, 0, 0);
for (int j = 0; j < _Iterations; j++) {
float ratio = (float)j / _Iterations; // Затухание
float2 uv_offset = lerp(0, _OffsetScale, ratio) *
normalize(IN.view_dir_ts).xy;
parallax += tex2D(_ParallaxMap, IN.uv_MainTex + uv_offset) *
lerp(1, 0, ratio);
}
parallax /= _Iterations;
fixed4 c = tex2D(_MainTex, IN.uv_MainTex) * _Color;
o.Albedo = c.rgb + parallax;
...
}

используем такую текстуру трещин

получим такой эффект льда
7 из 10

Вместо затухания сделать интерполяцию между
цветами

математические инструменты
• Тригонометрические функции
• Векторная алгебра
• Матрицы

[3/3] Mesh flipbook: молния
Lightning Effect by Klemen Lozar

исходный mesh: В vertex color - цвет всполоха

Используем step, чтобы подсветить активный
всполох
v2f vert (appdata v) {
v2f o;
o.uv = v.uv;
o.position = UnityObjectToClipPos(v.position);
float d = v.color.r - _Value;
float factor = 1.0 - step(_Threshold, abs(d));
o.color = v.color +
(factor > 0 ?
fixed4(0, 1, 0, 0) : fixed4(0, 0, 0, 0)
);
return o;
}

Оставляем только активный всполох
v2f o;
o.uv = v.uv;
float d = v.color.r - _Value;
float factor = 1.0 - step(_Threshold, abs(d));
o.position *= factor;
o.color = v.color +
(factor > 0 ?
fixed4(0, 1, 0, 0) : fixed4(0, 0, 0, 0)
);
return o;
}

Оставляем только активный всполох
v2f o;
o.uv = v.uv;
float angle = _Time.y * _RotationSpeed;
float3x3 R = {cos(angle), -sin(angle), 0,
sin(angle), cos(angle), 0,
0, 0, 1 };
v.position = float4(mul (R, v.position.xyz),
1);
...
return o;
}

PRO-TIP: темные кадры после вспышки
После всполоха можно добавить несколько темных
кадров во время «затухания», так мы сможем
имитировать остаточное изображение, ослепление.
Этот контраст помогает показать НАСКОЛЬКО
яркой была вспышка.
Edward del Villar

Финальный результат

код, слайды и контакты
Код и слайды будут доступны на моем сайте:
coremission.net/gamedev/kormishin-devgamm-minsk-2019
s.coremission@gmail.com

Shader magic: Breakdown of popular visual effects for games

так и думал, что вы спросите
NDA

Click to edit Master title style

Shader magic: Breakdown of popular visual effects for games

More Related Content

What's hot (20)

Similar to Shader magic: Breakdown of popular visual effects for games (20)

More from DevGAMM Conference (20)

Shader magic: Breakdown of popular visual effects for games