gpu font rendering

Rendering font GPU

Ini adalah demonstrasi rendering teks secara langsung pada GPU menggunakan garis besar vektor yang ditentukan oleh font.

Kontur mesin terbang dikonversi menjadi daftar kurva bezier kuadratik individu (ditentukan oleh titik kontrol mereka), yang diunggah ke GPU.

Quad dihasilkan untuk setiap mesin terbang dan piksel shader menentukan apakah setiap piksel ada di dalam atau di luar mesin terbang. Untuk melakukan ini, jumlah gulungan piksel dihitung dengan memotong sinar dengan kurva bezier. Di setiap persimpangan, sinar masuk atau keluar dari area yang diisi sebagaimana ditentukan oleh arah kurva bezier relatif terhadap sinar. Di setiap pintu keluar, jumlah belitan meningkat satu dan pada setiap entri, jumlah belitan berkurang satu. Setelah mempertimbangkan semua persimpangan, nomor belitan akan menjadi nol jika piksel berada di dalam garis besar.

Arah sinar tidak masalah untuk perhitungan angka berliku ini, tetapi matematika dapat sangat disederhanakan dengan menggunakan sinar yang sejajar dengan sumbu x. Dengan mengurangi posisi sampel dari titik kontrol kurva bezier, sistem koordinat digeser sehingga asal mula sinar ada di $ (0, 0) $ dan Ray bertepatan dengan sumbu X positif. Untuk persimpangan antara sinar dan kurva bezier kondisi $ y = 0 $ Dan $ x ge 0 $ Maka harus benar. Anti-aliasing (lihat di bawah) akan terjadi di sepanjang arah sinar, tetapi arah lain dapat dicapai dengan terlebih dahulu memutar titik kontrol kurva bezier di sekitar asal sehingga sinar selaras dengan sumbu x lagi.

Untuk menemukan persimpangan antara sinar dan kurva bezier tunggal, ingat bahwa kurva bezier kuadrat dijelaskan oleh rumus berikut (untuk latar belakang pada kurva bezier lihat kecantikan dan primer):

$$ textbf {c} (t) = (1-t)^2 textbf {p} _0 + 2 (1-t) t textbf {p} _1 + t^2 textbf {p} _2 $$

Hanya mengambil komponen y dan menerapkan kondisi tersebut $ y = 0 $ menghasilkan persamaan kuadratik sederhana:

$$ (1-t)^2 textrm {y} _0 + 2 (1-t) t textrm {y} _1 + t^2 textrm {y} _2 = 0 $$

Yang dapat diatur ulang ke:

$$ Textrm {y} _0 -2t textrm {y} _0 + t^2 textrm {y} _0 + 2t textrm {y} _1 - 2t^2 textrm {y} _1 + t^2

$$ ( textrm {y} _0 - 2 textrm {y} _1 + textrm {y} _2) t^2 - 2 ( textrm {y} _0 - textrm {y} _1) t + textrm {y {y} _1) t + {0 $ {y {y} _1) t + {textrm {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y.

Sehingga dapat diselesaikan dengan menggunakan rumus kuadrat:

$$ t_ {0/1} = {-b pm sqrt {b^2-4ac} lebih dari 2a} $$

$$ a = textrm {y} _0 - 2 textrm {y} _1 + textrm {y} _2 quad b = -2 ( textrm {y} _0 - textrm {y} _1) quad c = textrm {y} _1) quad c = {y {y} {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y {y.

Mengganti $ B = -2b $ Hasil:

$$ t_ {0/1} = {-(-2b) pm sqrt {(-2b)^2-4ac} over 2a} = {2b pm sqrt {4b^2-4ac} over 2a} = {b pm SQRT

$$ a = textrm {y} _0 - 2 textrm {y} _1 + textrm {y} _2 quad b = textrm {y} _0 - textrm {y} _1 quad c = textrm {y} _1 quad c = textrm {y} _1

Persamaan kuadrat mungkin memiliki nol, satu atau dua solusi. Selanjutnya, solusi $ t $ harus memuaskan $ 0 le t & lt; 1 $ untuk berada di segmen yang dijelaskan oleh titik kontrol (titik akhir dikecualikan karena merupakan bagian dari segmen berikutnya dari garis besar). Akhirnya, diberi solusi $ t $ Koordinat X yang sesuai dapat dihitung sebagai $ mathbf {c} _x (t) $ Untuk memeriksa kondisi kedua $ x ge 0 $ untuk persimpangan.

Pada titik ini, persimpangan antara kurva sinar dan bezier telah diidentifikasi, tetapi mereka masih perlu diklasifikasikan sebagai entri atau keluar. Demo yang disediakan oleh Dobbie secara eksplisit menghitung turunan dari kurva bezier untuk masing -masing $ t $ nilai untuk melakukan ini. Namun, turunannya juga dapat dihitung secara umum untuk kedua solusi potensial $ t_0/t_1 $ :

$$ mathbf{C}_y(t) = (textrm{y}_0 - 2textrm{y}_1 + textrm{y}_2) t^2 - 2(textrm{y}_0 - textrm{y}_1) t + textrm{y}_0 $$

$$ mathbf {c} _y (t) = at^2 - 2b t + c $$

$$ frac {d mathbf {c} _y (t)} {dt} = 2at - 2b $$

$$ frac {d mathbf {c} _y (t_0)} {dt} = 2a {b - sqrt {B^2 -AC} lebih dari A} - 2b = 2b - 2 sqrt {b^2 -AC} - 2b = -2

$$ frac{dmathbf{C}_y(t_1)}{dt} = 2a{b + sqrt{b^2-ac} over a} - 2b = 2b + 2sqrt{b^2-ac} - 2b = 2sqrt{b^2-ac} ge 0 $$

Oleh karena itu, kurva bezier melintasi sumbu x dalam arah yang tetap pada setiap larutan, dan, dikombinasikan dengan konvensi untuk orientasi kontur, $ t_0 $ selalu merupakan jalan keluar dan $ t_1 $ selalu menjadi entri.

Pendekatan yang berbeda untuk memahami hubungan ini adalah memperhatikan bahwa, karena tanda-tanda berbeda yang digunakan dalam solusi dan akar kuadrat menjadi non-negatif, $ t_0 $ harus didahulukan di sepanjang kurva $ (t_0 & lt; = t_1) $ jika $ a & gt; 0 $ . Sebaliknya, jika $ A & lt; 0 $ , lalu pesanan terbalik dan $ t_1 $ harus didahulukan $ (t_1 & lt; = t_0) $ . Parameter $ A $ bisa ditulis ulang sebagai $ 2 ( frac { textrm {y} _0 + textrm {y} _2} {2} - textrm {y} _1) $ , jadi tandanya tergantung pada apakah titik kontrol kedua di atas atau di bawah titik tengah titik kontrol pertama dan ketiga. Gambar berikut menunjukkan bahwa solusi selalu diklasifikasikan dengan benar untuk semua kombinasi arah kurva dan tanda parameter $ A $ . Perhatikan bagaimana urutan solusi di sepanjang kurva berubah, tetapi sinar selalu masuk di a $ t_1 $ solusi dan keluar di a $ t_0 $ larutan.

Jika parameter $ A $ adalah 0 (atau cukup kecil dalam perhitungan titik mengambang), ada hubungan linier antara $ t $ Dan $ y $ (Ini berlaku untuk segmen linier, tetapi juga untuk beberapa kurva non-linear), dan formula kuadratik tidak dapat lagi digunakan karena pembagian oleh $ A $ . Namun, karena hubungannya sekarang linier, paling banyak ada satu solusi, yang mudah dihitung dan diklasifikasikan.

Anti-aliasing sepanjang arah sinar diimplementasikan dengan mempertimbangkan jendela seukuran piksel di sekitar asal sinar. Jika persimpangan jatuh ke jendela ini, maka angka belitan diubah hanya secara fraksional untuk menghitung cakupan piksel. Berat fraksional ditentukan oleh jarak dari tepi kiri piksel (ini konsisten dengan sinar yang menunjuk ke kanan). Dengan mempertimbangkan bagian individual, orang dapat melihat bahwa ini menghitung cakupan satu dimensi dengan tepat.

Perhatikan, bahwa kita juga harus mempertimbangkan persimpangan sedikit di belakang asal sinar sekarang, tetapi implementasi pertama-tama menghitung persimpangan dengan sumbu x dan kemudian memverifikasi posisi x, sehingga tidak banyak berubah. Cara berpikir yang berbeda tentang hal ini adalah kondisinya $ x ge 0 $ menyiratkan fungsi pembobotan yang 0 untuk $ x & lt; 0 $ dan 1 untuk $ x ge 0 $ . Kita dapat menghapus diskontinuitas dengan memperkenalkan segmen linier di atas lebar satu piksel.

Untuk anti-aliasing penuh kita dapat menggunakan beberapa sinar di sepanjang arah yang berbeda (misalnya satu di sepanjang sumbu x dan satu di sepanjang sumbu y).

Catatan

Teknik semacam ini tunduk pada artefak dari ketepatan numerik yang terbatas dari angka titik mengambang. Gambar di bawah ini menunjukkan contoh artefak seperti itu ketika sepenuhnya diperbesar (dan mengetahui ke mana harus mencari). Namun demikian, saya telah menemukan implementasi ini sudah cukup stabil secara numerik. Setiap artefak yang tersisa dapat dihilangkan dengan menggunakan algoritma slug, yang tidak diimplementasikan di sini karena paten terkait.

Demo ini juga tidak menerapkan optimasi kinerja apa pun (seperti banding) dan mungkin memiliki penggunaan GPU tinggi dalam beberapa skenario dan ketika menggunakan font yang sangat kompleks.

Bangun instruksi

1. Init submodules

Klon proyek secara rekursif untuk menginisialisasi submodul untuk dependensi (atau jalankan git submodule update --init jika Anda sudah mengkloning repo):

 git clone --recursive https://github.com/GreenLightning/gpu-font-rendering.git
cd gpu-font-rendering

2. Gunakan cmake

 # Note: CMake will create the build directory.
cmake -S . -B build
make -j8 --directory build

Di Windows, Anda mungkin ingin menggunakan CMake GUI dan/atau Visual Studio sebagai gantinya.

Di Linux, Anda mungkin harus menginstal paket tambahan untuk pengembangan OpenGL (misalnya sudo apt-get install xorg-dev libgl1-mesa-dev untuk ubuntu).

3. Jalankan dari direktori proyek utama

 ./build/main

Program ini mensyaratkan direktori fonts dan shaders berada di direktori saat ini untuk memuat sumber dayanya. Jika Anda hanya mendapatkan jendela hitam , ini kemungkinan besar masalahnya. Periksa direktori kerja Anda dan periksa konsol untuk kesalahan.

Diuji pada Windows 10, MacOS Monterey dan Ubuntu 22.04.