Оптимизация VFX в мидкор-играх: часто overlooked методы и продвинутые техники

Ведущий VFX-художник студии Azur Games Станислав Стабров делится практическими техниками оптимизации визуальных эффектов в мидкор-мобильных играх. В центре внимания — игра Kingdom Clash, где сражаются две большие армии фэнтезийных юнитов и героев, каждый со своими классами, способностями и визуальными эффектами.

Зрелищность и визуальное качество здесь очевидно важны. Но когда разработчики слишком сосредоточены на графике и скорости производства, сложные эффекты часто создаются без должного внимания к оптимизации. В крайних случаях это может даже поставить под угрозу релиз. На самом деле эффекты можно изначально проектировать так, чтобы они хорошо выглядели, стабильно работали и не создавали чрезмерной нагрузки на устройство. Однако базовые принципы оптимизации часто игнорируются — из-за ограниченного опыта, нехватки внимания или простого производственного давления. Результат — тяжелые эффекты и заметные просадки FPS.

📦 Шаг 1. Определяйте простые эффекты и запекайте их в текстуры

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

Самый простой и радикальный подход — захватить отдельные части взрыва или даже весь взрыв и запечь результат в текстуру. Вместо спавна вспышки и целого набора систем частиц для расширяющейся волны можно рендерить эффект всего двумя частицами: одна для вспышки, одна для волны. В сценарии, где маленькие эффекты появляются часто и в больших количествах, разницу заметит только тот, кто специально изучает эффект. Например, плохо оптимизированный удар снаряда использует несколько систем частиц (около 30 частиц). После оптимизации: отключаем системы вспышки, оставляем волну, позиционируем её перед изометрической камерой и захватываем как текстуру. Затем заменяем оригинальные системы волны одной частицей с захваченной текстурой. Эффект теряет часть внутреннего движения, но сохраняет общий силуэт. Количество частиц падает до 10. Применяем тот же процесс к вспышке и получаем всего 2 частицы. Если десять копий эффекта срабатывают одновременно, оптимизация сокращает общее количество с 300 до 20 частиц.

У этого метода есть ограничения: эффекты должны быть маленькими, быстрыми, частыми и визуально второстепенными. Чем крупнее, медленнее и реже эффект, тем больше отдельных слоёв нужно сохранять. Отсюда первое общее правило работы с частицами: когда возможно, закладывайте детализацию в текстуру, а не создавайте её через количество частиц. Лучше создать одну сложную текстуру и спавнить несколько её копий, чем воссоздавать ту же картинку множеством простых частиц. Лимиты зависят от проекта: в дуэли двух персонажей, которые кастуют заклинание раз в минуту, сотни частиц допустимы. Но в Kingdom Clash две армии с сотнями юнитов могут сражаться одновременно, и каждый генерирует свои эффекты. Поэтому лимиты там могут быть всего 3–10 частиц на эффект.

📐 Шаг 2. Сокращайте число частиц, увеличивая их размер

Частая ошибка — заполнять объём дыма большим количеством мелких частиц, когда то же облако можно представить гораздо меньшим числом крупных частиц. Тот же принцип применим к искрам: обычно не нужно огромное количество, чтобы эффект выглядел хорошо. Игроку вряд ли важно, было ли испущено 100 искр или 30 — а устройству важно. Плохо оптимизированный эффект с облаком из множества мелких частиц дыма и избыточными искрами может содержать 200 частиц. Оптимизированная версия выглядит немного проще, но почти не теряет сути: облако формируется из меньшего числа крупных частиц, а искры используются только как акцент. Итог — 50 частиц. Помните: увеличение размера частиц увеличивает и overdraw, но в большинстве случаев эта дополнительная стоимость компенсируется гораздо меньшим общим количеством крупных частиц.

🕸️ Шаг 3. Заменяйте частицы мешем и шейдером

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

🎨 Шаг 4. Снижайте overdraw

Рендерер обрабатывает покрытие частиц попиксельно. Удвоение ширины и высоты квадратной частицы увеличивает её площадь на экране — и число затронутых пикселей — в четыре раза. Самый базовый способ предотвратить проблемы overdraw — правильно готовить текстуры эффектов. Видимое изображение должно занимать как можно больше площади текстуры, без больших прозрачных пустых зон. Вся текстурированная квадратная площадка всё равно рендерится. Сокращая пустое пространство вокруг видимой части, можно значительно снизить пиксельную нагрузку. Красные зоны на примерах — неиспользуемое пространство, которое игрок не видит, но рендерер обрабатывает. Чтобы ещё сильнее сократить неиспользуемую область, можно изменить меш, несущий текстуру. Если силуэт текстуры относительно простой, меш можно подогнать под этот силуэт. Стандартный квадратный билборд оставляет небольшие зоны неиспользуемого покрытия; кастомный меш с дополнительными вершинами срезает лишнюю площадь. Сложный меш оправдан для крупных частиц — вспышек, ударных волн, вихрей. Для облака мелких частиц добавлять вершины бессмысленно. Эта техника не влияет на качество эффекта, но может значительно улучшить производительность.

⚙️ Шаг 5. Оптимизируйте модули системы частиц

Модули Particle System имеют разную стоимость. Включение многих из них без необходимости создаёт лишние накладные расходы. Включайте только те модули, которые нужны для достижения нужного визуала. Модули, которые не стоит включать без явной причины: Collision, Noise и Trails. Их поведение можно аппроксимировать более простыми модулями. Например, вместо Collision можно резко останавливать частицы через Limit Velocity over Lifetime, настраивая тайминг так, чтобы частицы теряли скорость, визуально достигая земли. Для псевдослучайного движения вместо Noise можно аккуратно настроить кривые в Velocity over Lifetime. Также избегайте избыточного количества сложных кривых в настройках, когда более простые дают сопоставимый результат.

🔗 Шаг 6. Сокращайте draw calls

Меньше draw calls — меньше работы для конвейера рендеринга. Совместимые системы частиц с одним материалом могут быть батчены. Один из самых распространённых способов — упаковка текстур эффектов в текстурный атлас. Атлас можно использовать как общий материал для множества эффектов, что даёт системе больше возможностей для батчинга. Также помогает гибкий общий VFX-шейдер: он может открывать параметры, которые чаще всего меняются между эффектами — яркость, интенсивность эмиссии, скорость панорамирования, обработку альфа-канала. Эти значения передаются через модуль Custom Data системы частиц. Это значит, что сделать частицу ярче или изменить скорость шума не требует создания новой текстуры или отдельного материала — параметр меняется прямо в системе частиц. В итоге сокращается число ненужных вариантов материалов в сцене.

💻 Шаг 7. Оптимизируйте VFX-шейдеры

Шейдеры частиц могут быть неэффективными или слишком дорогими для мобильного железа. Основное внимание — снижение стоимости кода фрагментного шейдера. GPU исторически очень эффективны в базовых арифметических операциях: умножение, сложение, вычитание. Более сложные операции — возведение в степень, тригонометрические функции — обычно значительно дороже. Логика шейдера должна опираться на простую арифметику: +, *, -, / и функции на их основе, например lerp(). Функции saturate() и abs() тоже обычно дёшевы. Дорогие операции: sin(), cos(), atan2(), тригонометрия в целом, pow(). Их не стоит запрещать, но использовать надо осознанно. GrabPass{} в мобильной разработке тоже лучше избегать.

Если сложный шейдер с тригонометрией (например, с полярными координатами) всё же нужен, его частицы должны быть редкими и занимать мало места на экране. Простой шейдер с одной текстурой и парой арифметических операций можно использовать свободно. Часть вычислений можно перенести из фрагментного шейдера в вершинный. Это работает для операций, не требующих попиксельной точности. Например, UV-офсет для панорамирования текстуры можно считать в вершинном шейдере — для квада это всего четыре вычисления, независимо от числа пикселей на экране. Умножение яркости можно объединить с вершинным цветом. Макрос Transform (тайлинг и офсет текстуры) тоже переносится в вершинный шейдер, экономя две операции во фрагментном. Интуитивное правило: вычисление можно перенести из фрагментного шейдера в вершинный, если оно применяется равномерно ко всему изображению. Но ответ зависит и от плотности меша: чем плотнее меш, тем более детальные вычисления можно делать в вершинном шейдере. Эффект Френеля — хороший пример компромисса: его можно посчитать в вершинном шейдере, но гладкость будет зависеть от плотности меша. В какой-то момент лучше оставить Френель во фрагментном шейдере, чем усложнять меш.

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

🍓 Sweet Berries — это самый выгодный способ пополнить счёт в мобильных играх. Быстрый донат с самой низкой комиссией в РФ. Гарантия сохранности вашего аккаунта.