Tajam Sudut dengan Font Bidang Bidang yang Ditandatangani

Signed Distance Fields (SDFs) disajikan sebagai solusi cepat untuk mencapai rendering font independen resolusi oleh Valve dalam makalah ini .

Saya sudah memiliki solusi Valve yang berfungsi, tetapi saya ingin mempertahankan ketajaman sudut. Valve menyatakan bahwa metode mereka dapat mencapai sudut yang tajam dengan menggunakan saluran tekstur kedua ANDed dengan yang dasar, tetapi tidak menjelaskan bagaimana saluran kedua ini akan dihasilkan.

Faktanya ada banyak detail implementasi yang tertinggal dari tulisan ini.

Saya ingin tahu apakah ada di antara Anda yang bisa menunjukkan saya arah untuk mendapatkan rendering font SDF dengan sudut tajam.

Adam Simmons telah melakukan beberapa pekerjaan menarik di bidang ini. Saya tidak tahu secara spesifik bagaimana dia mencapainya, tetapi rendering vektor berbasis SDF-nya adalah yang paling tajam yang pernah saya lihat dalam praktik di luar Valve. http://twitter.com/adamjsimmons/status/611677036545863680

EDIT: Silakan lihat jawaban saya yang lain dengan solusi konkret.

Saya sebenarnya telah memecahkan masalah yang tepat ini lebih dari setahun yang lalu untuk tesis master saya. Di kertas Valve, mereka menunjukkan bahwa Anda dapat DAN dua bidang jarak untuk mencapai ini, yang berfungsi selama Anda hanya memiliki satu sudut cembung. Untuk sudut cekung, Anda juga memerlukan operasi ATAU. Orang ini sebenarnya mengembangkan beberapa sistem yang tidak jelas untuk beralih antara dua operasi menggunakan empat saluran tekstur.

Namun, ada operasi yang jauh lebih sederhana yang dapat memfasilitasi baik AND dan OR tergantung pada situasinya, dan ini adalah gagasan utama dari tesis saya: median tiga . Jadi pada dasarnya, Anda menggunakan tepat tiga saluran (ideal untuk RGB), yang sepenuhnya dapat dipertukarkan, dan menggabungkannya menggunakan operasi median (pilih nilai tengah dari ketiganya).

Untuk mengakomodasi anti-aliasing, kami tidak bekerja hanya dengan boolean, tetapi nilai floating point, dan operasi AND menjadi minimum, dan OR menjadi maksimum dua nilai. Median tiga memang dapat melakukan keduanya: jika a < b , untuk ( a , a , b ), median adalah minimum, dan untuk ( a , b , b ), itu adalah maksimum.

Proses rendering masih sangat sederhana. Seluruh shader fragmen termasuk anti-aliasing dapat terlihat seperti ini:

int main() {
    // Bilinear sampling of the distance field
    vec3 s = texture2D(sdf, p).rgb;
    // Acquire the signed distance
    float d = median(s.r, s.g, s.b) - 0.5;
    // Weight between inside and outside (anti-aliasing)
    float w = clamp(d/fwidth(d) + 0.5, 0.0, 1.0);
    // Combining the background and foreground color
    gl_FragColor = mix(outsideColor, insideColor, w);
}

Jadi satu-satunya perbedaan dari metode asli adalah menghitung median tepat setelah sampel tekstur. Anda harus mengimplementasikan fungsi median, yang dapat dilakukan hanya dengan 4 menit / operasi maks .

Sekarang tentu saja, pertanyaannya adalah, bagaimana cara membuat bidang jarak tiga saluran seperti itu?Dan ini bagian yang sulit. Pendekatan yang paling jelas yang saya ambil di awal adalah melakukan dekomposisi bentuk input / mesin terbang menjadi tiga komponen, dan kemudian menghasilkan bidang jarak konvensional dari masing-masing. Aturan untuk dekomposisi ini tidak rumit. Pertama, area dengan setidaknya 2 dari 3 saluran aktif adalah bagian dalamnya. Kemudian, jika Anda membayangkan ini sebagai saluran warna RGB, sudut cembung harus dibuat dari warna sekunder, dan dua komponen utamanya terus keluar. Sudut-sudut cekung adalah kebalikannya: Dua warna sekunder melingkupi warna primer mereka yang umum, dan irisan antara tempat kedua sisi terus ke dalam berwarna putih. Saya juga menemukan bahwa beberapa lapisan diperlukan di mana dua warna primer atau dua warna sekunder akan bersentuhan untuk menghindari artefak (misalnya, pada goresan tengah "N"

Gambar berikut adalah contoh penguraian yang dihasilkan oleh program dari tesis saya:

Namun pendekatan ini memiliki beberapa kelemahan. Salah satunya adalah bahwa efek khusus, seperti garis besar dan bayangan tidak akan berfungsi dengan benar. Fortunatelly, saya juga datang dengan metode kedua, jauh lebih elegan, yang menghasilkan bidang jarak secara langsung, dan bahkan mendukung semua efek grafis. Ini juga termasuk dalam tesis saya dan juga lebih dari satu tahun. Saya tidak akan memberikan rincian lebih lanjut saat ini, karena saya saat ini sedang menulis makalah yang menjelaskan teknik kedua ini secara rinci, tetapi saya akan mempostingnya di sini segera setelah selesai.

Bagaimanapun, berikut adalah contoh perbedaan kualitas. Resolusi tekstur sama di setiap gambar, tetapi yang kiri menggunakan tekstur biasa, yang tengah menggunakan bidang jarak biasa, dan yang kanan menggunakan bidang jarak tiga saluran saya. Overhead kinerja hanya perbedaan antara pengambilan sampel tekstur RGB versus yang monokrom.

Maaf tentang penantian yang lama, tetapi menjadi jelas bahwa meskipun artikel yang saya janjikan pada dasarnya selesai, proses penerbitan akan memakan waktu. Oleh karena itu, saya malah menyiapkan program open source dengan algoritma konstruksi bidang jarak multi-channel baru saya, msdfgen , yang dapat Anda coba sekarang.

Ini tersedia di GitHub: https://github.com/Chlumsky/msdfgen

(Saya baru mengenal hal ini, jadi tolong beri tahu saya jika ada sesuatu yang salah dengan repositori.)

Seseorang juga bertanya tentang bagaimana membandingkannya dengan bidang jarak monokrom yang lebih besar, jadi di sini ada teaser perbedaan kualitas. Namun, itu benar-benar tergantung pada font tertentu, dan saya tidak akan mengatakan itu selalu bernilai data tambahan.

Cukup menarik! Saya penulis kertas jarak yang ditandatangani katup. Maaf sedikit tentang detail implementasi. Saya hanya memasukkan dua contoh saluran sebagai pekerjaan di masa depan - saya tidak memiliki generator. Saya pikir sesuatu seperti menghasilkan res sdf tinggi dan segmentasi berdasarkan sudut gradien sdf akan menjadi taktik yang masuk akal. Tapi tidak pernah berhasil. Skema multisaluran apa pun harus ditimbang terhadap penggunaan data saluran tunggal res yang lebih tinggi dari jejak memori yang sama, untuk rasio perbesaran yang dibutuhkan aplikasi Anda.

Saya sama sekali tidak ahli dalam hal ini, tetapi Anda mungkin dapat, setidaknya secara teori, mempertahankan sudut tajam dalam pseudo-SDF monokromatik jika Anda menggunakan salah satu filter Bilateral, filter Directional Bicubic alih-alih filter Bilinear standar. Selain manfaat nyata menghemat memori, Anda juga bisa memiliki beberapa saluran untuk decals SDF multi-warna.

Atau, jika Anda tidak keberatan menggunakan saluran kedua, maka Anda juga dapat mencoba memiliki satu saluran untuk Jarak Horisontal dan saluran lainnya untuk Jarak Vertikal, dan menggunakan piramida energi Sellacean (DoL) untuk mengompresi tekstur sehingga informasi yang berlebihan tidak diperlukan. direkam.

Solusi teoritis ketiga dan terakhir adalah bereksperimen dengan Tekstur Sampel Heksagonal melalui Array Set Addressing.

Sayangnya, saya tidak memiliki sarana untuk menguji ide-ide saya saat ini, dan tidak dapat menemukan dokumen yang menggambarkan atau menguji sesuatu yang mirip dengan ide-ide saya. Saya akan menautkan semua artikel yang relevan di mana saya mendapatkan informasi / ide saya segera.