Teknik untuk memberikan teks dengan WebGL

Seperti peraturan di WebGL, apa -apa yang kelihatan seperti itu sememangnya mudah sebenarnya agak rumit. Lukisan garis, debugging shaders, rendering teks ... mereka semua sial sukar untuk melakukannya dengan baik di WebGL.

Bukankah itu pelik? WebGL tidak mempunyai fungsi terbina dalam untuk membuat teks. Walaupun teks kelihatan seperti fungsi yang paling asas. Apabila ia datang untuk benar -benar menjadikannya, perkara menjadi rumit. Bagaimanakah anda mengambil kira jumlah glyph yang besar untuk setiap bahasa? Bagaimana anda bekerja dengan fon lebar tetap, atau fon lebar berkadar? Apa yang anda lakukan apabila teks perlu diberikan atas ke bawah, kiri ke kanan, atau kanan ke kiri? Persamaan matematik, gambar rajah, muzik lembaran?

Tiba-tiba ia mula masuk akal mengapa rendering teks tidak mempunyai tempat dalam API grafik peringkat rendah seperti WebGL. Rendering teks adalah masalah yang rumit dengan banyak nuansa. Jika kita mahu memberikan teks, kita perlu kreatif. Nasib baik, banyak orang pintar sudah datang dengan pelbagai teknik untuk semua keperluan teks WebGL kami.

Kami akan belajar di beberapa teknik tersebut dalam artikel ini, termasuk bagaimana untuk menghasilkan aset yang mereka perlukan dan cara menggunakannya dengan TigaJs, perpustakaan 3D JavaScript yang termasuk penghantar WebGL. Sebagai bonus, setiap teknik akan mempunyai demo yang mempamerkan kes penggunaan.

Jadual Kandungan

• Nota ringkas mengenai teks di luar webgl
• Geometri fon
• Tekstur teks (dan kanvas)
• Fon Bitmap
• Medan jarak yang ditandatangani
• Medan jarak yang ditandatangani pelbagai saluran
• Menjana teks 3D dengan peta ketinggian
• Bacaan lanjut

Nota ringkas mengenai teks di luar webgl

Walaupun artikel ini adalah mengenai teks di dalam WebGL, perkara pertama yang perlu anda pertimbangkan adalah sama ada anda boleh lari dengan menggunakan teks HMTL atau kanvas yang dilapisi di atas kanvas WebGL anda. Teks itu tidak boleh disekat dengan geometri 3D sebagai lapisan, tetapi anda boleh mendapatkan gaya dan akses keluar dari kotak. Itulah yang anda perlukan dalam banyak kes.

Geometri fon

Salah satu cara biasa untuk membuat teks adalah untuk membina glyphs dengan satu siri segitiga, seperti model biasa. Lagipun, rendering mata, garis dan segitiga adalah kekuatan WebGL.

Apabila membuat rentetan, setiap glyph dibuat dengan membaca segitiga dari fail fon titik triangulasi. Dari sana, anda boleh mengeluarkan glyph untuk menjadikannya 3D, atau skala glyphs melalui operasi matriks.

Geometri fon berfungsi dengan baik untuk sedikit teks. Itu kerana setiap glyph mengandungi banyak segitiga, yang menyebabkan lukisan menjadi bermasalah.

Memberi perenggan yang tepat ini yang anda baca sekarang dengan geometri font mencipta 185,084 segitiga dan 555,252 simpul. Ini hanya 259 huruf. Tulis keseluruhan artikel menggunakan geometri font dan kipas komputer anda mungkin juga menjadi turbin pesawat.

Walaupun bilangan segitiga berbeza -beza dengan ketepatan triangulasi dan jenis huruf yang digunakan, menjadikan banyak teks mungkin akan selalu menjadi hambatan ketika bekerja dengan geometri font.

Cara membuat geometri fon dari fail font

Sekiranya ia semudah memilih fon yang anda inginkan dan memberikan teks. Saya tidak akan menulis artikel ini. Format fon biasa menentukan glyphs dengan lengkung bezier. Di sisi lain, lukisan mereka di WebGL sangat mahal di CPU dan juga rumit untuk dilakukan. Jika kita mahu membuat teks, kita perlu mencipta segitiga (triangulasi) daripada lengkung Bezier.

Saya telah menemui beberapa kaedah triangulasi, tetapi tidak semestinya mereka sempurna dan mereka mungkin tidak berfungsi dengan setiap fon. Tetapi sekurang -kurangnya mereka akan memulakan anda untuk triangulating typefaces anda sendiri.

Kaedah 1: Automatik dan Mudah

Jika anda menggunakan ThreeJs, anda lulus typeface anda melalui facetype.js untuk membaca lengkung parametrik dari fail fon anda dan memasukkannya ke dalam fail .json. Ciri -ciri geometri font dalam tigajs menjaga triangulasi mata untuk anda:

 const geometry = three.fontgeometry baru ("hello there", {font: font, saiz: 80})

Sebagai alternatif, jika anda tidak menggunakan ThreeJs dan tidak perlu mempunyai triangulasi masa nyata. Anda boleh menyelamatkan diri anda dengan kesakitan proses manual dengan menggunakan threeJs untuk mengasingkan fon untuk anda. Kemudian anda boleh mengekstrak simpang dan indeks dari geometri, dan memuatkannya dalam aplikasi WebGL anda pilihan.

Kaedah 2: manual dan menyakitkan

Pilihan manual untuk triangulasi fail fon sangat rumit dan rumit, sekurang -kurangnya pada mulanya. Ia memerlukan artikel keseluruhan hanya untuk menerangkannya secara terperinci. Yang berkata, kami akan segera melangkah ke langkah -langkah pelaksanaan asas yang saya ambil dari StackOverflow.

Pelaksanaannya pada dasarnya rosak seperti ini:

1. Tambah opentype.js dan earcut.js ke projek anda.
2. Dapatkan lengkung bezier dari fail font .tff anda menggunakan opentype.js.
3. Tukar lengkung bezier ke dalam bentuk tertutup dan menyusunnya dengan kawasan menurun.
4. Tentukan indeks untuk lubang dengan memikirkan bentuk yang ada di dalam bentuk lain.
5. Hantar semua mata untuk bersuara dengan indeks lubang sebagai parameter kedua.
6. Gunakan hasil earcut sebagai indeks untuk geometri anda.
7. Nafas keluar.

Ya, itu banyak. Dan pelaksanaan ini mungkin tidak berfungsi untuk semua typefaces. Ia akan membuat anda mula tetap.

Menggunakan geometri teks dalam tigajs

Syukurlah, TigaJS menyokong geometri teks keluar dari kotak. Berikannya. Json dari Bezier Curves Font kegemaran anda dan tigajs menjaga triangulasi simpul untuk anda dalam runtime.

 var loader = three.fontloader baru ();
var font;
var teks = "Hello World"
var loader = three.fontloader baru ();
loader.load ('fonts/helvetiker_regular.typeface.json', fungsi (Helvetiker) {
  Font = Helvetiker;
  var geometry = new Three.TextGeometry (teks, {
    Font: Font,
    Saiz: 80,
    Ketinggian: 5,
  });
}

Kelebihan

• Ia mudah diekstrusi untuk membuat rentetan 3D.
• Skala dibuat lebih mudah dengan operasi matriks.
• Ia memberikan kualiti yang hebat bergantung kepada jumlah segitiga yang digunakan.

Kekurangan

• Ini tidak skala dengan baik dengan sejumlah besar teks kerana kiraan segi tiga yang tinggi. Oleh kerana setiap watak ditakrifkan oleh banyak segitiga, bahkan memberikan sesuatu yang ringkas sebagai "Hello World" menghasilkan 7,396 segitiga dan 22,188 simpang.
• Ini tidak meminjamkan kepada kesan teks biasa.
• Anti-aliasing bergantung pada aliasing pasca pemprosesan anda atau lalai penyemak imbas anda.
• Skala perkara yang terlalu besar mungkin menunjukkan segitiga.

Demo: Surat pudar

Dalam demo berikut, saya memanfaatkan betapa mudahnya untuk membuat teks 3D menggunakan geometri fon. Di dalam shader puncak, penyemperitan meningkat dan menurun seiring dengan berjalannya waktu. Sepasang itu dengan kabus dan bahan standard dan anda mendapat surat -surat hantu ini masuk dan keluar dari kekosongan.

Perhatikan bagaimana dengan jumlah huruf yang rendah jumlah segitiga sudah berpuluh -puluh ribu!

Tekstur teks (dan kanvas)

Membuat tekstur teks mungkin merupakan cara yang paling mudah dan tertua untuk menarik teks di WebGL. Buka Photoshop atau beberapa editor grafik raster lain, lukiskan imej dengan beberapa teks di atasnya, kemudian tentukan tekstur ini ke quad dan anda sudah selesai!

Sebagai alternatif, anda boleh menggunakan kanvas untuk membuat tekstur pada permintaan pada masa runtime. Anda dapat menjadikan kanvas sebagai tekstur ke quad juga.

Selain menjadi teknik yang paling rumit dari sekumpulan. Tekstur teks dan tekstur kanvas mempunyai manfaat hanya diperlukan satu quad setiap tekstur, atau diberikan sekeping teks. Jika anda benar -benar mahu, anda boleh menulis seluruh Ensiklopedia British pada satu tekstur tunggal. Dengan cara itu, anda hanya perlu membuat satu quad tunggal, enam simpang dan dua muka. Sudah tentu, anda akan melakukannya dalam skala, tetapi idea itu masih kekal: anda boleh membatalkan pelbagai glyph ke quad yang sama. Pengalaman tekstur teks dan kanvas mempunyai masalah dengan skala, terutamanya ketika bekerja dengan banyak teks.

Untuk tekstur teks, pengguna perlu memuat turun semua tekstur yang membentuk teks, kemudian menyimpannya dalam ingatan. Untuk tekstur kanvas, pengguna tidak perlu memuat turun apa -apa - tetapi sekarang komputer pengguna perlu melakukan semua rasterisasi pada masa runtime, dan anda perlu menjejaki di mana setiap perkataan terletak di dalam kanvas. Plus, mengemas kini kanvas besar boleh menjadi sangat perlahan.

Cara membuat dan menggunakan tekstur teks

Tekstur teks tidak mempunyai apa -apa yang mewah untuk mereka. Buka Editor Grafik Raster kegemaran anda, lukis beberapa teks di kanvas dan eksportnya sebagai imej. Kemudian anda boleh memuatkannya sebagai tekstur, dan memetakannya di atas kapal terbang:

 // Tekstur beban
biarkan tekstur =;
const geometry = new Three.PlaneBuffergeometry ();
const bahan baru tiga.meshbasicMaterial ({map: texture});
this.scene.add (mesh baru (geometri, bahan));

Jika aplikasi WebGL anda mempunyai banyak teks, memuat turun helaian sprite besar teks mungkin tidak sesuai, terutama bagi pengguna pada sambungan yang perlahan. Untuk mengelakkan masa muat turun, anda boleh mengatasi perkara -perkara yang apabila permintaan menggunakan kanvas offscreen kemudian sampel kanvas itu sebagai tekstur.

Mari perdagangan masa muat turun untuk prestasi sejak mengatasi banyak teks memerlukan lebih dari seketika.

 fungsi CreateTextCanvas (String, Parameter = {}) {
    
    const kanvas = document.createElement ("canvas");
    const ctx = canvas.getContext ("2d");
    
    // Sediakan fon untuk dapat mengukur
    Biarkan fontsize = parameter.fontsize || 56;
    ctx.font = `$ {fontsize} px monospace`;
    
    const textMetrics = ctx.measureText (teks);
    
    biarkan lebar = textMetrics.width;
    biarkan ketinggian = fontSize;
    
    // saiz semula kanvas untuk memadankan saiz teks 
    canvas.width = width;
    kanvas.height = ketinggian;
    canvas.style.width = width "px";
    canvas.style.height = ketinggian "px";
    
    // Fon semula memohon sejak kanvas diubah saiznya.
    ctx.font = `$ {fontsize} px monospace`;
    ctx.textalign = parameter.align || "Pusat";
    ctx.textbaseline = parameter.baseline || "tengah";
    
    // buat kanvas telus untuk kesederhanaan
    ctx.fillstyle = "telus";
    ctx.fillrect (0, 0, ctx.canvas.width, ctx.canvas.height);
    
    ctx.fillstyle = parameters.color || "Putih";
    ctx.fillText (teks, lebar / 2, ketinggian / 2);
    
    Kembali kanvas;
}

biarkan tekstur = three.texture baru (createTextCanvas ("ini teks"));

Sekarang anda boleh menggunakan tekstur di atas kapal terbang, seperti coretan sebelumnya. Atau anda boleh membuat sprite sebaliknya.

Sebagai alternatif, anda boleh menggunakan perpustakaan yang lebih cekap untuk membuat tekstur atau sprite, seperti tiga-teks2D atau tiga-spritetext. Dan jika anda mahu teks berbilang baris teks, anda harus menyemak tutorial yang menakjubkan ini.

Kelebihan

• Ini memberikan kualiti 1-ke-1 yang hebat dengan teks statik.
• Terdapat kiraan puncak/muka yang rendah. Setiap rentetan boleh menggunakan sekurang -kurangnya enam simpang dan dua muka.
• Sangat mudah untuk melaksanakan tekstur pada quad.
• Ia agak remeh untuk menambah kesan, seperti sempadan dan cahaya, menggunakan kanvas atau editor grafik.
• Kanvas menjadikannya mudah untuk membuat teks berbilang baris.

Kekurangan

• Kelihatan kabur jika berskala, diputar atau diubah selepas raster.
• On-non retina, teks kelihatan renyah.
• Anda perlu mengumpul semua rentetan yang digunakan. Banyak rentetan bermakna banyak data untuk dimuat turun.
• Rasterisasi atas permintaan dengan kanvas boleh perlahan jika anda terus mengemas kini kanvas.

Demo: Tekstur kanvas

Tekstur kanvas berfungsi dengan baik dengan jumlah teks yang terhad yang tidak sering berubah. Jadi saya membina dinding teks yang mudah dengan quads menggunakan semula tekstur yang sama.

Fon Bitmap

Kedua -dua geometri fon dan tekstur teks mengalami masalah yang sama mengendalikan banyak teks. Mempunyai satu juta simpang setiap teks adalah sangat tidak cekap, dan membuat satu tekstur setiap sekeping teks tidak benar -benar berskala.

Fon Bitmap menyelesaikan masalah ini dengan mengatasi semua glyph yang unik ke dalam tekstur tunggal , yang dipanggil Atlas Tekstur. Ini bermakna anda boleh memasang rentetan yang diberikan pada runtime dengan membuat quad untuk setiap glyph dan mengambil bahagian bahagian atlas tekstur .

Ini bermakna pengguna hanya perlu memuat turun dan menggunakan tekstur tunggal untuk semua teks. Ini juga bermakna anda hanya perlu memberikan sedikit sebanyak satu quad per glyph:

Memberi artikel keseluruhan ini akan menjadi kira -kira 117,272 simpang dan 58,636 segitiga. Itulah 3.1 kali lebih cekap berbanding dengan geometri font yang hanya satu perenggan . Itu peningkatan yang besar!

Kerana fon bitmap mengasingkan glyph ke dalam tekstur, mereka mengalami masalah yang sama seperti imej biasa. Zum masuk atau skala dan anda mula melihat kekacauan pixelated dan kabur. Jika anda mahu teks pada saiz yang berbeza, anda harus menghantar bitmap sekunder dengan glyphs pada saiz tertentu. Atau anda boleh menggunakan medan jarak yang ditandatangani (SDF) yang akan kami sampaikan di bahagian seterusnya.

Cara membuat fon bitmap

Terdapat banyak alat untuk menjana bitmaps. Berikut adalah beberapa pilihan yang lebih relevan di luar sana:

• BMFont AngelCode - Ini adalah oleh pencipta format bitmap.
• Hiero-Ini adalah alat sumber terbuka Java. Ia sangat mirip dengan BMFont Anglecode, tetapi ia membolehkan anda menambah kesan teks.
• Pereka Glyphs - Ini adalah aplikasi MacOS berbayar.
• Shoebox - Ini adalah alat untuk menangani sprite, termasuk fon bitmap.

Kami akan menggunakan BMFont Anglecode untuk contoh kami kerana saya fikir ia adalah yang paling mudah untuk dimulakan. Di bahagian bawah bahagian ini, anda boleh mencari alat lain jika anda fikir ia tidak mempunyai fungsi yang anda cari.

Apabila anda membuka aplikasinya, anda akan melihat skrin yang penuh dengan huruf yang boleh anda pilih untuk digunakan.

Sidebar aplikasi membolehkan anda memilih dan memilih kumpulan glyphs.

Bersedia untuk dieksport? Pergi ke Pilihan → Simpan Bitmap sebagai . Dan selesai!

Tetapi kita mendapat sedikit lebih awal daripada diri kita sendiri. Sebelum mengeksport, terdapat beberapa tetapan penting yang perlu anda periksa.

• Tetapan Font: Ini membolehkan anda memilih fon dan saiz yang anda mahu gunakan. Item yang paling penting di sini ialah "perlawanan ketinggian char." Secara lalai, pilihan "saiz" aplikasi menggunakan piksel dan bukan mata. Anda akan melihat perbezaan yang besar antara saiz fon editor grafik anda dan saiz fon yang dihasilkan. Pilih pilihan "Padanan Char Height" jika anda mahu glyphs anda masuk akal.
• Tetapan Eksport: Untuk eksport, pastikan saiz tekstur adalah kuasa dua (misalnya 16 × 16, 32 × 32, 64 × 64, dan lain -lain). Kemudian anda dapat memanfaatkan penapisan "linear linear linear", jika diperlukan.

Di bahagian bawah tetapan, anda akan melihat bahagian "Format Fail". Memilih sama ada pilihan di sini adalah baik selagi anda boleh membaca fail dan buat glyphs.

Jika anda mencari saiz fail terkecil. Saya menjalankan ujian ultra bukan saintifik di mana saya mencipta bitmap semua watak Lowecase dan huruf besar dan membandingkan setiap pilihan. Untuk deskriptor fon, format yang paling berkesan adalah binari .

Format deskriptor font	Saiz fail
Binari	3 kb
Teks mentah	11 kb
XML	12 kb

Format tekstur	Saiz fail
Png	7 kb
Targa	64 kb
Permukaan Directdraw	65 kb

PNG adalah saiz fail terkecil untuk tekstur teks.

Sudah tentu, ia sedikit lebih rumit daripada hanya saiz fail. Untuk mendapatkan idea yang lebih baik mengenai pilihan yang akan digunakan, anda harus melihat masa parsing dan prestasi jangka masa. Jika anda ingin mengetahui kebaikan dan keburukan setiap format, lihat perbincangan ini.

Cara menggunakan fon bitmap

Mewujudkan geometri font bitmap sedikit lebih terlibat daripada hanya menggunakan tekstur kerana kita perlu membina rentetan sendiri. Setiap glyph mempunyai ketinggian dan lebarnya sendiri, dan sampel bahagian tekstur yang berbeza. Kami perlu membuat quad untuk setiap glyph pada rentetan kami supaya kami dapat memberi mereka UV yang betul untuk mencuba Glyph.

Anda boleh menggunakan teks tiga-bmfont dalam threejs untuk membuat rentetan menggunakan bitmaps, sdfs dan msdfs. Ia menjaga teks berbilang baris, dan menyusun semua glyphs ke satu geometri. Perhatikan bahawa ia perlu dipasang dalam projek dari npm.

 var createMetry = memerlukan ('tiga-bmfont-text')
var loadFont = memerlukan ('LOAD-BMFONT')

LoadFont ('fonts/arial.fnt', fungsi (err, font) {
  // Buat geometri glyph bitmap yang dibungkus, 
  // perkataan dibungkus ke 300px dan sejajar dengan kanan
  var geometry = createMetry ({
    Font: Font,
    Teks: "Teks saya"
  })
    
  var TextUreloader = new Three.TextureLoader ();
  textureLoader.load ('fonts/arial.png', fungsi (tekstur) {
    // kita boleh menggunakan bahan threejs yang mudah
    var material = three.meshbasicMaterial baru ({{
      peta: tekstur,
      Telus: Benar,
      Warna: 0xAaffff
    })

    // Sekarang buat sesuatu dengan mesh kami!
    var mesh = three.mesh baru (geometri, bahan)
  })
})

Bergantung pada bila -bila masa teks anda ditarik sebagai putih penuh atau putih penuh, gunakan pilihan invert.

Kelebihan

• Ia pantas dan mudah untuk dijadikan.
• Ia adalah nisbah 1: 1 dan resolusi bebas.
• Ia boleh membuat sebarang rentetan, memandangkan glyphs.
• Bagus untuk banyak teks yang sering perlu diubah.
• Ia berfungsi dengan sangat baik dengan jumlah glyph yang terhad.
• Ia termasuk sokongan untuk perkara-perkara seperti kerning, ketinggian garis dan pembungkus perkataan pada masa lari.

Kekurangan

• Ia hanya menerima set watak dan gaya terhad.
• Ia memerlukan pra-rasterisasi glyphs dan pembungkusan bin tambahan untuk penggunaan optimum.
• Ia kabur dan pixelated pada skala besar, dan juga boleh diputar atau diubah.
• Hanya ada satu quad setiap glyph yang diberikan.

Demo Interaktif: Kredit Bersinar

Fon Raster Bitmap berfungsi hebat untuk kredit filem kerana kami hanya memerlukan beberapa saiz dan gaya. Kelemahannya ialah teks itu tidak bagus dengan reka bentuk yang responsif kerana ia akan kelihatan kabur dan pixelated pada saiz yang lebih besar.

Untuk kesan tetikus, saya membuat pengiraan dengan memetakan kedudukan tetikus ke saiz pandangan kemudian mengira jarak dari tetikus ke kedudukan teks. Saya juga berputar teks apabila ia menyentuh titik-titik tertentu pada paksi z dan paksi Y.

Medan jarak yang ditandatangani

Sama seperti fon bitmap, medan jarak yang ditandatangani (SDF) juga merupakan atlas tekstur. Glyphs unik adalah batch ke dalam satu "Atlas Tekstur" tunggal yang boleh membuat rentetan pada runtime.

Tetapi bukannya menyimpan glyph rasterisasi pada tekstur cara fon bitmap cara lakukan, SDF glyph dihasilkan dan disimpan sebaliknya yang membolehkan bentuk resolusi tinggi dari imej resolusi yang rendah.

Seperti jejaring poligonal (font geometri), SDF s mewakili bentuk . Setiap piksel pada SDF menyimpan jarak ke permukaan terdekat . Tanda menunjukkan apabila piksel berada di dalam atau di luar bentuk. Jika tanda itu negatif, maka piksel berada di dalam; Jika ia positif, maka piksel berada di luar. Video ini menggambarkan konsep dengan baik.

SDF s juga biasa digunakan untuk raytracing dan rendering volumetrik.

Kerana SDF menyimpan jarak di setiap piksel, hasil mentah kelihatan seperti versi kabur bentuk asal. Untuk mengeluarkan bentuk keras, anda perlu menguji alpha pada 0.5 yang merupakan sempadan glyph. Lihatlah bagaimana SDF huruf "a" dibandingkan dengan imej raster biasa:

Seperti yang saya nyatakan sebelum ini, manfaat besar SDF S dapat menjadikan bentuk resolusi tinggi dari resolusi rendah SDF. Ini bermakna anda boleh membuat SDF font 16pt dan skala teks sehingga 100pt atau lebih tanpa kehilangan banyak crispness.

SDF adalah baik untuk berskala kerana anda hampir boleh membina semula jarak dengan interpolasi bilinear, yang merupakan cara mewah untuk mengatakan kita boleh mendapatkan nilai antara dua mata. Dalam kes ini, bilinear interpolating antara dua piksel pada fon bitmap biasa memberi kita warna di antara, menghasilkan kabur linear.

Pada SDF, bilinear interpolating antara dua piksel menyediakan jarak di antara ke tepi terdekat. Oleh kerana kedua -dua jarak piksel ini sama dengan bermula, nilai yang dihasilkan tidak kehilangan banyak maklumat mengenai glyph. Ini juga bermakna semakin besar SDF, maklumat yang lebih tepat dan kurang hilang.

Walau bagaimanapun, proses ini dilengkapi dengan kaveat. Sekiranya perubahan kadar antara piksel tidak linear - seperti dalam kes sudut tajam - interpolasi bilinear memberikan nilai yang tidak tepat, mengakibatkan sudut -sudut yang terkelupas atau bulat apabila skala SDF jauh lebih tinggi daripada saiz asalnya.

Selain daripada menembusi bahagian tekstur, satu-satunya penyelesaian sebenar adalah menggunakan SDF SDF pelbagai saluran, yang mana yang akan kami sampaikan di bahagian seterusnya.

Sekiranya anda ingin menyelam lebih mendalam ke dalam sains di belakang SDF, lihat tesis Master Chris Green (PDF) mengenai topik ini.

Kelebihan

• Mereka mengekalkan krispness, walaupun diputar, berskala atau berubah.
• Mereka sesuai untuk teks dinamik.
• Mereka memberikan kualiti yang baik kepada nisbah saiz. Tekstur tunggal boleh digunakan untuk menjadikan saiz fon kecil dan besar tanpa kehilangan banyak kualiti.
• Mereka mempunyai kiraan puncak rendah hanya empat simpang per glyph.
• Antialiasing adalah murah seperti membuat sempadan, menjatuhkan bayang -bayang dan semua jenis kesan dengan ujian alpha.
• Mereka lebih kecil daripada MSDF S (yang akan kita lihat sedikit).

Kekurangan

• Yang boleh mengakibatkan sudut bulat atau terkelupas apabila tekstur dicampurkan di luar resolusinya. (Sekali lagi, kita akan melihat bagaimana MSDF dapat menghalangnya.)
• Mereka tidak berkesan pada saiz fon kecil.
• Mereka hanya boleh digunakan dengan glyphs monokrom.

Medan jarak yang ditandatangani pelbagai saluran

Fon Multi-Channel Ditandatangan Jarak (MSDF) adalah sedikit pengertian dan variasi yang agak baru-baru ini pada SDF S yang mampu menghasilkan sudut tajam yang hampir sempurna dengan menggunakan ketiga-tiga saluran warna. Mereka kelihatan agak bertiup pada mulanya tetapi jangan biarkan itu membuang anda kerana mereka mudah digunakan daripada yang muncul.

Menggunakan ketiga-tiga saluran warna tidak menghasilkan imej yang lebih berat, tetapi itulah yang memberikan MSDFS nisbah kualiti ke ruang yang jauh lebih baik daripada SDF biasa. Imej berikut menunjukkan perbezaan antara SDF dan MSDF untuk fon yang telah diperkuat sehingga 50px.

Seperti SDF biasa, MSDF menyimpan jarak ke tepi terdekat tetapi mengubah saluran warna apabila ia mendapati sudut tajam. Kami mendapat bentuk dengan melukis di mana dua saluran warna atau lebih setuju. Walaupun terdapat sedikit lagi teknik yang terlibat. Semak ReadMe untuk penjana MSDF ini untuk penjelasan yang lebih teliti.

Kelebihan

• Mereka menyokong nisbah kualiti dan ruang yang lebih tinggi daripada SDF s. dan selalunya pilihan yang lebih baik.
• Mereka mengekalkan sudut tajam apabila berskala.

Kekurangan

• Mereka mungkin mengandungi artifak kecil tetapi mereka boleh dielakkan dengan menembusi saiz tekstur glyph.
• Mereka memerlukan penapisan median tiga nilai pada runtime yang agak mahal.
• Mereka hanya serasi dengan glyphs monokrom.

Cara membuat fon MSDF

Cara paling cepat untuk membuat font MSDF ialah menggunakan alat MSDF-BMFONT-WEB. Ia mempunyai kebanyakan pilihan penyesuaian yang relevan dan ia mendapat pekerjaan yang dilakukan dalam beberapa saat, semua dalam penyemak imbas. Sebagai alternatif, terdapat beberapa fon Google yang telah ditukar menjadi MSDF oleh orang-orang di A-Frame.

Sekiranya anda juga ingin menjana SDF S atau jenis huruf anda, ia memerlukan beberapa tweak khas terima kasih kepada beberapa glyph yang bermasalah. MSDF-BMFONT-XML CLI memberi anda pelbagai pilihan, tanpa membuat perkara terlalu mengelirukan. Mari kita lihat bagaimana anda akan menggunakannya.

Pertama, anda perlu memasangnya secara global dari npm:

 NPM Pasang MSDF-BMFONT-XML -G

Seterusnya, berikan fail font .ttf dengan pilihan anda:

 msdf-bmfont ./open-sans-black.ttf --Output-Type JSON-Font-Size 76 --Texture-Size 512,512

Pilihan tersebut bernilai menggali sedikit. Walaupun MSDF-BMFONT-XML menyediakan banyak pilihan untuk menyesuaikan fon anda, hanya ada beberapa pilihan yang mungkin anda perlukan untuk menghasilkan MSDF dengan betul:

• -t atau <code>-Field-Type <msdf atau sdf>: MSDF-BMFONT-XML Menjana atlas MSDFS Glyph secara lalai. Jika anda ingin menjana SDF sebaliknya, anda perlu menentukannya dengan menggunakan -t SDF.</msdf></code></pret> </li> <li> -f <xml atau json> atau --utput-jenis <xml atau json>: MSDF-BMFONT-XML menghasilkan fail fon XML yang anda perlu menghuraikan JSON pada runtime. Anda boleh mengelakkan langkah parsing ini dengan mengeksport JSON secara langsung.</xml></xml> </li> <li> -S,--Font-Size <fontsize>: Beberapa artifak dan ketidaksempurnaan mungkin muncul jika saiz fonnya sangat kecil. Menumpukan saiz fon akan menghilangkannya sepanjang masa. Contoh ini menunjukkan ketidaksempurnaan kecil dalam huruf "M."</fontsize> </li> <li> -m <w h> atau-saiz-saiz <w h>: Jika semua aksara anda tidak sesuai dengan tekstur yang sama, tekstur kedua dibuat untuk menyesuaikannya. Kecuali anda cuba memanfaatkan Atlas Glyph multi-halaman, saya cadangkan meningkatkan saiz tekstur supaya ia sesuai dengan semua watak pada satu tekstur untuk mengelakkan kerja tambahan.</w></w> </li> </ul> <p> Terdapat alat lain yang membantu menjana fon MSDF dan SDF:</p> <ul> <li> MSDF-BMFONT-WEB: Alat Web untuk membuat MSDFS (tetapi bukan SDF s) dengan cepat dan mudah</li> <li> MSDF-BMFONT: Alat Node Menggunakan Kaherah dan Node-Canvas</li> <li> MSDFGEN: Alat baris perintah asal yang semua alat MSDF lain berasaskan</li> <li> Hiero: Alat untuk menghasilkan kedua -dua bitmaps dan fon SDF</li> </ul> <h4 id="Cara-Menggunakan-Fon-SDF-dan-MSDF"> Cara Menggunakan Fon SDF dan MSDF</h4> <p> Kerana fon SDF dan MSDF juga Atlase Glyph, kita boleh menggunakan teks tiga-BMFont seperti yang kita lakukan untuk fon bitmap. Satu -satunya perbezaan ialah kita perlu mendapatkan glyph kita dari medan jarak dengan shader serpihan.</p> <p> Berikut adalah cara yang berfungsi untuk fon SDF. Oleh kerana medan jarak kami mempunyai nilai yang lebih besar daripada .5 di luar glyph kami dan kurang daripada 0.5 di dalam glyph kami, kami perlu menguji alfa dalam shader fragmen pada setiap piksel untuk memastikan kami hanya membuat piksel dengan jarak kurang dari 0.5, menjadikan hanya bahagian dalam glyphs.</p> <pre rel="JavaScript"> const fragmentshader = ` Warna VEC3 seragam; Peta Sampler2D Seragam; berbeza VEC2 VUV; void main () { vec4 texcolor = texture2d (peta, vuv); // hanya menjadikan bahagian dalam glyph. float alpha = langkah (0.5, texcolor.a); gl_fragcolor = vec4 (warna, alpha); jika (gl_fragcolor.a <p> Begitu juga, kita boleh mengimport fon dari teks tiga-bmfont yang dilengkapi dengan antialiasing keluar dari kotak. Kemudian kita boleh menggunakannya secara langsung pada bahan Rawshadermal:</p><pre rel="JavaScript"> Biarkan sdfshader = memerlukan ('tiga-bmfont-text/shaders/sdf'); biarkan material = three.rawshadermaterial (msdfshader ({{{ peta: tekstur, Telus: Benar, Warna: 0x000000 }));

  Fon MSDF sedikit berbeza. Mereka mencipta sudut tajam oleh persimpangan dua saluran warna. Dua atau lebih saluran warna harus bersetuju mengenainya. Sebelum melakukan apa -apa teks alfa, kita perlu mendapatkan median tiga saluran warna untuk melihat di mana mereka bersetuju:

   const fragmentshader = `
  
    Warna VEC3 seragam;
    Peta Sampler2D Seragam;
    berbeza VEC2 VUV;
  
    Float Median (Float R, Float G, Float B) {
      kembali max (min (r, g), min (max (r, g), b));
    }
    
    void main () {
      vec4 texcolor = texture2d (peta, vuv);
      // hanya menjadikan bahagian dalam glyph.
      float sigdist = median (texcolor.r, texcolor.g, texcolor.b) - 0.5;
      float alpha = langkah (0.5, sigdist);
      gl_fragcolor = vec4 (warna, alpha);
      jika (gl_fragcolor.a <p> Sekali lagi, kita juga boleh mengimport dari teks tiga-bmfont menggunakan MSDFShader yang juga dilengkapi dengan antialiasing dari kotak. Kemudian kita boleh menggunakannya secara langsung pada bahan Rawshadermal:</p><pre rel="JavaScript"> biarkan msdfshader = memerlukan ('tiga-bmfont-text/shaders/msdf');
  biarkan material = three.rawshadermaterial (msdfshader ({{{
    peta: tekstur,
    Telus: Benar,
    Warna: 0x000000
  }));

  Demo: Pengenalan Star Wars

  Star Wars Drawl Intro adalah contoh yang baik di mana fon MSDF dan SDF berfungsi dengan baik kerana kesannya memerlukan teks untuk datang dalam pelbagai saiz. Kita boleh menggunakan MSDF tunggal dan teks selalu kelihatan tajam! Walaupun, sayangnya, tiga-bm-font tidak menyokong teks yang dibenarkan lagi. Memohon justifikasi kiri akan membuat persembahan yang lebih seimbang.

  Untuk kesan saber cahaya, saya merenung satah yang tidak kelihatan saiz pesawat, melukis ke kanvas yang saiz yang sama, dan mengambil sampel kanvas dengan memetakan kedudukan adegan ke koordinat tekstur.

  Petua Bonus: Menjana teks 3D dengan peta ketinggian

  Selain daripada geometri fon, semua teknik yang kami tutup menjana rentetan atau glyphs pada quad tunggal. Jika anda ingin membina geometri 3D daripada tekstur rata, pilihan terbaik anda ialah menggunakan peta ketinggian.

  Peta ketinggian adalah teknik di mana ketinggian geometri ditumpuk menggunakan tekstur. Ini biasanya digunakan untuk menjana gunung dalam permainan, tetapi ternyata menjadi teks rendering yang berguna juga.

  Satu -satunya kaveat ialah anda memerlukan banyak muka untuk teks kelihatan lancar.

  Bacaan lanjut

  Situasi yang berbeza memerlukan teknik yang berbeza. Tiada apa yang kita lihat di sini adalah peluru perak dan mereka semua mempunyai kelebihan dan kekurangan mereka.

  Terdapat banyak alat dan perpustakaan di luar sana untuk membantu memanfaatkan sepenuhnya teks WebGL, yang kebanyakannya berasal dari WebGL luar. Jika anda ingin terus belajar, saya sangat mengesyorkan anda melampaui WebGL dan periksa beberapa pautan ini:

  • Berapa banyak cara untuk memuatkan font dalam tigajs
  • Kajian Kes mengenai Kempen Spotify Berat Teks
  • Perbualan yang menarik mengenai MSDFS
  • Lebih banyak teknik rendering fon
  • Rendering Vector Art (Glyphs) di GPU
  • Bagaimana freetype membuat teks diberikan
  • Membuat kesan menarik dengan fon bitmaps

  Atas ialah kandungan terperinci Teknik untuk memberikan teks dengan WebGL. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!