Растровая и векторная графика

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

Растровая графика хранит цвет каждого пикселя; векторная графика хранит математическое описание фигур (точки, линии, кривые) и рисует их на лету.

Зачем это знать

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

Растр: сетка пикселей

Фотографии, скриншоты, текстуры — это растр. Плюс: можно изобразить что угодно, любой сложный цвет. Минус: фиксированное разрешение. Увеличишь — увидишь квадратики (пикселизацию), потому что новых деталей взять неоткуда.

Растр буквы L при увеличении:

. # . . .        . . # # . . . . . .
. # . . .   -->  . . # # . . . . . .
. # . . .        . . # # . . . . . .
. # # # .        . . # # # # # # . .
. . . . .        . . # # # # # # . .

Вектор: формулы фигур

Логотипы, шрифты, иконки (SVG) — это вектор. Линия задаётся двумя точками, окружность — центром и радиусом. Плюс: масштабируется без потери качества — формулу можно вычислить с любой точностью. Минус: тяжело описать фотореалистичную сложность, и всё равно в финале нужно перевести в пиксели.

Проверим главное преимущество вектора — независимость от масштаба. Окружность задана центром и радиусом; точки на ней считаются формулой при любом разрешении.

import math

def circle_points(cx, cy, r, steps):
    pts = []
    for i in range(steps):
        a = 2 * math.pi * i / steps
        x = cx + r * math.cos(a)
        y = cy + r * math.sin(a)
        pts.append((round(x, 2), round(y, 2)))
    return pts

print("r=1:", circle_points(0, 0, 1, 4))
print("r=10:", circle_points(0, 0, 10, 4))

Вывод:

r=1: [(1.0, 0.0), (0.0, 1.0), (-1.0, 0.0), (-0.0, -1.0)]
r=10: [(10.0, 0.0), (0.0, 10.0), (-10.0, 0.0), (-0.0, -10.0)]

Одна и та же формула даёт идеальную окружность и для радиуса 1, и для 10 000 — масштаб не «ломает» качество.

Как работает под капотом

Любой векторный объект перед показом на экране проходит растеризацию: система решает, какие пиксели накрывает фигура, и закрашивает их. Чтобы края не были «лесенкой», применяют сглаживание (антиалиасинг): пиксели на границе получают промежуточный цвет пропорционально тому, какую долю пикселя накрывает фигура. Именно поэтому 3D-движок, оперирующий векторными треугольниками, в финале всё равно растеризует их в пиксели фрагментными шейдерами.

Частые ошибки

• Считать SVG «всегда лучше» PNG: для фотографии вектор бесполезен, растр незаменим.
• Ожидать резкости при увеличении растрового изображения — детали взять неоткуда.
• Забывать, что текст и UI в играх часто растеризуют из векторных шрифтов каждый кадр.

Итоги

• Растр = сетка пикселей: универсален, но привязан к разрешению.
• Вектор = формулы фигур: масштабируется без потерь, но плохо передаёт фотосложность.
• 3D-геометрия векторна, но всегда растеризуется в пиксели перед выводом.
• Антиалиасинг сглаживает края, давая пограничным пикселям промежуточный цвет.