Compositing: apa itu, lapisan dan prinsip kerja

Apa itu compositing?

Compositing — adalah tahap akhir dari pipeline grafis, di mana semua lapisan yang dirender secara terpisah (adegan 3D, elemen UI, video, antarmuka sistem) digabungkan menjadi satu gambar untuk ditampilkan di layar. Setiap lapisan dapat memiliki warna, transparansi (alpha), posisi dan urutan tumpukan sendiri.

Dalam konteks pengembangan mobile, compositing penting untuk antarmuka pengguna: jendela, tombol, teks, ikon — semua elemen ini dikompositkan menjadi satu adegan. Sistem compositing mengatur urutan gambar (z-order), penumpukan elemen semi-transparan yang benar dan animasi transisi antar status UI.

Compositing dalam pipeline grafis

Dalam pipeline grafis, compositing terjadi setelah semua proses shader dan rasterisasi selesai. GPU mengambil lapisan yang sudah jadi dari framebuffer, menerapkan operasi blending dan menulis hasilnya ke buffer bingkai utama (front buffer) untuk dikirim ke layar.

Bagaimana cara kerja compositing?

Compositing menggunakan pencampuran piksel per piksel (blending) warna dari lapisan yang berbeda. Setiap piksel dari gambar keluaran dihitung berdasarkan warna piksel dari lapisan yang ditumpuk dengan mempertimbangkan transparansi (saluran alpha) dan mode pencampuran yang dipilih.

Saluran alpha dan transparansi

Setiap lapisan mengandung saluran alpha (komponen keempat dari warna RGBA) yang menentukan opacity-nya. Alpha = 1.0 — sepenuhnya buram, alpha = 0.0 — sepenuhnya transparan. Alpha blending menghitung warna piksel sebagai jumlah tertimbang dari warna lapisan depan (source) dan belakang (destination): result = source * alpha + dest * (1 - alpha).

Urutan gambar (Algoritma Pelukis)

Compositing dijalankan dalam urutan dari lapisan terjauh ke terdekat (back-to-front). Pertama, lapisan latar belakang dirender, kemudian setiap lapisan berikutnya ditumpuk di atas lapisan sebelumnya dengan mempertimbangkan transparansinya. Z-order menentukan lapisan mana yang berada di atas dan akan menutupi lapisan di bawahnya.

Algoritma compositing

Compositing mendukung berbagai mode pencampuran (blend modes) yang menentukan bagaimana warna lapisan digabungkan. Setiap mode memberikan efek visual yang berbeda dan memiliki biaya komputasi sendiri.

Premultiplied Alpha

Dalam mode premultiplied alpha, saluran warna disimpan sudah dikalikan dengan saluran alpha (RGB × A). Ini menghilangkan kebutuhan perkalian pada setiap operasi blending, mempercepat compositing. Premultiplied alpha — format standar untuk GPU-compositing di iOS Core Animation dan Android HWUI.

Compositing di OS mobile

Setiap sistem operasi mobile memiliki sistem compositing sendiri, yang dioptimalkan untuk platform perangkat kerasnya. Compositing di OS mobile bertanggung jawab untuk merender seluruh antarmuka pengguna.

iOS: Core Animation + Metal

Di iOS, compositing dikelola oleh Core Animation — sistem tingkat tinggi yang bekerja di atas Metal atau OpenGL ES. Core Animation membuat layer tree (pohon lapisan) yang kemudian dikompositkan menjadi gambar akhir. Core Animation secara otomatis mendeteksi lapisan mana yang berubah dan hanya menggambar ulang lapisan tersebut (incremental compositing), yang meminimalkan beban GPU.

Android: SurfaceFlinger + HWUI

Di Android, compositing dilakukan oleh SurfaceFlinger — layanan sistem yang menggabungkan permukaan (surfaces) dari berbagai aplikasi dan antarmuka sistem. SurfaceFlinger menggunakan HWC (Hardware Composer) untuk mentransfer sebagian pekerjaan compositing ke perangkat keras khusus pengontrol layar.

Kinerja compositing

Kinerja compositing — sering menjadi bottleneck di aplikasi mobile, terutama pada animasi kompleks dan penumpukan banyak lapisan semi-transparan. Setiap lapisan tambahan memerlukan pembacaan, pencampuran dan penulisan piksel ke memori.

Faktor yang mempengaruhi kinerja

• Jumlah lapisan — setiap lapisan memerlukan satu kali proses blending terpisah. Mengurangi jumlah lapisan mempercepat compositing secara linear.
• Resolusi lapisan — lapisan dengan resolusi tinggi meningkatkan jumlah piksel yang diproses. Gunakan ukuran buffer offscreen seminimal mungkin.
• Transparansi dan overdraw — lapisan semi-transparan memerlukan pembacaan piksel di bawahnya, yang meningkatkan bandwidth.
• CPU compositing — jika compositing dilakukan di CPU (software rendering), kinerja turun drastis. GPU-compositing selalu lebih disukai.

GPU Compositing vs CPU Compositing

Perangkat mobile modern melakukan compositing di GPU melalui blok blending khusus. GPU-compositing menggunakan blok ROP paralel dan filter tekstur untuk pencampuran piksel yang cepat. CPU-compositing hanya digunakan dalam kasus yang jarang terjadi (perangkat lama, pengujian).

Optimasi compositing

Optimasi compositing — salah satu tugas kunci dalam pengembangan antarmuka mobile. Kelancaran UI (60 FPS) secara langsung tergantung pada efisiensi penggabungan lapisan.

Metode optimasi utama

• Minimasi lapisan — menggabungkan lapisan statis menjadi satu (layer flattening) melalui render awal.
• Opaque layers — lapisan buram tidak memerlukan alpha blending, yang secara signifikan mempercepat compositing.
• Incremental compositing — menggambar ulang hanya lapisan yang berubah, bukan seluruh adegan (digunakan oleh Core Animation).
• Hardware Composer — penggunaan HWC untuk compositing perangkat keras tanpa GPU.

Alat profiling

Untuk menganalisis kinerja compositing gunakan: Core Animation Profiler (Xcode Instruments) — menunjukkan jumlah lapisan dan frekuensi compositing; GPU Debugger (Android Studio) — menampilkan beban GPU dan overdraw; Overdraw Visualisation — alat debug yang menunjukkan area penggambaran ulang piksel berganda.