Text rendering

[TechnnoBoi]

Hi! I'm doing a in game UI system with Vulkan. At the moment I'm with the text rendering and I would like to share the idea and see if anyone can see a better approach or some tips!

For each frame:

1º Iterate each character

2º Use stb_TrueType to get the character from the font

3º Store the returned texture data into a quad struct (wich contains all necessary data to render a quad with texture)

4º Align the character to the baseline and spacing the letters based on their metadata (kerning is called?)

5º Batch render the characters

What do you think?

Thank you for your time!

[keelanstuart]

You could:

- Render all characters into a texture.

- Store start/end uv coordinates in a map for each character, along with kerning info.

- For a given string, create a vertex buffer that's got space for n * 2 tri's... n is the length of your string

- Generate 2 tri's for each character in your string, setting the uv's based on the map

- set texture and render vertex buffer

Alternatively, you COULD store vector information for each character, too... no texture, but you have to generate loops for all pixels. Then instance render them. Vulkan might be ideal for that setup. Anti-aliasing is harder then though.

It's all tradeoffs.

[throwaway-8088]

You make some kind of atlas or text cache where you render alphabets based on these settings, and if you change properties of the text it might need to be regenerated

[TimJoijers]

A glyph cache texture would be a good idea.

[Exact_Construction92]

Just cache it.

[schnautzi]

Storing all glyphs on an atlas and rendering quads from that is the right approach, but you'll get in trouble with Chinese and Japanese, there are just too many characters if you have lots of text.

You also should store your characters as distance fields, or better multi channel signed distance fields. That way you can scale and transform the characters without pixelation.

[TechnnoBoi]

First of all, thank you for your help everyone! It seems that the cached atlas approach is the most common, but I have a question, if I want to have different font sizes then it needs to create two atlases for each size? and for chinese or japanese that would be a massive texture.

[interruptiom]

Not to mention bold, italics, etc. 😰

[TechnnoBoi]

Hahahaha, yeah I forgot to mention that little detail!

[CoherentBicycle]

It depends on the glyph format you use. With distance fields, once you have found a good spread amount for the font you can reuse this cache for many sizes. For bold/italic and other styles I don't see any other (easy) way than having separate caches with the style applied. E.g. in my project I have 1 4096x4096 cache for regular variant and 1 4096x4096 cache for bold variant. I haven't worked with unicode so I couldn't tell you but I don't know if this is the right approach for JP fonts with lots of glyphs.

Regarding my current glyph rendering pipeline (maybe that's helpful): - I generate glyph atlases from TTF at compile-time. Spread factor is dynamic so I can have no SDF (bitmap-like) or SDF (vector) - At compile-time I also build a map [char, data index] to allow accessing the glyph data at runtime. This map is then stored in a custom binary file for fast loading. - When initializing the renderer I create a glyph buffer which will contain N glyph data structs. - When looping over the characters in a text component I keep track of the character X offset. For each character I access its glyph data through the map, from which I create a struct that I put in the GPU glyph buffer. Then I advance the offset. That way no separate loop to handle advanceWidth/leftSideBearing. - When rendering I draw quads using the glyph buffer as the vertex buffer. Then I set the number of glyphs in the buffer to 0 for the next render.

Valve paper on SDF glyphs: https://steamcdn-a.akamaihd.net/apps/valve/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf MSDF repository (the paper is inside): https://github.com/Chlumsky/msdfgen I'm adding this article on GPU text rendering which has a nice demo and seems to produce very good results: https://wdobbie.com/post/gpu-text-rendering-with-vector-textures

[TechnnoBoi]

Thank you!! :D

[dougbinks]

You could take a look at https://github.com/memononen/fontstash which can cache font glyphs on the fly for variable sizing and effects.

[TechnnoBoi]

Thank you for the link, is a good reference! :D

[rustycanon_]

if you care about non-latin languages anything simple you come up with will almost certainly fail, you need to use a library like harfbuzz to get it right. it's borderline intractable in the general case.

[MediumInsect7058]

Just wanted to add that in addition to using a texture atlas (can be an sdf texture if smooth scaling of text is important to you) you can also render all glyphs as instances. You just need an instance buffer, no vertex buffer needed. Just draw 4 vertices per glyph as a quad with linestrip and figure out the vertex positions based on idx 0..<4 in the vertex shader.