Introduction to OpenGL ES 2.0

Author Kevin

Ever since I started developing for the iPhone and iPad I’ve had to re-learn OpenGL in its new mobile form as OpenGL ES 2.0. With that said, I still like being able to do my basic research on my Windows 7 laptop instead of hacking around inside XCode, which I’m still getting used to.

Therefore, I decided to create some really simple, stand-alone OpenGL ES 2.0 samples that can run on Windows through PowerVR’s OpenGL ES 2.0 emulator.

Yes, I know that the emulator is part of a SDK that has a ton of samples, but I like small, self-contained samples that stand on their own and do not rely on a massive common samples library that hides most of the detail. And, yes, I also know that all this abstraction is meant to help me, but somehow it makes things seem even more mysterious when certain aspects of OpenGL ES are tucked away out of sight. Anyway, I just like tiny, bare-bone samples that get straight to the point.

If that’s you, read on.

First off, you’ll need to download PowerVR’s OpenGL ES 2.0 emulator SDK since OpenGL ES is intended for mobile devices – not full-size computers that normally run regular OpenGL. The actual downland link is under the header of PC Emulation and is titled Windows Vista/XP – OpenGL ES 2.0.

Once you’ve installed their SDK you’ll be able to run all of the PowerVR samples right away because they all reference the SDK through relative paths, but the samples I offer do not use relative paths so you’ll need to add a few paths to Visual Studio to get to them to compile and link, and you’ll need to add one path to your system’s PATH environment variable to get them to run on the emulator. Here’s how you do it.

1. In the menu of Visual Studio select Tools->Options to launch the Options dialog.
2. On the Options dialog, open or expand the Project and Solutions category and select VC++ Directories.
3. In the Show directories for drop down box select Include files and add the following paths. Of course, your paths may vary depending on where you install the SDK and the version you downloaded.
   1. C:\Imagination Technologies\POWERVR SDK\OGLES2_WINDOWS_PCEMULATION_2.07.27.0484\Builds\OGLES2\WindowsPC
   2. C:\Imagination Technologies\POWERVR SDK\OGLES2_WINDOWS_PCEMULATION_2.07.27.0484\Builds\OGLES2\Include
4. Next, In the Show directories for drop down box select Library files and add this path:
   1. C:\Imagination Technologies\POWERVR SDK\OGLES2_WINDOWS_PCEMULATION_2.07.27.0484\Builds\OGLES2\WindowsPC\Lib

Finally, you’re going to add a path to your system’s PATH variable so you can run the samples on the emulator no matter where you run your samples from. This path will point to the .dlls for the emulator which are stored in the SDK’s lib directory.

1. To do this, hold down the Windows key on your keyboard and hit the Pause/Break key to bring up the System Properties dialog.
2. On the System Properties dialog select the Advanced tab and click the Environment Variables button.
3. Under System Variables double click the PATH variable and append this path to the end of the long list of other paths. Make sure to separate our new path from the last path with a semicolon.
   1. ;C:\Imagination Technologies\POWERVR SDK\OGLES2_WINDOWS_PCEMULATION_2.07.27.0484\Builds\OGLES2\WindowsPC\Lib

If you get all this right, you’ll now be able to download, compile and run the OpenGL ES 2.0 samples from my site. Now, to get the ball rolling, here are two samples to test out your new OpenGL ES 2.0 emulation environment.

This first sample is super simple and is focused on setting up and initializing OpenGL ES 2.0. I’m not going to elaborate much here since there are tons of blogs that discuss the basics of using of EGL to create an OpenGL ES 2.0 window from a system specific Window, so download the sample, read through the code, and start Googling if you have questions.

The second sample is a little more advanced and adds textured geometry to the mix which is pretty cool because it shows how to load a PNG image with transparency using the LodePNG library so we can create an OpenGL texture from it.

Here are the basics of using LodePNG library to create an OpenGL texture.

//
// Load and decode a PNG file so we can make a texture out of it.
//

std::vector< unsigned char > rawImage;
LodePNG::loadFile( rawImage, "test_alpha.png" );

LodePNG::Decoder decoder;
std::vector< unsigned char > image;
decoder.decode( image, rawImage.empty() ? 0 : &rawImage[0],
                (unsigned)rawImage.size() );

Unfortunately, OpenGL likes to load things completely opposite from everybody else, so you’ll also need some code to flip and invert the image data before loading it into an OpenGL texture array:

//
// Flip and invert the PNG image since OpenGL likes to load everything
// backwards from what is considered normal!
//

unsigned char *imagePtr = &image[0];
int halfTheHeightInPixels = decoder.getHeight() / 2;
int heightInPixels = decoder.getHeight();

// Assuming RGBA for 4 components per pixel.
int numColorComponents = 4;

// Assuming each color component is an unsigned char.
int widthInChars = decoder.getWidth() * numColorComponents;

unsigned char *top = NULL;
unsigned char *bottom = NULL;
unsigned char temp = 0;

for( int h = 0; h < halfTheHeightInPixels; ++h )
{
    top = imagePtr + h * widthInChars;
    bottom = imagePtr + (heightInPixels - h - 1) * widthInChars;

    for( int w = 0; w < widthInChars; ++w )
    {
        // Swap the chars around.
        temp = *top;
        *top = *bottom;
        *bottom = temp;

        ++top;
        ++bottom;
    }
}

Once that’s done, you can move forward and create an OpenGL texture out of the flipped over PNG data:

//
// Create the OpenGL texture and fill it with our PNG image.
//

// Allocates one texture handle
glGenTextures( 1, &g_uiTexture );

// Binds this texture handle so we can load the data into it
glBindTexture( GL_TEXTURE_2D, g_uiTexture );

glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );

glTexImage2D( GL_TEXTURE_2D, 0, GL_RGBA, decoder.getWidth(),
              decoder.getHeight(), 0, GL_RGBA, GL_UNSIGNED_BYTE,
              &image[0] );

Well, that concludes my little introduction to setting up an OpenGL ES 2.0 emulation environment on Windows. I hope it helps you get a little further down the road of mobile 3D development with OpenGL.