Двумерная графика

Двумерная графика (2D-графика, от англ. two-dimensional — «двумерный») — это раздел компьютерной графики, охватывающий создание, обработку и отображение визуальных изображений, имеющих два измерения: ширину и высоту. В отличие от трёхмерной графики, двумерная графика не оперирует глубиной сцены (осью Z) и не использует сложные алгоритмы расчёта перспективы, освещения и текстурирования трёхмерных объектов. Основными элементами изображения в двумерной графике являются точки (пиксели), линии, геометрические фигуры и текст. Она является исторически первой и наиболее распространённой формой компьютерной визуализации, применяемой в интерфейсах пользователя, веб-дизайне, полиграфии, анимации, компьютерных играх (особенно в жанрах платформеров, квестов и стратегий), а также в системах автоматизированного проектирования (САПР) и картографии.

История

Докомпьютерная эпоха и первые ЭВМ

Истоки двумерной графики лежат в традиционных художественных техниках — рисунке, живописи, гравюре, мозаике. С появлением первых электронно-вычислительных машин (ЭВМ) в 1940–1950-х годах возникла необходимость в визуализации результатов вычислений. Первые изображения были исключительно символьными: на алфавитно-цифровых печатающих устройствах (телетайпах, принтерах) строились графики из символов ASCII (псевдографика). Примером может служить программа «Dartmouth BASIC» (1964), позволявшая выводить простые линии и фигуры.

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

В 1960-х годах с появлением дисплеев на электронно-лучевых трубках (ЭЛТ) началось развитие двух основных подходов к представлению изображений:

• Векторная графика (1960-е): Изображение описывается математическими формулами — прямыми, кривыми (сплайнами), многоугольниками. Первые векторные дисплеи (например, в системах SAGE и Sketchpad Ивана Сазерленда, 1963) требовали постоянной перерисовки кадра, но позволяли создавать чёткие линии без пикселизации.
• Растровая графика (1970-е): Изображение представляется в виде матрицы (растра) точек — пикселей, каждая из которых имеет свой цвет. Развитие растровой графики было связано с появлением полупроводниковой памяти и видеоконтроллеров. Первый коммерческий растровый дисплей — IBM 2250 (1964).

Эра персональных компьютеров

Массовое распространение двумерная графика получила с появлением персональных компьютеров в 1980-х годах. Ключевые вехи:

• 1981 — IBM PC с видеоадаптером MDA (монохромный текст) и CGA (цветная графика 320×200 пикселей, 4 цвета).
• 1984 — Apple Macintosh с графическим интерфейсом пользователя (GUI), основанным на растровой графике (QuickDraw).
• 1985 — Появление формата GIF (CompuServe), ставшего стандартом для анимации в интернете.
• 1990-е — Массовое внедрение графических ускорителей (видеокарт) для 2D-акселерации (GUI, видео, игры). Развитие форматов JPEG (1992) и PNG (1996).

Современность

В XXI веке двумерная графика продолжает развиваться в направлении фотореализма (растровая графика высокого разрешения), сложной векторной анимации (Adobe Animate, Spine), а также интеграции с трёхмерными технологиями (рендеринг 2D-сцен с использованием 3D-движков для эффектов освещения и параллакса). Большую роль играют алгоритмы сглаживания (антиалиасинг), субпиксельного рендеринга и компрессии изображений.

Классификация

Двумерная графика делится на три основных типа в зависимости от способа представления данных:

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

Изображение представляет собой прямоугольную сетку пикселей (точек) фиксированного размера. Каждый пиксель хранит информацию о цвете (обычно в цветовой модели RGB или CMYK) и, возможно, о прозрачности (альфа-канал). Разрешение растрового изображения измеряется в пикселях на дюйм (dpi) или в общем количестве пикселей (например, 1920×1080). Основные форматы: BMP, JPEG, PNG, GIF, TIFF. Достоинства: Высокая детализация и фотореалистичность; поддержка сложных цветовых переходов; простота обработки (фильтры, коррекция). Недостатки: Сильная зависимость качества от разрешения (при масштабировании вверх появляется пикселизация); большой размер файлов (особенно для несжатых изображений); потеря качества при сжатии с потерями (JPEG).

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

Изображение описывается математическими объектами — примитивами (точки, отрезки, кривые Безье, окружности, многоугольники) и их атрибутами (цвет заливки, толщина и цвет контура, прозрачность). Положение объектов задаётся в системе координат (обычно декартовой). Основные форматы: SVG, EPS, AI, CDR, PDF. Достоинства: Независимость от разрешения (масштабирование без потери качества, вплоть до любого увеличения); малый размер файлов для простых изображений; лёгкость редактирования отдельных элементов (формы, цвета, размера). Недостатки: Сложность воспроизведения фотореалистичных изображений (требует огромного числа примитивов); ограниченная поддержка сложных цветовых переходов (градиенты, текстуры); зависимость от программного обеспечения для просмотра и редактирования.

Фрактальная графика

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

Устройство и характеристики

Пиксель

Минимальная единица растрового изображения. Представляет собой квадрат (или прямоугольник) одного цвета. Глубина цвета пикселя определяет количество возможных оттенков: 1 бит (монохром), 8 бит (256 цветов), 24 бита (16,7 млн цветов, True Color), 32 бита (True Color + альфа-канал).

Разрешение

Характеристика, определяющая количество пикселей на единицу длины (dpi — dots per inch) или общее количество пикселей по ширине и высоте. Для экранной графики стандартным является 72–96 dpi, для полиграфии — 300 dpi и выше.

Цветовые модели

• RGB (Red, Green, Blue) — аддитивная модель, используемая в мониторах, телевизорах, цифровых камерах. Цвет получается путём сложения красного, зелёного и синего лучей.
• CMYK (Cyan, Magenta, Yellow, Key/Black) — субтрактивная модель, используемая в полиграфии. Цвет получается путём вычитания из белого света поглощаемых красителями цветов.
• HSV/HSL (Hue, Saturation, Value/Lightness) — модель, описывающая цвет через тон, насыщенность и яркость/светлоту. Удобна для ручного подбора цветов.

Сглаживание (Антиалиасинг)

Технология, уменьшающая видимость «лестничного эффекта» (алиасинга) на наклонных линиях и кривых. При сглаживании пиксели на границе объекта окрашиваются в промежуточные цвета, создавая иллюзию плавного перехода. В векторной графике сглаживание применяется при растеризации (рендеринге) изображения.

Применение

Графический интерфейс пользователя (GUI)

Все современные операционные системы (Windows, macOS, Linux, Android, iOS) используют двумерную графику для отображения окон, кнопок, иконок, меню и текста. Библиотеки GUI (Qt, GTK, WinAPI) работают на основе 2D-рендеринга.

Веб-дизайн и цифровые медиа

Веб-страницы строятся с использованием HTML и CSS, которые описывают двумерное расположение элементов (блоков, изображений, текста). Форматы JPEG, PNG, GIF и SVG являются основой для изображений в интернете. Анимация в формате GIF и CSS-анимация также относятся к двумерной графике.

Компьютерные игры

Долгое время двумерная графика была единственным типом визуализации в играх. Даже после появления 3D-игр 2D-графика сохраняет популярность в инди-разработке, в жанрах платформеров (Super Mario, Celeste), квестов (Monkey Island), стратегий (Age of Empires), визуальных новелл и RPG с изометрической проекцией (Diablo, Fallout). Современные 2D-игры часто используют спрайты (растровые изображения персонажей и объектов) и тайлы (плитки для построения уровней).

Полиграфия

Вся печатная продукция (книги, журналы, плакаты, упаковка) базируется на двумерной графике. Для вёрстки используются векторные форматы (PDF, EPS), для фотографий — растровые (TIFF, JPEG). Цветовая модель CMYK является стандартом для полиграфии.

Системы автоматизированного проектирования (САПР)

Программы AutoCAD, Компас-3D, SolidWorks используют двумерные чертежи (векторные) для проектирования деталей, зданий, схем. 2D-чертёж является основой для создания трёхмерных моделей.

Научная и медицинская визуализация

Графики, диаграммы, карты, рентгеновские снимки, УЗИ-изображения — всё это примеры двумерной графики. Специализированное ПО (Matlab, Origin, DICOM-просмотрщики) обрабатывает и отображает такие данные.

Инструменты и программное обеспечение

Растровые редакторы

• Adobe Photoshop — профессиональный редактор для фотообработки, цифрового рисования, дизайна.
• GIMP (GNU Image Manipulation Program) — свободный аналог Photoshop с широкими возможностями.
• Krita — специализированный редактор для цифровой живописи и 2D-анимации.
• Paint.NET — бесплатный редактор для Windows с простым интерфейсом.

Векторные редакторы

• Adobe Illustrator — профессиональный редактор для создания логотипов, иллюстраций, иконок.
• CorelDRAW — популярный редактор для полиграфии и векторной графики.
• Inkscape — свободный векторный редактор с поддержкой SVG.
• Figma — облачный редактор для UI/UX-дизайна, работающий с векторной графикой.

Библиотеки и фреймворки для разработки

• OpenGL — кроссплатформенный API для 2D- и 3D-графики.
• Direct2D — API от Microsoft для аппаратно-ускоренной 2D-графики.
• Skia — библиотека 2D-графики, используемая в Chrome, Android, Flutter.
• Cairo — библиотека для 2D-рендеринга с поддержкой антиалиасинга.
• Pillow (PIL) — библиотека Python для работы с растровыми изображениями.

Интересные факты

• Первым компьютерным изображением, созданным с помощью дисплея, считается рисунок «Baby» (1949) на компьютере Manchester Mark I, представлявший собой простую линию.
• Формат GIF (Graphics Interchange Format) был разработан в 1987 году компанией CompuServe для сжатия изображений с ограниченной палитрой (256 цветов). В 1989 году была добавлена поддержка анимации.
• Алгоритм сжатия JPEG (Joint Photographic Experts Group) использует дискретное косинусное преобразование (DCT), что позволяет значительно уменьшить размер файла за счёт потери высокочастотных деталей, незаметных для человеческого глаза.
• Понятие «пиксель» (pixel) происходит от сокращения «picture element» (элемент изображения). Термин был введён в 1965 году Фредом Биллингсли.
• Векторная графика широко используется для создания шрифтов (TrueType, OpenType), что позволяет масштабировать текст без потери качества на экранах с любым разрешением.

Источники

• Фоли Дж., ван Дам А. Основы интерактивной компьютерной графики. — М.: Мир, 1985.
• Роджерс Д. Алгоритмические основы машинной графики. — М.: Мир, 1989.
• Шикин Е. В., Боресков А. В. Компьютерная графика. Динамика, реалистические изображения. — М.: Диалог-МИФИ, 1996.
• Adobe. Документация по Photoshop и Illustrator.
• W3C. Спецификация SVG 1.1.
• ISO/IEC 10918-1:1994 (JPEG).
• ISO/IEC 15948:2004 (PNG).