Skia: суштина, архитектура и улога у графичком погону Flutter

Шта је Skia?

Skia — је вишеплатформска 2D графичка библиотека коју је развио Google и доступна је под BSD лиценцом. Она пружа јединствени API за цртање геометријских облика, текста, слика и сенки, апстрахујући се од основног графичког бекенда. Skia је написана у C++ и оптимизована за рад на широком спектру уређаја — од мобилних телефона до сервера.

Историја Skia-е је почела 2005. године као затворена библиотека компаније Skia Inc. 2007. године ју је купио Google, отворио изворни код и почео да је користи у својим производима. Данас је Skia главни графички погон Google Chrome-а (укључујући Chrome OS), Android-а (од верзије 4.0) и, наравно, Flutter-а. Библиотеку подржава Google тим и стално се побољшава: додају се нови бекенди, оптимизације перформанси и подршка за модерне графичке API-је.

Кључна карактеристика Skia-е је да није само скуп функција за цртање примитива. То је потпуни графички конвејер који укључује растеризацију кривуља (путања), анти-алиасинг, наношење маски, обраду провидности и корекцију боја. Skia подржава формате слика PNG, JPEG, WebP и GIF, а такође може да рендерује текст преко HarfBuzz погона за обликовање глифова.

Skia vs друге графичке библиотеке

За разлику од Cairo-а (користи се у GTK) или Quartz 2D (користи се у macOS), Skia је од почетка пројектована за рад на више платформи са различитим графичким API-јима. То јој даје предност у вишеплатформским оквирима као што је Flutter. Cairo је оријентисан на програмски рендеринг, док је Skia од самог почетка подржавала GPU убрзање, што је критично за анимације интерфејса.

Архитектура Skia

Архитектура Skia-е је изграђена као вишеслојни конвејер, при чему је сваки слој одговоран за одређену фазу претварања графичких команди у пикселе. Оваква структура омогућава поновну употребу горњих слојева независно од основног графичког API-ја.

Горњи слој — Canvas API — пружа програмеру апстракцију за цртање. Методе drawRect, drawCircle, drawPath, drawText примају геометријске параметре и стилове (боја, провидност, трансформације). Canvas претвара ове команде у секвенцу операција које се прослеђују Skia Pipeline слоју — унутрашњем графу команди који се оптимизује пре извршења.

Средњи слој — Surface и Device — управља циљним бафером у коме се врши рендеринг. Surface се креира са навођењем величине, простор боје и типа бекенда. Device имплементира конкретни рендеринг бекенд: CPU растеризатор (Raster), OpenGL (GL), Vulkan (Vk) или Metal (Mt). Device садржи оптимизоване имплементације сваке операције цртања за одређени бекенд.

Доњи слој — Ganesha (GPU бекенд) — имплементира хардверски убрзан рендеринг. Ganesha користи GPU за растеризацију путања, попуњавање градијената и наношење ефеката. Он сакупља команде у бачеве и минимизује пребацивање стања GPU-а. За сваки графички API постоји сопствена имплементација Ganesha-е: Skia GL за OpenGL, Skia Vulkan за Vulkan, Skia Metal за Metal.

Посредни приказ — SkSL

Skia користи сопствени језик шејдера SkSL (Skia Shading Language) за описивање ефеката. SkSL код се компајлира у SPIR-V (посредни приказ), који се затим преводи у формат шејдера специфичан за бекенд (GLSL, HLSL, MSL). Ово обезбеђује јединствен начин описивања графичких ефеката независно од платформе.

Како Skia ради у Flutter-у

Flutter користи Skia као главни рендеринг погон на свим платформама: Android, iOS, Web, Windows, macOS и Linux. Када Flutter апликација рендерује кадар, виџети се претварају у стабло RenderObject, које се затим прослеђује Engine слоју (у C++), а Engine користи Skia за финални рендеринг.

Процес рендеринга кадра укључује неколико фаза. Прво Flutter Engine гради листу операција (Display List) — секвенцу позива Canvas API-ја која описује шта и како цртати. Затим се ова листа прослеђује Skia-и, која дели операције на партиције (области екрана), сортира их по дубини и прослеђује одговарајућем рендеринг бекенду. GPU убрзање се укључује аутоматски ако Skia открије доступан графички API.

Једна од кључних предности Skia-е у Flutter-у је Flutter Impeller Preview — могућност прегледа шејдера. Skia компајлира шејдере у тренутку прве употребе, што може изазвати кашњења (shader jank). Да би решио овај проблем, Flutter прелази на Impeller — нови рендеринг погон, али Skia остаје главни избор за стабилне верзије Flutter-а.

Layer Tree и Paint

Flutter користи концепт Layer Tree — стабла слојева, од којих сваки представља део UI-ја. Skia добија команде цртања за сваки слој и одређује да ли се више слојева може спојити у један пролаз рендеринга. Мешање слојева (layer compositing) је сложен задатак, јер за сваки пиксел треба узети у обзир провидност и режиме мешања (blend modes), које Skia имплементира преко GPU шејдера.

Рендеринг текста преко Skia-е

Skia рендерује текст кроз интеграцију са библиотекама HarfBuzz (обликовање) и icu (уникод). У Flutter-у, сваки текст виџет креира Paragraph објекат који претвара текст у серију Skia команди за цртање глифова. Skia подржава субпикселно изглађивање (subpixel anti-aliasing), хинтинг фонтова и рад са емоџијима преко SkUnicode библиотеке.

Перформансе Skia

Перформансе Skia-е су резултат вишегодишње оптимизације и комбинације неколико техника: груписања команди, кеширања текстура и минимизације пребацивања контекста GPU-а. За Flutter је ово критично важно, јер сваки кадар мора бити рендерован за 16 ms (60 FPS) или 8 ms (120 FPS).

Према бенчмарковима Flutter Team, коришћење Skia-е са GPU убрзањем на уређајима средње класе (Qualcomm Snapdragon 700 series) обезбеђује стабилних 60 FPS при рендерингу сложених интерфејса са 30+ виџета на екрану. При програмском рендерингу (CPU) перформансе падају за 40–60%, али остају прихватљиве за једноставне екране.

Shader Jank — главни проблем Skia-е

Главни проблем перформанси Skia-е у Flutter-у је shader jank (шејдерска кашњења). Када се на екрану појави нови визуелни елемент са непознатом комбинацијом ефеката, Skia компајлира нови шејдер у лету. Компајлирање може трајати 50–200 ms, током којих апликација пропушта кадрове. Ово је посебно приметно при скроловању дугих листи са прилагођеним декорацијама. Google решава овај проблем у Impeller-у, новом рендеринг погону који компајлира шејдере унапред.

Skia на различитим платформама

Skia подржава широк спектар платформи, од којих свака користи свој рендеринг бекенд. Избор бекенда се одређује у фази изградње Flutter Engine-а на основу циљне платформе и доступних графичких API-ја.

Android

На Android-у Skia ради преко OpenGL ES (на свим уређајима) и Vulkan (на уређајима са Android 7.0+ и подршком за Vulkan). Избор бекенда се врши аутоматски: Vulkan је пожељнији јер даје мање кашњење драјвера. Android такође користи Skia за рендеринг системског UI-ја преко HWUI (Hardware Accelerated UI), што чини Skia делом оперативног система, а не само Flutter-а.

iOS

На iOS-у Skia користи Metal — власнички графички API компаније Apple. Metal обезбеђује ниско нивоски приступ GPU-у и минималне додатне трошкове. Пре појаве Metal-а (2014), Skia на iOS-у је користила OpenGL ES, али у тренутним верзијама Flutter-а Metal је једини GPU бекенд за iOS, што даје повећање перформанси до 30% у поређењу са OpenGL-ом.

Desktop (Windows, macOS, Linux)

На десктопу Skia користи OpenGL (macOS, Linux) и Direct3D 12 (Windows). Подршка за Direct3D 12 за Windows је додата у Flutter 3.13 и даје значајно побољшање перформанси у поређењу са OpenGL-ом на Windows-у. Skia такође подржава програмски рендеринг преко ANGLE-а (OpenGL преко Direct3D) на Windows-у за уназадну компатибилност са старим графичким драјверима.

Web

У Flutter for Web, Skia се компајлира у WebAssembly (преко Emscripten-а) и рендерује преко WebGL-а. У овом режиму Skia ради потпуно у прегледачу, без коришћења изворног кода. Перформансе WebGL верзије Skia-е су ниже од изворних бекенда, али за већину веб апликација 60 FPS се постиже на модерним прегледачима са хардверским убрзањем WebGL-а.