Розробка шейдерів води та рідин для графіки

Розробка шейдерів води та рідин для графіки

Вода — один з найтехнічно насичених візуальних ефектів у реальному часі. Переконливий результат вимагає одночасної роботи кількох систем: поверхневого шейдера з fresnel, нормал-мап анімації, foam маски, vertex displacement для хвиль, та правильно настроєного underwater ефекту. Кожна з цих частин впливає на продуктивність, та баланс між візуальною якістю та frame budget — це основна інженерна задача.

Архітектура шейдера води в ShaderGraph (URP)

У Universal Render Pipeline шейдер води будується в ShaderGraph на базі Unlit або Lit graph залежно від вимог до освітлення. Для мобільних ігор частіше Unlit з fake lighting через нормальну карту — це економить кілька draw calls та vertex shader invocations. Для PC/console — Lit з PBR-параметрами.

Ключові ноди та їх функція в водному шейдері:

Normal Map Scrolling. Два normal map texture sample з різними UV tiling та різними напрямками scroll (через Time + UV offset ноду). Overlay або Blend Normal нода для їх об'єднання. Це створює ілюзію хаотичної, живої поверхні без геометричних обчислень. Різні швидкості scroll критичні — якщо обидва texture рухаються з однаковою швидкістю, паттерн стає очевидно повторюючимся через ~5 секунд.

Fresnel ефект. Fresnel Effect нода + Lerp між двома кольорами води (глибокий та мілкий). Fresnel Exponent у діапазоні 2–5 для м'якого переходу. Для URP правильно використовувати NDotL через Normal та View Direction ноди замість спрощеного вбудованого Fresnel.

Depth Fade для піни. Scene Depth нода (Eye space) мінус Fragment Position дає відносну глибину. Через Smoothstep — маска foam у береговій лінії. Це один з найдешевших способів додати реалістичну піну, але вимагає Opaque Texture включеної в URP Asset (це додає додатковий blit pass, варто враховувати).

Vertex Displacement для хвиль. У ShaderGraph vertex блоці: Sine нода по UV + Time з різними frequency та amplitude для кількох «хвильових компонентів». Сумуємо 2–3 хвилі з різними Direction векторами — отримуємо Gerstner wave approximation без повної фізики. Важливо: displacement повинен бути помірним (0.1–0.5 одиниці) інакше з'являються z-fighting артефакти з об'єктами на воді.

HDRP Water System vs кастомний шейдер

У HDRP починаючи з Unity 2022 LTS є вбудований Water System — готовий high-quality компонент з tessellation, caustics, underwater rendering та foam simulation. Якщо проект на HDRP та не обмежений платформою — має сенс використовувати його як основу та кастомізувати через Water Decal та Water Mask.

Але у вбудованого Water System є обмеження: немає підтримки vertex-animated foam (тільки texture), Shader Graph customization обмежена специфічними Water surface shader нодами, немає можливості повного переопалення vertex shader. Для стилізованої графіки (cartoon, stylized cel-shading) кастомний шейдер у ShaderGraph гнучкіший.

Amplify Shader Editor — альтернатива ShaderGraph для проектів з legacy rendering або для команд, які звикли до node-based workflow, сумісного з Unity 5 стилем. Для води в Amplify особливо зручна Grab Pass node для рефракції — в URP це вимагає окремої Renderer Feature, а в Amplify це нода з параметрами.

Підводна частина та рефракція

Underwater ефект — окрема технічна задача. Коли камера перетинає water plane, потрібно: змінити post-processing (color grading + caustics + depth blur), додати screen-space distortion, опціонально — обмежити видимість fog'ом.

У URP це реалізується через Custom Renderer Feature + Volume override. Shader для підводного screen distortion: Blit Material з ShaderGraph, який застосовує Time-based UV distortion до Blit Texture. Активується через Camera overlay plane з OnTriggerEnter/Exit, який переключає Volume weights.

Рефракція води в URP вимагає включення Opaque Texture. На мобільних платформах це дорого — blit всього Opaque pass для одного ефекту. Альтернатива для мобільних: fake refraction через нормальну карту з UV offset на backdrop plane, без реального grab pass.

Кейс: вода для мобільної гри

Проект: мобільна 3D-стратегія, Unity 2022 LTS, URP Mobile. Вимога: море на фоні ігрового поля, 60fps на mid-range Android. Обмеження: максимум 0.5ms на water shader у frame budget.

Итоговий шейдер: два scrolling normal maps (256×256 px кожен, ASTC 6x6 стиск), Fresnel на дешевій NDotL апроксимації, foam через просту depth comparison без Opaque Texture (використовуємо Depth Texture замість Opaque Texture — вона дешевша), вертексний displacement через одну Sine ноду з двома амплітудами. Немає reflection — тільки cube map на Specular. Итоговий frame cost: 0.3ms на Galaxy A53.

Вартість розраховується після аналізу платформи, рендер-пайплайну та візуальних референсів.