Пиксели пережили всё — от рассвета 8-битных приставок до эпохи 4K-мониторов. Их пытались заменить вектором, 3D-моделями и бесконечным количеством сглаживающих фильтров, но они всё ещё с нами — в играх, иконках и даже модных UI-дизайнах.

Почему же в 2025 году мы по-прежнему рисуем мир точками, как художник XIX века мазками на холсте? Разберёмся, в чём идея растровой графики, когда она незаменима и почему разработчики не спешат от неё отказываться.

У векторной графики есть несколько преимуществ, которые довольно полезны. Конечно, в пиксель-арт играх это не имеет смысла, но с векторной графикой можно было бы очень легко делать процедурные анимации так же, как и с 3D-моделями. Просто двигаешь векторы. С растровой графикой пришлось бы иметь все спрайты в наличии (или иметь какие-то невероятные алгоритмы).

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

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

Если вы посмотрите на такие игры, как Out Of This World (aka Another World) или более современные, например, Heart of Darkness (от того же разработчика, между прочим), они смогли использовать векторы, чтобы сделать действительно отличную графику даже на древних и медленных системах. Так что, рендеринг векторной графики — это не самая сложная часть.

И действительно, с преимуществами современных технологий, таких как IK и tweening, большим объёмом памяти и даже системами процедурной анимации, которые делают анимацию автоматически, вы можете получить тонны разных анимаций, действительно детальные и точные реакции на окружающую среду, непревзойдённую плавность и так далее.

Так почему не перейти на вектор? На бумаге он весит меньше, та же иконка в SVG может быть в сотни раз компактнее PNG. Вектор нужно каждый кадр просчитывать: кривые, заливки, трансформации. В статике это терпимо, а в динамике — лишняя нагрузка на процессор и драйвер. В результате студии идут проверенным путём: вектор остаётся в исходниках, а в билд попадает растр, который экран «ест» без лишних усилий.

Посмотрите на такие игры, как Petz с середины 90-х, которые явно использовали векторную систему внутри, но рендерили, используя z-сортированные растровые изображения для каждого сегмента тела, и получили действительно впечатляющие результаты даже на системах Windows 3.1 в те времена.

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

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

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

Поговорим, как GPU рендерит сцену

GPU-рендеринг по сути оптимизирован под массовую параллельную обработку вершин и пикселей — не по одной примитивной штуке, а по тысячам. В классической «трубопроводной» модели сначала идут вершинные этапы (vertex processing, трансформации, skinning и т.д.), потом формируются примитивы (обычно треугольники), выполняется сборка примитивов и клиппинг, а затем наступает растеризация. 

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

Текстурирование — это не просто «наклеивание картинки». Texture mapping на шейдере означает выбор texel’а из текстуры по UV-координатам, применение сэмплинга (bilinear, trilinear) и, при необходимости, выбор уровня детализации через mipmap. Mipmap-уровни — это заранее сгенерированные уменьшенные копии текстуры, которые используются для уменьшения aliasing’а и повышения производительности при отдалённых или мелкомасштабных объектах. Фильтрация (bi/tri/anisotropic) отвечает за то, как именно смешиваются соседние уровни и texel’ы, чтобы переходы выглядели гладко. Вся эта работа делегируется GPU-сэмплеру — аппаратному модулю, который делает это быстро и детерминированно.

Векторная графика требует иной модели. Чтобы отрисовать path’ы и кривые, их нужно аппроксимировать полигональными примитивами — процесс называют path tessellation. В простейшем варианте кривая разбивается на сегменты, каждый сегмент превращается в набор треугольников, добавляются геометрия для stroke/join/mitre, рассчитывается покрытие (coverage) для корректного anti-aliasing’а — и всё это создаёт резко возрастающее число примитивов, особенно при анимации и масштабировании.

Tessellation может выполняться на CPU или в GPU через compute/tessellation шейдеры, но в любом случае это дополнительная сложная работа в рантайме: нужно генерировать вершины, передавать их в буферы, сортировать, бэтчить — и это чревато ростом draw-call’ов и непредсказуемыми пиками нагрузки.

Не забудем про хранение и передачу данных: современные блочные форматы сжатия текстур (S3TC/DXT, ASTC и т.п.) позволяют хранить текстуры на видеопамяти в сжатом виде и загружать их прямо в GPU без разжатия на CPU. Это экономит VRAM и пропускную способность PCIe/памяти, даёт возможность держать в памяти огромные наборы карт и эффективно стримить их. С векторными данными такой «блоковой» экономии нет: векторный path сам по себе лёгок, но его аппроксимация и runtime-генерация приводят к расходам, которые трамплином «съедают» выигрыш по размеру исходника.

Игры любят растры

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

Финальная сцена GPU всегда сводится к пикселям. Любой объект, от реалистичной текстуры Шрека до пиксель-арта Марио, в итоге делится на много-много пикселей по экрану. Как в таком случае детализировать картинку? А с помощью приёмов texture mapping, mipmap-уровням и фильтрации.

С практической точки зрения ключевые преимущества растровых текстур в играх — это батчинг и предсказуемость. Texture atlas и агрегирование геометрии позволяют отправлять на отрисовку тысячи элементов с минимальным количеством state-change и draw-call’ов. Меньше draw-call’ов = меньше переключений контекста на CPU, ниже нагрузка на драйвер и лучший общий FPS. Для UI и HUD это особенно важно: заранее отрисованные спрайты и шрифты легко бэтчатся, их визуал всецело контролирует художник, и на рантайме GPU «ест» уже готовые texel’ы, не считая сложных математических операций.

Ещё одно преимущество растров — предсказуемость визуала. Художник может выставить каждый пиксель точно так, как нужно, и быть уверенным, что на разных устройствах результат будет тот же. Это причина, почему стили вроде Terraria и Stardew Valley остаются узнаваемыми и при этом экономят ресурсы команды. Можно сказать, что геймдизайнер формирует настроение сцены, чего достичь при векторной графике будет сложнее. То же правило работает и в AAA: фотореализм в Cyberpunk 2077 или RDR2 во многом держится на массивных растровых пакетах — мелкие дефекты кожи, текстура мокрого асфальта, прожилки на листьях — всё это удобно и эффективно хранить как растровые текстуры.

Вектор подходит для логотипов, иконок, схем. Но в динамике требует сложных рантайм-вычислений. Поэтому рабочая схема выглядит так: вектор остаётся в исходниках у дизайнера, а в билде — предрендеренный растр, проверенный и оптимизированный под конкретные разрешения.

Добавлю детали из свежих кейсов. В инди-сегменте пиксель-арт уже почти стал идеологией. В том же Stardew Valley весь мир создавался так, чтобы каждая деталь считывалась моментально и в то же время мог бы красиво рендериться хоть на ультравысоком разрешении, хоть на мобильном экране. В Turbo Golf Racing или Spongebob: Krusty Cook-off UI реализован миксом векторных и растровых элементов — художники используют вектор для простых иконок и текста, а всю глубину и «вкус» создают через растр, особенно для эффектов и детализированных фонов.

Из этого долгого сплава инженерных, художественных и маркетинговых решений и растёт нынешнее доминирование растровой графики — и в инди, и в самых дорогих играх современности.

Интерфейсы тянутся к векторам, но не полностью

На дисплеях нового поколения линии уже невозможно посчитать на глаз — пиксели стали слишком мелкими. И тем не менее дизайнеры по‑прежнему спорят, в каком виде хранить и рисовать иконки и элементы интерфейса. Но этот идеал работает лишь до тех пор, пока дело не доходит до реального рендеринга, где железо и движки ведут себя куда прозаичнее.

Да, иконка в SVG может весить считаные килобайты, а на экране смартфона c 500+ ppi выглядеть острее лезвия. Но достаточно добавить мягкую тень, свечение или анимацию, и браузер или ОС тут же, без лишних слов, запечёт её в растр и будет гонять уже как текстуру. Не из прихоти — а просто потому, что так быстрее, особенно если иконок не одна, а тысячи. Вектор предпочитают в дизайне системных UI, но на пути к пользователю он почти всегда проходит растровую «переплавку».

Material UI, Windows и macOS предлагают иконки именно в SVG.

Однако переход на стопроцентный вектор в интерфейсах так и не случился. Главная причина спрятана в деталях рендеринга. Всё, что выглядит простым на макете в Figma, может вызвать лавину технических проблем при реальной эксплуатации. Современные GPU по-прежнему ориентированы на растр, поэтому для сложных визуальных эффектов — мягких теней, бликов, размытий, градиентов — приходится предпринимать дополнительные шаги. 

Эти эффекты намного проще и быстрее рисовать на «битмапе», чем реализовывать средствами SVG: для теней приходится эмулировать размытие, для сложных анимаций — создавать множество промежуточных состояний, а иногда банально растрировать готовую картинку до отображения. 

Если интерфейс перенасыщен элементами, каждая анимация или скролл весят много: векторные пути разбиваются на треугольники, вычисляются правила заливки, stroke-эффекты. Всё это требует времени и ресурсов даже с технически продвинутыми браузерами и ОС.

Психология восприятия — почему глаз «любит» 

Когда дело доходит до восприятия графики, глаз и мозг чутко реагируют на внутрянку изображения, мелкие детали. Исследования показывают: именно детали и цвета на уровне пикселей, а также «шумистая», неоднородная текстура создают ощущение натуральности даже при минимальном разрешении. Пиксельные и фототекстуры комфортны из-за микродеталей: всё дело в периферийном зрении — появляется эффект присутствия и некая глубина.

Данный феномен широко используется в современной графике: растровую текстуру добавляют даже на «чисто» векторные объекты, чтобы усилить иллюзию натуральности и облегчить когнитивное восприятие на малых размерах — эта тактика подтверждена работой UI-дизайнеров, игровых художников и проведёнными A/B тестами.

Гибридные приёмы — где векторы уже побеждают (и почему)

Есть обходные пути — SDF (signed distance fields) для текста и иконок, векторные рендеры на основе расстояний, GPU-специфичные расширения (например, NV_path_rendering) или использование compute shader’ов для векторной растеризации. Они работают и имеют свои места, но у каждого подхода компромиссы: SDF хорошо для контурных форм и текста в ограниченном диапазоне масштабов, NV-расширения платформенно зависят, а compute-подходы могут съесть значительное количество циклов и памяти по сравнению с простым выбором texel’а. То есть вектор на лету часто дороже и сложнее, чем предрендеренный растр.

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

Аппаратные возможности тоже не стоят на месте: технология GPU path rendering, например, NV_path_rendering от Nvidia, предлагает аппаратную поддержку векторного растеризации непосредственно на уровне видеокарт. Однако пока подобные решения внедряются не повсеместно и остаются скорее ниши для узкопрофильных задач и профессиональных графических приложений.

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

Видите ли разницу в том, какая графика используется? Или было ли у вас такое, что картинка режет глаза в играх или дизайне? Делитесь мнением в комментариях!

© 2025 ООО «МТ ФИНАНС»