Послуги з розробки шейдерів та візуальних ефектів

Шейдери та візуальні ефекти

Програміст додає воду в сцену — і отримує синій плоский прямокутник. Asset Store дає щось з 2018 року з артефактами на мобайлі. Написати нормальний водний шейдер своїми руками — задача нетривіальна: потрібно розуміти, як працює depth buffer, як семплювати нормалі в кілька шарів, як організувати foam на перетині з геометрією. Без цього розуміння шейдер або не працює, або убиває продуктивність.

Шейдери та VFX — область, де візуальна якість напрямки залежить від технічних знань рендер-пайплайну.

URP vs HDRP: вибір визначає інструментарій

URP (Universal Render Pipeline) — Оптимізований під широкий діапазон платформ, включно з мобайлом. ShaderGraph у URP підтримує більшість нод, але деякі можливості обмежені (об'ємне освітлення — лише через custom рішення, Screen Space Reflections — в обмеженому виді з версії 14+).

HDRP (High Definition Render Pipeline) — ПК та консолі, фотореалістичний рендеринг. Повний набір: Screen Space Reflections, Contact Shadows, Volumetric Fog, Decal Projectors, Water System (з Unity 2022.2). ShaderGraph у HDRP має додаткові ноди, специфічні для пайплайну (Diffusion Profile для SSS, Eye шейдер).

Це принципіальний момент: шейдер, написаний під HDRP, не буде працювати в URP та навпаки. Вибір пайплайну фіксується на старті проекту.

ShaderGraph: розробка custom шейдерів

ShaderGraph — нодовий редактор шейдерів у Unity. Дозволяє створювати шейдери без написання HLSL-коду. Але розуміння того, що відбувається "під капотом", необхідне — інакше граф буде працювати непередбачувано.

Водний шейдер на глибину

Вода — хороший приклад для розбору, тому що включає кілька незалежних техік:

1. Нормалі з рухом Два шари normal map текстур, семплювані з різними швидкостями та напрямками руху UV:

Time → Multiply (speed1) → Add → Sample Texture 2D (normalMap)
Time → Multiply (speed2) → Add → Sample Texture 2D (normalMap)
→ Normal Blend (обидва шари) → Normal (фрагментний шейдер)

Два рознонапрямлені шари створюють ефект бігучих хвиль без тайлової періодичності.

2. Глибина та foam

Через нод Scene Depth (лише URP/HDRP, Opaque texture повинна бути включена) отримуємо глибину під водою. Різниця між глибиною сцени та позицією фрагмента води дає water depth:

• Мала глибина (перетин з берегом, камнями) → пена (foam). Через Step або Smoothstep по цьому значенню створюється маска пени.
• Велика глибина → більш насичений синій, більш непрозорий.

3. Рефракція (спотворення дна)

Scene Color нод + зміщення UV по normal map. Дно "пливе" через воду. Важливо: Scene Color захоплює opaque-об'єкти, тому вода повинна рендеритися в Transparent очереді, після всієї непрозорої геометрії.

4. Fresnel та відбиття

Fresnel Effect нод — близько до нормалі до камери поверхня прозоріша, під гострим кутом — відбиває. Це фізично коректно для діелектриків. Поверх Fresnel-маски додається кубмап-відбиття або Reflection Probe.

Шейдер рослинності

Анімація кустів та трави без фізичної симуляції — через вертексний шейдер. У ShaderGraph:

• Нод Position (Object Space) → беремо XZ-координати вершини як фазовий зсув.
• Time → Sine з фазовим зсувом — отримуємо різну фазу для кожної вершини.
• Множимо на Vertex Color канал R (білий = качається, чорний = закріплений до землі) — основа куща не рухається.
• Add до позиції вершини по XZ.

Результат: трава качається хвилями, основа зафіксована. Для "вітру при бігу гравця" — додаємо CPU-параметр _PlayerPosition, обчислюємо напрям та силу впливу в шейдері.

VFX Graph: система частиц на GPU

VFX Graph — система частиц, виконувана повністю на GPU через Compute Shaders. Принципіальна різниця від Particle System (Shuriken): Shuriken працює на CPU, VFX Graph — на GPU. Це означає можливість керувати мільйонами частиц без навантаження на CPU.

Архітектура VFX Graph

Граф ділиться на контексти:

• Spawn Context — Умови спауна: burst (залп), constant rate (потік), подійний триггер.
• Initialize Context — Початкові значення атрибутів частиці: позиція, швидкість, розмір, колір, lifetime.
• Update Context — Логіка на кожному кадрі: гравітація, турбулентність, колізії, атрактори.
• Output Context — Як рисувати частицю: Quad, Mesh, Lit/Unlit, Distortion.

Приклад: вибух з шрапнеллю

Spawn: Single Burst (count: 200)
  ↓
Initialize:
  Position: Sphere Volume (radius: 0.1)  // точка вибуху
  Velocity: Spherical напрям * Random(5, 15)  // розсип швидкостей
  Size: Random(0.05, 0.3)
  Lifetime: Random(0.5, 2.0)
  Color: Gradient за lifetime (білий → оранжевий → сірий)
  ↓
Update:
  Gravity (force: -9.8)
  Drag (coefficient: 0.2)  // торможення повітрям
  Turbulence (intensity: 2.0)  // хаотичність
  Collision (SDF сцени або Depth Buffer)  // іскри від підлоги
  ↓
Output Quad (Unlit):
  Texture: іскра/горяча точка
  Blend Mode: Additive

Turbulence через VFX Graph використовує Noise Field — текстуру тривимірного шуму в просторі. Частиці відхиляються по цьому полю, створюючи органічний рух диму, вогню, магії.

Flipbook анімації в Output контексті — анімація спрайта для кожної частиці (вогонь, вибух, дим у виді послідовності кадрів). Flipbook Size задає сітку, Flipbook Index Blend — плавне змішення між кадрами.

Post-Processing

Post-processing — ефекти на фінальному зображенні після основного рендера. У Unity — через Volume систему (Local/Global Volume).

Стек для типічного action-проекту:

Amplify Shader Editor — альтернатива ShaderGraph для Unity, популярна до того, як ShaderGraph став стабільним. Ряд проектів все ще використовує ASE через більшу кількість готових прикладів та сумісність зі старими версіями Unity. За функціональністю сопоставна з ShaderGraph.

Що ми надаємо

• Розробка custom шейдерів у ShaderGraph (URP / HDRP): вода, рослинність, ефекти персонажів, голограми, dissolve.
• VFX Graph ефекти: вибухи, вогонь, дим, магія, окремо.
• Налаштування та оптимізація Particle System (Shuriken) для мобільних платформ.
• Побудова Post-Processing стека під візуальний стиль проекту.
• Портування шейдерів між URP та HDRP при смені пайплайну.
• Оптимізація VFX для цільової платформи: GPU instancing, LOD частиц, culling.