टेक्सचर-रहित टेक्स्ट रेंडरिंग तकनीक

• टेक्सचर-रहित टेक्स्ट रेंडरिंग

  • पारंपरिक रूप से टेक्स्ट रेंडर करने के लिए फ़ॉन्ट के सभी glyphs को atlas में रेंडर करना, उसे texture के रूप में bind करना, और फिर स्क्रीन पर triangles ड्रॉ करके glyphs को एक-एक करके रेंडर करना पड़ता है.
  • debug messages को तेज़ी से आउटपुट करने के लिए एक सरल तरीका प्रस्तुत किया गया है.
  • ऐसी तकनीक समझाई गई है जिससे पूरे टेक्स्ट को एक ही draw call में ड्रॉ किया जा सकता है.

• फ़ॉन्ट: टेक्सचर-रहित पिक्सेल

  • font atlas texture को हटाने के लिए fragment shader के भीतर font atlas जैसा कुछ स्टोर करना पड़ता है.
  • integer constants का उपयोग करके bitmap स्टोर किया जा सकता है, और इसके जरिए glyphs रेंडर किए जा सकते हैं.
  • 8-bit integers को bitmap की तरह इस्तेमाल करके GLSL fragment shader में स्क्रीन पर ड्रॉ किया जा सकता है.

• एकल draw call

  • दोहराए जाने वाले draw commands से बचने के लिए instanced draw call का उपयोग किया जा सकता है.
  • प्रत्येक instance के लिए position offset और प्रदर्शित किया जाने वाला टेक्स्ट शामिल करने वाला डेटा इस्तेमाल होता है.
  • message को 4 वर्णों में बाँटकर uint32_t में बदला जाता है और word_data structure में स्टोर किया जाता है.

• vertex shader

  • vertex shader तीन outputs बनाता है.
  • gl_Position में triangle के vertices को स्क्रीन पर रखा जाता है.
  • प्रदर्शित किया जाने वाला word fragment shader को पास किया जाता है.
  • texture coordinates बनाकर uv coordinates की गणना की जाती है.

• fragment shader

  • fragment shader को टेक्स्ट रेंडर करने के लिए तीन जानकारियों की ज़रूरत होती है.
  • uv coordinates को glyph bitmap के सही bit से मैप करके glyph रेंडर किया जाता है.
  • अगर bit set है तो foreground color से, और set नहीं है तो background color से रेंडर किया जाता है.

• पूर्ण implementation और source code

  • इस तकनीक का implementation le_print_debug_print_text module के source code में देखा जा सकता है.
  • यह module स्क्रीन पर debug messages को आसानी से आउटपुट करने में मदद करता है.

[GN⁺]

Hacker News टिप्पणियाँ

• ShaderToy में साधारण arithmetic के ज़रिए code लिखना मज़ेदार और आसान काम है। text hacking के कई उदाहरण मौजूद हैं
  • उदाहरण: 300 अक्षरों से कम में Matrix, हरे CRT display effect आदि
• यह तरीका रचनात्मक है, लेकिन नतीजे बहुत सुंदर नहीं लगते। बेहतर परिणाम के लिए और bits जोड़े जा सकते हैं, लेकिन अधिक कुशल तरीका black-and-white pixels को texture के रूप में स्टोर करना है
• आधुनिक 3D rendering engines में text draw करने का आम तरीका SDF text का उपयोग करना है। इसमें पारंपरिक texture atlas का उपयोग करके signed distance field का atlas बनाया जाता है
• मैंने खुद text rendering algorithm को सीधे आज़माया नहीं है, लेकिन कई तरह की implementations का अनुभव है। resolution independence और anti-aliasing की ज़रूरत होने के कारण यह तरीका मददगार नहीं था
• यह तरीका अवधारणा के स्तर पर Will Dobbie के तरीके जैसा है, लेकिन अधिक सरल है। इसमें pixel data को array में स्टोर किया जाता है
• text को mesh के रूप में render करने का विकल्प भी है। TextMeshPro arbitrary scale को संभालने के लिए signed distance field का उपयोग करता है
• पारंपरिक texture तरीके के साथ performance comparison करना दिलचस्प होगा। आधुनिक GPU पर ऐसे साधारण कामों में जवाब शायद "हाँ" होने की संभावना ज़्यादा है
• Sebastian Lague के वीडियो में font rendering की विभिन्न तकनीकों को कवर किया गया है
• font data को fragment shader source code में शामिल करने वाली मिलती-जुलती तकनीक इस्तेमाल करने का अनुभव है। snprintf का उपयोग करके सीधे GPU buffer में output किया गया
• यह तरीका BBC Basic में छोटे 8x8 sprite बनाने जैसा है। इससे 35 साल पहले की यादें ताज़ा हो जाती हैं
• GPU texture से render करने में कुशल है, लेकिन bit manipulation में तुलनात्मक रूप से धीमा है। यह memory बचाता है, लेकिन वास्तव में atlas इस्तेमाल करने से तेज़ है या नहीं, इस पर संदेह है
• एक सवाल यह है कि क्या छोटे texture को GPU पर upload करना performance पर बड़ा असर डालता है। यह जिज्ञासा है कि क्या 2D में texture पर string render करके दो triangles पर उस texture को दिखाना संभव है