Sunday, July 3, 2011

Setting up Opengl ES 2.0 window in XCode.

This tutorial covers only Opengl ES 2.0 for iOS. You don't need to install any Opengl ES package from anywhere… its already there.
So we will start from a very generic template for iOS and open a Window-based application. We should add Opengl ES framework and QuartzCore framework.
LINK (How to add frameworks in project in XCode 4).

Ok. So we will just load a clean screen in this tutorial where we will doing drawing in our further tutorials.

Now I am going to make sure that I can compile the combination of Objective-C and C++ as we will be dealing with lots of C++ here as well, hence we will have to make some changes in the project setting regarding our GCC-Language as described in this article. LINK
In this tutorial its not useful but will be later on.

For this tutorial I am going to do everything in single file for beginners not get confused with so many files, classes etc… but later on we will move to get it more standard with classes and templates etc once we are past the beginners step.

Ok. Lets add a UIView and name it OpenglView.
Lets import gl.h
#import "OpenglView.h"

We need to add following to convert the layer of this view to CAEAGLLayer format so that we can do our OpenGL drawing on it.

+ (Class) layerClass
    return [CAEAGLLayer class];

We extract our CAEAGLLayer from the current layer. Remember it was easy to extract CALayer from current layer by just doing self.layer for a UIView but now we are downcasting CALayer to CAEAGLLayer for OpenGL specific drawings.
CAEAGLLayer* eaglLayer = (CAEAGLLayer*) super.layer;

This will tell Quartz to stop handling transparency as Opengl will do it all now.
eaglLayer.opaque = YES;

If you have done any Quartz Drawing then you must remember we used to have CGContext prepared in order to be able to draw anything. It acted like a canvas.
        mimContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
        BOOL setContext=[EAGLContext setCurrentContext:mimContext];
        if (!mimContext || !setContext) 
            [self release];
            return nil;

Then we set up the render buffer and frame buffer and viewport

        //Lets init and bind render buffer with current context
        glGenRenderbuffers(1, &renderbuffer);
        glBindRenderbuffer(GL_RENDERBUFFER, renderbuffer); 
        [mimContext renderbufferStorage:GL_RENDERBUFFER fromDrawable: eaglLayer];
        //Frame buffer- which is a collection of render buffers and other kind of buffers like depth etc.
        glGenFramebuffers(1, &framebuffer);
        glBindFramebuffer(GL_FRAMEBUFFER, framebuffer);
        glFramebufferRenderbuffer(GL_FRAMEBUFFER,GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, renderbuffer);        

        //Setting the dimensions of your view area.
        glViewport(0, 0, CGRectGetWidth(frame), CGRectGetHeight(frame));

And then simply draw ! Here we are just clearing up the screen to white for the drawing in further articles. This will make your screen complete white.

       glClearColor(1.0f, 1.0f, 1.0f, 1);
    [mimContext presentRenderbuffer:GL_RENDERBUFFER];

CODE available to download HERE
Next tutorial available : HERE (wait for sometime :) )


  1. your blogs is awesome.
    Recharge offers
    Videocon Telecom rolls out Unlimited Social Media internet packs for Whatsapp, Facebook & twitter at Re 1.

  2. Great information
    Videocon Telecom initiates one of the largest employee recognition programs in India; takes more than 600 employees for a 5-day fun & frolic excursion and Bi-Annual R&R Event in Phuket, Thailand