iDevGames Forums
(static) Background image in Open GL - Printable Version

+- iDevGames Forums (http://www.idevgames.com/forums)
+-- Forum: Development Zone (/forum-3.html)
+--- Forum: iPhone, iPad & iPod Game Development (/forum-11.html)
+--- Thread: (static) Background image in Open GL (/thread-1952.html)



(static) Background image in Open GL - Fraggle - Jan 6, 2009 12:09 PM

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


(static) Background image in Open GL - riruilo - Jan 6, 2009 02:34 PM

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.


(static) Background image in Open GL - arekkusu - Jan 6, 2009 03:00 PM

Textures on the iPhone have to be power of two. They don't have to be square.


(static) Background image in Open GL - riruilo - Jan 6, 2009 04:36 PM

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?


(static) Background image in Open GL - AnotherJake - Jan 6, 2009 05:09 PM

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.


(static) Background image in Open GL - Nick - Jan 6, 2009 05:11 PM

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.


(static) Background image in Open GL - smallstepforman - Jan 6, 2009 05:36 PM

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.


(static) Background image in Open GL - Bachus - Jan 6, 2009 06:15 PM

A 512x256 image stretched to fit the screen can work remarkably well depending on the image. Same as an anamorphic DVD.


(static) Background image in Open GL - AnotherJake - Jan 6, 2009 06:25 PM

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)


(static) Background image in Open GL - riruilo - Jan 7, 2009 02:07 AM

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.


(static) Background image in Open GL - AnotherJake - Jan 7, 2009 07:48 AM

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.