Implementation: Drawing Text and Images

Overview 

Modern OpenGL does not support drawing text or Images so it needs to be handled independently. There many popular libraries available such as freetype to render text in a scene.

Details

In this post we shall discuss drawing text using GDI+ APIs. The plan is to  draw text and Images onto a memory based bitmap which is later loaded as a texture.

A new mesh class  TextMesh is defined for loading bitmap as texture. It's used by TextImageSketcher object for loading vertex data and texture data to the vertex and fragment shaders.

TextImageSketcher uses GDIPlus to create ARGB in memory bitmap containing text to be drawn. The size of the bitmap should be multiples of 128. i.e.,  128, 256, 512 etc.

First bitmap is filled with black color and then Text is drawn using the font and color. Note the text color needs to be non black. Font can be changed by passing LOGFONT structure, Also text color can be changed by passing COLLOREF of the color.

Fragment shader is modified for blending fragments with the background.

The client needs to first Startup() GDIPlus in the beginning of the application and Shutdown()  at the end.

Instantiate TextImageSketcher object by Init() method supply unique texture id and size.

DrawText() can be called to draw text and supply font details and text color. 

DrawImage() can be called to render images.

The TextImageSketcher object can be translated, rotated etc.  just like any 3D object.

System  class diagram

TextImageSketcher derives from BaseGeometry class. It overrides mesh with an instance of TextMesh to generate 2D geometry. It also uses TextureUtil to render text and images into the texture.

TextMesh

TextMesh derives from IGeometryMesh class. It provides 2D geometry for drawing text and images. It supplies vertices and texture coordinates.

Members

Name	Description
texturemap	Provides texture map.
vertices	Provides 2D vertices.

Methods

Name	Description
Init	This method generates vertex data for the GPU to render the geometrical shape. This method is called if the data is sent in  non indexed mode. It generates position and vertex data.

TextureUtil

TextureUtil implements handling textures from image files and bitmaps. It's used by multiple purposes such as rendering 3D objects or text.

Members

Name	Description
textureID	Unique texture handle returned after creating the texture.
texunit	Unique texture unit. It's value should be one of the 80 values supported by the system.

Methods

Name	Description
Cleanup	Releases resources.
Init	Assigns unique texture unit to texunit.
LoadTextTexture	Used to render text. It generates texture from GDI bitmap.
LoadTextTextureImage	Used to render text. It wraps 2D image from GDI bitmap.
LoadTexture	Loads texture from an image file.
MakeActive	Makes the texture active.

TextImageSketcher

TextImageSketcher derives from BaseGeometry class. It renders text and images. The utility class TextureUtil is used for loading text and images onto the texture.

Members

Name	Description
wd ht	Specifies the dimensions of the bitmap.
texutl	An instance of TextureUtil. It helps with loading text and images onto the texture.

Methods

Name	Description
Init	This method overrides the base class Init method to load texture.  Generates the vertices data consisting of surface normals in non indexed mode and later sets them up in VBO buffer.  It also prepares the bitmap for rendering text and images on it. It also initializes the texutl object with texture id for loading textures.
UpdateUniforms	This method overrides the base class UpdateUniforms method. First it updates  "cameraposition" uniform. It also updates "tex" uniform to pass texture object.
vertexShaderSource	This method overrides the base class vertexShaderSource method. It returns the vertex shader code to render the texture object.
fragmentShaderSource	This method overrides the base class fragmentShaderSource method. It returns the fragment shader code to render the  texture object.
Cleanup	This method overrides the base class Cleanup method. It releases the resources used by the host object.
Init() Shutdown()	These methods are called by the client during start up and shutdown to initialize GDI Plus environment.
ClearCanvas	This method clears the bitmap for fresh renderings of text and images.
Drawtext	This method renders input text string based on the input such as font, color and string formats.
Drawimage	This method reenders the image in the file name and resizesto fir based on the clipping width and height inputs
DrawCanvas	This method loads the bitmap onto the texture.

Output