(static) Background image in Open GL

Apprentice
Posts: 10
Joined: 2009.01
Post: #1
Hi again,

I'm slowly making my little game working Smile
Now I'm trying to us a simple 480x320 (i'm in landscape) shape textured with a 480x320 image as the background.
It seems that the iphone want texture dimensions to be square & power of 2.

Allright... but what is the proper, simple, clean and easy way to display static image in the background then?

I know I could make my Open GL layer transparent and set another layer with the background image, but I can feel people going "bad bad bad".

So please, open gl masters, give me your insights Smile

Thanks,

Seb
Quote this message in a reply
Member
Posts: 249
Joined: 2008.10
Post: #2
Easy, use a 512*512 texture, and paste it to a square, after render that square, render or update your scene graph, so the square will not be affected by opengl transformations.

If you are using a orthographic camera, it is easy to calculate your square dimensions and position (put it far), however, if you are going to use perspective camera, you have to put your square just in over the far plane, so use tangent and fov angle to calculate its coordinates.

Hope this helps.
Quote this message in a reply
Sage
Posts: 1,232
Joined: 2002.10
Post: #3
Textures on the iPhone have to be power of two. They don't have to be square.
Quote this message in a reply
Member
Posts: 249
Joined: 2008.10
Post: #4
arekkusu Wrote:Textures on the iPhone have to be power of two. They don't have to be square.

Who say that?

By the way, what is the closest power of two texture without losing data on the full screen iphone size?
Quote this message in a reply
Moderator
Posts: 3,570
Joined: 2003.06
Post: #5
riruilo Wrote:Who say that?
The original poster did:
Quote:It seems that the iphone want texture dimensions to be square & power of 2.

riruilo Wrote:By the way, what is the closest power of two texture without losing data on the full screen iphone size?

You mean the next POT size up from 480 x 320? As you said, that would be 512 x 512.

If you want to save some memory (at the expense of a small performance hit) you can store a 480 x 320 image to use up exact memory by slicing it into 8 POT texture slices:

256 x 256, 64 x 256
256 x 128, 64 x 128
256 x 64, 64 x 64
256 x 32, 64 x 32

Definitely not necessary, but if you're short on RAM and need to find some then it's an idea. The slight performance hit comes from the fact that you have to draw eight different textures for your background instead of just one.

The best idea would be to use 512 x 512 PVRTC if you can accept the quality.

riruilo Wrote:...however, if you are going to use perspective camera, you have to put your square just in over the far plane, so use tangent and fov angle to calculate its coordinates.
Simply use an ortho camera for the background and then switch to perspective afterwards. No sense in sizing it to fit in perspective when you don't have to. Wink

Also, in ortho, no need to use depth testing for a background image, since everything else in the scene will logically be drawn on top of it.
Quote this message in a reply
Sage
Posts: 1,066
Joined: 2004.07
Post: #6
512x512. It's the smallest, power-of-two texture you can make (square or not) that will fit a full resolution iPhone screen background in.

What I did was simply draw a fullscreen textured quad and adjusted the texture coordinates. I placed my 320x480 image in the top left corner of a 512x512 texture and then used 320.0f/512.0f as the maximum U texture coordinate and (480.0f/512.0f) as the maximum V texture coordinate. I lose out on some wasted memory, but the rendering is fairly straightforward.
Quote this message in a reply
Member
Posts: 32
Joined: 2008.10
Post: #7
static const float kGeometry[] =
{
// Vertices
0.0f, Y_SCREEN_SIZE_Y, 0.0f,
0.0f, 0.0f, 0.0f,
Y_SCREEN_SIZE_X, Y_SCREEN_SIZE_Y, 0.0f,
Y_SCREEN_SIZE_X, 0.0, 0.0f,
// Textures
0.1875f, 0.03125f, // image is 320x480, but texture is 512x512. Image is offset by 96x32
0.1875f, 0.96875,
0.8125f, 0.03125f,
0.8125f, 0.96875,
// Normals
0.0f, 0.0f, 1.0f,
0.0f, 0.0f, 1.0f,
0.0f, 0.0f, 1.0f,
0.0f, 0.0f, 1.0f,
};
static int kGeometry_Count = sizeof(kGeometry)/(8*sizeof(float));

Adjust your vertex/texture/normal pointers, and you're set.
Quote this message in a reply
Member
Posts: 268
Joined: 2005.04
Post: #8
A 512x256 image stretched to fit the screen can work remarkably well depending on the image. Same as an anamorphic DVD.
Quote this message in a reply
Moderator
Posts: 3,570
Joined: 2003.06
Post: #9
That's a great point Bachus! I've done that too, but not since I've been doing my 8 slice backgrounds or PVRTC, so I had forgotten about that. So the approaches listed in this thread so far:

- one 512 x 512 uncompressed (PRO: looks perfect CON: wastes memory)

- one 512 x 512 PVRTC (PRO: uses least memory CON: compression artifacts can look bad)

- one 512 x 256 uncompressed, but stretched to fit width (PRO: uses less memory CON: requires filtering and makes pixels non-square (distorts image))

- 8 sub-slice textures uncompressed (PRO: looks perfect and uses exact memory CON: requires multiple GL binds/draws)
Quote this message in a reply
Member
Posts: 249
Joined: 2008.10
Post: #10
AnotherJake Wrote:The original poster did:
If you want to save some memory (at the expense of a small performance hit) you can store a 480 x 320 image to use up exact memory by slicing it into 8 POT texture slices:

256 x 256, 64 x 256
256 x 128, 64 x 128
256 x 64, 64 x 64
256 x 32, 64 x 32

I agree with you, but that is a bit difficult if you are a beginner. Do not forget the iPhone is just a mobile phone, so, this kind of methods are always welcome.

AnotherJake Wrote:The original poster did:
Simply use an ortho camera for the background and then switch to perspective afterwards. No sense in sizing it to fit in perspective when you don't have to.

I have to try that Smile


AnotherJake Wrote:The original poster did:
8 sub-slice textures uncompressed (PRO: looks perfect and uses exact memory CON: requires multiple GL binds/draws)

Yes, I didn't try it but powervr docs say is not a good idea to use more textures than required or binds.
Quote this message in a reply
Moderator
Posts: 3,570
Joined: 2003.06
Post: #11
riruilo Wrote:Yes, I didn't try it but powervr docs say is not a good idea to use more textures than required or binds.
Yes, you want to avoid extra binds for performance' sake, but it is also very important to save memory on iPhone. There are trade-offs to all the approaches, as I listed. Use whichever one fits your situation.

riruilo Wrote:I agree with you, but that is a bit difficult if you are a beginner.
Not really. If you can load a texture and bind it, which is as basic as it gets, then you know all you need. It is only very slightly more difficult if you slice it on load, but you can slice it in Photoshop as eight separate textures to load from disk instead.

The 512 x 512 uncompressed approach is arguably the most *intuitive*, if that's what you're looking for, but none of the other approaches are any more *difficult* in practice. I would say, if you have lots of memory to spare, just use the uncompressed 512 x 512 approach at first. But if you're looking to save some memory, look at the others.
Quote this message in a reply
Post Reply 

Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  stupid question about IB - background image aerospaceman 2 3,233 Apr 29, 2010 07:17 PM
Last Post: aerospaceman
  Static libraries... the_wandering_monster 6 4,077 Dec 31, 2009 03:46 PM
Last Post: the_wandering_monster
  Static Library kendric 9 3,246 Sep 17, 2009 11:24 AM
Last Post: kendric
  Background Pic, Rotate, and Swap Image? kahanejosh 1 2,342 Apr 28, 2009 11:10 AM
Last Post: Malarkey
  OpenGL - how to draw background image? SDyer777 1 7,018 Mar 9, 2009 11:17 AM
Last Post: AnotherJake