Draw text in OpenGL ES

Question

I'm currently developing a small OpenGL game for the Android platform and I wonder if there's an easy way to render text on top of the rendered frame (like a HUD with the player´s score etc). The text would need to use a custom font also.

I've seen an example using a View as an overlay, but I don't know if I want to do that since I might want to port the game to other platforms later.

Any ideas?

Answer 1

For static text:

• Generate an image with all words used on your PC (For example with GIMP).
• Load this as a texture and use it as material for a plane.

For long text that needs to be updated once in a while:

• Let android draw on a bitmap canvas (JVitela's solution).
• Load this as material for a plane.
• Use different texture coordinates for each word.

For a number (formatted 00.0):

• Generate an image with all numbers and a dot.
• Load this as material for a plane.
• Use below shader.

• In your onDraw event only update the value variable sent to the shader.

  precision highp float;
  precision highp sampler2D;
  
  uniform float uTime;
  uniform float uValue;
  uniform vec3 iResolution;
  
  varying vec4 v_Color;
  varying vec2 vTextureCoord;
  uniform sampler2D s_texture;
  
  void main() {
  
  vec4 fragColor = vec4(1.0, 0.5, 0.2, 0.5);
  vec2 uv = vTextureCoord;
  
  float devisor = 10.75;
  float digit;
  float i;
  float uCol;
  float uRow;
  
  if (uv.y < 0.45) {
      if (uv.x > 0.75) {
          digit = floor(uValue*10.0);
          digit = digit - floor(digit/10.0)*10.0;
          i = 48.0 - 32.0 + digit;
          uRow = floor(i / 10.0);
          uCol = i - 10.0 * uRow;
          fragColor = texture2D( s_texture, uv / devisor * 2.0 + vec2((uCol-1.5) / devisor, uRow / devisor) );
      } else if (uv.x > 0.5) {
          uCol = 4.0;
          uRow = 1.0;
          fragColor = texture2D( s_texture, uv / devisor * 2.0 + vec2((uCol-1.0) / devisor, uRow / devisor) );
      } else if (uv.x > 0.25) {
          digit = floor(uValue);
          digit = digit - floor(digit/10.0)*10.0;
          i = 48.0 - 32.0 + digit;
          uRow = floor(i / 10.0);
          uCol = i - 10.0 * uRow;
          fragColor = texture2D( s_texture, uv / devisor * 2.0 + vec2((uCol-0.5) / devisor, uRow / devisor) );
      } else if (uValue >= 10.0) {
          digit = floor(uValue/10.0);
          digit = digit - floor(digit/10.0)*10.0;
          i = 48.0 - 32.0 + digit;
          uRow = floor(i / 10.0);
          uCol = i - 10.0 * uRow;
          fragColor = texture2D( s_texture, uv / devisor * 2.0 + vec2((uCol-0.0) / devisor, uRow / devisor) );
      } else {
          fragColor = vec4(0.0, 0.0, 0.0, 0.0);
      }
  } else {
      fragColor = vec4(0.0, 0.0, 0.0, 0.0);
  }
  gl_FragColor = fragColor;
  
  }
  

Above code works for a texture atlas where numbers start from 0 at the 7th column of the 2nd row of the font atlas (texture).

Refer to https://www.shadertoy.com/view/Xl23Dw for demonstration (with wrong texture though)

Answer 2

I looked at the sprite text example and it looks awfully complicated for such a task, I considered rendering to a texture too, but I'm worried about the performance hit that might cause. I might just have to go with a view instead and worry about porting when it's time to cross that bridge :)

Answer 3

I've written a tutorial that expands on the answer posted by JVitela. Basically, it uses the same idea, but instead of rendering each string to a texture, it renders all characters from a font file to a texture and uses that to allow for full dynamic text rendering with no further slowdowns (once the initialization is complete).

The main advantage of my method, compared to the various font atlas generators, is that you can ship small font files (.ttf .otf) with your project instead of having to ship large bitmaps for every font variation and size. It can generate perfect quality fonts at any resolution using only a font file :)

The tutorial includes full code that can be used in any project :)

Answer 4

Take a look at CBFG and the Android port of the loading/rendering code. You should be able to drop the code into your project and use it straight away.

CBFG - http://www.codehead.co.uk/cbfg

Android loader - http://www.codehead.co.uk/cbfg/TexFont.java

Answer 5

If you insist on using GL, you could render the text on to textures. Assuming that most of the HUD is relatively static, you shouldn't have to load the textures to texture memory too often.

Answer 6

According to this link:

http://code.neenbedankt.com/how-to-render-an-android-view-to-a-bitmap

You can render any View to a bitmap. It's probably worth assuming that you can layout a view as you require (including text, images etc.) and then render it to a Bitmap.

Using JVitela's code above you should be able to use that Bitmap as an OpenGL texture.