Графіка та рендеринг у мобільній розробці: що це, як влаштований процес і як працює

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

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

CPU vs GPU Rendering

CPU Rendering — послідовна обробка. Кожна інструкція виконується одна за одною. CPU оптимізований для логіки та розгалужень. 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) рендерингу в текстуру, 3) попереднього обчислення кадрів. Offscreen Rendering — дорогий: перемикання контексту та додатковий прохід рендерингу. iOS автоматично вмикає Offscreen Rendering для тіней та cornerRadius. Растеризація — перетворення векторних даних (вершини + шейдери) у пікселі. Растеризатор визначає, які фрагменти належать трикутнику та викликає Fragment Shader. Композитинг — збірка шарів у фінальне зображення. 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 — вмикає растеризацію шару для кешування складної графіки. CAShapeLayer — підклас для векторної графіки: малює path на GPU. Використовується для прогрес-барів, графіків, масок та анімації shape. CAShapeLayer.path — анімована властивість (анімація морфінгу фігур).

Композитинг у Core Animation — процес збірки CALayer у фінальний кадр. Кожен CALayer — окрема текстура на GPU. Композитинг відбувається в Render Server (окремий процес). Властивості, що потребують композитингу: opacity, shadow, cornerRadius + masksToBounds, shouldRasterize. Чим менше шарів — тим швидше композитинг.

Оптимізація (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.