Perjalanan hari ini: anti-aliasing
- Anti-aliasing adalah sebuah bentuk seni yang telah berkembang melalui puluhan tahun matematika, teknik kreatif, dan inovasi tanpa henti.
- Ada berbagai pendekatan seperti SSAA, SMAA, dan DLAA, yang masing-masing berusaha mencapai tujuan yang sama dengan cara yang berbeda.
- Artikel ini membahas cara kerja metode-metode tersebut dan memperkenalkan cara baru untuk menyelesaikan masalah ini, yaitu anti-aliasing analitis.
Pengaturan
- Untuk memahami algoritme anti-aliasing, implementasinya dibuat dengan menggambar lingkaran yang bergerak menggunakan kanvas WebGL.
- Jika resolusinya terlalu tinggi sehingga aliasing tidak terlihat, Anda dapat menurunkan resolusinya untuk memeriksanya.
Analisis teknis
- Memahami kode GPU tidak wajib, tetapi membantu untuk memahami bagian analitisnya.
- Lingkaran tidak digambar secara geometris, melainkan digambar oleh shader.
SSAA
- SSAA adalah singkatan dari super-sampling anti-aliasing, yaitu metode merender pada resolusi yang lebih besar lalu melakukan downsampling.
- Implementasinya sederhana, tetapi membutuhkan memori dan komputasi yang besar.
- Diperlukan penempatan sampel yang tepat serta integrasi yang mendalam dengan pipeline rendering.
MSAA
- MSAA hanya melakukan super-sampling pada siluet model, geometri yang saling tumpang tindih, dan tepi tekstur.
- Metode ini diimplementasikan oleh perangkat keras, dan dukungannya bergantung pada perangkat keras tersebut.
- Dalam situasi tertentu, mungkin tidak ada biaya performa sama sekali.
Anti-aliasing post-process
- MLAA lahir dari makalah Alexander Reshetov pada tahun 2009.
- FXAA adalah algoritme yang dikembangkan dengan inspirasi dari MLAA, dengan biaya performa rendah dan implementasi yang mudah.
- Metode ini lebih efektif pada adegan yang kompleks.
Anti-aliasing analitis
- Anti-aliasing analitis mendekati masalah dari arah sebaliknya: karena bentuk yang dibutuhkan sudah diketahui, piksel yang sudah di-anti-alias langsung digambar ke layar.
- Tidak memerlukan buffer tambahan atau kebutuhan perangkat keras khusus, dan dapat berjalan bahkan pada WebGL 1.0 dasar atau OpenGLES 2.0.
- Ukuran piksel dihitung untuk memudarkan batas bentuk.
Implementasi
- Dengan menggunakan signed distance field, kita dapat mengetahui jarak dari setiap titik sampling ke bentuk yang diinginkan.
- Fungsi
dFdx, dFdy, dan fwidth digunakan untuk menghitung ukuran piksel.
- Blending dilakukan menggunakan alpha blending atau MSAA + Alpha to Coverage.
linearstep dapat digunakan sebagai pengganti smoothstep untuk mengoptimalkan performa.
Kesimpulan
- Anti-aliasing analitis memberikan tepi yang halus dengan memudarkan batas bentuk secara akurat.
- Ada berbagai cara implementasi, sehingga kita dapat memilih di antara performa dan akurasi.
1 komentar
Opini Hacker News