Text Rendering class not working

Tripphippy · by **Tripphippy** » Thu Jul 22, 2010 6:33 pm

HELP!! I can't get anything to show up at all. It's supposed to render text and I'm not getting anything at all.
Any help would be appreciated

The image i'm using for the glyphs is a 16x16 grid of all ascii characters so the ascii code is used to index the texture map.

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

public class TextRenderer
{
    private GL10 gl;
    private int[] tex;
    private float width;
    private float height;
    private FloatBuffer vertexBuffer;
    private FloatBuffer texBuffer;
    private ByteBuffer indexBuffer;
    public TextRenderer(GL10 _gl, Context ctx)
    {
        float[] texcoords;
        float quad[] =
        {
            0.0f, 0.0f, 0.0f,
            0.0f, 1.0f, 0.0f,
            1.0f, 0.0f, 0.0f,
            1.0f, 1.0f, 0.0f
        };
        byte indices[] =
        {
            0, 1, 2, 3
        };
        gl = _gl;
        tex = new int[1];
        gl.glGenTextures(1, tex, 0);
        Bitmap bmp = BitmapFactory.decodeResource(ctx.getResources(), R.drawable.berlin);
        gl.glBindTexture(GL10.GL_TEXTURE_2D, tex[0]);
        GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bmp, 0);
        bmp.recycle();
        texcoords = new float[16*16*4*2];//16 by 16 tiles by 4 vertices per quad by 2 coords per vertex
        for(int y = 0; y < 16; y++)
        {
            for(int x = 0; x < 16; x++)
            {
                    texcoords[(x*8)+(y*16*8)] = (float)x / 16.0f;
                    texcoords[(x*8)+(y*16*8)+1] = (float)y / 16.0f;
                    texcoords[(x*8)+(y*16*8)+2] = (float)x / 16.0f;
                    texcoords[(x*8)+(y*16*8)+3] = ((float)y + 1.0f) / 16.0f;
                    texcoords[(x*8)+(y*16*8)+4] = ((float)x + 1.0f) / 16.0f;
                    texcoords[(x*8)+(y*16*8)+5] = (float)y / 16.0f;
                    texcoords[(x*8)+(y*16*8)+6] = ((float)x + 1.0f) / 16.0f;
                    texcoords[(x*8)+(y*16*8)+7] = ((float)y + 1.0f) / 16.0f;
            }
        }
        ByteBuffer vbb = ByteBuffer.allocateDirect(quad.length*4);
        vbb.order(ByteOrder.nativeOrder());
        vertexBuffer = vbb.asFloatBuffer();
        vertexBuffer.put(quad);
        vertexBuffer.position(0);
 
        vbb = ByteBuffer.allocateDirect(texcoords.length * 4);
        vbb.order(ByteOrder.nativeOrder());
        texBuffer = vbb.asFloatBuffer();
        texBuffer.put(texcoords);
        texBuffer.position(0);
 
        indexBuffer = ByteBuffer.allocateDirect(indices.length);
        indexBuffer.put(indices);
        indexBuffer.position(0);
    }
    
    public void drawText(float x, float y, String text)
    {
        gl.glEnable(gl.GL_TEXTURE_2D);
        gl.glMatrixMode(gl.GL_PROJECTION);
        gl.glPushMatrix();
        gl.glLoadIdentity();
        gl.glOrthof(0.0f, 1.0f, 0.0f, 1.0f, 0.1f, 10.0f);
        gl.glMatrixMode(gl.GL_MODELVIEW);
        gl.glEnableClientState(gl.GL_VERTEX_ARRAY);
        gl.glEnableClientState(gl.GL_TEXTURE_COORD_ARRAY);
        gl.glVertexPointer(4, gl.GL_FLOAT, 0, vertexBuffer);
        gl.glBindTexture(GL10.GL_TEXTURE_2D, tex[0]);
        gl.glColor4f(1.0f, 1.0f, 1.0f, 1.0f);
        float drawx = x;
        float drawy = y;
        for(int i = 0; i < text.length(); i++)
        {
            int ascii = text.codePointAt(i);
            texBuffer.position(ascii*2*4);
            gl.glTexCoordPointer(2, gl.GL_FLOAT, 0, texBuffer);
            gl.glTranslatef(drawx, drawy, 1.0f);
            gl.glDrawElements(gl.GL_TRIANGLE_STRIP, 4, gl.GL_UNSIGNED_BYTE, indexBuffer);
            drawx++;
        }
        gl.glDisable(gl.GL_TEXTURE_2D);
        gl.glMatrixMode(gl.GL_PROJECTION);
        gl.glPopMatrix();
        gl.glMatrixMode(gl.GL_MODELVIEW);
    }
    
    public void resize(float w, float h)
    {
        width = w;
        height = h;
    }
}
 
Parsed in 0.044 seconds,  using GeSHi 1.0.8.4

Tripphippy · by **Tripphippy** » Fri Jul 23, 2010 5:24 pm

Ok I fixed it. Feel free to use it to learn or render text in ur app. Let me know if you use it.

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
 
package org.mgoelz.drakengardmobile;
 
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.opengl.GLUtils;
import java.io.IOException;
import java.io.InputStream;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import javax.microedition.khronos.opengles.GL10;
 
/**
 *
 * @author Mike.Goelz
 */
public class TextRenderer
{
    /** The buffer holding the vertices */
    private FloatBuffer vertexBuffer;
    /** The buffer holding the texture coordinates */
    private FloatBuffer textureBuffer;
    /** The buffer holding the indices */
    private ByteBuffer indexBuffer;
 
    /** Our texture pointer */
    private int[] textures = new int[1];
 
    /**
     * The initial vertex definition
     *
     * Note that each face is defined, even
     * if indices are available, because
     * of the texturing we want to achieve
     */
    float[][] texcoords =
    {
        {
            0.0f, 0.0f,
            0.0f, 0.0625f,
            0.0625f, 0.0f,
            0.0625f, 0.0625f
        }
    };
    float quad[] =
    {
        1.0f, 0.0f, 0.0f,
        1.0f, 1.0f, 0.0f,
        0.0f, 0.0f, 0.0f,
        0.0f, 1.0f, 0.0f
    };
    byte indices[] =
    {
        0, 1, 2, 3
    };
 
    private float width;
    private float height;
    float fontsize = 32;
    
    public float getTop()
    {
        return height / fontsize - 1.0f;
    }
    
    public float getRight()
    {
        return width / fontsize - 1.0f;
    }
    public TextRenderer(GL10 gl, Context ctx)
    {
        texcoords = new float[16*16][4*2];//16 by 16 tiles by 4 vertices per quad by 2 coords per vertex
        for(int y = 0; y < 16; y++)
        {
            for(int x = 0; x < 16; x++)
            {
                    texcoords[(x)+(y*16)][0] = ((float)x + 1.0f) / 16.0f;
                    texcoords[(x)+(y*16)][1] = ((float)y + 1.0f) / 16.0f;
                    texcoords[(x)+(y*16)][2] = ((float)x + 1.0f) / 16.0f;
                    texcoords[(x)+(y*16)][3] = (float)y / 16.0f;
                    texcoords[(x)+(y*16)][4] = (float)x / 16.0f;
                    texcoords[(x)+(y*16)][5] = ((float)y + 1.0f) / 16.0f;
                    texcoords[(x)+(y*16)][6] = (float)x / 16.0f;
                    texcoords[(x)+(y*16)][7] = (float)y / 16.0f;
            }
        }
        //
        ByteBuffer byteBuf = ByteBuffer.allocateDirect(quad.length * 4);
        byteBuf.order(ByteOrder.nativeOrder());
        vertexBuffer = byteBuf.asFloatBuffer();
        vertexBuffer.put(quad);
        vertexBuffer.position(0);
 
        //
        byteBuf = ByteBuffer.allocateDirect(texcoords[0].length * 4);
        byteBuf.order(ByteOrder.nativeOrder());
        textureBuffer = byteBuf.asFloatBuffer();
        textureBuffer.put(texcoords[0]);
        textureBuffer.position(0);
 
        //
        indexBuffer = ByteBuffer.allocateDirect(indices.length);
        indexBuffer.put(indices);
        indexBuffer.position(0);
        //Get the texture from the Android resource directory
        InputStream is = ctx.getResources().openRawResource(R.drawable.berlin);
        Bitmap bitmap = null;
        Bitmap alpha = null;
        try {
                //BitmapFactory is an Android graphics utility for images
                bitmap = BitmapFactory.decodeStream(is);
                /*alpha = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ALPHA_8);
                for(int y = 0; y < bitmap.getHeight(); y++)
                {
                    for(int x = 0; x < bitmap.getWidth(); x++)
                    {
                        int pix = bitmap.getPixel(x, y);
                        alpha.setPixel(x, y, (Color.red(pix) + Color.green(pix) + Color.blue(pix)) / 3);
                    }
                }*/
        } finally {
                //Always clear and close
                try {
                        is.close();
                        is = null;
                } catch (IOException e) {
                }
        }
 
        //Generate one texture pointer...
        gl.glGenTextures(1, textures, 0);
        //...and bind it to our array
        gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);
 
        //Create Nearest Filtered Texture
        gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_NEAREST);
        gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR);
 
        //Different possible texture parameters, e.g. GL10.GL_CLAMP_TO_EDGE
        gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_S, GL10.GL_REPEAT);
        gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_T, GL10.GL_REPEAT);
 
        //Use the Android GLUtils to specify a two-dimensional texture image from our bitmap
        GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);
        //GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, gl.GL_ALPHA, bitmap, 0);
 
        //Clean up
        //alpha.recycle();
        bitmap.recycle();
    }
    
    public void drawText(GL10 gl, float x, float y, String text)
    {
        gl.glPushMatrix();//save off the modelview
        gl.glLoadIdentity();//reset modelview
        gl.glMatrixMode(gl.GL_PROJECTION);
        gl.glPushMatrix();//save off the projection
        gl.glLoadIdentity();//reset projection
        gl.glOrthof(0.0f, width / fontsize, 0.0f, height / fontsize, 0.1f, 10.0f);//set to ortho perspective
        gl.glMatrixMode(gl.GL_MODELVIEW);
        //set state for text render
        gl.glEnable(gl.GL_TEXTURE_2D);
        gl.glDisable(gl.GL_DEPTH_TEST);
        gl.glEnable(gl.GL_BLEND);
        gl.glBlendFunc(gl.GL_SRC_ALPHA, gl.GL_ONE_MINUS_SRC_ALPHA);
        gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
        gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
        //Bind our only previously generated texture
        gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);
 
        float drawx = x;
        float drawy = y;
        for(int i = 0; i < text.length(); i++)
        {
            int ascii = text.codePointAt(i);
 
            textureBuffer.put(texcoords[ascii]);
            textureBuffer.position(0);
            gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer);
            gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, textureBuffer);
            gl.glPushMatrix();
            gl.glTranslatef(drawx, drawy, -1.0f);
            gl.glDrawElements(gl.GL_TRIANGLE_STRIP, indices.length, gl.GL_UNSIGNED_BYTE, indexBuffer);
            gl.glPopMatrix();
            drawx += 0.6;
        }
        //Disable the client state before leaving
        gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
        gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
        //reset rendering
        gl.glDisable(gl.GL_BLEND);
        gl.glEnable(gl.GL_DEPTH_TEST);
        gl.glDisable(gl.GL_TEXTURE_2D);
        gl.glPopMatrix();
        gl.glMatrixMode(gl.GL_PROJECTION);
        gl.glPopMatrix();
        gl.glMatrixMode(gl.GL_MODELVIEW);
    }
    
    public void resize(float w, float h)
    {
        width = w;
        height = h;
    }
}
 
Parsed in 0.056 seconds,  using GeSHi 1.0.8.4

pleyas · by **pleyas** » Fri Aug 13, 2010 2:02 pm

Hi Tripphippy,

I am using part of the code and mixing with what I have done so far.
Became tricky to try to change between the ortho to perspective, one texture to another...
Is important to be careful where the text's algorithm is called for rendering.

But so far seems to work well!
Thank you for the help...

pleyas · by **pleyas** » Fri Aug 13, 2010 2:04 pm

Also,
How to figure out the 2d ortho coordinate equivalent to the 3d space?
Let say you wanna draw a text at the end of a 3d line?
So it needs to be converted from one of the 3d vertex of the 3d line to the 2d ortho (screen system equivalent)

Any idea?...

Tripphippy · by **Tripphippy** » Tue Aug 17, 2010 6:56 pm

That's much trickier to accomplish and probably can't be done using my text renderer as it is now. The coordinate system used in the ortho projection is funky and doesnt relate to window coordinates in a sensible way. What you probably want to do is skip the ortho perspective and draw the text in 3d using billboarding. If you want the letters to all be the same size regardless of distance then you are going to have a little more work to do. I think you would call gluProject using the 3d coord you want to draw at and then call gluUnProject with the results from project but set winz = 0.0. This should map the 3d coordinate to another 3d coordinate that is on the near clipping plane. From there is is just a simple scaling operation to get the text the right size. I wish I could draw a picture to illustrate better but the thing here is that we are mapping a 3d coordinate to another 3d coordinate that overlaps the same pixel as the first but has a z coord = near clipping plane essentially drawing the text as close as possible to the camera that you can get.

Text Rendering class not working

Text Rendering class not working

Re: Text Rendering class not working

Re: Text Rendering class not working

Re: Text Rendering class not working

Re: Text Rendering class not working

Who is online