Skia: esensi, arsitektur, dan peran dalam mesin grafis Flutter

Apa itu Skia?

Skia — adalah pustaka grafis 2D lintas platform yang dikembangkan oleh Google dan tersedia di bawah lisensi BSD. Pustaka ini menyediakan API terpadu untuk menggambar bentuk geometris, teks, gambar, dan bayangan, dengan mengabstraksi backend grafis yang mendasarinya. Skia ditulis dalam C++ dan dioptimalkan untuk bekerja pada berbagai perangkat — dari ponsel hingga server.

Sejarah Skia dimulai pada tahun 2005 sebagai pustaka tertutup milik perusahaan Skia Inc. Pada tahun 2007, Google membelinya, membuka kode sumber, dan mulai menggunakannya dalam produk-produknya. Saat ini, Skia adalah mesin grafis utama Google Chrome (termasuk Chrome OS), Android (mulai versi 4.0), dan tentu saja Flutter. Pustaka ini didukung oleh tim Google dan terus ditingkatkan: backend baru, optimalisasi performa, dan dukungan untuk API grafis modern terus ditambahkan.

Fitur utama Skia adalah bahwa ia bukan sekadar kumpulan fungsi untuk menggambar primitif. Ini adalah jalur pipa grafis lengkap yang mencakup rasterisasi kurva (jalur), anti-aliasing, penerapan topeng, pemrosesan transparansi, dan koreksi warna. Skia mendukung format gambar PNG, JPEG, WebP, dan GIF, serta dapat merender teks melalui mesin HarfBuzz untuk pembentukan glyph.

Skia vs pustaka grafis lainnya

Tidak seperti Cairo (digunakan di GTK) atau Quartz 2D (digunakan di macOS), Skia sejak awal dirancang untuk bekerja pada berbagai platform dengan API grafis yang berbeda. Ini memberinya keunggulan dalam framework lintas platform seperti Flutter. Cairo berfokus pada rendering perangkat lunak, sementara Skia telah mendukung akselerasi GPU sejak awal, yang sangat penting untuk animasi antarmuka.

Arsitektur Skia

Arsitektur Skia dibangun sebagai jalur pipa berlapis, di mana setiap lapisan bertanggung jawab atas tahap tertentu dalam mengubah perintah grafis menjadi piksel. Struktur seperti ini memungkinkan penggunaan kembali lapisan atas secara independen dari API grafis yang mendasarinya.

Lapisan atas — Canvas API — menyediakan abstraksi bagi pengembang untuk menggambar. Metode drawRect, drawCircle, drawPath, drawText menerima parameter geometris dan gaya (warna, transparansi, transformasi). Canvas mengubah perintah-perintah ini menjadi urutan operasi yang diteruskan ke lapisan Skia Pipeline — grafik perintah internal yang dioptimalkan sebelum dieksekusi.

Lapisan tengah — Surface dan Device — mengelola buffer target tempat rendering terjadi. Surface dibuat dengan menentukan ukuran, ruang warna, dan jenis backend. Device mengimplementasikan backend rendering tertentu: rasterizer CPU (Raster), OpenGL (GL), Vulkan (Vk), atau Metal (Mt). Device berisi implementasi yang dioptimalkan dari setiap operasi gambar untuk backend tertentu.

Lapisan bawah — Ganesha (backend GPU) — mengimplementasikan rendering yang dipercepat perangkat keras. Ganesha menggunakan GPU untuk rasterisasi jalur, mengisi gradien, dan menerapkan efek. Ia mengumpulkan perintah dalam batch dan meminimalkan peralihan status GPU. Untuk setiap API grafis terdapat implementasi Ganesha sendiri: Skia GL untuk OpenGL, Skia Vulkan untuk Vulkan, Skia Metal untuk Metal.

Representasi perantara — SkSL

Skia menggunakan bahasa shader sendiri yaitu SkSL (Skia Shading Language) untuk mendeskripsikan efek. Kode SkSL dikompilasi menjadi SPIR-V (representasi perantara), yang kemudian diterjemahkan ke format shader khusus backend (GLSL, HLSL, MSL). Ini memberikan cara yang seragam untuk mendeskripsikan efek grafis tanpa tergantung platform.

Bagaimana Skia bekerja di Flutter

Flutter menggunakan Skia sebagai mesin rendering utama di semua platform: Android, iOS, Web, Windows, macOS, dan Linux. Ketika aplikasi Flutter merender sebuah frame, widget diubah menjadi pohon RenderObject, yang kemudian diteruskan ke lapisan Engine (dalam C++), dan Engine menggunakan Skia untuk rendering akhir.

Proses rendering frame mencakup beberapa tahap. Pertama, Flutter Engine membangun daftar operasi (Display List) — urutan panggilan Canvas API yang mendeskripsikan apa dan bagaimana cara menggambar. Kemudian daftar ini diteruskan ke Skia, yang membagi operasi menjadi partisi (area layar), mengurutkannya berdasarkan kedalaman, dan meneruskannya ke backend rendering yang sesuai. Akselerasi GPU diaktifkan secara otomatis jika Skia mendeteksi API grafis yang tersedia.

Salah satu keunggulan utama Skia di Flutter adalah Flutter Impeller Preview — kemampuan untuk melihat pratinjau shader. Skia mengkompilasi shader pada saat pertama kali digunakan, yang dapat menyebabkan penundaan (shader jank). Untuk mengatasi masalah ini, Flutter beralih ke Impeller — mesin rendering baru, tetapi Skia tetap menjadi pilihan utama untuk versi stabil Flutter.

Layer Tree dan Paint

Flutter menggunakan konsep Layer Tree — pohon lapisan, di mana masing-masing mewakili bagian dari UI. Skia menerima perintah gambar untuk setiap lapisan dan menentukan apakah beberapa lapisan dapat digabungkan menjadi satu lintasan rendering. Penggabungan lapisan (layer compositing) adalah tugas yang kompleks, karena untuk setiap piksel harus mempertimbangkan transparansi dan mode campuran (blend modes), yang diimplementasikan Skia melalui shader GPU.

Rendering teks melalui Skia

Skia merender teks melalui integrasi dengan pustaka HarfBuzz (pembentukan) dan icu (unicode). Di Flutter, setiap widget teks membuat objek Paragraph yang mengubah teks menjadi serangkaian perintah Skia untuk menggambar glyph. Skia mendukung anti-aliasing subpiksel (subpixel anti-aliasing), hinting font, dan bekerja dengan emoji melalui pustaka SkUnicode.

Performa Skia

Performa Skia adalah hasil dari optimalisasi bertahun-tahun dan kombinasi beberapa teknik: pengelompokan perintah, caching tekstur, dan minimalisasi peralihan konteks GPU. Bagi Flutter, ini sangat penting karena setiap frame harus dirender dalam 16 ms (60 FPS) atau 8 ms (120 FPS).

Menurut tolok ukur Flutter Team, penggunaan Skia dengan akselerasi GPU pada perangkat kelas menengah (Qualcomm Snapdragon 700 series) memberikan 60 FPS yang stabil saat merender antarmuka kompleks dengan 30+ widget di layar. Pada rendering perangkat lunak (CPU), performa turun 40–60%, tetapi masih dapat diterima untuk layar sederhana.

Shader Jank — masalah utama Skia

Masalah performa utama Skia di Flutter adalah shader jank (lag shader). Ketika elemen visual baru dengan kombinasi efek yang belum pernah dikenal muncul di layar, Skia mengkompilasi shader baru secara langsung. Kompilasi dapat memakan waktu 50–200 ms, selama itu aplikasi melewatkan frame. Ini terutama terlihat saat menggulir daftar panjang dengan dekorasi kustom. Google memecahkan masalah ini di Impeller, mesin rendering baru yang mengkompilasi shader terlebih dahulu.

Skia di berbagai platform

Skia mendukung berbagai platform, yang masing-masing menggunakan backend rendering sendiri. Pemilihan backend ditentukan pada tahap pembangunan Flutter Engine berdasarkan platform target dan API grafis yang tersedia.

Android

Di Android, Skia bekerja melalui OpenGL ES (di semua perangkat) dan Vulkan (di perangkat Android 7.0+ dengan dukungan Vulkan). Pemilihan backend dilakukan secara otomatis: Vulkan lebih disukai karena memberikan latensi driver yang lebih rendah. Android juga menggunakan Skia untuk rendering UI sistem melalui HWUI (Hardware Accelerated UI), menjadikan Skia bagian dari sistem operasi, bukan hanya Flutter.

iOS

Di iOS, Skia menggunakan Metal — API grafis milik Apple. Metal menyediakan akses tingkat rendah ke GPU dengan overhead minimal. Sebelum hadirnya Metal (2014), Skia di iOS menggunakan OpenGL ES, tetapi di versi Flutter saat ini Metal adalah satu-satunya backend GPU untuk iOS, memberikan peningkatan performa hingga 30% dibandingkan OpenGL.

Desktop (Windows, macOS, Linux)

Di desktop, Skia menggunakan OpenGL (macOS, Linux) dan Direct3D 12 (Windows). Dukungan Direct3D 12 untuk Windows ditambahkan di Flutter 3.13 dan memberikan peningkatan performa yang signifikan dibandingkan OpenGL di Windows. Skia juga mendukung rendering perangkat lunak melalui ANGLE (OpenGL di atas Direct3D) di Windows untuk kompatibilitas mundur dengan driver grafis lama.

Web

Di Flutter for Web, Skia dikompilasi menjadi WebAssembly (melalui Emscripten) dan merender melalui WebGL. Dalam mode ini, Skia bekerja sepenuhnya di browser, tanpa menggunakan kode asli. Performa versi WebGL Skia lebih rendah daripada backend asli, tetapi untuk sebagian besar aplikasi web, 60 FPS dapat dicapai di browser modern dengan akselerasi perangkat keras WebGL.