AncaA's tech journal » OpenGL ES

Useful tutorials for starting OpenGL development

Anca Alimanescu — Fri, 02 Jan 2009 09:10:00 +0000

Some very useful tutorials and demos that I’ve found about implementing OpenGL:

Running an OpenGL ES application on Symbian Emulator and Phone from Visual Studio

Anca Alimanescu — Thu, 21 Feb 2008 02:34:00 +0000

Today I wanted to test a little how the hardware acceleration is working in rendering 3D OpenGl ES applications on the Nokia N95.
In order to do this I downloaded a sample 3D engine from the Nokia website.
In order to run it on the emulator, I used Carbide VS 2005. The steps I followed were:

1. Click File ->Import Symbian Project.

2. In the dialog box that appears, as project file, specify the path to the bld.inf file of your project and select the project type from the drop down list below(in my case is Symbian 9) and click Next

3. In the Solution Settings dialog box select the SDK you want to use for your application(in my case S60 3.0 FP2). Here you can choose if you want your solution to be executed on the emulator(check the WINSCV checkbox) and on the phone(check the GCCE checkbox)

4. Click Finish.

Now you can see all your project files included in a Visual Studio solution. In order to launch the application on the emulator just choose WINSCV configuration, like in the image below and run your application.

One problem I encountered, I don’t know if is normal or not, is the fact that the application is installed when you run the project from Visual Studio. The emulator is launched, but for a few seconds a white screen is displayed and after the main starting screen shows up. In order to launch the program I opened the Menu folder -> Instalations and I launched my application from there.

For running it on the phone, the GCCE configuration must be chosen and the solution launched. In order to communicate by USB cable with the phone, you will need to download the PC Suite from Nokia.The application will be installed on the phone but you will have to go as well in the Installed folder to launch it.

Chasing the 3D hardware acceleration on mobile devices

Anca Alimanescu — Wed, 20 Feb 2008 05:20:00 +0000

As seen until now after finished with the basics of building a 3D application on the Windows Mobile platform, I started to notice the advantages and disadvantages on using OpenGL Es on Windows Mobile. The available free implementations of OpenGL ES that I could find for Windows Mobile were only SW implementations and made no usage of the hardware acceleration of the graphic card. Doing some research I’ve found out that Nvidia might provides some implementations of OpenGL ES but this is only for their clients.
So, in order to start studying the posibility of using the 3D HW acceleration, I started looking deeper into what Nokia phone and especially the Nokia N95 smartphone offers.
As it uses Symbian OS, I decided to have a look on how to start programming on Symbian using OpenGL ES. After a small research I saw that using OpenGL Es on Symbian was extremly well documented and explained. Here is an overview of Nokia and OpenGL ES.

So, some few more start-up hints:

1. Some general things about Symbian.

2. Some tools and SDKs for Symbian can be found on the Symbian Developer Network site. As far as I have seen the SDKs are free but you have to register in order to use them.
For my Nokia N95 application I downloaded the S60 3rd Edition SDK. As IDE you can choose between:
– Carbide C++ : based on the Eclipse platform. Comes in three “flavors”: Express, Developer and Proffesional. Only the Express version is free.
– Carbide VS, this is a plug-in for Visual Studio that allows you to develop C++ Symbian projects in Visual Studio 2005 and 2003. The plugin is free to download and use.
– CodeWarrior IDE that i think also needs a paied licence.
For Carbide and Carbide VS you have the emulator included.

3. Information about 3D applications in Symbian devices.

4. An implementation of OpenGL ES on Symbian for the desired platform. You can download it from here. And here you can see a list of questions that might help you a little more. After installing the SDK, you will notice it has included very good documentation, training courses and demos on how to start implementing OpenGL ES applications.

3D Mobile Rendering Using OpenGL ES presentation

Anca Alimanescu — Tue, 12 Feb 2008 16:39:00 +0000

For the PDF version click here.
Soon I will add also the source code for the application I developed and give some hints about usefull tutorials!

Bitmapped fonts

Anca Alimanescu — Thu, 17 Jan 2008 15:08:00 +0000

Due to the fact that OpenGL ES does not provide any kind of fonts, we need think a way to create the characters and display them efficiently. In order to use fonts in OpenGL ES, we will use a widely used technique called: bitmapped fonts. That is, we store into a texture all characters of a font (there are many programs that produces this kind of textures). The texture will be black (0,0,0) in the places that we want it will be transparent (we will not render the whole quad, only the character inside), and white (1,1,1) in the places we want to see (the character itself). This will allow us, with a blend function of (GL_ONE, GL_ONE).

Because we have a white color, we can safely use glColor4x call to color our font.

Also, we need the right texture coordinates to isolate the right character in the texture, so we will precompute all texture coordinates for characters from 0 to 127 (our texture has 128 characters) in order to access directly to them in runtime, and draw a textured-blended-quad (actually, a triangle strip, because we do not have quads…).

So first we will create a suitable texture, with all characters that we will need. This texture has 8 rows and 16 columns, and each cell has 16×16 texels, and the characters are stored in the ASCII order. We need to isolate the texture coordinates of a character, so we do the next computations:
const float rows = 8.0f; const float columns = 16.0f; const float xoffset = 1.0f / columns; const float yoffset = 1.0f / rows;

const float cx = (float)(c % 16) * xoffset; const float cy = (float)(c / 16) * yoffset;
Where c is the ASCII code of the character we want to access, substracting 32, because in our texture we do not store the first 32 ASCII characters. cx and cy are the initial position, in both axis, of the character. With these two values we have the texture coordinates of the first corner of the quad.

The BitmappedFont class will encapsulate all this code:
class BitmappedFont {


public:
BitmappedFont(GLuint textureFontID, int fontWidth = 15, int fontHeight = 15);
~BitmappedFont();
static void EnableStates(); //Begin Print
void Print(int x, int y, const char *fmt, ...);
static void DisableStates(); //EndPrint  
private:
GLuint m_textureFontID;
int m_fontWidth,m_fontHeight;  
//2 = st, 4 = vertices per character, 8 = rows, 16 = columns
static GLfixed m_textureCoordinates[2 * 4 * 8 * 16];
/*boolean to compute texture coordinates only when the first 
  instance is created*/
static bool m_instanced;

};

Texture Loader

Anca Alimanescu — Thu, 17 Jan 2008 15:05:00 +0000

In order to load a texture we will use the following function :
bool LoadTexture(const char *fileName, GLuint *id)
This function will receive a texture filename and a pointer to a texture identifier. This identifier will be initialized from inside the function (if proceed). It will return true if the texture was successfully loaded, otherwise it will return false.

First we will read the texture file:
bool LoadTexture(const char *fileName, GLuint *id) {


  FILE *f = fopen(fileName, "rb");
GLubyte *pixels = NULL;
if(!f) return false;
WORD width = 0, height = 0;   
byte headerLength = 0;     
byte imageType = 0;    
byte bits = 0;      
int format= 0;     
int lineWidth = 0;       
fread(&headerLength, sizeof(byte), 1, f);  
//skip next byte
fseek(f,1,SEEK_CUR); 
//read in the imageType (RLE, RGB, etc...)
fread(&imageType, sizeof(byte), 1, f);
//skip information we don't care about
fseek(f, 9, SEEK_CUR); 
/*read the width, height and bits per pixel (16, 24 or 32). We only 
  will take care of 24 bits uncompressed TGAs*/
fread(&width,  sizeof(WORD), 1, f);
fread(&height, sizeof(WORD), 1, f);
fread(&bits,   sizeof(byte), 1, f);
//move the file pointer to the pixel data
fseek(f, headerLength + 1, SEEK_CUR); 
//check if the image is not compressed.
if(imageType != 10)
{
  //check if the image is a 24 
  if(bits == 24)
  {  
    /*Another (faster) way to divide between 8. We want to know the 
      pixel size in bytes.*/
format = bits >> 3;
lineWidth = format * width;
    pixels = new GLubyte[lineWidth * height];
    //we are going to load the pixel data line by line
for(int y = 0; y < height; y++)
{
  //Read current line of pixels
  GLubyte *line = &(pixels[lineWidth * y]);    
  fread(line, lineWidth, 1, f);
  /*Because the TGA is BGR instead of RGB, we must swap the R 
        and G components (OGL ES does not have the           
        GL_BGR_EXT extension*/

Now we will create the OpenGL Texture:
//Ask for a free texture name glGenTextures(1, id); /*first binding implies the texture object creation*/ glBindTexture(GL_TEXTURE_2D, *id); /*Set texture properties: filtering and clamping modes*/ glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); /*Upload pixels to the texture object*/ glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, pixels); /*Our copy in main main memory is no longer needed*/ delete [] pixels; return true;

}
The texture will be loaded in the texture1 variable like this:
Gluint texture1 = 0; bool result = LoadTexture("texturename.tga",&texture1);

OBJ File Loader for OpenGL

Anca Alimanescu — Thu, 17 Jan 2008 15:03:00 +0000

In the followings a simple Obj File Loader using OpenGL ES will be described. For that, I used a structure to describe the mesh object:
typedef struct _ObjMesh { ObjVertex *m_aVertexArray; ObjNormal *m_aNormalArray; ObjTexCoord *m_aTexCoordArray; ObjFace *m_aFaces;


unsigned long int *m_aIndices; unsigned long int m_iNumberOfVertices,
                      m_iNumberOfNormals,
                      m_iNumberOfTexCoords,
                      m_iNumberOfFaces;

struct _ObjMesh *m_pNext; ObjFile m_iMeshID; unsigned char m_iMode; unsigned long int m_iDisplayListNum; } ObjMesh;
Each of the Vertices,Normals and Texture coordinates are also described in a structure:
typedef struct {


float x,   /* The x component of the vertex position */
         y,   /* The y component of the vertex position */
  z;   /* The z component of the vertex position */
} ObjVertex;
typedef struct {
float x,   /* The x component of the normal vector */
  y,   /* The y component of the normal vector */
  z;   /* The z component of the normal vector */
} ObjNormal;
typedef struct {
float u,   /* The u parametric texturing co-ordinate */
               v;   /* The v parametric texturing co-ordinate */

} ObjTexCoord;

In the source file, each row of the file will be read in the loadFile(”file.obj”) method and the values will be recorderd in the structure. In order to draw the shape the DrawObj() method will be used.

OBJ File Format & OBJ File Loader

Anca Alimanescu — Thu, 17 Jan 2008 15:02:00 +0000

The OBJ file format is a text file format, which means you can edit OBJ files in a text editor if you are hard-core. Unfortunately, the original specification didn’t seem to state what the end of line character should be, so some tools use carriage-returns and some use linefeeds. You may have to convert the end of line characters depending on which tools you are reading the OBJ file in from. (Most notably the OBJIMP plugin for 3DS MAX will crash when reading in any of the OBJ files that shipped with Poser.) Also your Windows text editors may think the files are binary because of this.

The first character of each line specifies the type of command. If the first character is a pound sign, #, the line is a comment and the rest of the line is ignored. Any blank lines are also ignored. The file is read in by a tool and parsed from top to bottom just like you would read it. In the descriptions that follow, the first character is a command, followed by any arguments. Anything shown in square brackets is optional.

# a comment line

These are always ignored. Usually the first line of every OBJ file will be a comment that says what program wrote the file out. Also, its quite common for comments to contain the number of verticies and/or faces an object used.

v x y z

The vertex command, this specifies a vertex by its three coordinates. The vertex is implicitly named by the order it is found in the file. For example, the first vertex in the file is referenced as ‘1’, the second as ‘2’ and so on. None of the vertex commands actually specify any geometry, they are just points in space.

vt u v [w]

The vertex texture command specifies the UV (and optionally W) mapping. These will be floating point values between 0 and 1 which say how to map the texture. They really don’t tell you anything by themselves, they must be grouped with a vertex in a ‘f’ face command.

vn x y z

The vertex normal command specifies a normal vector. A lot of times these aren’t used, because the ‘f’ face command will use the order the ‘v’ commands are given to determine the normal instead. Like the ‘vt’ commands, they don’t mean anything until grouped with a vertex in the ‘f’ face command.

f v1[/vt1][/vn1] v2[/vt2][/vn2] v3[/vt3][/vn3] …

The face command specifies a polygon made from the verticies listed. You may have as many verticies as you like. To reference a vertex you just give its index in the file, for example ‘f 54 55 56 57’ means a face built from vertecies 54 – 57. For each vertex, there may also be an associated vt, which says how to map the texture at this point, and/or a vn, which specifies a normal at this point. If you specify a vt or vn for one vertex, you must specify one for all. If you want to have a vertex and a vertex normal, but no vertex texture, it will look like: ‘f v1//vt1’. The normal is what tells it which way the polygon faces. If you don’t give one, it is determined by the order the verticies are given. They are assumed to be in counter-clockwise direction. If you aren’t using vn’s to specify the normal and you wanted to ‘flip the normal’ you would reverse the order of the verticies. In most 3D programs, if the normal points the wrong way, there will appear to be a hole in the object. g name

The group name command specifies a sub-object grouping. All ‘f’ face commands that follow are considered to be in the same group.

usemtl name

The use material command lets you name a material to use. All ‘f’ face commands that follow will use the same material, until another usemtl command is encountered. For all of the Poser OBJ files I’ve seen, all ‘g’ commands should be followed by a ‘usemtl’ command.

Remember that for verticies, they can be interspersed throughout the file, only the order they appear makes a difference. The faces can also be spread throughout the file, except they must follow the verticies they use (I think), and they will be part of whichever group and/or material they follow. That said, most OBJ files follow a consistant layout. Now the ‘normal’ layout of the file will be:

# comment about what application generated this file. # all of the ‘v’ commands will be listed v x y z v … # all of the ‘vn’ commands will be listed, although most Poser OBJ files # do not use the ‘vn’ commands vn x y z vn … # all of the ‘vt’ commands will be listed vt x y z vt … # the object and its material will be set g object usemtl material # all of the ‘f’ commands are listed f 1/1 2/2 3/3 4/4 f ….

Additional Items:

If you had two OBJ files and wanted to merge them, you can cut all the ‘v’, ‘vt’, and ‘vn’ commands from the second file and paste them at the end of the first. However, you cannot just copy over the ‘f’ commands, because they will have to have all their verticies offset. I’m thinking there has to be a tool out there somewhere that will do this for you, but I don’t know of any.

Hair objects with separate pieces like the ponytails that have a hairtie that can be colored separately, are actually a single group. They use additional usemtl commands to perform their magic. You can setup the additional material parameters in the .hr2 file (MAC). Example OBJ:

v x y z v … g hair usemtl hair f 1 2 3 4 f … # there is NOT another g command here usemtl hairTie f 10 11 12 13 f …

3D Tree on the Pocket PC

Anca Alimanescu — Tue, 15 Jan 2008 17:38:00 +0000

I loaded the tree using a mesh from a file and used OpenGL to render it. Soon I will put also some code samples used for loading the file and using OpenGL Es. Also I will add some performance statistics related to the execution of a 3D application using OpenGL.

Setting up the environment for using OpenGL ES with Visual Studio 2005 in Pocket Pc Development

Anca Alimanescu — Fri, 30 Nov 2007 17:04:00 +0000

In order to start the development of an Open GL ES application for the Pocket PC we will need the following:

1.An OpenGL ES implementation(Vincent Mobile 3D Rendering Library,Hybrid’s “Rasteroid” Implementation etc.) 2.Visual Studio 2005 Standard Edition(at least) as it contains the emulator and template projects for mobile development. 3.Pocket PC 2003 SDK.

In the following I am going to present you the steps needed to create an PocketPC application, on VSTO 2005, using OpenGL ES(Vincent implementation).

Steps on setting up the application:

1.Download the Vincent implementation library for Windows.

2.Unzip it and copy the header files and the library files in the Visual Studio directory Microsoft Visual Studio 8\SmartDevices\SDK\PocketPC2003\Include\ and Microsoft Visual Studio 8\SmartDevices\SDK\PocketPC2003\Lib\armv4, in the Pocket PC SDK. Make sure that in the Include folder you create a subfolder named GLES for example, where you include the header files located in the \include\GLES from the Vincent library. In the library Studio 8\SmartDevices\SDK\PocketPC2003\Lib\armv4 copy the content of the \bin\arm\Release folder.

3.Open Visual Studio 2005 and click File→ Create new project. Choose Visual C++ as programming language and select the Smart Device menu. From the project templates available choose Project Smart Device Win32 template. If you want to use Glut ES in implementing your project, you will specify in the wizard that you want a Win32 Console application. If you want to use just OpenGL ES you will choose a Win32 Windows application.

4.In the header file of the main cpp file make sure to include the OpenGl ES headers:

#include GLES/gl.h
#include GLES/egl.h

If you are using Glut Es make sure to add the

#include GLES/glutes.h

You should now link the project as well to the Glut Es library by cliking Project→ Project Properties→Configuration Properties→Linker→Command line. In the Command line here make sure to add glutes.lib library.

5.In order to test the project on the Pocket PC emulator, first you have to copy the libGLES_CM.dll file from the Vincent library in the Windows directory of the emulator(the same thing must be done for the mobile device). If you are using Glut ES, make sure to copy the glutes.dll file to the Windows directory of the emulator/pocket pc.

6.When launching the application you can run it either on the emulator or directy on the mobile device.