← К оглавлению
Alterna · глава 20.2

Растр и вектор. Форматы. 3D

Разрешение, форматы, масштабирование без потерь, основы 3D-графики.

Растр: пиксели и разрешение

Растровое изображение — сетка пикселей (точек). Разрешение = количество пикселей по горизонтали × вертикали. DPI (dots per inch) — плотность пикселей при печати. Физический размер = разрешение / DPI × 25.4 мм.

Размер при печати
Объём (бит)
Объём (МБ, без сжатия)
МП (мегапикселей)

Пример: 4000×3000, 24 бита, 300 DPI

Размер печати = 4000/300×25.4 ≈ 338×254 мм (A3). Объём = 4000×3000×24 = 288 000 000 бит ≈ 34.3 МБ. При 96 DPI экранный размер ≈ 416×312 пикселей.

Форматы растровой графики

ФорматСжатиеПрозрачностьТипичный размер
(4000×3000, 24 бит)
Применение
BMPнет~34.3 МБСохранение без потерь, Windows
JPEGlossy3–8 МБФото, веб-изображения. Сжатие 10–20×
PNG-8lossless1 бит5–12 МБВеб-графика, иконки, скриншоты
PNG-24lossless~25 МБСкриншоты, диаграммы, арт
WebPlossy/losslessда2–5 МБВеб (Google), анимированные стикеры
TIFFoptionalда~40 МБПрофессиональная фотография, полиграфия
RAWnoneда~50 МБЦифровые камеры, 48-битный цвет
GIFlossless1 бит (простое)2–10 МБАнимация, 256 цветов макс.

Векторная графика

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

📐 Кривые Безье

Математическая кривая, описываемая 4 точками: начало, конец и две контрольные. Кривая непрерывно проходит между началом и концом, «притягиваясь» к контрольным точкам.

📄 Форматы

SVG — веб-вектор (текстовый XML). AI — Adobe Illustrator. EPS — универсальный для печати. PDF — вектор+растр. CDR — CorelDRAW.

🎯 Когда вектор лучше

Логотипы, иконки, шрифты, чертежи, картография. Фотографии — всегда растр: слишком много деталей для векторизации.

Растр vs Вектор Растр: честный пиксель → легко редактируется, но масштабируется с потерей качества (зум в 4× = размытие). Размер файла = X·Y·i.
Вектор: формулы и кривые → масштабируется бесконечно без потерь, но не подходит для фотореализма. Размер файла зависит от сложности сцены, а не от площади.
🔍 Интерактив: масштабирование растра vs вектора

Два изображения: растр (пиксельная сетка) и вектор (кривая). Увеличь масштаб — растр «поплывёт», вектор останется чётким.

Растр (bitmap)

Пиксели фиксированы. При зуме — ступенчатые артефакты.

×1

Вектор (SVG-подобный)

Линии и кривые. При зуме — пересчёт формул.

×1

Основы 3D-графики

3D-объект описывается набором полигонов (треугольников или четырёхугольников), текстурами (растровыми картами), материалами и освещением. Рендеринг — преобразование 3D-сцены в 2D-изображение.

🧊 Полигоны и меш

Меш — набор вершин (vertices), рёбер (edges) и граней (faces). Чем больше полигонов — тем детальнее модель, но больше вычислений. High-poly → millions, low-poly → hundreds.

Модель человека: ~100 000 полигонов. Игровой персонаж: ~10 000. Фонтан: 500–2000.

🎨 Текстуры и материалы

Текстура — растровое изображение, «обёрнутое» вокруг полигона. UV-развёртка — проекция 3D-поверхности на 2D для наложения текстур. Нормаль-карта — имитация рельефа без добавления полигонов.

ФорматНазначениеТипПримеры
OBJГеометрия (вершины, полигоны)ТекстПростой обмен, 3D-печать
STLТолько геометрия поверхностиТекст/бинарный3D-печать, CAD
FBXГеометрия + анимация + материалыБинарныйUnity, Unreal, Maya
glTF / GLBWeb-ready 3D (JSON + бинарные буферы)JSON / бинарныйВеб, Three.js, Blender
BLENDНативный формат BlenderБинарныйМоделирование, рендер
DAEКоллада — универсальный обменXMLВеб, игровые движки
Формула объёма (дискретизация, гл. 9.4) Объём 3D-рендера в секунду: Iframe = X × Y × i × Kfps
Где i — глубина цвета, K — количество кадров в секунду. Для 4K (3840×2160), 24 бит, 60 fps: I = 3840×2160×24×60 ≈ 11.9 Гбит/с — именно поэтому нужны мощные GPU.
🎮 Интерактивный 3D-куб (Canvas)

Вращающийся куб. Используется матрица поворота и проекция 3D→2D. Каждая грань — полигон.

🎯

Мини-тест: 5 вопросов

XP: 0