SFML community forums

Help => Graphics => Topic started by: Brendon on November 24, 2012, 08:30:25 pm

Title: Rendering .ttf text on OpenGL polygon
Post by: Brendon on November 24, 2012, 08:30:25 pm

I have an OpenGL GL_Quad, and I'd like to render some truetype text onto it. I'm not sure what is the best way to do this, and was hoping to get some tips.

If I understand correctly, I can create a Font object, then export that out to a glyph texture sheet for OpenGL to use?  I was also looking at the Text object and RenderTexture, but wasn't sure if that was a viable route. Are there other alternatives I'm missing?

Title: Re: Rendering .ttf text on OpenGL polygon
Post by: Brendon on November 25, 2012, 08:18:48 am

I managed to generate a glyph texture sheet, and now have them being rendered on my polygons.

However, I'm now having a problem getting the correct UV coordinates. I assumed the glyph's TextureRect would give me 0-1 UV coordinates on the texture sheet, but I'm ending up with values such as these:

Left 0
Top 2.802597E-45
Width 1.821688E-44
Height 6.726233E-44

I'm not sure how to read that - any suggestions?

Title: Re: Rendering .ttf text on OpenGL polygon
Post by: Laurent on November 25, 2012, 10:13:34 am

These values seem to be invalid, the textureRect member of sf::Glyph gives the texture coordinates in pixels (so you have to divide by width/height to get normalized coordinates).

Title: Re: Rendering .ttf text on OpenGL polygon
Post by: Brendon on November 25, 2012, 09:02:12 pm

I wrote a minimal example of getting the glyph data - perhaps I'm accessing it incorrectly. Here's the output, that displays TextureRect and Bounds values: http://blendogames.com/dev/glyph2.png (http://blendogames.com/dev/glyph2.png)(http://blendogames.com/dev/glyph2.png)

Here's the sample program's code (C#):

using System;

using SFML;
using SFML.Window;
using SFML.Graphics;

using Tao.OpenGl;

namespace WindowTest
{
    public class Game1
    {
        static void Main()
        {
            const uint FONTSIZE = 48;
            RenderWindow appWindow;
            Font myFont;
            Texture myTexture;
            Glyph myGlyph;

            appWindow = new RenderWindow(new VideoMode(640, 480, 32), "Window test");
            myFont = new Font(@"arial.ttf");

            //set up the glyphs.
            for (uint i = 65; i < 68; i++)
            {
                //65 = A, 66 = B, 67 = C, etc.

                myGlyph = myFont.GetGlyph(i, FONTSIZE, false);
                Console.WriteLine("Letter unicode: {0}   TextureRect left: {1} top: {2} width: {3} height: {4}   Bounds left: {5} top: {6} width: {7} height: {8}",
                    i, myGlyph.TextureRect.Left, myGlyph.TextureRect.Top, myGlyph.TextureRect.Width, myGlyph.TextureRect.Height,
                    myGlyph.Bounds.Left, myGlyph.Bounds.Top, myGlyph.Bounds.Width, myGlyph.Bounds.Height);
            }            

            //bind the font texture.
            myTexture = myFont.GetTexture(FONTSIZE);
            myTexture.Bind();            

            //setup opengl.
            Gl.glMatrixMode(Gl.GL_PROJECTION);
            Gl.glLoadIdentity();
            Glu.gluPerspective(90.0F, 1.0F, 1.0F, 500.0F);
           
            Gl.glEnable(Gl.GL_TEXTURE_2D);
            Gl.glColor4f(1.0F, 1.0F, 1.0F, 1F);
            Gl.glEnable(Gl.GL_BLEND);
            Gl.glBlendFunc(Gl.GL_SRC_ALPHA, Gl.GL_ONE_MINUS_SRC_ALPHA);

            //render the opengl cube.
            while (appWindow.IsOpen())
            {
                appWindow.DispatchEvents();

                appWindow.Clear(new Color(255,128,128));                
                Gl.glClear(Gl.GL_DEPTH_BUFFER_BIT);
                Gl.glMatrixMode(Gl.GL_MODELVIEW);
                Gl.glLoadIdentity();
                Gl.glTranslatef(0.0F, 0.0F, -120.0F);


                //draw a background border square.
                Gl.glDisable(Gl.GL_BLEND);
                Gl.glColor4f(1.0F, 0.6F, 1.0F, 1F);
                Gl.glBegin(Gl.GL_QUADS);
                Gl.glTexCoord2f(0, 1); Gl.glVertex3f(-50.0F, -50.0F, 49.0F);
                Gl.glTexCoord2f(0, 0); Gl.glVertex3f(-50.0F, 50.0F, 49.0F);
                Gl.glTexCoord2f(1, 0); Gl.glVertex3f(50.0F, 50.0F, 49.0F);
                Gl.glTexCoord2f(1, 1); Gl.glVertex3f(50.0F, -50.0F, 49.0F);
                Gl.glEnd();
                Gl.glEnable(Gl.GL_BLEND);

                // Draw the letters square
                Gl.glColor4f(1.0F, 1F, 1.0F, 1F);
                Gl.glBegin(Gl.GL_QUADS);
                Gl.glTexCoord2f(0, 1); Gl.glVertex3f(-50.0F, -50.0F, 50.0F);
                Gl.glTexCoord2f(0, 0); Gl.glVertex3f(-50.0F, 50.0F, 50.0F);
                Gl.glTexCoord2f(1, 0); Gl.glVertex3f(50.0F, 50.0F, 50.0F);
                Gl.glTexCoord2f(1, 1); Gl.glVertex3f(50.0F, -50.0F, 50.0F);
                Gl.glEnd();
               
                appWindow.Display();
            }
        }
    }
}

Title: Re: Rendering .ttf text on OpenGL polygon
Post by: Laurent on November 25, 2012, 10:44:26 pm

Thanks for the minimal code. It was a bug in SFML.Net, it's now fixed.