Jump to content
  • Advertisement
Sign in to follow this  
Sigvatr

OpenGL Problems rendering 2D textures

This topic is 3293 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

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 )
{
	texture = SOIL_load_OGL_texture
	(
		filename,
		SOIL_LOAD_RGBA,
		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 );
	glLoadIdentity();
	glMatrixMode( GL_MODELVIEW );
	glLoadIdentity();	

	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 );
			}
			glBegin( GL_QUADS );
				glVertex2f( vx1, vy1 );
				glVertex2f( vx1, vy2 );
				glVertex2f( vx2, vy2 );
				glVertex2f( vx2, vy1 );
			glEnd();
		}
	}

	glMatrixMode( GL_PROJECTION );
	glLoadIdentity();
	glMatrixMode( GL_MODELVIEW );
	glLoadIdentity();	

	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 );
			}
			glBegin( GL_QUADS );
				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 this post


Link to post
Share on other sites
Advertisement
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 this post


Link to post
Share on other sites
Try to load the tga:

GLuint LoadTga(const char *filename)
{//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};
unsigned char curheader[12];

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

fread(curheader,12,1,f);

if(memicmp(TgaUnComp,curheader,12)){ fclose(f);return 0;}

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

fread(&width,2,1,f);
fread(&height,2,1,f);
fread(&ncomponents,1,1,f);
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);

fread(data,totalsize,1,f);

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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!