Compositing: що це, шари та принцип роботи

Що таке композитинг?

Compositing — це фінальний етап графічного конвеєра, на якому всі окремо відрендерені шари (3D-сцени, UI-елементи, відео, системний інтерфейс) об'єднуються в одне зображення для виведення на екран. Кожен шар може мати свій колір, прозорість (alpha), позицію та порядок накладання.

У контексті мобільної розробки композитинг важливий для користувацького інтерфейсу: вікна, кнопки, текст, іконки — всі ці елементи композитуються в єдину сцену. Система композитингу керує порядком відтворення (z-order), коректним накладанням напівпрозорих елементів та анімацією переходу між станами UI.

Композитинг у графічному конвеєрі

У графічному конвеєрі композитинг відбувається після завершення всіх шейдерних проходів та растеризації. GPU бере готові шари з framebuffer-ів, застосовує blending-операції та записує результат в основний кадровий буфер (front buffer) для відправки на дисплей.

Як працює композитинг?

Compositing використовує попіксельне змішування (blending) кольорів з різних шарів. Кожен піксель вихідного зображення обчислюється на основі кольорів пікселів з шарів, що накладаються, з урахуванням прозорості (alpha-каналу) та вибраного режиму змішування.

Alpha-канал та прозорість

Кожен шар містить alpha-канал (четвертий компонент кольору RGBA), що визначає його непрозорість. Alpha = 1.0 — повністю непрозорий, alpha = 0.0 — повністю прозорий. Alpha blending обчислює колір пікселя як зважену суму кольорів переднього (source) та заднього (destination) шарів: результат = source * alpha + dest * (1 - alpha).

Порядок відтворення (алгоритм художника)

Композитинг виконується в порядку від найдальшого шару до найближчого (back-to-front). Спочатку рендериться фоновий шар, потім кожен наступний шар накладається поверх попереднього з урахуванням його прозорості. Z-order визначає, який шар знаходиться вище та буде перекривати нижчі.

Алгоритми композитингу

Compositing підтримує різні режими змішування (blend modes), які визначають, як кольори шарів комбінуються. Кожен режим дає різний візуальний ефект та має свої обчислювальні витрати.

Premultiplied Alpha

У режимі premultiplied alpha колірні канали зберігаються вже помноженими на alpha-канал (RGB × A). Це усуває необхідність множення при кожній blending-операції, прискорюючи композитинг. Premultiplied alpha — стандартний формат для GPU-композитингу в iOS Core Animation та Android HWUI.

Композитинг у мобільних ОС

Кожна мобільна операційна система має власну систему композитингу, оптимізовану для своїх апаратних платформ. Compositing у мобільних ОС відповідає за відтворення всього користувацького інтерфейсу.

iOS: Core Animation + Metal

В iOS композитингом керує Core Animation — високорівнева система, що працює поверх Metal або OpenGL ES. Core Animation створює layer tree (дерево шарів), яке потім композитується у фінальне зображення. Core Animation автоматично визначає, які шари змінилися, та перемальовує тільки їх (інкрементальний композитинг), що мінімізує навантаження на GPU.

Android: SurfaceFlinger + HWUI

В Android композитинг виконує SurfaceFlinger — системний сервіс, який об'єднує поверхні (surfaces) від різних додатків та системного UI. SurfaceFlinger використовує HWC (Hardware Composer) для передачі частини роботи з композитингу на виділене апаратне забезпечення дисплейного контролера.

Продуктивність композитингу

Продуктивність композитингу — частий вузький місцем у мобільних додатках, особливо при складних анімаціях та накладанні багатьох напівпрозорих шарів. Кожен додатковий шар вимагає читання, змішування та запису пікселів у пам'ять.

Фактори, що впливають на продуктивність

• Кількість шарів — кожен шар вимагає окремого проходу blending. Зменшення кількості шарів прискорює композитинг лінійно.
• Роздільна здатність шарів — шари з високою роздільною здатністю збільшують кількість оброблюваних пікселів. Використовуйте мінімально можливий розмір offscreen-буферів.
• Прозорість та overdraw — напівпрозорі шари вимагають читання нижчих пікселів, що збільшує пропускну здатність.
• CPU compositing — якщо композитинг виконується на CPU (software rendering), продуктивність різко падає. GPU-композитинг завжди кращий.

GPU Compositing vs CPU Compositing

Сучасні мобільні пристрої виконують композитинг на GPU через спеціалізовані блоки blending. GPU-композитинг використовує паралельні ROP-блоки та texture-фільтри для швидкого змішування пікселів. CPU-композитинг використовується лише в рідкісних випадках (старі пристрої, тестування).

Оптимізація композитингу

Оптимізація композитингу — одне з ключових завдань при розробці мобільних інтерфейсів. Плавність UI (60 FPS) безпосередньо залежить від ефективності об'єднання шарів.

Основні методи оптимізації

• Мінімізація шарів — об'єднання статичних шарів в один (layer flattening) через попередній рендеринг.
• Непрозорі шари — непрозорі шари не потребують alpha blending, що значно прискорює композитинг.
• Інкрементальний композитинг — перемальовування лише змінених шарів, а не всієї сцени (використовується Core Animation).
• Hardware Composer — використання HWC для апаратного композитингу без участі GPU.

Інструменти профілювання

Для аналізу продуктивності композитингу використовуйте: Core Animation Profiler (Xcode Instruments) — показує кількість шарів та частоту композитингу; GPU Debugger (Android Studio) — відображає GPU-навантаження та overdraw; Overdraw Visualization — інструмент налагодження, що показує області багаторазового перемальовування пікселів.