Merender Teks Tajam di GPU

• Untuk mengatasi masalah kualitas perenderan teks, khususnya keterbatasan pendekatan berbasis SDF (distance field), diajukan teknik perenderan vektor real-time yang baru
• Dengan mengirim glif (karakter) dalam bentuk kurva vektor langsung ke GPU dan melakukan rasterisasi real-time, pendekatan ini mencapai resolusi tak terbatas serta penggunaan memori yang rendah
• Dengan memanfaatkan texture atlas dan teknik temporal accumulation, pendekatan ini mewujudkan kualitas anti-aliasing yang tinggi serta caching yang efisien
• Karena dapat disesuaikan untuk berbagai struktur subpiksel (mis. OLED, LCD, dan lain-lain), hasilnya tetap halus dan tajam tanpa masalah fringing (bleeding warna)
• Pendekatan ini menawarkan cara yang sederhana namun sangat skalabel untuk perenderan font berkualitas tinggi pada teks real-time, UI, game, dan lain-lain

---

Pendahuluan: Tantangan dalam perenderan teks

• Dalam perenderan teks real-time, ada berbagai persoalan seperti aliasing (efek tangga), tekstur besar, waktu build, zoom in/out, dan pergerakan yang mulus
• Metode Multi-Channel Signed Distance Fields (SDFs) yang selama ini banyak digunakan memiliki keterbatasan dari sisi kualitas dan fleksibilitas
• Pemicu pendekatan baru ini adalah struktur subpiksel nonstandar pada monitor OLED terbaru serta masalah fringing, yang mendorong pengembangan metode yang juga mempertimbangkan subpixel anti-aliasing

Keterbatasan metode SDF yang ada

Kualitas

• Pada metode SDF, font dengan detail halus atau banyak goresan tipis mengalami penurunan kualitas dan kehilangan informasi
• Jika resolusi tidak dinaikkan, artefak akan tetap muncul pada glif tertentu

Ukuran atlas

• SDF dibuat secara offline terlebih dahulu lalu atlas disimpan, tetapi untuk banyak glif atau font CJK (Tionghoa, Jepang, Korea) ukurannya bisa menjadi tidak realistis
• Jika beberapa font digunakan sekaligus, konsumsi memori dan beban bandwidth streaming meningkat besar

Fleksibilitas dan kesederhanaan

• Karena harus melewati tahap perantara berupa SDF, alur keseluruhan dari data sumber hingga hasil akhir menjadi kompleks
• Ada banyak keterbatasan ketika ingin langsung memanfaatkan atau mengedit gambar vektor yang bersifat real-time atau dinamis

Pendekatan baru: rasterisasi real-time kurva vektor

• Alih-alih membuat tekstur lebih dulu, data kurva vektor glif yang benar-benar terlihat di layar (seperti kurva Bézier) dikirim langsung ke GPU lalu dirasterisasi di tempat
• Hanya glif yang diperlukan yang dimasukkan ke dalam texture atlas, lalu dipertahankan atau dilepas sesuai frekuensi penggunaan
• Selama glif masih tampil di layar, akumulasi sampel (temporal accumulation) digunakan untuk menghasilkan hasil yang sangat berkualitas tinggi dan lebih halus (anti-aliased)
• Karena selalu diproses berbasis vektor, hasilnya tetap tajam tanpa batasan resolusi

Pemrosesan data kurva font

• Berbagai format font dibaca menggunakan pustaka open source seperti FreeType, lalu informasi kurva glif diekstrak
• Glif diparse dalam bentuk garis, kurva Bézier kuadratik/kubik, lalu semua kurva diubah menjadi kurva Bézier kuadratik agar pemrosesan di shader GPU lebih sederhana
  • Garis diubah menjadi kurva kuadratik dengan menambahkan titik kontrol tengah
  • Kurva kubik diubah menjadi dua kurva kuadratik yang telah dibagi

Perhitungan coverage (isian di dalam piksel)

• Untuk setiap piksel, dihitung titik perpotongan dengan kurva pada ray arah horizontal, lalu bagian dalam/luar ditentukan melalui winding number (jumlah perpotongan kumulatif)
• Ratusan sampel (n kali akumulasi sampel) dijumlahkan, dan sedikit galat halus hampir tidak memengaruhi hasil akhir
• Dengan teknik penempatan titik sampel (quasirandom sequence), hasil dari berbagai posisi diakumulasikan pada setiap frame

Optimasi akses kurva

• Glif dibagi dalam unit band horizontal, sehingga hanya kurva terkait pada setiap band yang diuji untuk mengurangi komputasi
• Penjadwalan thread dan iterasi per band memaksimalkan efisiensi komputasi bulk di GPU

Packing dan pengelolaan atlas

• Setelah setiap gambar glif dialokasikan ke atlas (tekstur bersama), atlas dikelola sebagai berikut
  • Jika glif belum ada, ruang baru dialokasikan lalu dirasterisasi; jika sudah ada, hasilnya digunakan ulang
  • Perlu dicatat bahwa bahkan untuk glif yang sama, versi yang berbeda mungkin dibutuhkan tergantung posisi subpiksel dan ukuran
• Melalui Z-Order Packing (seperti Morton code), diterapkan packing yang efisien antara bitset 1 dimensi dan ruang 2D
  • Dapat diterapkan secara fleksibel menurut struktur bahasa, misalnya basis vertikal untuk rumpun Latin dan basis horizontal untuk rumpun Arab
• Saat glif tidak lagi diperlukan, ruang atlas dapat dialokasikan ulang untuk digunakan kembali

Akumulasi waktu (Temporal Accumulation)

• Melalui caching glif dan akumulasi sampel, pendekatan ini cepat memperoleh sampel berkualitas tinggi segera setelah ditampilkan, lalu menyempurnakannya lebih lanjut di frame berikutnya
  • Frame pertama menggunakan 8 sampel/piksel, lalu jumlah sampel berkurang secara bertahap, dengan akumulasi hingga 512 kali
• Dengan demikian, tampilan glif yang halus dan optimasi sumber daya dapat dicapai secara bersamaan

Subpixel anti-aliasing dan pencegahan fringing

• Dengan membagi area render pada tingkat subpiksel (menganggap setiap elemen seperti RGB sebagai sampel), pendekatan ini meningkatkan resolusi horizontal secara efektif
  • Mendukung berbagai susunan seperti struktur standar LCD maupun OLED/WOLED
  • Dapat menghasilkan efek halus tanpa fringing (bleeding warna)
• Jika sampel subpiksel disusun agar saling tumpang tindih (Overlapping), efek pencampuran cahaya pada monitor nyata juga dapat tercermin
• Hasil yang alami dan tajam dapat dicapai tanpa batas piksel maupun hinting

Pentingnya pendekatan struktur subpiksel per display

• Jika informasi susunan subpiksel monitor dapat diperiksa secara terprogram, perenderan yang jauh lebih presisi menjadi memungkinkan
• Ditekankan bahwa ini bukan keterbatasan hardware, melainkan masalah pemrosesan software

Penutup dan prospek pemanfaatan

• Perenderan teks yang baik sangat memengaruhi keseluruhan usability dan kualitas layanan
• Khususnya pada UI/game, ekspresi font berkualitas tinggi dapat membuat perbedaan besar dalam pengalaman produk
• Ini adalah struktur kerja yang dapat mewujudkan prinsip sederhana, skalabel, berkualitas tinggi, dan fleksibel
• Dengan implementasi open source, dukungan berbagai subpiksel, dan lain-lain, pendekatan ini sangat cocok untuk penggunaan nyata di industri/produksi

---

[GN⁺]

Opini Hacker News

• Saya sendiri sebagai penulis tidak menyangka tulisan ini akan jadi seramai ini. Terima kasih kepada semua yang ikut dalam diskusi yang menarik ini
• Pertanyaan tentang alasan titik pada huruf miring "j" menghilang di video pertama
• Ada pendapat bahwa rendering font subpiksel sangat penting untuk keterbacaan. Namun seperti yang ditunjukkan penulis, sayangnya standar display saat ini tidak memungkinkan mendapatkan spesifikasi tata letak piksel yang akurat
• Saya rasa ini hanya diperlukan pada display beresolusi standar. Sebenarnya tidak sampai wajib, lebih seperti bagus kalau ada. Sekarang display kelas retina sudah umum, jadi kita berada di lingkungan yang tidak terlalu membutuhkan rendering subpiksel. Justru ini terasa seperti inovasi sementara yang muncul di era LCD dan kini mulai ketinggalan zaman. Efek sampingnya juga cukup banyak, seperti ketergantungan screenshot pada tata letak subpiksel dan bitmap yang tidak bisa diperbesar. Karena itu saya rasa ada alasan Apple menghapus pendekatan ini dari macOS
• Menunjukkan bahwa standar seperti DisplayID memang dirancang untuk menyediakan informasi tata letak seperti ini. Hanya saja para produsen tidak mengimplementasikannya dengan baik atau datanya tidak disimpan di DB. Untuk model display yang populer, informasi ini bisa dicatat dan dimanfaatkan di database informasi perangkat keras. Lihat wiki DisplayID
• Menyampaikan penyesalan bahwa kita sudah tahu selama puluhan tahun soal beragam struktur subpiksel, dan menilai artikel aslinya merangkum hal itu dengan baik. Juga membagikan halaman contoh yang disebut ‘kebun binatang subpiksel’ subpixel zoo
• Merasa istilah ‘tragedi’ agak berlebihan. Menurutnya cukup jika tiap OS menyediakan fitur penyesuaian detail per display seperti tuner ClearType di Windows lama. Juga perlu penyimpanan pengaturan pengguna untuk berjaga-jaga saat monitor melaporkan informasi yang salah
• Berpandangan bahwa rendering subpiksel tidak benar-benar diperlukan untuk kebanyakan bahasa. Font bitmap tanpa anti-aliasing atau font vektor yang di-hinting saja sudah cukup nyaman dibaca. Namun untuk bahasa yang memakai karakter kompleks seperti hanja atau bahasa Jepang, ini bisa lebih penting
• Menyebut bahwa alasan GTK4 beralih ke rendering berpusat pada GPU lalu melepas rendering subpiksel RGB mungkin berkaitan dengan teknologi GPU. Tetapi karena artikel asli menunjukkan bahwa ini tetap bisa dilakukan di GPU, muncul dugaan apakah ada alasan lain, kekurangan tertentu, atau kesulitan integrasi stack
• Menyebut kemungkinan bahwa Cosmic Text (Cosmic DE) mendukung rendering subpiksel di GPU melalui Swash
• Jika tertarik cara mengimplementasikan SDF dan MSDF di WebGL/WebGPU, disarankan melihat tutorial yang saya tulis sendiri tautan tutorial
• Menyebut tertarik pada WebGPU (WGPU) yang diimplementasikan dengan Rust. Merasa tutorial ini cukup tingkat lanjut, dan berbagi pengalaman bahwa belajar dengan mengubah contoh JS ke Rust cukup efektif
• Mengatakan sangat menyukai format situsnya dan ingin juga membuat tutorial terkait GPU seperti ini. Penasaran apakah ini template tertentu atau bagian dari sebuah kursus
• Dibagikan informasi bahwa pustaka Slug adalah middleware komersial yang mengimplementasikan rasterizer glyph GPU Slug Library
• Menilai menarik karena situs Slug mengungkap algoritmenya dengan cukup rinci. Bertanya-tanya apakah ada patennya. Akan menyenangkan jika membuat versi wgpu open source dengan memanfaatkan parsing/font layout dari cosmic-text, tetapi khawatir nanti justru digugat oleh Slug
• Untuk orang yang belum akrab dengan bidang ini, ada ringkasan sejarah dan kondisi terkini rendering teks SDF. Valve memperkenalkan arsitektur berbasis SDF pada 2007, lalu pada 2012 Glyphy (Behdad Esfahbod) menghadirkan implementasi SDF berbasis GPU yang membawa perubahan, tetapi OS arus utama dan browser web masih bertahan pada pendekatan gaya Truetype era 1990-an. Pendekatan ini kecil dan ringan, tetapi tidak mendukung penyelarasan subpiksel atau layout arbitrer, dan juga punya keterbatasan besar untuk pembesaran teks maupun transformasi 3D. Menurutnya, lambatnya evolusi teknologi ini kemungkinan karena manfaatnya tidak cukup besar dibanding risikonya, dan karena kolaborasi GPU/CPU sulit bukan hanya di rendering, tetapi juga pada pemrosesan layout kompleks seperti line break
• Menunjukkan bahwa pekerjaan layout teks seperti line break sebenarnya hampir sepenuhnya terpisah dari rendering
• Memperkenalkan Pathfinder dari Servo sebagai contoh yang sudah mengimplementasikan rendering teks GPU dengan performa jauh lebih baik menggunakan compute shader GPU
• Tautan artikel tentang cara WebKit melakukan rendering teks GPU. Menunjukkan bahwa bahkan saat ini pun pemrosesan dari string hingga bitmap sebagian bisa dilakukan di GPU, tetapi ‘anti-aliasing subpiksel’ yang diharapkan justru tidak dibahas saat promosi GPU
• Menyebut bahwa bukan hanya Windows, Chrome/Firefox pun sudah memiliki akselerasi GPU hingga anti-aliasing subpiksel sejak beberapa tahun lalu. Menekankan bahwa anggapan teknologi modern belum dipakai adalah kesalahpahaman
• Komentar yang berterima kasih karena ringkasannya sangat jelas
• Jika ingin rendering subpiksel, prasyaratnya adalah mengetahui grid subpiksel display secara akurat. Menurutnya, meminta pengaturan terpisah untuk tiap monitor adalah satu-satunya UX yang masuk akal. OS juga harus menangani hal seperti rotasi layar
• Sependapat dengan penulis bahwa cara paling ideal adalah display langsung memberi tahu sistem tentang struktur subpikselnya sendiri
• Menilai hasilnya sangat bagus, sambil mengatakan bahwa anti-aliasing subpiksel memang punya keunggulan jelas pada era LCD awal 2000-an, tetapi di era display retina beresolusi tinggi sekarang nyaris tidak lagi bermakna. Kekurangannya antara lain hanya bisa diterapkan pada latar belakang opak, tidak bisa dipakai untuk pascaproses seperti resize, mirror, blur, dan screenshot bisa terlihat aneh di perangkat lain
• Menambahkan bahwa menghapus AA subpiksel memang menyederhanakan keadaan, tetapi masih banyak pengguna desktop yang memakai display beresolusi rendah 96dpi dan 1366x768, dengan data pendukung dari survei perangkat keras Firefox data
• Juga menambahkan pendapat bahwa sebagai pengguna layar beresolusi tinggi, mengabaikan pengguna resolusi rendah itu tidak bertanggung jawab
• Khawatir bahwa sekalipun protokol tata letak subpiksel diperkenalkan, sebagian produsen bisa salah mengimplementasikannya sehingga memunculkan masalah rendering yang sulit dipahami pengguna umum
• Kesan jujur saat melihat font tulisan tangan (cursive): “siapa sih yang menganggap font cursive begini ide yang bagus?”
• Dijelaskan bahwa orang yang suka tulisan tangan, terutama dari era penggunaan pena celup atau pena fountain, mungkin akan menyukainya
• Diterangkan bahwa orang yang sering menulis surat dulu memakai cursive, dan penggunaannya menurun setelah internet dan telepon jarak jauh gratis hadir
• Pertanyaan bahwa tidak bisa menemukan tautan kode