NeHe Tutorials, Lesson 6 Ported to iPhone (sort of)

I've ported NeHe Lesson 06. Sort of.

You see, OpenGL ES 1.1 doesn't support quads. NeHe selected a pyramid and a cube because they are easy shapes under OpenGL proper. However, the only polygon that OpenGL ES 1.1 knows about is the triangle. There are several variations on it - triangle strips, triangle fans, and triangles. As you saw when we ported Lesson 5, we had to split each quad into two triangles. That wasn't so bad when we were just drawing flat colors, but now that we're looking to map textures, it becomes a whole heck of a lot harder, because mapping a square texture to a triangle is, quite frankly, a pain in the ass.

Here is the link for the ported Lesson 6 project.

I only mapped two of the sides - front and back, the other aren't done and won't display right. It took me the better part of an hour before I finally gave up mapping all six sides. I hate releasing this unfinished, but I just can't afford the time right now to manually map the textures to all the triangle that make up the cube. Fortunately, there's rarely a need to manually map texture coordinates any more. Most 3D programs will export the texture coordinates for you, so all we really need to take from Lesson 06 is how to load the textures into memory and how to make them active. You should read the NeHe tutorial so you understand how texture mapping works, but it doesn't make sense to spend a lot of time on the process. In a future posting, we'll see how to take a 3D object created in Blender and import the texture coordinates along with the vertex data. In practice, it would be rare for you to manually map textures to individual polygons like this.

In Lesson 06, we have our first instance variable in the controller class. Because I needed to access the textures array from multiple methods, I couldn't just make another static variable. So, we now have an array of integers, and these integers will each refer to a texture loaded into OpenGL.

GLuint  texture[1];      // Storage For One Texture ( NEW ) 

In our setupView method, we prepare our texture just like is done in the NeHe Lesson 06

 glGenTextures(1, &texture[0]);
 glBindTexture(GL_TEXTURE_2D, texture[0]);
 glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);

We have to vary a little from the plan to actually load the texture from file. Instead of a .bmp file, we're going to load that compressed texture file I had you create in this blog posting. If you didn't do that, go do it now. You'll want to drag the .pvr4 file into the /Resources group of your project.

Once you've got the project in your texture, we can load it in our setupView method:

 NSString *path = [[NSBundle mainBundle] pathForResource:@"NeHe" ofType:@"pvr4"];
 NSData *texData = [[NSData alloc] initWithContentsOfFile:path];
 // Instead of glTexImage2D, we have to use glCompressedTexImage2D
 glCompressedTexImage2D(GL_TEXTURE_2D, 0, GL_COMPRESSED_RGB_PVRTC_4BPPV1_IMG, 256.0, 256.0, 0, (256.0 * 256.0) / 2, [texData bytes]);
 [texData release];

A couple of things to notice - first, because our texture image is compressed, we had to use glCompressedTexImage2D() rather than glTexImage2D() as was done in the NeHe tutorial. The other thing is that we release the image data after we feed it to OpenGL - it creates its own copy of the texture, so we have to release to avoid leaking memory.

After that, the rest of the setup is pretty much the same as in the original tutorial:

 glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR); 
 glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR); 
 
 glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);
 // Enable blending
 glEnable(GL_BLEND);

Where things get really different is in the drawView method. Some of you probably saw this coming, but we can't use glTexCoord2f() because we can't use glBegin() and glEnd() on the iPhone.

The solution is the same as before - we stuff all those texture coordinates into an array called (wait for it) a texture coordinate array. Texture coordinates in the array are just like the values you would pass to glTexCoord2f() - values between 0.0 and 1.0. Refer to the original tutorial for a description of how that mapping works. It's a little hard to grok. If you don't fully get it, don't worry - before long, we're going to write an object-loader that will handle that for us, and then we'll never have to remember how it works again. Here is the texture coordinate array I created for this lesson, but remember that only the first 16 values (corresponding to the first four polygons that make up the front and back of the cube) are actually valid and mapped.

 const GLfloat cubeTextureCoords[] = {
  1.0, 1.0, // Front
  0.0, 1.0,
  0.0, 0.0,
  1.0, 0.0,
  
  0.0, 0.0, // Back
  0.0, 1.0,
  1.0, 1.0, 
  1.0, 0.0,
  
  0.0, 0.0, // Top
  1.0, 1.0,
  1.0, 1.0,  
  1.0, 1.0,
  
  0.0, 0.0, // Bottom
  0.0, 1.0,
  1.0, 1.0,  
  1.0, 1.0,
  
  0.0, 0.0, // Left
  1.0, 1.0,
  1.0, 1.0,  
  1.0, 1.0,
  
  0.0, 0.0, // Right
  1.0, 1.0,
  1.0, 1.0,  
  1.0, 1.0,
 };

Before we make any calls to glDrawElements(), we have to tell OpenGL about the texture coordinates, and we do that using a function called glTexCoordPointer(), like so:

glTexCoordPointer(2, GL_FLOAT, 0, cubeTextureCoords);

The first argument to this function says that we have two mapping values for each element to be drawn. The second argument tells OpenGL that the texture array contains floating point values, the third is that parameter I keep telling you to ignore and just provide 0 for, and the last is the pointer to the actual texture coordinate array.

Before you can call glDrawElements, you have to enable texture coordinate arrays, by making this call:

glEnableClientState(GL_TEXTURE_COORD_ARRAY);

Like the other enable functions, you can call this once during setup, or you can enable and disable it during application execution. Because only one of our two objects is getting mapped, we enable it before we draw the cube, and disable it afterwards, which will keep the pyramid from getting mapped as well.

In order for texture mapping to work, we must also call

glEnable(GL_TEXTURE_2D);

This only has to be called once in setup, or you can also enable and disable it during application execution, though typically it's just turned on at the beginning.

That's pretty much it. When we call glDrawElements(), it will automatically fetch the coordinate data and map the last texture that was bound. We only have one, which we bound during setup by calling glGenTextures() and glBindTexture().

If we had a lot of textures (which you will in most situations), you would typically load them all in during setup, and then activate different ones by making subsequent calls to glBindTexture(), which does double duty, both creating, and activating existing textures. The last one that was passed to glBindTextures() is the one that will get mapped when you draw.

This was a tough lesson to port. They opted to map the cube because it was easy - square sides, square textures, very simple mapping. We're not that lucky on the iPhone, so I hope you'll forgive the fact that this one is incomplete. In return, I promise to show you how to load objects with texture maps. Probably not for a week or two, though.