Разработка графики — итоги
Краткое резюме раздела 4.18. Если пункт неясен — откройте главу из оглавления или чек-лист.
Резюме конвейера
- Модель — числа в RAM (
x,y,hp, флаги) - Update — логика +
dt+ ввод - Render — команды API (
fillRect,draw,drawArrays) - Прослойки — Skia, SDL, ANGLE
- Графический API — OpenGL, Vulkan, DirectX
- GPU + VRAM — шейдеры, текстуры, framebuffer
- Swap + V-Sync — целый кадр на монитор
- Растр по кабелю — HDMI/DP, 60–144 Гц
Графический код читается проще, когда каждая строка отнесена к одному из этих этапов.
FAQ
Вопрос. Почему в одном файле и физика, и ctx.arc?
Ответ. Исторически один проект — экономия файлов. Логически это три слоя: модель, update, render. При рефакторинге их разделяют. См. 1, 2.
Вопрос. Модель сама рисует себя на экране?
Ответ. Нет. Модель — только данные. Пока render() не прочитает координаты, пиксели не меняются.
Вопрос. Почему каждый кадр стирают весь canvas?
Ответ. Canvas хранит только пиксели, без списка объектов. Без clearRect останутся следы старых позиций. См. 3.
Вопрос. DOM или Canvas для игры?
Ответ. Игровое поле — Canvas/WebGL. Меню и текст — часто DOM/HTML поверх. См. 2, 7.
Вопрос. Чем Canvas 2D отличается от WebGL?
Ответ. Canvas — команды "нарисуй фигуру", растеризация через Skia. WebGL — треугольники и шейдеры на GPU. См. 7, 11.
Вопрос. Что такое SDL и при чём Pygame?
Ответ. SDL — C-библиотека окна и ввода. Pygame — Python-обёртка над SDL2. См. 8.
Вопрос. Почему круг в 3D — это треугольники?
Ответ. GPU растеризует только треугольники. Окружность — аппроксимация mesh. См. 11.
Вопрос. Что делает ANGLE для WebGL?
Ответ. В Chrome на Windows WebGL идёт через ANGLE → DirectX. Объясняет различия между браузерами и платформами. См. 10.
Вопрос. Почему игра тормозит при 30 FPS, хотя CPU не загружен?
Ответ. Возможно узкое место на GPU или V-Sync cap. Смотрите frame time и профиль GPU. См. 12, 13.
Вопрос. Что такое tearing?
Ответ. Разрыв кадра при swap во время сканирования монитора. Лечится V-Sync или G-Sync. См. 13.
Вопрос. 16.7 ms — откуда цифра?
Ответ. 1000 / 60 ≈ 16.7 ms — бюджет кадра при 60 FPS. Превышение → просадка FPS. См. 13.
Вопрос. Y вверх или вниз?
Ответ. Canvas и большинство 2D API — Y вниз, (0,0) сверху слева. В математических графиках и части движков — Y вверх. См. 2, 5.
Вопрос. Нужен ли Vulkan начинающему?
Ответ. Для старта — Canvas, Pygame или Unity, затем OpenGL/WebGL. Vulkan — для движков и инженеров. См. 11.
Вопрос. Frustum culling — это только 3D?
Ответ. Идея общая: не рисовать невидимое. В 2D — отсечение по границам экрана. См. 4.
Терминология раздела
| Термин | Смысл |
|---|---|
| Модель | Числа в RAM — координаты, HP, флаги; без команд рисования |
| Update / render | Логика меняет модель; render читает модель и вызывает API |
| Draw call | Команда GPU «нарисуй этот примитив»; дорогие при тысячах в кадре |
| Retained mode | Платформа хранит дерево сцены (DOM, Unity) |
| Immediate mode | Программист каждый кадр заново отдаёт команды (Canvas, классический GL) |
| Растризация | Перевод геометрии в сетку пикселей |
| Шейдер | Программа на GPU (vertex / fragment) |
| VRAM | Видеопамять — текстуры, буферы кадра |
| Double buffering | Рисование в back buffer, показ front buffer |
| V-Sync | Синхронизация swap с частотой монитора |
| Frame time | Миллисекунды на полный кадр; 60 FPS ≈ 16,7 ms |
| FPS | Кадров в секунду |
| Culling | Пропуск невидимых объектов до draw call |
| HiDPI | devicePixelRatio — физические vs CSS-пиксели canvas |
| Skia / ANGLE | 2D-движок Canvas в Chrome; транслятор WebGL → DirectX/Vulkan |
Подробнее по этапам — главы 6–14.
Типичные ошибки
| Ошибка | Следствие | Что делать |
|---|---|---|
Нет clear перед draw | шлейф объектов | clearRect / fill фон |
Без dt в движении | разная скорость на разных FPS | умножать на delta time |
Рисование в update | смешение слоёв | только в render |
Игнор devicePixelRatio | размытый canvas на Retina | масштабировать размер canvas |
| Upload текстуры каждый кадр | CPU/GPU stall | загрузить один раз |
| Тысячи draw calls | узкое место CPU | batching, atlas |
| Глобальный GL state | случайный blend/depth | VAO, PSO, discipline |
Карта раздела
| # | Тема |
|---|---|
| 1 | От чисел к картинке |
| 2 | Модель, update, render |
| 3 | Цикл и FSM |
| 4 | Структуры сцены |
| 5 | Математика |
| 6 | High-Level API |
| 7 | Веб |
| 8 | Python / SDL |
| 9 | C# / Unity |
| 10 | Skia / ANGLE |
| 11 | Графические API |
| 12 | VRAM / GPU |
| 13 | Буферизация |
| 14 | Монитор |
Самопроверка — чек-лист. Термины — терминология раздела.