Графика и рендеринг в мобильной разработке: что это, как устроен процесс и как работает

Графика и рендеринг: основы CPU и GPU

Рендеринг — процесс преобразования данных (вершины, текстуры, шейдеры) в изображение на экране. В мобильных устройствах рендеринг может выполняться на CPU (центральном процессоре) или GPU (графическом процессоре). Выбор зависит от типа графики и требуемой производительности.

CPU vs GPU Rendering

CPU Rendering — последовательная обработка. Каждая инструкция выполняется одна за другой. CPU оптимизирован для логики и branching. Canvas (Android), Core Graphics (iOS) работают на CPU. Преимущество: точность, поддержка сложных алгоритмов. Недостаток: медленно при большом количестве графических элементов. GPU Rendering — параллельная обработка. Тысячи ядер GPU обрабатывают вершины и пиксели одновременно. Metal (iOS), Vulkan (Android), OpenGL ES (обе платформы) используют GPU. GPU Rendering обязателен для 3D, анимаций 60 FPS и сложных эффектов. Современные UI-фреймворки (SwiftUI, Jetpack Compose, Flutter) используют GPU по умолчанию.

Шейдеры (Vertex, Fragment)

Шейдеры — программы, выполняемые на GPU. Они определяют, как выглядит каждый объект на экране. Графический пайплайн состоит из нескольких этапов, но два основных шейдера — Vertex Shader и Fragment Shader — используются в 99% случаев. Шейдеры пишутся на GLSL (OpenGL), MSL (Metal) или HLSL (DirectX).

Vertex Shader — обрабатывает вершины 3D-модели. Вход: позиция вершины, нормаль, UV-координаты. Выход: трансформированная позиция (model → view → projection). Vertex Shader не может создавать или удалять вершины — только трансформировать. Fragment Shader — вычисляет цвет каждого пикселя (фрагмента) в растеризованном треугольнике. Вход: интерполированные данные от Vertex Shader (UV, нормали). Выход: цвет RGBA. Fragment Shader отвечает за текстурирование, освещение (Phong, PBR) и пост-эффекты. Современные движки (Unity, Unreal) генерируют шейдеры автоматически, но понимание пайплайна необходимо для оптимизации.

Offscreen Rendering — рендеринг не на экран, а во временный буфер. Используется для: 1) эффектов (blur, shadow), 2) рендеринга в текстуру (render to texture), 3) предварительного вычисления кадров. Offscreen Rendering — дорогой: переключение контекста и дополнительный проход рендеринга. iOS автоматически включает Offscreen Rendering для теней и cornerRadius. Rasterization — преобразование векторных данных (вершины + шейдеры) в пиксели. Rasterizer определяет, какие фрагменты принадлежат треугольнику и вызывает Fragment Shader. Compositing — сборка слоёв в финальное изображение. Core Animation композитит CALayer'ы, Android — слои SurfaceFlinger.

CPU — для логики и Canvas. GPU — для графики и анимаций. IT Sectr рекомендует использовать GPU-рендеринг для любого движущегося контента (анимации, переходы, scroll) — это обеспечивает стабильные 60 FPS.

Core Animation (CALayer, CAShapeLayer)

Core Animation — фреймворк Apple для анимированного рендеринга на GPU. Базовый элемент — CALayer: прямоугольная область с контентом (изображение, цвет, текст). CALayer управляет: позицией, размером, цветом фона, border, shadow, cornerRadius и трансформациями (2D и 3D). Core Animation автоматически композитит слои на GPU — разработчику не нужно писать графический код.

CALayer

CALayer — лёгкий объект (не view), который содержит битмап контента. UIButton, UILabel, UIImageView — все используют CALayer внутри. Свойства: frame, bounds, position, anchorPoint, transform, opacity, masksToBounds. Анимация свойств CALayer происходит на GPU — это главное преимущество Core Animation. CALayer.shouldRasterize — включает rasterization слоя для кэширования сложной графики. CAShapeLayer — подкласс для векторной графики: рисует path на GPU. Используется для прогресс-баров, графиков, масок и анимации shape. CAShapeLayer.path — анимируемое свойство (анимация морфинга фигур).

Compositing в Core Animation — процесс сборки CALayer'ов в финальный кадр. Каждый CALayer — отдельная текстура на GPU. Compositing происходит в Render Server (отдельный процесс). Свойства, требующие compositing: opacity, shadow, cornerRadius + masksToBounds, shouldRasterize. Чем меньше слоёв — тем быстрее compositing.

Оптимизация (Overdraw, Offscreen Rendering)

Overdraw — ситуация, когда один и тот же пиксель окрашивается несколько раз за один кадр. Пример: красный фон → синий прямоугольник → текст. Центральный пиксель рисуется 3 раза. Overdraw — главная причина тормозов в UI, особенно на старых устройствах. iOS: Debug Color Blended Layers (Xcode) — красные области = blended (overdraw). Android: Debug GPU Overdraw (Developer Options) — цвета от синего (1x) до красного (3x+).

Overdraw

Как уменьшить Overdraw: 1) используйте opaque = true для непрозрачных view (iOS). 2) Android — используйте android:windowBackground только один раз. 3) Убирайте невидимые слои. 4) Используйте слоистую архитектуру: задний фон (1 проход) → контент (2 проход). 5) Избегайте clipChildren и clipToPadding без необходимости. Offscreen Rendering — рендеринг в буфер перед экраном. Триггеры: shadow (CALayer.shadow*), cornerRadius + masksToBounds, group opacity, shouldRasterize. Xcode: Debug Offscreen Renderer — жёлтые области = offscreen. На Android: profile GPU rendering — проверяйте длину баров.

Векторная графика (SVG, Vector Drawable)

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

SVG (Scalable Vector Graphics) — стандарт W3C. Не поддерживается напрямую в мобильных ОС. Конвертируется: на iOS — в PDF vector assets (Xcode 12+), на Android — в Vector Drawable XML. Vector Drawable — Android-формат. Определяется в XML: <vector> с <path> и <group>. Поддерживает анимацию через AnimatedVectorDrawable. PDF Vector Assets (iOS) — векторные PDF в Assets.xcassets. Xcode компилирует их в GPU-оптимизированные текстуры. SVG и Vector Drawable не поддерживают сложные эффекты (blur, gradient mesh). Для фотографий и градиентов используйте растровые PNG/WebP.