LWJGL Forum

Greetings to all, I'm new here.  :)

A Question if you may.... Can anybody show me how to display text with LWJGL?

I hope my request won't bore you guys...  ;) Honestly, I'm a noob to OpenGL and Java but, i have basic knowledge of C.

I finally got Eclipse, Java & LWJGL working with the rotating quad and all... and I was like Holy crap WOW!!! I'm suddenly very interested about it.... ;D

I assure you guys, I can learn quickly... well, atleast thats what i think. :P



My apologies in advance if i don't reply quickly. Its already past my bedtime where I live.

Cheers :)

In a nutshell: You paint the texture of the letter you want onto a quad.

And there's several ways to get the texture. You can either use premade textures (that you make using gimp or photoshop) with a single letter on each one, or one big texture with all the letters on it (and then just map with texture coordinates which one you want to display). Or you can dynamically create the texture(s) in your program using a truetype font in Java2D, and then translating the image into a texture.

Lot's of ways to do it.  ;D

hmm, like placing decals on the quad? is that the way to do it?

I'm not sure if thats what I have in mind :)

I'm looking for something that resembles "floating text" on the console in some games where you can dynamically type some words directly on screen. I need it to feedback some information like frames per second etc.

I checked the Opengl website, Thats bitmaped font i guess. There is a link to the article... but its dead :(

http://www.opengl.org/resources/features/fontsurvey/ (http://www.opengl.org/resources/features/fontsurvey/)

;D

Doh! it seems there is a similar thread below.

http://lwjgl.org/forum/index.php/topic,1559.0.html (http://lwjgl.org/forum/index.php/topic,1559.0.html)

The way I do it:

I have a texture with all letters on it, made in Gimp.
I have a Blender project with one quad per letter and the UV-mapped letter from the texture mentioned above on it.
I export this project into the 3D format my engine can import, and then have quads with letters on them in my engine, in DisplayLists, to be precise. When I want to place a letter, I do glPushMatrix(), transform to where I want to place the letter, call the DisplayList of the letter to draw it and do glPopMatrix().

This is the way elias4444 described in his 3rd sentence above, and it works fine, especially for consoles and the like. You can even use letters of arbitrary width that way, or dynamically resize, skew, distort letters. You can even apply some shaders to them or switch the alphabet texture if the alphabet textures use the same layout.
Note that I disable GL_LIGHTING temporarily to draw a letter so that it isn't affected by lighting and that my alphabet texture is a PNG with alpha values for transparency. I hope I didn't forget anything.. Meh, you'll figure it out, it's not that hard.

This way of putting letters on the screen has advantages and disadvantages; but it gets the job done.

Also note that I didn't implement it that way in the Tetris clone mentioned in my signature; this is a very old project with some weird ways to do things in it. We all started somewhere.

Hey, it works :)

i tried the tutorial from Nehe using ttf textures, quads and display lists.

But is there any other way? 2 Triangles per character...

It seems like an aweful waste of triangles... :D  ::)

"you can dynamically create the texture(s) in your program using a truetype font in Java2D, and then translating the image into a texture." - elias444

I suppose its possible to dynamically create a whole paragraph, turn it into a texture and stick it to one big quad? But, which one is faster computationally? The first one utilizes a displaylist but it eats up a lot of triangles, while the other keeps re-texturing itself??

I wouldn't dynamically create the paragraph texture... any time you create a texture, it's computationally expensive. It's generally better to pre-cache them. I would recommend the bitmap method, or generating the texture(s) for each letter (and pre-caching them).

Also, I wouldn't worry too much about the number of triangles/quads you need for text. It's pretty low compared to most 3D objects (even if you draw out a paragraph). That's why we have 3D accelerated graphic chips these days.  ;)

Ahh, many thanks guys.  :)

Ill try to play around with these and see what i can do.  ;D

I can mail you a class that builds a bitmap font with java2D and has a handy print method if you like.
My approach is quite simple. Render all characters to one texture, then render a quad for each letter you want to print, manipulating
texcoords to get the correct letter, it is fast too (immediate mode isn't so bad when you're only rendering one quad per letter, of course that depends on how much text you're likely to print at once).

for my case, i needed to display japanese characters, so it wasn't smart to have bunch of images with characters on them. i decided to use AWT for drawing characters dynamically to BufferedImage and created texture out of it. as mentioned, it is much slower solution, but now you can change font dynamically, draw any characters that AWT can handle, and draw in any size.

Hi biscon, could you mail me your class? thx

Hi biscon - and everybody else since it's my first post on this forum. I'm new to lwjgl (and opengl) and hope this forum will help me to learn using opengl and lwjgl of course.
I would also be really interested in the class you've done. Is it normal there's no class like the TextRenderer of JOGL (java2d in fact) for rendering text via opengl ?
The fact is that it's important to have the most optimized class when we have to display some fast-variable text on the screen. The TextRenderer from sun is interesant due to the cache system it contains. Don't know if we can just use it with lwjgl... may be ?

consider using org.newdawn.slick.TrueTypeFont from slick-util:
http://slick.cokeandcode.com/downloads/util/
http://slick.cokeandcode.com/javadoc-util/

Thanks a lot. It seems to go beyond what I expected in fact...  ;) (thinking of the other features of this library)

the purpose of the library is to complement lwjgl. it was extracted from the base slick library to help developers now that we have removed DevIL and FMOD.

Question:
I'm using the Slick-Code like this:
TrueTypeFont ttf = new TrueTypeFont(new Font("Arial", Font.BOLD, 50), true);
[...]
And in the render-method:
ttf.drawString(500, 500, "Hello World :)");

But the only thing I get is this:
http://planschkuh.pl.ohost.de/errorScreen1.jpg

Where's the  problem? I couldn't find any tutorial for the slick-code :(

the TestUtils (org.newdawn.slick.tests.TestUtils) does the following:


        java.awt.Font awtFont = new Font("Times New Roman", 1, 16);
        org.newdawn.slick.Font font = new TrueTypeFont(awtFont, false);
        ...
        font.drawString(150F, 300F, "HELLO LWJGL WORLD", Color.yellow);


mind you, it does have some init code that may or may not be relevant.

I am not entirely sure where the source code to the slick-util package is ...

Mh, I looked into the code and it works now!

I think it was the "Arial"-Font. I don't know why it didn't work, but with "Times New Roman" it works ;)

Thanks!

Hmm, i also tried the Slick demo. It works. But when i try to create a font and draw it in my lwjgl program it only shows a black screen. Can someone help me? How does you code look like, Schnitter?

I get it to work like this: http://nopaste.info/24ab6d6807.html

But I got another - huge - problem! :/
I want my 0/0 point in the bottom left corner. but because of
        GL11.glMatrixMode(GL11.GL_PROJECTION);
        GL11.glLoadIdentity();

It is in the upper left corner!(I think it's because of this).
And when I don't write this code - the text is the wrong way round!
I think I could solve the problem by compiling the slick-code myself - but that would be soooo much work :(

If you would setup a real projection matrix - eg using glOrtho it would be much easier :)

Can anybody tell me how to set up a projection matrix correctly? :S

Here is some source code that displays bitmaps fonts, it will also have the code for setting up ortho(2D) view
http://nehe.gamedev.net/data/lessons/lwjgl/lesson13.jar (http://nehe.gamedev.net/data/lessons/lwjgl/lesson13.jar)

Using the code from the nehe-tutorial

        GL11.glMatrixMode(GL11.GL_PROJECTION);
        // Select The Projection Matrix
        GL11.glLoadIdentity(); // Reset The Projection Matrix

        // Calculate The Aspect Ratio Of The Window
        GLU.gluPerspective(45.0f,
                (float) PresentParameters.getWidth() / (float) PresentParameters.getHeight(),
                0.1f, 100f);
        GL11.glMatrixMode(GL11.GL_MODELVIEW);
        // Select The Modelview Matrix

I can see nothing^^ There is just a black window :(
I render my sprites to (x, y, 0f). Is that right? And if not - the text is also wrong :/

a function to setup 2d mode   


public static void set2DMode() {
    GL11.glDisable(GL11.GL_DEPTH_TEST);
    GL11.glMatrixMode(GL11.GL_PROJECTION);                        // Select The Projection Matrix
    GL11.glPushMatrix();                                     // Store The Projection Matrix
    GL11.glLoadIdentity();                                   // Reset The Projection Matrix
    GL11.glOrtho(0, Settings.width, 0, Settings.height, -1, 1);                          // Set Up An Ortho Screen
    GL11.glMatrixMode(GL11.GL_MODELVIEW);                         // Select The Modelview Matrix
    GL11.glPushMatrix();                                     // Store The Modelview Matrix
     //GL11.glLoadIdentity();                                   // Reset The Modelview Matrix
}


a function to set it back to 3d mode

Quote
public static void set3DMode() {
    GL11.glMatrixMode(GL11.GL_PROJECTION);                        // Select The Projection Matrix
    GL11.glPopMatrix();                                      // Restore The Old Projection Matrix
    GL11.glMatrixMode(GL11.GL_MODELVIEW);                         // Select The Modelview Matrix
    GL11.glPopMatrix();                                      // Restore The Old Projection Matrix
    GL11.glEnable(GL11.GL_DEPTH_TEST);
}

It seems that I can not let an TrueTypeTexture-variable null. I got 2 of them and one was null. By setting both to new TrueTypeFont(f, true), it worked.
Using you method to set the 2d-mode, it works. but the text is still the wrong way round.
Here is the complete Code:
http://nopaste.info/e0a2c896da_nl.html

not sure how 2 fix the problem as i use my own custom Font class.

if my text is going the wrong way round i can just change the test co-ordinates myself.

but ill take a stab at what might work:
1. depending on the direction try change the, ortho bounds. so there going in an oposite direction.
2. Is there a way to setup ortho/2d view in the class you are using

I always wanted to do it myself - so, do you know any tutorial to use ttf-fonts in lwjgl-applications?
I think it'll be not easy but I want to try it.
Oh, I already looked into the slick-code but it didn't help :(

dunno about ttf fonts, I just use bitmap fonts.

is it only that the fonts are displaying the wrong direction?

if so: then change the line
GL11.glOrtho(0, Settings.width, 0, Settings.height, -1, 1);                          // Set Up An Ortho Screen
to
GL11.glOrtho(Settings.width, 0,  0, Settings.height, -1, 1);                          // Set Up An Ortho Screen

or something like that

yes, I know. But doing it like this, everyting else is also thw wrong way round :(

:D lol, well im out of ideas   :-\

Any other ideas?^^

if your desperate to get that ttf workn in the mean time, bofore the call to print text,

reverse it:

GL11.glPushMatrix();
use GL11.glScalef(-1, 1, 1);
or GL11.glScalef(1, -1, 1); //depending on which way you want it to print -x, or -y

and after the call to print text:
GL11.glPopMatrix();

this should work until you find out what is wrong.

anyway sry cant be anymore help, that works as a dodgy bandaid.

Quote from: Schnitter on March 23, 2008, 16:01:18
I always wanted to do it myself - so, do you know any tutorial to use ttf-fonts in lwjgl-applications?

If you like real ttf fonts,  not rasterized to a texture, its a quite complex matter. You can do it this way:

-Loading of a font via AWT:   font=Font.createFont(Font.TRUETYPE_FONT, inputStream)
-font.createGlyphVector can be used to obtain a "GlyphVector" for a String
-glyphVector.getOutline() returns an  "Shape" of the String...
-shape.getPathIterator() returns an  "PathIterator"...
-the PathIterator allows you to step the contour of the text as splines.
-build a FlatteningPathIterator(pathIterator)
-the FlatteningPathIterator allows you to step the contour as straight line segments (linearizing the splines)
-the countour needs to be fed to an triangulation algorithm (several sources out there.)
-resulting triangles can by drawn as GL_TRIANGLES

Quite complex.. For sorry I have no complete code, but sucessfully used this way to build particle text objects some time ago.