Teknik Rendering Teks Tanpa Tekstur

• Rendering Teks Tanpa Tekstur

  • Secara tradisional, untuk merender teks, semua glif dari font harus dirender ke atlas, kemudian di-bind sebagai tekstur, lalu segitiga digambar di layar untuk merender glif satu per satu.
  • Memperkenalkan metode sederhana untuk menampilkan pesan debug dengan cepat.
  • Menjelaskan teknik yang memungkinkan semua teks digambar dengan satu draw call.

• Font: Piksel Tanpa Tekstur

  • Untuk menghilangkan tekstur atlas font, sesuatu yang mirip atlas font harus disimpan di dalam fragment shader.
  • Bitmap dapat disimpan menggunakan konstanta integer, dan melalui cara ini glif dapat dirender.
  • Integer 8-bit dapat digunakan sebagai bitmap untuk digambar ke layar dalam GLSL fragment shader.

• Satu Draw Call

  • Instance draw call dapat digunakan untuk menghindari perintah draw yang berulang.
  • Untuk setiap instance, digunakan data yang mencakup offset posisi dan teks yang akan ditampilkan.
  • Pesan dibagi menjadi 4 karakter dan dikonversi menjadi uint32_t, lalu disimpan dalam struktur word_data.

• Vertex Shader

  • Vertex shader menghasilkan tiga output.
  • gl_Position menempatkan verteks segitiga di layar.
  • Kata yang akan ditampilkan diteruskan ke fragment shader.
  • Koordinat tekstur dibuat untuk menghitung koordinat uv.

• Fragment Shader

  • Fragment shader memerlukan tiga informasi untuk merender teks.
  • Koordinat uv dipetakan ke bit yang benar pada bitmap glif untuk merender glif.
  • Jika bit di-set, dirender dengan warna depan; jika tidak di-set, dirender dengan warna latar.

• Implementasi Lengkap dan Kode Sumber

  • Implementasi teknik ini dapat ditemukan dalam kode sumber modul le_print_debug_print_text.
  • Modul ini memudahkan penampilan pesan debug di layar.

[GN⁺]

Komentar Hacker News

• Menulis kode di ShaderToy dengan aritmetika sederhana itu menyenangkan dan mudah. Ada banyak contoh hack teks yang beragam
  • Contoh: Matrix kurang dari 300 karakter, efek tampilan CRT hijau, dan sebagainya
• Metode ini kreatif, tetapi hasilnya tidak terlalu indah. Untuk hasil yang lebih baik, bisa menambahkan lebih banyak bit, tetapi cara yang efisien adalah menyimpannya sebagai tekstur dengan piksel hitam-putih
• Cara umum menggambar teks di engine rendering 3D modern adalah menggunakan teks SDF. Ini membuat atlas signed distance field dengan memakai atlas tekstur tradisional
• Saya belum pernah benar-benar mencoba sendiri algoritma rendering teks, tetapi saya pernah mengimplementasikan beberapa hal terkait. Karena saya membutuhkan independensi resolusi dan anti-aliasing, metode ini tidak membantu
• Metode ini secara konsep mirip dengan metode Will Dobbie, tetapi lebih sederhana. Caranya adalah menyimpan data piksel dalam array
• Ada juga opsi untuk merender teks sebagai mesh. TextMeshPro menangani skala arbitrer dengan menggunakan signed distance field
• Akan menarik jika dibandingkan performanya dengan pendekatan tekstur tradisional. Untuk pekerjaan sederhana di GPU modern, kemungkinan besar jawabannya adalah "ya"
• Video Sebastian Lague membahas berbagai teknik rendering font
• Saya pernah menggunakan teknik serupa dengan memasukkan data font ke dalam source code fragment shader. Saya memakai snprintf untuk menulis langsung ke buffer GPU
• Metode ini mirip dengan menggambar sprite 8x8 kecil di BBC Basic. Mengingatkan pada kenangan 35 tahun lalu
• GPU efisien untuk merender dari tekstur, tetapi relatif lambat untuk manipulasi bit. Ini menghemat memori, tetapi belum jelas apakah benar-benar lebih cepat daripada memakai atlas
• Ada pertanyaan apakah mengunggah tekstur kecil ke GPU benar-benar berdampak besar pada performa. Saya penasaran apakah memungkinkan merender string ke tekstur dalam 2D lalu menampilkan tekstur itu pada dua segitiga