GLFontRenderer
1.0.0
Kode ini memungkinkan Anda untuk membuat teks kinerja tinggi di aplikasi OpenGL Anda sendiri. Perpustakaan rendering font dirancang dengan mudah digunakan dan membuat kinerja dalam pikiran. Saya telah menulisnya di ~ 2010 dan memperbaruinya sesekali. File font yang dibaca oleh pustaka ini ikuti format yang dikembangkan untuk generator font BM: http://angelcode.com/products/bmfont/. File font disertai dengan file tekstur. Perpustakaan mendukung tekstur RGBA standar, serta SDF saluran tunggal, dan bahkan SDF multi -saluran.
Pantau terus.
Perpustakaan Font dibagi menjadi file -file berikut:
Panggilan fungsi drowstring melakukan hal -hal berikut: Menerima String → Parses String → Membuat Daftar Quads → Menerjemahkannya ke dalam array buffer vertex -> menggambar semua segitiga bertekstur. Selama parsing, string yang akan digambar diperiksa untuk karakter yang tidak dapat ditarik oleh font saat ini, karakter tersebut akan ditarik sebagai tanda tanya. Untuk setiap karakter dalam string, quad dibuat dan ditambahkan ke quad-list akhir, quad ini berisi informasi tentang posisi dan ukuran di layar (2D, ortogonal!) Dan tekstur koordinat untuk satu karakter dalam font bitmap. Posisi quad tergantung pada posisi awal string dan posisi karakter sebelumnya. Hubungan spesifik antara jarak satu karakter dan yang berikutnya disebut kerning. File konfigurasi font berisi tabel dengan semua informasi kerning untuk font tertentu. Misalnya, jika "A" mengikuti "M" itu harus terpisah satu piksel, namun ketika "O" mengikuti "M" itu minus satu piksel, atau nol piksel. Informasi ini disimpan secara internal dalam array dua dimensi untuk akses cepat. Untuk membuat gambar ini cukup cepat, semua informasi tentang karakter dan relasi karakter (seperti kerning), serta tekstur dimuat pada awal program. Teks dapat disimpan sehingga buffer simpul tidak harus dibuat pada setiap iterasi loop render.
Cara termudah untuk memeriksa cara kerja perpustakaan dan bagaimana Anda dapat menggunakannya dalam proyek Anda dengan memeriksa contoh implementasi yang disediakan dengan repo ini. Jika Anda memerlukan informasi lebih lanjut, silakan baca sisa bab ini.
Anda harus menyalin 10 file yang disebutkan di folder proyek Anda ke dalam folder proyek Anda.
Dalam kode Anda, buat objek perpustakaan font global, sebelum membuka konteks rendering, seperti itu:
// load openGL fonts
m_fontLibrary = new CFontLibrary(<PathToFontFolder>);
if (!m_fontLibrary-> ParseAllFontsInFolder ())
return; // no fonts found!Ini akan memuat semua font yang disimpan di folder yang telah Anda tentukan sebagai parameter input. Setelah konteks rendering dibuat, tekstur perlu dimuat, seperti itu:
// init font library from the current rendering context!
theApp.m_fontLibrary-> InitGLFonts ();Ini dapat dilakukan dalam fungsi init satu kali dari konteks render itu misalnya. Perlu diingat bahwa Anda tidak dapat membagikan tekstur antara dua atau lebih konteks dengan perpustakaan ini (saya tidak mengimplementasikannya karena pada saat itu tidak ada cara yang efisien untuk melakukannya, hanya beberapa kartu nvidia yang bisa dan hanya semacam). Jadi, Anda harus memanggil ini untuk setiap konteks rendering baru. Setelah ini selesai, pustaka font siap digunakan, yang berarti Anda dapat memanggil metode drikstring () dari objek fontlibrary.
(Catatan: Bab ini membutuhkan perombakan, hanya secara kasar yang benar, beberapa parameter fungsi hilang, tetapi sebagian besar penjelasan diri) header dari panggilan draw berbunyi:
void DrawString ( const std::string& textToDraw, int x, int y, float color[ 4 ], const std::string& font, float scale = 1 . 0f );Parameter dijelaskan di bawah ini dalam tabel.
| Parameter | Keterangan |
|---|---|
| const std :: string & texttodraw | String untuk menggambar sebagai std :: string, karakter yang tidak dikenali digambar sebagai '?'. Karakter mana yang valid tergantung pada font yang digunakan dan dapat didefinisikan saat membuat font-bitmap. |
| int x | POSISI X Awal dari string di layar koordinat. 0 - Lebar |
| int y | POSISI Y dari awal string di layar koordinat. 0 - Tinggi |
| Warna pelampung [4] | Float Array yang berisi informasi warna yang akan digunakan untuk memodulasi tekstur. Informasi warna adalah nilai dari 0,0 hingga 1.0 (inklusif), dalam urutan standar berikut: {r, g, b, alpha} jelas .. |
| const std :: string & font | Parameter ini mendefinisikan tipe font yang akan digunakan. Hanya tipe font yang dapat digunakan yang ada di folder dan ada pada waktu pemuatan. Anda dapat meneruskan nama file font itu, tanpa ekstensi atau untuk lebih banyak keterbacaan kode dan keamanan Gunakan define dari file: fontlibrary.h. Catatan: Jika Anda ingin mencetak dengan huruf tebal atau miring, maka Anda harus menggunakan font yang disetel untuk melakukannya. |
| Skala pelampung | Untuk tekstur RGBA sangat disarankan untuk menggunakan default: 1.0f. Anda dapat meningkatkan atau ke bawah, tetapi harus jelas bahwa ini akan menghasilkan kabur. Namun, dengan SDF dan MSDF Anda harus dapat meningkatkan dan turun lebih jauh sebelum melihat artefak. |
Perhatikan bahwa ada lebih banyak fungsi dengan fitur tambahan, seperti istirahat garis otomatis. Lihat File Header Perpustakaan Font. Perhatikan juga bahwa string yang akan digambar akan dipotong setelah 10922 karakter. Jika Anda membutuhkan lebih banyak karakter untuk alasan aneh apa pun, cukup gunakan panggilan penarikan tambahan dan belah string menjadi bagian -bagian.
Bab ini berkaitan dengan menambahkan font Anda sendiri ke perpustakaan font.
Perhatikan bahwa saya fokus pada font non-SDF di sini. Langkah-langkah untuk font SDF sangat mirip, namun BM-Font-Gen tidak cukup. Anda masih dapat menggunakan alat itu, tetapi Anda perlu melakukan langkah pemrosesan pos dengan alat seperti Imagemagick. Tutorial di bawah ini.
Hanya tiga langkah yang diperlukan untuk mengintegrasikan font baru: 1. Buat font-config dan font-bitmap menggunakan bm-font-generator 2. Salin dua file yang dihasilkan ke folder font Anda 3. (Opsional) Tambahkan string font sebagai tentukan ke fontLibrary.h sehingga Anda dapat menggunakannya dengan lebih mudah di aplikasi Anda
Pada bagian berikut, penggunaan generator BM-font dijelaskan secara rinci, tetapi pertama beberapa catatan. Setiap file font yang Anda hasilkan hanya berisi font dengan ukuran tetap, juga sudah ditentukan oleh file apakah tebal atau miring, dll. Jumlah yang sama untuk garis besar, kehalusan font, dll. Masalah ini akan menjadi lebih jelas dengan bagian berikut.
Untuk memproduksi font-config serta bitmap font yang sebenarnya, saya menggunakan "Bitmap Font Generator" dari AngelCode. Yang dapat diperoleh dari situs web mereka: http://angelcode.com/products/bmfont/ Setelah instalasi, buka program, itu akan terlihat seperti pada gambar berikut.
Sebagai langkah pertama, buka font-settings, dengan mengklik Opsi → Pengaturan Font atau dengan memukul [F], yang akan membuka jendela baru, seperti yang ditunjukkan oleh gambar berikutnya.
Setelah Anda membuat pengaturan ini, tutup jendela pengaturan font dan lanjutkan ke langkah berikutnya.
Kembali di jendela utama program, Anda sekarang dapat memilih set karakter yang ingin Anda sertakan. Anda dapat memilih set lengkap atau hanya memilih karakter tertentu dari suatu set. Sebagai contoh, lihat gambar berikutnya.
Sebagai aturan dasar, hanya pilih karakter yang mungkin Anda gunakan, ini menghemat waktu pemrosesan dan sebagian besar dari semua memori, bukan hanya satu karakter, tetapi lebih banyak (kerning, ukuran bitmap, ukuran array dalam kode kami, dll.). Setelah Anda memilih semua karakter yang harus disertakan font Anda, lanjutkan ke bagian berikutnya.
Sekarang saatnya mengekspor font sebagai bitmap dan membuat file konfigurasi untuk itu. Buka opsi ekspor memukul saya baik [T], atau mengklik opsi → Opsi Ekspor. Jendela baru harus muncul, terlihat seperti pada gambar berikut.
Setelah pengaturan ini selesai, tutup jendela dan lanjutkan ke langkah berikutnya.
Untuk memastikan bahwa tekstur Anda tidak terlalu besar atau terlalu kecil, tekan [V] saat berada di jendela utama atau klik opsi → Visualisasikan. Jika judul jendela mengatakan apa pun kecuali "Pratinjau 1/1" tekstur Anda terlalu kecil untuk semua karakter Anda dan program akan menghasilkan lebih dari satu bitmap. Dalam hal ini, buka opsi ekspor dan tingkatkan ukuran tekstur Anda. Catatan: Tidak perlu dikuadratkan atau kekuatan dua lagi, ini hanya di OpenGL versi 1, kasingnya. Namun, saya masih akan merekomendasikannya untuk membuatnya, karena beberapa fungsi terkait tekstur mungkin masih dioptimalkan untuk itu. Fontlibrary dengan sengaja tidak menangani lebih dari satu "halaman" atau tekstur, karena ini berarti mengikat/melepaskan tekstur selama satu panggilan serut, yang lambat! Jadi buatlah tepat satu halaman. Jika di sisi lain Anda melihat bahwa karakter hanya mengisi sebagian dari bitmap, kurangi ukuran tekstur, jika memungkinkan, tetapi ini tidak sama pentingnya dengan sebaliknya. Setelah Anda puas dengan penggunaan ruang tekstur, lanjutkan ke langkah berikutnya.
Sekarang semua pengaturan dibuat, waktunya untuk mengekspor font. Klik Opsi → Simpan Bitmap-Font sebagai ... Nama file yang Anda tentukan di sini akan memengaruhi nama untuk font di pustaka font, jadi pilihlah dengan bijak. Untuk alasan kenyamanan dan keterbacaan, saya menyarankan konvensi penamaan berikut:
< Italic? > <Bold> <_ diuraikan? Ukuran?>
Berikut beberapa contoh:
Tekan simpan untuk menyelesaikan proses. Yang harus dilakukan sekarang, adalah menyalin kedua file untuk font itu ke folder font perangkat lunak Anda. Anda dapat mengonversi TGA ke PNG dengan alat lain, ingatlah untuk mengubah ekstensi file dalam file FNT dengan benar.
Ini adalah proses 3 langkah.
Pertama, gunakan generator bmfont seperti yang dijelaskan di atas. Namun, kemudian gunakan pengaturan berikut yang mungkin berbeda dari apa yang telah Anda gunakan sebelumnya.
Terakhir, Anda perlu menggunakan ImageMagick (https://imagemagick.org/index.php) atau alat serupa untuk mengonversi file tekstur ke SDF. Setelah Anda menginstal Imagemagick, jalankan yang berikut dari baris perintah (Contoh untuk windows power shell, tetapi sangat mirip untuk UNIX):
magick convert --% Arial400_0.tga -filter Jinc ( +clone -negate -morphology Distance Euclidean -level 50%,-50% ) -morphology Distance Euclidean -compose Plus -composite -level 45%,55% -resize 25% Arial400_0.png
Selanjutnya, kita perlu mengedit file FNT. Tambahkan yang berikut ke header FNT tangan saya sebelum definisi chars:
fieldType=sdf
Ini akan memberi tahu font lib untuk menggunakan saluran tunggal SDF shader saat font ini digunakan.
Untuk SDF multi-channel Anda tidak dapat menggunakan generator font BM, alih-alih gunakan: https://soimy.github.io/msdf-bmfont-xml/ dengan alat ini, Anda harus memulai dari file TTF, tetapi Anda akan menerima FNT yang biasa ditambah file PNG. Setelah diinstal, jalankan yang berikut dari baris perintah:
msdf-bmfont -o multisdf.png cour.ttf
Perhatikan bahwa Anda dapat memasok ukuran font dan parameter lainnya melalui Commandline juga.
Ini opsional: Buat definisi untuk setiap font baru yang Anda tambahkan ke fontlibrary.h, ini harus membuat pengkodean lebih mudah!
// font type defines, string must match the filename without extension in your fonts folder!
# define GLFONT_COURIER42_MSDF " Courier42_msdf "
# define GLFONT_ARIAL20 " Arial20 "
# define GLFONT_DINNEXTLTPROMED_SDF " DINNextLTProMED_SDF ".. tambahkan definisi Anda sendiri di sini!
