# OpenGL Problems rendering 2D textures

## Recommended Posts

Hi there, I'm having a few problems with rendering 2d textures in OpenGL. I am using SOIL to load my textures. Essentially I am trying to make a mimic of a console or terminal, like curses, but with OpenGL. I have a transparent png with white characters that I use to display all the text. I try to draw a colored box that is the "background color" and then I draw a character with a given color over the top of that as the "foreground color". The screen itself is made up of a 80*60 array of chars that represent where all the symbols are, and there is another 2 80*60 arrays that contain the background and foreground color information. Anyway, it's not working, and it has problems. Here's the code: Image loader
void Texture::load_texture( char *filename )
{
(
filename,
SOIL_CREATE_NEW_ID,
0
);
}
Rendering routine
void Screen::render()
{
int row;
int line;

GLfloat tx1;
GLfloat tx2;
GLfloat ty1;
GLfloat ty2;

GLfloat vx1;
GLfloat vx2;
GLfloat vy1;
GLfloat vy2;

glClear( GL_COLOR_BUFFER_BIT );

glMatrixMode( GL_PROJECTION );
glMatrixMode( GL_MODELVIEW );

glDisable( GL_TEXTURE_2D );
gluOrtho2D( 0, 640, 480, 0 );

for( int y = 0; y < 60; y++ )
{
for( int x = 0; x < 80; x++ )
{
vx1 = x * font.get_width();
vx2 = vx1 + font.get_width();
vy1 = y * font.get_height();
vy2 = vy1 + font.get_height();

if( background[x][y] == 0 )
{
glColor3f( 0.f, 0.f, 0.f );
}
else if( background[x][y] == 1 )
{
glColor3f( 0.f, 0.f, 252.f / 255.f );
}
else if( background[x][y] == 2 )
{
glColor3f( 0.f, 168.f / 255.f, 0.f );
}
else if( background[x][y] == 3 )
{
glColor3f( 0.f, 168.f / 255.f, 168.f / 255.f );
}
else if( background[x][y] == 4 )
{
glColor3f( 204.f / 255.f, 0.f, 0.f );
}
else if( background[x][y] == 5 )
{
glColor3f( 188.f / 255.f, 112.f / 255.f, 220.f / 225.f );
}
else if( background[x][y] == 6 )
{
glColor3f( 140.f / 255.f, 80.f / 255.f, 0.f );
}
else if( background[x][y] == 7 )
{
glColor3f( 188.f / 255.f, 188.f / 255.f, 188.f / 255.f );
}
else if( background[x][y] == 8 )
{
glColor3f( 84.f / 255.f, 84.f / 255.f, 84.f / 255.f );
}
else if( background[x][y] == 9 )
{
glColor3f( 0.f, 188.f / 255.f, 252.f / 255.f );
}
else if( background[x][y] == 10 )
{
glColor3f( 0.f, 204.f / 255.f, 84.f / 255.f );
}
else if( background[x][y] == 11 )
{
glColor3f( 84.f / 255.f, 252.f / 255.f, 252.f / 255.f );
}
else if( background[x][y] == 12 )
{
glColor3f( 252.f / 255.f, 156.f / 255.f, 140.f / 255.f );
}
else if( background[x][y] == 13 )
{
glColor3f( 252.f / 255.f, 84.f / 255.f, 252.f / 255.f );
}
else if( background[x][y] == 14 )
{
glColor3f( 236.f / 255.f, 236.f / 255.f, 0.f );
}
else if( background[x][y] == 15 )
{
glColor3f( 252.f / 255.f, 252.f / 255.f, 252.f / 255.f );
}
else
{
glColor3f( 0.f, 0.f, 0.f );
}
glVertex2f( vx1, vy1 );
glVertex2f( vx1, vy2 );
glVertex2f( vx2, vy2 );
glVertex2f( vx2, vy1 );
glEnd();
}
}

glMatrixMode( GL_PROJECTION );
glMatrixMode( GL_MODELVIEW );

glEnable( GL_TEXTURE_2D );
gluOrtho2D( 0, 640, 480, 0 );
glBindTexture( GL_TEXTURE_2D, font.get_font() );

for( int y = 0; y < 60; y++ )
{
for( int x = 0; x < 80; x++ )
{
row  = character[x][y] % 16;
line = character[x][y] / 16;

tx1 = ( 1 + row * ( font.get_width() + 2 ) ) / 160.f;
tx2 = ( tx1 * 160.f + font.get_width() ) / 160.f;
ty1 = ( 1 + line * ( font.get_height() + 2 ) ) / 160.f;
ty2 = ( ty1 * 160.f + font.get_height() ) / 160.f;

vx1 = x * font.get_width();
vx2 = vx1 + font.get_width();
vy1 = y * font.get_height();
vy2 = vy1 + font.get_height();

if( foreground[x][y] == 0 )
{
glColor3f( 0.f, 0.f, 0.f );
}
else if( foreground[x][y] == 1 )
{
glColor3f( 0.f, 0.f, 252.f / 255.f );
}
else if( foreground[x][y] == 2 )
{
glColor3f( 0.f, 168.f / 255.f, 0.f );
}
else if( foreground[x][y] == 3 )
{
glColor3f( 0.f, 168.f / 255.f, 168.f / 255.f );
}
else if( foreground[x][y] == 4 )
{
glColor3f( 204.f / 255.f, 0.f, 0.f );
}
else if( foreground[x][y] == 5 )
{
glColor3f( 188.f / 255.f, 112.f / 255.f, 220.f / 225.f );
}
else if( foreground[x][y] == 6 )
{
glColor3f( 140.f / 255.f, 80.f / 255.f, 0.f );
}
else if( foreground[x][y] == 7 )
{
glColor3f( 188.f / 255.f, 188.f / 255.f, 188.f / 255.f );
}
else if( foreground[x][y] == 8 )
{
glColor3f( 84.f / 255.f, 84.f / 255.f, 84.f / 255.f );
}
else if( foreground[x][y] == 9 )
{
glColor3f( 0.f, 188.f / 255.f, 252.f / 255.f );
}
else if( foreground[x][y] == 10 )
{
glColor3f( 0.f, 204.f / 255.f, 84.f / 255.f );
}
else if( foreground[x][y] == 11 )
{
glColor3f( 84.f / 255.f, 252.f / 255.f, 252.f / 255.f );
}
else if( foreground[x][y] == 12 )
{
glColor3f( 252.f / 255.f, 156.f / 255.f, 140.f / 255.f );
}
else if( foreground[x][y] == 13 )
{
glColor3f( 252.f / 255.f, 84.f / 255.f, 252.f / 255.f );
}
else if( foreground[x][y] == 14 )
{
glColor3f( 236.f / 255.f, 236.f / 255.f, 0.f );
}
else if( foreground[x][y] == 15 )
{
glColor3f( 252.f / 255.f, 252.f / 255.f, 252.f / 255.f );
}
else
{
glColor3f( 0.f, 0.f, 0.f );
}
glTexCoord2f( tx1, ty1 ); glVertex2f( vx1, vy1 );
glTexCoord2f( tx1, ty2 ); glVertex2f( vx1, vy2 );
glTexCoord2f( tx2, ty2 ); glVertex2f( vx2, vy2 );
glTexCoord2f( tx2, ty1 ); glVertex2f( vx2, vy1 );
glEnd();
}
}
}
These are my problems: 1) The foreground text does not display. The background color blocks display fine, but then there is no text being drawn over the top of those. If I try to use SOIL_FLAG_MULTIPLY_ALPHA in the image loader, then it simply turns all the transparent parts black and leaves the character itself the same color as the background color, regardless of what I set the foreground color as. 2) This is really slow. It runs at only a few frames per second, and I need to get it up to 60 fps some how. Anyone have any pointers on how to make it run faster? Are my three arrays of 80*60 too big and takes too long? I would really appreciate some help with this because I've been banging my head against the wall for days trying to fix this. I've tried lots of things, but they haven't worked. Thanks.

##### Share on other sites
I haven't used SOIL, but for the speed part:

You loop ~10,000 times, each time doing calculations, a huge if-statement, and start a new primitive and draw four vertices, which is why it's so slow. Since all these calculations seem to yield the same result every frame, pre-calculate all the colors and positions and store them in a vertex-array. That way you only need a single draw-call to draw the whole thing.
Try some of the tutorials found with Google if you don't know vertex arrays: http://www.google.com/search?q=opengl+vertex+array+tutorial.

For simplicity you could also try a display-list, which might be easier.

##### Share on other sites

{//load targa images ,return the next free slot of texture otherwise 0

unsigned char TgaUnComp[]=
{0,0,2,0,0,0,0,0,0,0,0,0};

FILE *f = fopen(filename,"rb");
if(!f)return 0;

int width=0,height=0;
unsigned char ncomponents;

ncomponents /= 8;
fseek(f,ftell(f)+1,SEEK_SET);
if(ncomponents!=3&&ncomponents!=4){fclose(f);return 0;}
int totalsize = width*height*ncomponents;
unsigned char *data = (unsigned char*)malloc(totalsize);

GLuint tex;
glGenTextures(1,&tex);
glBindTexture(GL_TEXTURE_2D,tex);

//set up texture filters

//

glTexImage2D(GL_TEXTURE_2D, 0, ncomponents==3?GL_BGR:GL_BGRA,
width, height, 0, ncomponents==3?GL_BGR:GL_BGRA, GL_UNSIGNED_BYTE,data);

free(data);

return tex;
}

//In Photoshop when you saving to *.tga uncheck 'Compress' in option window

##### Share on other sites
Does anyone know why the foreground text images aren't showing up? Is it a bug with SOIL?

I'd probably be better off converting my images into cpp.

##### Share on other sites
glTexImage2D(GL_TEXTURE_2D, 0, ncomponents==3?GL_BGR:GL_BGRA,
width, height, 0, ncomponents==3?GL_BGR:GL_BGRA, GL_UNSIGNED_BYTE,data);

GL_BGR is not a valid internal format. It needs to be GL_RGB8
GL_BGRA is not a valid format either. Use GL_RGBA8.
If you call glGetError(), it will tell you there is a problem.

This is better

glTexImage2D(GL_TEXTURE_2D, 0, ncomponents==3?GL_RGB8:GL_RGBA8,
width, height, 0, ncomponents==3?GL_BGR:GL_BGRA, GL_UNSIGNED_BYTE,data);

##### Share on other sites
Well I started off by rendering my textures to a buffer and then rendering that to the screen and by that alone I have jumped from nearly 4fps to 860fps, so I must be doing something right. I haven't even started using vertex buffers yet. I'll tell you how high I can get the frame rate.

## Create an account

Register a new account

• ### Forum Statistics

• Total Topics
627770
• Total Posts
2979002
• ### Similar Content

• Hello! As an exercise for delving into modern OpenGL, I'm creating a simple .obj renderer. I want to support things like varying degrees of specularity, geometry opacity, things like that, on a per-material basis. Different materials can also have different textures. Basic .obj necessities. I've done this in old school OpenGL, but modern OpenGL has its own thing going on, and I'd like to conform as closely to the standards as possible so as to keep the program running correctly, and I'm hoping to avoid picking up bad habits this early on.
Reading around on the OpenGL Wiki, one tip in particular really stands out to me on this page:
For something like a renderer for .obj files, this sort of thing seems almost ideal, but according to the wiki, it's a bad idea. Interesting to note!
So, here's what the plan is so far as far as loading goes:
Set up a type for materials so that materials can be created and destroyed. They will contain things like diffuse color, diffuse texture, geometry opacity, and so on, for each material in the .mtl file. Since .obj files are conveniently split up by material, I can load different groups of vertices/normals/UVs and triangles into different blocks of data for different models. When it comes to the rendering, I get a bit lost. I can either:
Between drawing triangle groups, call glUseProgram to use a different shader for that particular geometry (so a unique shader just for the material that is shared by this triangle group). or
Between drawing triangle groups, call glUniform a few times to adjust different parameters within the "master shader", such as specularity, diffuse color, and geometry opacity. In both cases, I still have to call glBindTexture between drawing triangle groups in order to bind the diffuse texture used by the material, so there doesn't seem to be a way around having the CPU do *something* during the rendering process instead of letting the GPU do everything all at once.
The second option here seems less cluttered, however. There are less shaders to keep up with while one "master shader" handles it all. I don't have to duplicate any code or compile multiple shaders. Arguably, I could always have the shader program for each material be embedded in the material itself, and be auto-generated upon loading the material from the .mtl file. But this still leads to constantly calling glUseProgram, much more than is probably necessary in order to properly render the .obj. There seem to be a number of differing opinions on if it's okay to use hundreds of shaders or if it's best to just use tens of shaders.
So, ultimately, what is the "right" way to do this? Does using a "master shader" (or a few variants of one) bog down the system compared to using hundreds of shader programs each dedicated to their own corresponding materials? Keeping in mind that the "master shaders" would have to track these additional uniforms and potentially have numerous branches of ifs, it may be possible that the ifs will lead to additional and unnecessary processing. But would that more expensive than constantly calling glUseProgram to switch shaders, or storing the shaders to begin with?
With all these angles to consider, it's difficult to come to a conclusion. Both possible methods work, and both seem rather convenient for their own reasons, but which is the most performant? Please help this beginner/dummy understand. Thank you!

• I want to make professional java 3d game with server program and database,packet handling for multiplayer and client-server communicating,maps rendering,models,and stuffs Which aspect of java can I learn and where can I learn java Lwjgl OpenGL rendering Like minecraft and world of tanks

• A friend of mine and I are making a 2D game engine as a learning experience and to hopefully build upon the experience in the long run.

-What I'm using:
C++;. Since im learning this language while in college and its one of the popular language to make games with why not.     Visual Studios; Im using a windows so yea.     SDL or GLFW; was thinking about SDL since i do some research on it where it is catching my interest but i hear SDL is a huge package compared to GLFW, so i may do GLFW to start with as learning since i may get overwhelmed with SDL.
-Questions
Knowing what we want in the engine what should our main focus be in terms of learning. File managements, with headers, functions ect. How can i properly manage files with out confusing myself and my friend when sharing code. Alternative to Visual studios: My friend has a mac and cant properly use Vis studios, is there another alternative to it?

• Both functions are available since 3.0, and I'm currently using glMapBuffer(), which works fine.
But, I was wondering if anyone has experienced advantage in using glMapBufferRange(), which allows to specify the range of the mapped buffer. Could this be only a safety measure or does it improve performance?
Note: I'm not asking about glBufferSubData()/glBufferData. Those two are irrelevant in this case.
• By xhcao
Before using void glBindImageTexture(    GLuint unit, GLuint texture, GLint level, GLboolean layered, GLint layer, GLenum access, GLenum format), does need to make sure that texture is completeness.

• 11
• 10
• 10
• 23
• 14