Grafik dan Rendering dalam Pengembangan Seluler: Apa Itu, Bagaimana Proses Bekerja dan Cara Kerjanya

Grafik dan Rendering: Dasar-Dasar CPU dan GPU

Rendering adalah proses mengubah data (simpul, tekstur, shader) menjadi gambar di layar. Pada perangkat seluler, rendering dapat dilakukan pada CPU (prosesor pusat) atau GPU (prosesor grafis). Pilihan tergantung pada jenis grafik dan kinerja yang diperlukan.

CPU vs GPU Rendering

CPU Rendering — pemrosesan sekuensial. Setiap instruksi dieksekusi satu per satu. CPU dioptimalkan untuk logika dan percabangan. Canvas (Android), Core Graphics (iOS) bekerja pada CPU. Kelebihan: presisi, dukungan algoritma kompleks. Kekurangan: lambat dengan banyak elemen grafis. GPU Rendering — pemrosesan paralel. Ribuan inti GPU memproses simpul dan piksel secara bersamaan. Metal (iOS), Vulkan (Android), OpenGL ES (kedua platform) menggunakan GPU. GPU Rendering wajib untuk 3D, animasi 60 FPS dan efek kompleks. Framework UI modern (SwiftUI, Jetpack Compose, Flutter) menggunakan GPU secara default.

Shader (Vertex, Fragment)

Shader adalah program yang dijalankan di GPU. Mereka menentukan bagaimana setiap objek terlihat di layar. Pipeline grafis terdiri dari beberapa tahap, tetapi dua shader utama — Vertex Shader dan Fragment Shader — digunakan dalam 99% kasus. Shader ditulis dalam GLSL (OpenGL), MSL (Metal) atau HLSL (DirectX).

Vertex Shader — memproses simpul dari model 3D. Masukan: posisi simpul, normal, koordinat UV. Keluaran: posisi yang ditransformasi (model → tampilan → proyeksi). Vertex Shader tidak dapat membuat atau menghapus simpul — hanya mentransformasikannya. Fragment Shader — menghitung warna setiap piksel (fragmen) dalam segitiga yang diraster. Masukan: data interpolasi dari Vertex Shader (UV, normal). Keluaran: warna RGBA. Fragment Shader bertanggung jawab untuk texturing, pencahayaan (Phong, PBR) dan efek pasca-pemrosesan. Mesin modern (Unity, Unreal) menghasilkan shader secara otomatis, tetapi memahami pipeline diperlukan untuk optimasi.

Offscreen Rendering — rendering bukan ke layar tetapi ke buffer sementara. Digunakan untuk: 1) efek (blur, shadow), 2) render ke tekstur, 3) pra-komputasi bingkai. Offscreen Rendering mahal: peralihan konteks dan lintasan rendering tambahan. iOS secara otomatis mengaktifkan Offscreen Rendering untuk bayangan dan cornerRadius. Rasterisasi — konversi data vektor (simpul + shader) menjadi piksel. Rasterizer menentukan fragmen mana yang termasuk dalam segitiga dan memanggil Fragment Shader. Pengomposisian — perakitan lapisan menjadi gambar akhir. Core Animation mengomposisi CALayer, Android mengomposisi lapisan SurfaceFlinger.

CPU — untuk logika dan Canvas. GPU — untuk grafik dan animasi. IT Sectr merekomendasikan penggunaan GPU rendering untuk konten bergerak (animasi, transisi, gulir) — ini memastikan 60 FPS yang stabil.

Core Animation (CALayer, CAShapeLayer)

Core Animation — framework Apple untuk rendering animasi yang dipercepat GPU. Elemen dasar adalah CALayer: area persegi panjang dengan konten (gambar, warna, teks). CALayer mengelola: posisi, ukuran, warna latar, batas, bayangan, cornerRadius dan transformasi (2D dan 3D). Core Animation secara otomatis mengomposisi lapisan di GPU — pengembang tidak perlu menulis kode grafis.

CALayer

CALayer — objek ringan (bukan view) yang berisi bitmap konten. UIButton, UILabel, UIImageView — semuanya menggunakan CALayer secara internal. Properti: frame, bounds, position, anchorPoint, transform, opacity, masksToBounds. Animasi properti CALayer terjadi di GPU — ini adalah keuntungan utama Core Animation. CALayer.shouldRasterize — mengaktifkan rasterisasi lapisan untuk menyimpan cache grafik kompleks. CAShapeLayer — subkelas untuk grafik vektor: menggambar jalur di GPU. Digunakan untuk bilah kemajuan, grafik, masker, dan animasi bentuk. CAShapeLayer.path — properti yang dapat dianimasikan (animasi morfing bentuk).

Pengomposisian di Core Animation — proses perakitan CALayer menjadi bingkai akhir. Setiap CALayer adalah tekstur terpisah di GPU. Pengomposisian terjadi di Render Server (proses terpisah). Properti yang memerlukan pengomposisian: opacity, shadow, cornerRadius + masksToBounds, shouldRasterize. Semakin sedikit lapisan — semakin cepat pengomposisian.

Optimasi (Overdraw, Offscreen Rendering)

Overdraw — situasi di mana piksel yang sama diwarnai beberapa kali dalam satu bingkai. Contoh: latar merah → persegi panjang biru → teks. Piksel tengah digambar 3 kali. Overdraw adalah penyebab utama lag UI, terutama pada perangkat lama. iOS: Debug Color Blended Layers (Xcode) — area merah = campuran (overdraw). Android: Debug GPU Overdraw (Opsi Pengembang) — warna dari biru (1x) hingga merah (3x+).

Overdraw

Cara mengurangi Overdraw: 1) gunakan opaque = true untuk view yang tidak transparan (iOS). 2) Android — gunakan android:windowBackground hanya sekali. 3) Hapus lapisan yang tidak terlihat. 4) Gunakan arsitektur berlapis: latar belakang (1 lintasan) → konten (2 lintasan). 5) Hindari clipChildren dan clipToPadding yang tidak perlu. Offscreen Rendering — rendering ke buffer sebelum layar. Pemicu: shadow (CALayer.shadow*), cornerRadius + masksToBounds, group opacity, shouldRasterize. Xcode: Debug Offscreen Renderer — area kuning = offscreen. Di Android: profile GPU rendering — periksa panjang bilah.

Grafik Vektor (SVG, Vector Drawable)

Grafik Vektor — gambar yang dijelaskan oleh rumus matematika (jalur, kurva, isian). Vektor tidak kehilangan kualitas saat diskalakan — ideal untuk ikon dan ilustrasi di aplikasi seluler.

SVG (Scalable Vector Graphics) — standar W3C. Tidak didukung langsung di sistem operasi seluler. Dikonversi: di iOS — menjadi PDF vector assets (Xcode 12+), di Android — menjadi Vector Drawable XML. Vector Drawable — format Android. Didefinisikan dalam XML: <vector> dengan <path> dan <group>. Mendukung animasi melalui AnimatedVectorDrawable. PDF Vector Assets (iOS) — PDF vektor di Assets.xcassets. Xcode mengompilasinya menjadi tekstur yang dioptimalkan GPU. SVG dan Vector Drawable tidak mendukung efek kompleks (blur, gradient mesh). Untuk foto dan gradien, gunakan PNG/WebP raster.