Skia: esensya, arkitektura, at papel sa graphics engine ng Flutter

Ano ang Skia?

Skia — ay isang cross-platform 2D graphics library na binuo ng Google at available sa ilalim ng BSD license. Nagbibigay ito ng nagkakaisang API para sa pag-drawing ng mga geometric na hugis, teksto, larawan at anino, na nag-aabstrak mula sa pinagbabatayan na graphics backend. Ang Skia ay nakasulat sa C++ at optimize para sa paggana sa malawak na hanay ng mga device — mula sa mga mobile phone hanggang sa mga server.

Ang kasaysayan ng Skia ay nagsimula noong 2005 bilang isang saradong library ng kumpanyang Skia Inc. Noong 2007, ito ay binili ng Google, binuksan ang source code, at sinimulang gamitin sa mga produkto nito. Ngayon, ang Skia ay ang pangunahing graphics engine ng Google Chrome (kabilang ang Chrome OS), Android (mula sa bersyon 4.0) at, siyempre, Flutter. Ang library ay sinusuportahan ng Google team at patuloy na pinapabuti: idinaragdag ang mga bagong backend, pag-optimize ng pagganap at suporta para sa mga modernong graphics API.

Ang pangunahing tampok ng Skia ay hindi lamang ito isang set ng mga function para sa pag-drawing ng mga primitives. Ito ay isang kumpletong graphics pipeline na may kasamang rasterization ng mga curve (path), anti-aliasing, paglalapat ng mga mask, pagproseso ng transparency at pagwawasto ng kulay. Sinusuportahan ng Skia ang mga format ng imahe na PNG, JPEG, WebP at GIF, at maaari ring mag-render ng teksto sa pamamagitan ng HarfBuzz engine para sa paghubog ng glyph.

Skia vs iba pang graphics library

Hindi tulad ng Cairo (ginagamit sa GTK) o Quartz 2D (ginagamit sa macOS), ang Skia ay idinisenyo mula pa sa simula upang gumana sa maraming platform na may iba't ibang graphics API. Ito ay nagbibigay sa kanya ng kalamangan sa mga cross-platform framework tulad ng Flutter. Cairo ay nakatuon sa software rendering, habang ang Skia ay sumusuporta sa GPU acceleration mula pa sa simula, na kritikal para sa mga animation ng interface.

Arkitektura ng Skia

Ang arkitektura ng Skia ay binuo bilang isang multi-layer pipeline, kung saan ang bawat layer ay responsable para sa isang partikular na yugto ng pag-convert ng mga graphics command sa mga pixel. Ang ganitong istraktura ay nagpapahintulot sa muling paggamit ng mga upper layer nang hiwalay sa pinagbabatayan na graphics API.

Ang itaas na layer — Canvas API — ay nagbibigay sa developer ng abstraction para sa pag-drawing. Ang mga pamamaraan na drawRect, drawCircle, drawPath, drawText ay tumatanggap ng mga geometric na parameter at estilo (kulay, transparency, mga pagbabago). Ang Canvas ay nagko-convert ng mga command na ito sa isang pagkakasunod-sunod ng mga operasyon na ipinapasa sa Skia Pipeline layer — isang panloob na graph ng command na optimize bago isagawa.

Ang gitnang layer — Surface at Device — ay namamahala sa target buffer kung saan nagaganap ang rendering. Ang Surface ay nilikha na may pagtukoy sa laki, espasyo ng kulay at uri ng backend. Ang Device ay nagpapatupad ng isang partikular na rendering backend: CPU rasterizer (Raster), OpenGL (GL), Vulkan (Vk) o Metal (Mt). Ang Device ay naglalaman ng mga optimize na implementasyon ng bawat operasyon ng pag-drawing para sa partikular na backend.

Ang ibabang layer — Ganesha (GPU backend) — ay nagpapatupad ng hardware-accelerated rendering. Ginagamit ng Ganesha ang GPU para sa rasterization ng mga path, pagpuno ng mga gradient at paglalapat ng mga epekto. Kinokolekta nito ang mga command sa mga batch at pinapaliit ang paglipat ng estado ng GPU. Para sa bawat graphics API ay may sariling implementasyon ng Ganesha: Skia GL para sa OpenGL, Skia Vulkan para sa Vulkan, Skia Metal para sa Metal.

Intermediate na representasyon — SkSL

Ang Skia ay gumagamit ng sariling shader language na SkSL (Skia Shading Language) para sa paglalarawan ng mga epekto. Ang SkSL code ay compile sa SPIR-V (intermediate na representasyon), na pagkatapos ay isinasalin sa format ng shader na tiyak sa backend (GLSL, HLSL, MSL). Ito ay nagbibigay ng nagkakaisang paraan ng paglalarawan ng mga graphics effect hiwalay sa platform.

Paano gumagana ang Skia sa Flutter

Gumagamit ang Flutter ng Skia bilang pangunahing rendering engine sa lahat ng platform: Android, iOS, Web, Windows, macOS at Linux. Kapag ang isang Flutter app ay nag-render ng frame, ang mga widget ay na-convert sa isang RenderObject tree, na pagkatapos ay ipinapasa sa Engine layer (sa C++), at ang Engine ay gumagamit ng Skia para sa huling rendering.

Ang proseso ng pag-render ng frame ay may kasamang ilang yugto. Una, ang Flutter Engine ay bumubuo ng isang listahan ng operasyon (Display List) — isang pagkakasunod-sunod ng mga tawag sa Canvas API na naglalarawan kung ano at paano iguguhit. Pagkatapos ang listahang ito ay ipinapasa sa Skia, na hinahati ang mga operasyon sa mga partisyon (mga lugar ng screen), inuuri ang mga ito ayon sa lalim at ipinapasa sa naaangkop na rendering backend. Ang GPU acceleration ay awtomatikong naka-on kung ang Skia ay makakita ng available na graphics API.

Isa sa mga pangunahing bentahe ng Skia sa Flutter ay ang Flutter Impeller Preview — kakayahang mag-preview ng mga shader. Ang Skia ay nag-compile ng mga shader sa sandali ng unang paggamit, na maaaring magdulot ng mga pagkaantala (shader jank). Upang malutas ang problemang ito, ang Flutter ay lumilipat sa Impeller — isang bagong rendering engine, ngunit ang Skia ay nananatiling pangunahing pagpipilian para sa mga stable na bersyon ng Flutter.

Layer Tree at Paint

Ang Flutter ay gumagamit ng konsepto ng Layer Tree — isang puno ng mga layer, bawat isa ay kumakatawan sa isang bahagi ng UI. Ang Skia ay tumatanggap ng mga command sa pag-drawing para sa bawat layer at tinutukoy kung ang ilang mga layer ay maaaring pagsamahin sa isang solong rendering pass. Ang pag-composite ng layer (layer compositing) ay isang komplikadong gawain, dahil para sa bawat pixel ay kailangang isaalang-alang ang transparency at mga blend mode, na ipinapatupad ng Skia sa pamamagitan ng GPU shader.

Pag-render ng teksto sa pamamagitan ng Skia

Ang Skia ay nag-render ng teksto sa pamamagitan ng integrasyon sa mga library na HarfBuzz (paghubog) at icu (unicode). Sa Flutter, bawat text widget ay lumilikha ng Paragraph object na nagko-convert ng teksto sa isang serye ng Skia command para sa pag-drawing ng glyph. Skia ay sumusuporta sa subpixel anti-aliasing, font hinting at pagtatrabaho sa emoji sa pamamagitan ng SkUnicode library.

Pagganap ng Skia

Ang pagganap ng Skia ay resulta ng maraming taon ng pag-optimize at kumbinasyon ng ilang mga technique: pag-batch ng mga command, pag-cache ng mga texture at pag-minimize ng paglipat ng konteksto ng GPU. Para sa Flutter, ito ay kritikal na mahalaga, dahil ang bawat frame ay dapat i-render sa loob ng 16 ms (60 FPS) o 8 ms (120 FPS).

Ayon sa mga benchmark ng Flutter Team, ang paggamit ng Skia na may GPU acceleration sa mga mid-range na device (Qualcomm Snapdragon 700 series) ay nagbibigay ng stable na 60 FPS kapag nag-re-render ng mga kumplikadong interface na may 30+ widget sa screen. Sa software rendering (CPU), ang pagganap ay bumababa ng 40–60%, ngunit nananatiling katanggap-tanggap para sa mga simpleng screen.

Shader Jank — pangunahing problema ng Skia

Ang pangunahing problema sa pagganap ng Skia sa Flutter ay shader jank (mga pagkaantala ng shader). Kapag ang isang bagong visual na elemento na may hindi kilalang kumbinasyon ng mga epekto ay lumitaw sa screen, ang Skia ay nag-compile ng bagong shader sa lugar. Ang pag-compile ay maaaring tumagal ng 50–200 ms, kung saan ang app ay lumalaktaw ng mga frame. Ito ay lalong kapansin-pansin kapag nag-scroll ng mahabang listahan na may custom na dekorasyon. Niresolba ng Google ang problemang ito sa Impeller, isang bagong rendering engine na nag-compile ng mga shader nang maaga.

Skia sa iba't ibang platform

Sinusuportahan ng Skia ang malawak na hanay ng mga platform, bawat isa ay gumagamit ng sarili nitong rendering backend. Ang pagpili ng backend ay tinutukoy sa yugto ng pagbuo ng Flutter Engine batay sa target na platform at mga available na graphics API.

Android

Sa Android, ang Skia ay gumagana sa pamamagitan ng OpenGL ES (sa lahat ng device) at Vulkan (sa mga device na may Android 7.0+ na may suporta sa Vulkan). Ang pagpili ng backend ay nangyayari nang awtomatiko: ang Vulkan ay mas gusto dahil nagbibigay ito ng mas mababang driver latency. Android ay gumagamit din ng Skia para sa pag-render ng system UI sa pamamagitan ng HWUI (Hardware Accelerated UI), na ginagawang bahagi ng operating system ang Skia, hindi lamang ng Flutter.

iOS

Sa iOS, ang Skia ay gumagamit ng Metal — ang proprietary graphics API ng Apple. Ang Metal ay nagbibigay ng mababang antas ng access sa GPU at minimal na overhead. Bago ang pagdating ng Metal (2014), ang Skia sa iOS ay gumamit ng OpenGL ES, ngunit sa kasalukuyang bersyon ng Flutter, ang Metal ay ang tanging GPU backend para sa iOS, na nagbibigay ng pagtaas ng pagganap hanggang 30% kumpara sa OpenGL.

Desktop (Windows, macOS, Linux)

Sa desktop, ang Skia ay gumagamit ng OpenGL (macOS, Linux) at Direct3D 12 (Windows). Ang suporta para sa Direct3D 12 para sa Windows ay idinagdag sa Flutter 3.13 at nagbibigay ng makabuluhang pagpapabuti sa pagganap kumpara sa OpenGL sa Windows. Skia ay sumusuporta din sa software rendering sa pamamagitan ng ANGLE (OpenGL sa ibabaw ng Direct3D) sa Windows para sa backward compatibility sa mga lumang graphics driver.

Web

Sa Flutter for Web, ang Skia ay compile sa WebAssembly (sa pamamagitan ng Emscripten) at nag-render sa pamamagitan ng WebGL. Sa mode na ito, ang Skia ay gumagana nang buo sa browser, nang hindi gumagamit ng native code. Ang pagganap ng WebGL na bersyon ng Skia ay mas mababa kaysa sa native backends, ngunit para sa karamihan ng mga web application, ang 60 FPS ay nakakamit sa mga modernong browser na may hardware acceleration ng WebGL.