О разделе
Разработка графики — это программирование движущейся картинки: массивы чисел в памяти, цикл обновления, команды отрисовки и путь до монитора.
Раздел помогает прочитать чужой .js или .py с игрой или визуализацией и понять, где в файле данные, где логика, а где команды холсту.
Смежные разделы энциклопедии
- 1.16 Графика — пиксель, растр, вектор, стек GPU, FPS
- 4.18 (этот раздел) — как то же устроено в коде
- 9.08 Компьютерная графика — углублённая теория и 3D
- Canvas 2D, Pygame — синтаксис на конкретном языке
Для кого
| Роль | Что получите |
|---|---|
| Начинающий разработчик | карта понятий до Canvas, Pygame или Unity |
| Читатель чужого кода | где модель, физика, отрисовка в одном файле |
| Веб-разработчик | Canvas 2D, DOM, WebGL, requestAnimationFrame |
| Игровой разработчик | цикл update и render, FSM, сцена, culling |
| Инженер по производительности | VRAM, frame time, узкие места CPU и GPU |
База — что такое код. Желательно пройти графические данные.
Рекомендуемый порядок
| Шаг | Статья | Содержание | Время |
|---|---|---|---|
| 1 | От чисел к картинке | три слоя, конвейер, демо | 20–30 мин |
| 2 | Архитектура — модель, update, render | MVC, координаты, чтение чужого файла | 30 мин |
| 3 | Паттерны — цикл и FSM | игровой цикл, состояния меню | 25 мин |
| 4 | Структуры данных сцены | массивы, дерево, culling | 25 мин |
| 5 | Математика 2D/3D | векторы, матрицы, sin и cos | 45–60 мин |
| 6 | High-Level API | холст, окно, ввод | 30 мин |
| 7 | Веб — Canvas и WebGL | браузер, Skia, ANGLE | 40 мин |
| 8 | Python — Pygame и SDL | окно, surface, flip | 30 мин |
| 9 | C# — Unity и UI | движок и десктопный интерфейс | 25 мин |
| 10 | Skia и ANGLE | прослойки рендеринга | 20 мин |
| 11 | Графические API | OpenGL, DirectX, шейдеры | 45 мин |
| 12 | VRAM и GPU | текстуры, профилирование | 40 мин |
| 13 | Буферизация | double buffer, V-Sync | 25 мин |
| 14 | Битмап и монитор | HDMI, цвет, тайминги | 20 мин |
| 15 | Итоги и FAQ | резюме | 15 мин |
| 16 | Чек-лист | самопроверка | 20 мин |
Короткий маршрут — главы 1–3 и 6, затем платформа по задаче (7 для веба, 8 для Python, 9 для C#).
Полный маршрут — по порядку 1→14; главы 11–12 — при переходе к WebGL и железу.
Карта слоёв
Практика
- Демо — модель, update, render — глава 1
- Canvas — полный цикл
- Pygame — тот же каркас
- Массив и culling
- Векторы и коллизии
- HiDPI и ввод
- Canvas 2D
- p5.js — примеры
- Игры на Python
- Конвейер GPU — интерактив в главе 11
- Бюджет кадра и FPS — интерактив в главе 13
- Практикум игр
От чисел к картинке
Модель и отрисовка в одном файле, конвейер от кода через Canvas и GPU к монитору, три слоя графического кода, маршрут по разделу.
Skia и ANGLE
Skia — движок 2D от Google (Chrome, Android, Flutter). ANGLE — перевод OpenGL ES в DirectX, Vulkan и Metal для браузера и Windows.
Графические API
Общение с драйвером GPU. Треугольники, вершинный и фрагментный шейдеры, state machine API, OpenGL, DirectX 11/12, Vulkan и Metal.
VRAM и GPU
Видеопамять, графический конвейер на железе, CUDA-ядра и warp, mipmaps, фильтрация текстур, поиск узких мест CPU и GPU.
Буферизация и V-Sync
Double и triple buffering, V-Sync, tearing, requestAnimationFrame, glSwapBuffers, frame time и даунскейл.
Битмап и монитор
Растр RGBA в видеопамяти, растрирование вектора, HDMI и DisplayPort, цветовые пространства sRGB и HDR, тайминги монитора.
Модель, update, render
Разделение модели, логики обновления и отрисовки. Координаты, DOM и Canvas, чтение и структура графического кода.
Цикл и FSM
Update и Render, delta time, requestAnimationFrame. Конечные автоматы для меню, паузы и состояний игры.
Структуры сцены
Массивы объектов, деревья сцены, пространственное индексирование, frustum culling и отсечение невидимого.
Математика 2D/3D
Векторы, скалярное произведение, матрицы поворота, масштаба и трансляции, тригонометрия для вращения объектов на экране.
High-Level API
Обертки над железом, получение контекста рендеринга, управление окном, обработка мыши и клавиатуры.
Веб — Canvas и WebGL
Программируемая графика в браузере. Canvas 2D API, WebGL, отличие от DOM, путь команд через Skia и ANGLE.
Python — Pygame и SDL
SDL как фундамент окон и ввода. Pygame для игр. Tkinter Canvas для UI и простых графиков.
C# — Unity и UI
Unity как игровой движок. WPF и MAUI для интерфейсов. DirectX под капотом .NET графики.
Разработка графики — итоги
Резюме конвейера раздела "Разработка графики", FAQ и типичные ошибки при чтении и написании графического кода.
Разработка графики — чек-лист
Вопросы для самопроверки по разделу "Разработка графики".
Разработка графики — о разделе
От чисел в памяти до пикселей на мониторе. Модель, игровой цикл, API, GPU, Canvas, Pygame, Unity, OpenGL. Маршрут для чтения графического кода.