OpenGL ES Tutorial for Android – Part I – Setting up the view

I have started a new updated serie of tutorials on OpenGL ES 2.0 for android. Check them out at: OpenGL ES 2.0

I’m going to write a couple of tutorials on using OpenGL ES on Android phones. The theory of OpenGL ES is the same on different devices so it should be quite easy to convert them to another platform.

I can’t always remember where I found particular info so I might not always be able to give you the right reference. If you feel that I have borrowed stuff from you but have forgotten to add you as a reference, please e-mail me.

In the code examples I will have two different links for each function. The actual function will be linked to the android documentation and after that I will also link the OpenGL documentations. Like this:

gl.glClearColor(0.0f, 0.0f, 0.0f, 0.5f);

So, let’s start.

In this tutorial I will show you how to set up your OpenGL ES view that’s always a good place to start.

Setting up an OpenGL ES View

Setting up a OpenGL view has never been hard and on Android it is still easy. There really are only two things you need to get started.

GLSurfaceView

GLSurfaceView is a API class in Android 1.5 that helps you write OpenGL ES applications.

  • Providing the glue code to connect OpenGL ES to the View system.
  • Providing the glue code to make OpenGL ES work with the Activity life-cycle.
  • Making it easy to choose an appropriate frame buffer pixel format.
  • Creating and managing a separate rendering thread to enable smooth animation.
  • Providing easy-to-use debugging tools for tracing OpenGL ES API calls and checking for errors.

If you want to get going fast with your OpenGL ES application this is where you should start.

The only function you need to call on is:

public void  setRenderer(GLSurfaceView.Renderer renderer)

Read more at: GLSurfaceView

GLSurfaceView.Renderer

GLSurfaceView.Renderer is a generic render interface. In your implementation of this renderer you should put all your calls to render a frame.
There are three functions to implement:

// Called when the surface is created or recreated.
public void onSurfaceCreated(GL10 gl, EGLConfig config)

// Called to draw the current frame.
public void onDrawFrame(GL10 gl)

// Called when the surface changed size.
public void onSurfaceChanged(GL10 gl, int width, int height)

onSurfaceCreated

Here it’s a good thing to setup things that you don’t change so often in the rendering cycle. Stuff like what color to clear the screen with, enabling z-buffer and so on.

onDrawFrame

Here is where the actual drawing take place.

onSurfaceChanged

If your device supports flipping between landscape and portrait you will get a call to this function when it happens. What you do here is setting upp the new ratio.
Read more at: GLSurfaceView.Renderer

Putting it together

First we create our activity, we keep it clean and simple.

package se.jayway.opengl.tutorial;

import android.app.Activity;
import android.opengl.GLSurfaceView;
import android.os.Bundle;

public class TutorialPartI extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
    	super.onCreate(savedInstanceState);
 		GLSurfaceView view = new GLSurfaceView(this);
   		view.setRenderer(new OpenGLRenderer());
   		setContentView(view);
    }
}

Our renderer takes little bit more work to setup, look at it and I will explain the code a bit more.

package se.jayway.opengl.tutorial;

import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;

import android.opengl.GLU;
import android.opengl.GLSurfaceView.Renderer;

public class OpenGLRenderer implements Renderer {
	/*
	 * (non-Javadoc)
	 *
	 * @see
	 * android.opengl.GLSurfaceView.Renderer#onSurfaceCreated(javax.
         * microedition.khronos.opengles.GL10, javax.microedition.khronos.
         * egl.EGLConfig)
	 */
	public void onSurfaceCreated(GL10 gl, EGLConfig config) {
		// Set the background color to black ( rgba ).
		gl.glClearColor(0.0f, 0.0f, 0.0f, 0.5f);
		// Enable Smooth Shading, default not really needed.
		gl.glShadeModel(GL10.GL_SMOOTH);
		// Depth buffer setup.
		gl.glClearDepthf(1.0f);
		// Enables depth testing.
		gl.glEnable(GL10.GL_DEPTH_TEST);
		// The type of depth testing to do.
		gl.glDepthFunc(GL10.GL_LEQUAL);
		// Really nice perspective calculations.
		gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT,
                          GL10.GL_NICEST);
	}

	/*
	 * (non-Javadoc)
	 *
	 * @see
	 * android.opengl.GLSurfaceView.Renderer#onDrawFrame(javax.
         * microedition.khronos.opengles.GL10)
	 */
	public void onDrawFrame(GL10 gl) {
		// Clears the screen and depth buffer.
		gl.glClear(GL10.GL_COLOR_BUFFER_BIT | //
                           GL10.GL_DEPTH_BUFFER_BIT);
	}

	/*
	 * (non-Javadoc)
	 *
	 * @see
	 * android.opengl.GLSurfaceView.Renderer#onSurfaceChanged(javax.
         * microedition.khronos.opengles.GL10, int, int)
	 */
	public void onSurfaceChanged(GL10 gl, int width, int height) {
		// Sets the current view port to the new size.
		gl.glViewport(0, 0, width, height);
		// Select the projection matrix
		gl.glMatrixMode(GL10.GL_PROJECTION);
		// Reset the projection matrix
		gl.glLoadIdentity();
		// Calculate the aspect ratio of the window
		GLU.gluPerspective(gl, 45.0f,
                                   (float) width / (float) height,
                                   0.1f, 100.0f);
		// Select the modelview matrix
		gl.glMatrixMode(GL10.GL_MODELVIEW);
		// Reset the modelview matrix
		gl.glLoadIdentity();
	}
}

Fullscreen

Just add this lines in the OpenGLDemo class and you will get fullscreen.

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.requestWindowFeature(Window.FEATURE_NO_TITLE); // (NEW)
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
            WindowManager.LayoutParams.FLAG_FULLSCREEN); // (NEW)
        ... // Previous code.
    }

This is pretty much all you need to get your view up and running. If you compile and run it you will see a nice black screen.

References

The info used in this tutorial is collected from:
Android Developers
OpenGL ES 1.1 Reference Pages

You can download the source for this tutorial here: Tutorial_Part_I.zip
You can also checkout the code from: code.google.com

Next tutorial: OpenGL ES Tutorial for Android – Part II – Building a polygon

Tags: , ,

This Post Has 90 Comments

  1. Samuh Varta

    19 Dec 2009 Reply

    thanks for starting this tutorial series on OpenGL for Android!

  2. odd256

    6 Jan 2010 Reply

    Thanks, this is extremely helpful.

    I believe there’s a typo on line 220:
    s/OpenGLDemo/TutorialPartI

  3. chhsf

    10 Feb 2010 Reply

    Hi Per-Erik
    Thank you for your tutorial.But My application is not work for a error.It is GLLogger, it show couldn’t load library(Cannot find library).
    I don’t know what’s wrong.

  4. Gary Wang

    24 Feb 2010 Reply

    Dear Sir, really good articles to Android OpenGL ES!
    Thanks for ur sharing!

  5. Sridevi

    24 Feb 2010 Reply

    Thank you for the tutorial, alas some inspiration to start of OpenGL ES :)

  7. Nate

    2 Apr 2010 Reply

    any way to use a GLSurfaceView as a background? the idea is to have a normal surfaceview on top of the GLSurfaceView, render the background with opengl, then throw some sprites onto the other view. so as the opengl is just handling the background. I currently have this working fine, except i cannot get the GLSurfaceView to stay in the background.. no amount of view manipulation ie. what order they are in etc, seems to help.

  10. murali

    20 Apr 2010 Reply

    Your article is very helpful. Thanks

    My doubt is opengl return a .exe file as output in android, similarly in what format the o/p file will be in Android ? May be my question is very silly.

    Thanks in advance.

  11. shubham

    6 May 2010 Reply

    Thanx Bro..it’s realy good try.

    thnx

  12. shubham

    13 May 2010 Reply

    hi friend’s ,I want to draw an 2d image ..how can i do here.
    I got pixel position of image ..

    Pls reply

    Thank in Advance..

  13. Chinson

    17 May 2010 Reply

    It’s very helpful. Thanks!

  15. Tom Anderson

    27 Jul 2010 Reply

    By the way thought it could be helpful for anyone since black is the same as the default color. Try this instead:

    // Set the background color to RED( rgba ).
    gl.glClearColor(255.0f, 0.0f, 0.0f, 0.5f);

  16. Amandeep

    28 Jul 2010 Reply

    Too Good Blog.
    Very Clear and Informative.
    Thanks for availing this information

  17. czhedu

    15 Aug 2010 Reply

    Very good, ThX

  18. viv

    19 Aug 2010 Reply

    Great tutorial…….
    Clear and easy to understand……….

  19. ashik

    1 Sep 2010 Reply

    really nice tutorial and Im gonna add ur blog in my blogroll!!

  20. srikanth

    6 Oct 2010 Reply

    thanks
    its really nice to start opengl in eclipse
    if possible please provide the code for drawing arc in opengl using java

  21. Arun

    8 Oct 2010 Reply

    Thank u..

  22. Syd

    21 Oct 2010 Reply

    Really appreciate your tutorials, thanks!

  23. gabriel

    15 Nov 2010 Reply

    excellent to get started nice and easy :)

    just a note, you also need to include two classes for enable full screen:
    import android.view.Window;
    import android.view.WindowManager;

    great work on the writing, links and selecting the examples. jumping on part II now.

    PS: this should be linked from the android manual, where they say it’s not the scope of the glsurfaceview to explain how to do openGL helloworld! think that if you used more androidesque syntax they would consider it :) …just sugar, like @Override, etc

  24. gabriel

    15 Nov 2010 Reply

    *to enable full screen

  25. subho

    20 Nov 2010 Reply

    i am facing some error:
    [2010-11-20 15:31:55 – Emulator] invalid command-line parameter: partition-size.
    [2010-11-20 15:31:55 – Emulator] Hint: use ‘@foo’ to launch a virtual device named ‘foo’.
    [2010-11-20 15:31:55 – Emulator] please use -help for more information

  27. Sureshkumar

    23 Nov 2010 Reply

    Super!!!.

  29. Pach

    21 Dec 2010 Reply

    dear sir, I do have a question regarding this codes here
    // Sets the current view port to the new size.
    gl.glViewport(0, 0, width, height);// OpenGL docs.
    // Select the projection matrix
    gl.glMatrixMode(GL10.GL_PROJECTION);// OpenGL docs.
    // Reset the projection matrix
    gl.glLoadIdentity();// OpenGL docs.
    // Calculate the aspect ratio of the window
    GLU.gluPerspective(gl, 45.0f,
    (float) width / (float) height,
    0.1f, 100.0f);
    // Select the modelview matrix
    gl.glMatrixMode(GL10.GL_MODELVIEW);// OpenGL docs.
    // Reset the modelview matrix
    gl.glLoadIdentity();// OpenGL docs.

    why do we have to change the glMatrixMode to GL10.GL_MODELVIEW? and reload the glLoadIdentity?

    I hope I would here from your guidance since I’m new to OPENGL and android…

  31. John

    13 Jan 2011 Reply

    Hi,
    I have followed this tutorial and hve also got a square to appear on screen. I am able to move the square by using up down left and right keys. My question is how can I get a cameraq to “follow” this square when it moves? ie I want the camera to be focused on the square.

  33. Per-Erik Bergman

    13 Jan 2011 Reply

    Nate: You can use en GLSurfaceView as any view so with a frame layout I guess you can add it as a background.

    mural: On android we get an .apk file.

    shubham: Rendering 2D with OpenGL is a big tutorial itself, it is in the pipeline.

    Pach: GL_PROJECTION and GL_MODELVIEW is two different matrix and since we need to “reset” them both we need to do glLoadIdentity on both.

    John: The easiest way is to create a camera object that you can steer. When rendering do the camera translation first before you render the square.

  34. Robin Degen

    4 Feb 2011 Reply

    As an openGL programmer on the PC, this was all i needed to get me started on android. However, i’d prefer using C++ over java, so that will be a next thing to figure out on android. But atleast i got started now. Thanks for the info

  36. sameh ammar

    9 Mar 2011 Reply

    Thanx you are very nice :)

  37. Nayanesh Gupte

    26 Mar 2011 Reply

    How do I bind different textures to to different faces of cube?

    I’m trying something like this

    gl.glActiveTexture(GL10.GL_TEXTURE0);
    gl.glClientActiveTexture(GL10.GL_TEXTURE0);
    gl.glEnable(GL10.GL_TEXTURE_2D);
    gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);
    gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
    gl.glFrontFace(GL10.GL_CCW);
    gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
    gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer);
    gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, textureBuffer);
    ….
    gl.glActiveTexture(GL10.GL_TEXTURE5);
    gl.glClientActiveTexture(GL10.GL_TEXTURE5);
    gl.glEnable(GL10.GL_TEXTURE_2D);
    gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[5]);
    gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
    gl.glFrontFace(GL10.GL_CCW);
    gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
    gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer);
    gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, textureBuffer);

    gl.glTexEnvx(GL10.GL_TEXTURE_ENV , GL10.GL_TEXTURE_ENV_MODE, GL10.GL_MODULATE);

    gl.glDrawElements(GL10.GL_TRIANGLES, indices.length, GL10.GL_UNSIGNED_BYTE, indexBuffer);

  39. Adrian

    4 Apr 2011 Reply

    Hi,
    Is it possible to modify the draw method of an object in such a way that it only needs to be drawn once and not every time in the onDraw method? I am having performance issues while drawing lots of pixels for a background image and wondered if the draw method could be changed?

  40. Edward

    19 Apr 2011 Reply

    Hi,

    Sorry..i’m new in OpenGL ES..i just wondering, why do we need to include GL10?

    And, I found that its quite difficult to look for OpenGL ES in Android in the internet but tons in iPhone…

  41. haryo

    9 May 2011 Reply

    thanxs Per-Erik Bergman…
    its work..

    but i still really confuse to make graphics for AR using this ..any tutorial for make it ? please ??

    thanks.

  42. minimal

    12 May 2011 Reply

    Thanks this is really great.
    But I would also like to see a similar example set for NDK.
    I was at google I/0 and some of the stuff that they showed on NDK was awesome.

  43. harinath

    21 May 2011 Reply

    This was the excellent tutorial.i am having few doubts regarding the fallowing.
    How do I bind different textures to to different faces of cube?
    coud u please clarify it.

  44. Guillermo

    1 Jun 2011 Reply

    Hey, really really really great tutorial!! it`s very simple, i`m starting with opengl and android and its helps me a lot to dont missup with other stuffs. The links on the documentation also helps a lot on the learning process. I`ll continue with the other tutorials you`ve already posted. Thanks a lot!

  45. Helen

    17 Jun 2011 Reply

    Another much easier way to set your application to fullscreen ist by adding 1 line to the AndroidManifest.xml. Just add android:theme=”@android:style/Theme.NoTitleBar.Fullscreen” to the application-tag in the xml file.

  48. adesousa

    12 Aug 2011 Reply

    Good job.

  50. Natan Loterio

    29 Aug 2011 Reply

    Thank you! You are one of the best source i found.
    Congratulations.

  52. Hoai Le

    2 Oct 2011 Reply

    Thank you very much, i wasn’t found tutorial for opengl within a month!

  53. Sly Guy

    8 Oct 2011 Reply

    Awesome, this is an excellent tutorial, thanks!

  54. Yebio

    26 Oct 2011 Reply

    thank you so much sir for you accurate tutorials. Very help full

  56. mahesh

    18 Nov 2011 Reply

    Sir, i am trying to draw line by using glsurfaceview when user touches the screen. But i got window coordinates. I want them as glsurfaceview(opengl) coordinate. please help me

  57. Yebio

    5 Dec 2011 Reply

    I just finish class on graphics. Your tutorial were very help full as I was learning.
    Just want say thank you.

  58. Dien Trinh

    13 Dec 2011 Reply

    Hi Per-Erik Bergman,
    My name is Dien Trinh. Firstly, forgive me for my bad English. I am developing an App for reading ebook and using harism’s Curl effect codes and I want when the user switches curled page to left or to right a continue picture will display on left or right side instead of current picture on curled page. Example, on the screen are displaying picture 1 on left and picture 2 on right. When I switches curled page to left the screen will display picture 3 and picture 4 instead of pic 2 and pic 3. Can you help me solve the problem or any instruction? Here is the link of my source code. http://www.4shared.com/file/vyLa1szE/curlEffectAdroid.html?

    Thanks and Best Regards

  60. RAza

    10 Jan 2012 Reply

    Log.i(“For your information!”, “Good work :) Thanks”);

  62. Joe Staff

    19 Jan 2012 Reply

    How come you don’t extend GLSurfaceView and thus allowing for the @Override of onTouchEvent? Is there another method of calling onTouchEvent?

  63. wk

    22 Feb 2012 Reply

    thx

  64. Ritendra

    23 Feb 2012 Reply

    Thanks for starting this tutorial series…….

  66. LokiMehra

    15 Mar 2012 Reply

    Nice work.. keep it up sir.. ^_^

  67. ZachR

    15 Mar 2012 Reply

    I just wanted to thank you for creating this OpenGL ES series. I have found it quite helpful. Please do keep up the great work!

  68. Amit

    24 May 2012 Reply

    Hello,

    I am very new for OPENGL.. can you tell me what is gl stands for in each line?
    gl.glClearColor(0.0f, 0.0f, 0.0f, 0.5f); // OpenGL docs.
    // Enable Smooth Shading, default not really needed.
    gl.glShadeModel(GL10.GL_SMOOTH);// OpenGL docs.
    // Depth buffer setup.
    gl.glClearDepthf(1.0f);// OpenGL docs.
    // Enables depth testing.
    gl.glEnable(GL10.GL_DEPTH_TEST);// OpenGL docs.
    // The type of depth testing to do.
    gl.glDepthFunc(GL10.GL_LEQUAL);// OpenGL docs.
    // Really nice perspective calculations.
    gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT, // OpenGL docs.
    GL10.GL_NICEST);

  69. Sameer

    29 May 2012 Reply

    Hi,
    GL according to me stands for ” Graphics Library”

  71. bilal

    11 Jun 2012 Reply

    tutorial part two doesn’t work. webpage doesn’t open.

  72. Gajraj

    22 Nov 2012 Reply

    Is it possible to check this code on Android Emulator,Is android emulators supports Opengl , what type of extra effort should i do for that . thankou

  73. Liushuibufu Xiaoxia

    15 Jan 2013 Reply

    Thank you for sharing your document

  75. Anju Dahiya

    1 Feb 2013 Reply

    To the point Example… very easy to understand..

  76. Sumit Sharma

    28 Feb 2013 Reply

    Thanks for the tutorial. Can you please this code works for android 2.3

    1. abhijit

      19 Oct 2013 Reply

      Yeah This code is working on android 2.3 i HAVE TESTED IT ,PLEASE LET US KNOW IF YOU ARE FACING ANY PROBLEM.

  78. Mir Shahriar Sabuj

    14 May 2013 Reply

    I’m an undergraduate student. i am studying opengl for last 2 months. i have to do an academic project on android opengl. i’v 6 months more to do that. Could you please help me giving me some idea which i can choose for project?

  79. SHEKHAR BHALSINGH

    24 May 2013 Reply

    I wish to display 3-D arrows as direction from one location to other in an indoor navigation app.
    Kindly help me out with the same.

    Eagerly waiting for your response.

  80. Matt

    21 Jun 2013 Reply

    This tutorial is great,

    One small thing though,

    I can’t get it to show the code as simple code,
    the html links to the docs are printed out in the middle of it.

  81. Android

    24 Sep 2013 Reply

    I am genuinely thankful to the owner of this site who has shared this wonderful
    post at here.

  82. prezenty

    5 Oct 2013 Reply

    I need to to thank you for this very good read!!
    I definitely loved every bit of it. I have got you saved as a favorite to check out new stuff you post…

  83. Martin

    12 Jan 2014 Reply

    Something is wrong here. I see HTML-Code I should not see.

  84. luck

    8 Feb 2014 Reply

    Hi

    Can you help me to create a dash lines move or translate continuously from one point to other point using open-gl for android, till now i am able to move a single image from one point to another but unable to translate dashed line.

    thanks in advance

  86. Tony

    20 Aug 2014 Reply

    When i run this tutorial program i got some like this error in my phone(Jelly Bean 4.4.2)-> unfortunately program has stopped.

    Any idea what is wrong?

Leave a Reply

Close Menu