OpenGL 3D Game Tutorial 33: Distance Field Text Rendering

LWJGL tutorial series on how to create a 3D Java game with OpenGL!

This week we implement a very flexible text rendering system involving signed distance fields.

Download Font Files:

Download Candara:

Hiero Download (scroll down for Hiero download, and download the older version, not Hiero 4):

Upcoming tutorials:

- Particle Effects
- Random Terrain Generation
- Shadows
-Post processing

Future Tutorial Series:

- Game Audio
- Multiplayer
- Advanced Game Dev Concepts
- OpenGL Optimizing Techniques

Previous tutorial topics:

- Display
- VAOs and VBOs - Rendering a quad
- Rendering using glDrawElements
- Shader introduction
- Coloring using shaders
- Texturing
- Matrices, moving and rotating
- Loading 3D OBJ models
- Lighting I
- Lighting II
- Optimizations
- Transparency
- Fog
- Multitexturing
- Player Movement
- 3rd Person Camera
- Mipmapping
- Terrain Generation
- Terrain Collision Detection
- Texture Atlases
- GUIs/HUDs
- Multiple Light sources
- Point light attenuation
- Skybox
- Day/Night
- 3D Mouse Picking
- Water
- Cel Shading
- Normal Mapping
- Rendering Text
- Signed Distance Field Fonts

End of video music- Kai Engel, "Waking Stars":

[ronanderson]

I've been following your videos silently, but i have to say that you explain things very well and clearly.
I've just been looking into distance field font rendering, and this helped me greatly understanding the basics which are
suprisingly easy with the right explanation.
Thank you so much for saving me a LOT of time!

Keep the great work up, and thank you so much for sharing!

Greetings and all the best.

[lechi_]

I managed to implement this in my C++ OpenGL engine. I've seen lots of tutorials online but yours are the best!

[Andycraft]

I just want to say thank you for the time you put into these tutorial videos. You are helping thousands of people and it is something to be very proud of. Keep up the great work and good luck with Equilinox!

[kirafortherescue]

Thank you; I couldn't have made it in my C++ Game Engine without your explanation. ♥

[ThecammacehT]

Always incredible tutorials from you, thank you for the time spent creating these, they are incredibly informing and easy to follow. Your explanations allow us to change the code to how we want it and overall understand what you're and we're doing. Thanks for your hard work putting these out, very much appreciated sir.

[GieneqAD]

As always really good tutorial. Ha! Even better. You dont waste time for not neccesery things and talk about main sumbject and leave rest to the spectators.
Im really glad hearing about particles tutorial, it was what i couldn't do myself in my game :/ I hope you will also talk about bilboarding, geometry shader and feedback. :)

[jonphillips]

Very Nice, this is much better than my old bitmap font rendering system. I never put in  the time to really develope it, but now I see the connection of the pertinent data for processing the text FX through the shaders. "Thank You Again!!!", for another Great tutorial.

[mr.t]

Beautiful. Finally understand how outline effect created.

[Ananas]

coud you maybe implement frustom culling and collision detection on entitys or Greedy Meshing

[morskipaskenny]

Thanks for the tutorial! I watch all of your vids :)

[harleyracer]

@ThinMatrix real quick question about the text how can i update my text for instance I've converted the time to a string and id like to display it I've tried making a set text method to set the text in the GUIText class but doesn't seam to do anything

[krzysztof-wsog]

You can always pack each page of character texture attlass into each color chanel, ex: page 1 -> red, page 2 -> greed ect. beacuse we are not using those ( or just put another important info there, i dont know what could it be )

[mindjinx]

I like how you didnt hide secrets from your game like the text outline

[JosefdeJoanelli]

I thought the "distance" was from any pixel to the nearest edge? Not from a "center line" which may not be easily defined for some characters.

[Omaritoo]

Nice one :) but can you explain how did you do animations and those stuff ? :P

[overblade]

First of all, I really enjoy your tutorials and I successfully implemented signed distance fields. But I encountered a problem: If I scale the font down to a small value, artifacts such as hard edges or "font jitter" appear. How can I fix it?

[dbejarcaballero]

+ThinMatrix Nice tutorial! The problem is that when you tell the program the coords it needs to use, the program interpretates it as the upper left corner of the text. Is there a way to calculate the center of the text (the mid point of the font meshes)

[looijmansje]

What do you consider 'Advanced game dev concepts?' Collision detection, for instance?

[vexedev]

Could you explain the 'overallAlpha = alpha + (1 - alpha) * outlineAlpha; ' line? why not just 'alpha + outlineAlpha'? why are we taking 1-alpha (which is essentially the smoothstep) and multiplying by outlineAlpha? Thanks!

[Geosearchef]

Nice tutorial, but I have a short question. This is only for rendering static content. What way would you suggest for rendering dynamic content like values?


One could of course copy that system and use a texture atlas, that contains only numbers. That way you would be able to give the number to the fragment shader which chooses which chiffre to render (cause they all have the same proportions). But is the slight performance improvement really worth putting that much effort into it? Shouldn't it be much more easy to just add support for older versions and then use slicks text rendering system? (it's immediate mode, but it's only some text, no 3 dimensional models)