π¨ Skia & Impeller
Flutter sα» dα»₯ng graphics engine Δα» vαΊ½ UI lΓͺn mΓ n hΓ¬nh. Hiα»u vα» Skia vΓ Impeller giΓΊp bαΊ‘n nαΊ―m Δược cΓ‘ch Flutter render hiα»u quαΊ£.
1. Graphics Engine là gì?
PhαΊ§n tiΓͺu Δα» β1. Graphics Engine lΓ gΓ¬?βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ Graphics Engine Role ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€β ββ Flutter Framework ββ β ββ β "VαΊ½ hΓ¬nh chα»― nhαΊt Δα», α» vα» trΓ (100, 100)" ββ βΌ ββ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ ββ β Graphics Engine (Skia / Impeller) β ββ β β ββ β Chuyα»n Δα»i high-level commands β GPU instructions β ββ β β ββ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ ββ β ββ β GPU opcodes, shaders, textures ββ βΌ ββ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ ββ β GPU β ββ β (VαΊ½ pixels lΓͺn mΓ n hΓ¬nh) β ββ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ ββ ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ2. Skia - Graphics Engine truyα»n thα»ng
PhαΊ§n tiΓͺu Δα» β2. Skia - Graphics Engine truyα»n thα»ngβ2.1 Skia lΓ gΓ¬?
PhαΊ§n tiΓͺu Δα» β2.1 Skia lΓ gΓ¬?βSkia lΓ thΖ° viα»n 2D graphics open-source Δược Google phΓ‘t triα»n, sα» dα»₯ng trong:
- Google Chrome
- Android
- Firefox
- Flutter (tα»« ΔαΊ§u ΔαΊΏn nay)
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ SKIA ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€β ββ ΔαΊ·c Δiα»m: ββ βββ Cross-platform (Windows, macOS, Linux, Android, iOS) ββ βββ Hardware accelerated (OpenGL, Vulkan, Metal) ββ βββ Software rendering fallback ββ βββ Mature, battle-tested (20+ years) ββ ββ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ ββ β Skia Architecture β ββ β β ββ β Flutter Paint Commands β ββ β β β ββ β βΌ β ββ β ββββββββββββββββ β ββ β β SkCanvas β β Drawing API β ββ β ββββββββ¬ββββββββ β ββ β βΌ β ββ β ββββββββββββββββ β ββ β β SkPicture β β Recorded commands β ββ β ββββββββ¬ββββββββ β ββ β βΌ β ββ β ββββββββββββββββ ββββββββββββββββ β ββ β β SkSL Shaders ββββββΆβ GPU Backend β β ββ β ββββββββββββββββ ββββββββ¬ββββββββ β ββ β βΌ β ββ β OpenGL / Vulkan / Metal β ββ β β ββ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ ββ ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ2.2 VαΊ₯n Δα» của Skia vα»i Flutter
PhαΊ§n tiΓͺu Δα» β2.2 VαΊ₯n Δα» của Skia vα»i Flutterβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ Skia Limitations trong Flutter ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€β ββ 1. SHADER COMPILATION JANK ββ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ ββ β β ββ β Frame 1: Animation bαΊ―t ΔαΊ§u β ββ β β β ββ β Frame 2: CαΊ§n shader mα»i β ββ β β β ββ β β οΈ GPU ΔANG COMPILE SHADER... β ββ β β (cΓ³ thα» mαΊ₯t 100-200ms!) β ββ β Frame 3, 4, 5: Bα» DROP (jank!) β ββ β β β ββ β Frame 6: Shader ready, tiαΊΏp tα»₯c smooth β ββ β β ββ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ ββ ββ 2. SHADER COMPILATION ΔΓNG LΓC RUNTIME ββ β’ Skia compile shaders khi CαΊ¦N (just-in-time) ββ β’ KhΓ΄ng thα» pre-compile tαΊ₯t cαΊ£ shaders ββ β’ Shader cache giΓΊp nhΖ°ng khΓ΄ng hoΓ n toΓ n ββ ββ 3. KHΓNG Tα»I Ζ―U CHO MOBILE GPU ββ β’ Skia thiαΊΏt kαΊΏ cho desktop/Chrome trΖ°α»c ββ β’ Mobile GPU cΓ³ ΔαΊ·c Δiα»m khΓ‘c (tile-based) ββ ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ3. Impeller - Graphics Engine thαΊΏ hα» mα»i
PhαΊ§n tiΓͺu Δα» β3. Impeller - Graphics Engine thαΊΏ hα» mα»iβ3.1 Impeller lΓ gΓ¬?
PhαΊ§n tiΓͺu Δα» β3.1 Impeller lΓ gΓ¬?βImpeller lΓ graphics engine mα»i Δược Flutter team xΓ’y dα»±ng tα»« ΔαΊ§u, thiαΊΏt kαΊΏ riΓͺng cho Flutter.
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ IMPELLER ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€β ββ TriαΊΏt lΓ½ thiαΊΏt kαΊΏ: ββ βββ PRE-COMPILED shaders (AOT, khΓ΄ng JIT) ββ βββ ThiαΊΏt kαΊΏ cho mobile GPU (tile-based rendering) ββ βββ Modern API first (Metal, Vulkan) ββ βββ Simpler codebase, easier maintenance ββ ββ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ ββ β Impeller Architecture β ββ β β ββ β Flutter Paint Commands β ββ β β β ββ β βΌ β ββ β ββββββββββββββββ β ββ β β Display List β β Optimized command buffer β ββ β ββββββββ¬ββββββββ β ββ β βΌ β ββ β ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β ββ β β PRE-COMPILED SHADERS β β ββ β β (Compiled at BUILD TIME, not runtime!) β β ββ β ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ β ββ β β β ββ β βΌ β ββ β ββββββββββββββββ ββββββββββββββββ β ββ β β Metal β β Vulkan β β ββ β β (iOS/macOS) β β (Android) β β ββ β ββββββββββββββββ ββββββββββββββββ β ββ β β ββ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ ββ ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ3.2 TαΊ‘i sao Impeller nhanh hΖ‘n?
PhαΊ§n tiΓͺu Δα» β3.2 TαΊ‘i sao Impeller nhanh hΖ‘n?βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ Impeller vs Skia: Shader Compilation ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€β ββ SKIA IMPELLER ββ ββ Build Time: Build Time: ββ ββββββββββββββββ ββββββββββββββββ ββ β App Code β β App Code β ββ β Compile β β Compile β ββ β β β SHADERS β ββ β β β COMPILE β βNEW! ββ ββββββββββββββββ ββββββββββββββββ ββ ββ Runtime: Runtime: ββ ββββββββββββββββ ββββββββββββββββ ββ β App Running β β App Running β ββ β β β β ββ β Need shader? β β Need shader? β ββ β β β β β β ββ β COMPILE β β JANK! β USE β β SMOOTH!ββ β at runtime β β precompiled β ββ ββββββββββββββββ ββββββββββββββββ ββ ββ KαΊΏt quαΊ£: Jank! KαΊΏt quαΊ£: Smooth! ββ ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ4. So sΓ‘nh Skia vs Impeller
PhαΊ§n tiΓͺu Δα» β4. So sΓ‘nh Skia vs Impellerβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ SKIA vs IMPELLER βββββββββββββββββββββββββββ¬βββββββββββββββββββββββββββββββββββββββββββββ€β SKIA β IMPELLER βββββββββββββββββββββββββββΌβββββββββββββββββββββββββββββββββββββββββββββ€β β ββ β Mature, proven β β No shader jank ββ β Wide GPU support β β Designed for mobile ββ β Software fallback β β Modern GPU APIs ββ β β Predictable performance ββ β Shader jank β ββ β Complex codebase β β Newer, still evolving ββ β JIT shader compile β β Limited GPU support ββ β β iOS/Android only (for now) ββ β βββββββββββββββββββββββββββΌβββββββββββββββββββββββββββββββββββββββββββββ€β GPU Support: β GPU Support: ββ β’ OpenGL ES β β’ Metal (iOS/macOS) ββ β’ Vulkan β β’ Vulkan (Android) ββ β’ Metal β β’ OpenGL ES (fallback, coming) ββ β’ Direct3D β ββ β βββββββββββββββββββββββββββ΄βββββββββββββββββββββββββββββββββββββββββββββ5. Impeller Rendering Pipeline
PhαΊ§n tiΓͺu Δα» β5. Impeller Rendering Pipelineβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ IMPELLER PIPELINE ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€β ββ 1. ENTITY PASS CONSTRUCTION ββ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ ββ β Flutter's paint commands β EntityPass β ββ β (Optimized for GPU submission) β ββ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ ββ β ββ βΌ ββ 2. RENDER TARGET ALLOCATION ββ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ ββ β Allocate GPU textures for render targets β ββ β (Smart pooling and reuse) β ββ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ ββ β ββ βΌ ββ 3. COMMAND ENCODING ββ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ ββ β Encode GPU commands (Metal/Vulkan) β ββ β Using PRE-COMPILED shaders β ββ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ ββ β ββ βΌ ββ 4. GPU SUBMISSION ββ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ ββ β Submit command buffer to GPU β ββ β GPU executes (parallel with CPU) β ββ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ ββ ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ6. TΓ¬nh trαΊ‘ng hα» trợ
PhαΊ§n tiΓͺu Δα» β6. TΓ¬nh trαΊ‘ng hα» trợβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ IMPELLER SUPPORT STATUS (2024) ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€β ββ Platform Status Notes ββ βββββββββ ββββββ βββββ ββ iOS β
Default Stable since Flutter 3.10 ββ Android β
Default Stable since Flutter 3.16 ββ macOS π Preview Opt-in, improving ββ Windows β Not yet Planned ββ Linux β Not yet Planned ββ Web β Not planned Uses CanvasKit (Skia) ββ ββ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ ββ β Enable Impeller preview (nαΊΏu chΖ°a default): β ββ β β ββ β Android: flutter run --enable-impeller β ββ β iOS: Info.plist: FLTEnableImpeller = YES β ββ β β ββ β Disable Impeller: β ββ β flutter run --no-enable-impeller β ββ βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ ββ ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββπ TΓ³m tαΊ―t
PhαΊ§n tiΓͺu Δα» βπ TΓ³m tαΊ―tβ| Aspect | Skia | Impeller |
|---|---|---|
| Shader compilation | Runtime (JIT) | Build time (AOT) |
| Jank risk | CΓ³ | KhΓ΄ng |
| GPU design target | Desktop-first | Mobile-first |
| Codebase | Complex, mature | Simple, new |
| Platform support | Wide | iOS, Android (mα» rα»ng) |
KαΊΏt luαΊn:
Impeller lΓ tΖ°Ζ‘ng lai của Flutter graphics. Vα»i pre-compiled shaders, nΓ³ loαΊ‘i bα» shader jank - mα»t trong nhα»―ng vαΊ₯n Δα» lα»n nhαΊ₯t của Flutter on mobile.