OpenGL ES Tutorial for Android – Part V – More on Meshes

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 have a feeling that some of you have tried my tutorials and then thought “This is a 3D tutorial, but why is everything in 2D?”. So in this tutorial we will make some real 3D meshes. This is also necessary for the following tutorials.

When I started I had problems with finding out how to programmatic make different meshes like cubes, cones and so on. I needed this so I easy easy could put my scenes together. So this tutorial will show how to make some of the basic primitives. They might not be the most effective way of creating them but it is a way of doing them.

Starting point will be from the source of the second tutorial. I will show you plane and cube and then give you a couple of hint for additional primitives.

Design

A good place to start when designing an OpenGL framework is to use the composite pattern. This is a start of how I would proceed:

Let’s start making out pattern.

Mesh

It’s a good idea to have a common base for your meshes. So let us start by creating a class called Mesh.

We add the draw function from previous example, since I when over this function in a previous tutorial I just show it here:

We need functions where the subclasses can set the vertices and the indices. These function contains nothing new and are pretty much the same as you seen in earlier tutorials.

We need to add a couple of things. When we start working with multiple meshes we need to be able to move and rotate them individual so let us add translation and rotation parameters:

And use them in the draw function add this lines just before the gl.glDrawElements call.

Plane

Let us start making a plane an quite easy task you might think and it kinda is. But to make it more interesting and more useful we need to be able to create it with some different settings like: width, depth, how many width segments and how many depth segments.

Just so we have the same terminology, width is the length over the x-axis, depth is over the z-axis and height is over the y-axis. Look at the image below as a visual input.

Width, height and depth.

Width, height and depth.

Segments is how many parts the length should be divided by. This is useful if you need to make a surface that is not total even. If you create a plane over x, y and make z not all be 0 say you give z a random span from -0.1 to 0.1 you will get something you could use as a ground plane in a game just put a nice texture on it.

Segments.

Segments.

Looking at the image above you see that the different segments gives you squares. Since we like it to be triangles so just split them up into 2 triangles.

I hate frameworks and classes that don’t have a default setup and easy class constructors I try to always have more then one constructor. The constructors I will put in this plane is:

For an easy and quick setup:

An easy one just to change the size:

And finally one for setting up the plane with different segments:

If I in theory would construct a plane that is 1 unit wide and 1 units high with 4 segments in both width and height direction it would look like this images:

The one to the left shows the segments and the one to the right show us the faces we need to create.

Cube

The next step I think a cube will be nice. I will only make a cube that you can set: height, width and depth on but I suggest you as a practice make it with segments just as we did with the plane.

The constructor will look like this:

And since I’m not doing this with any segments the constructor will be quite easy.

If you like to make it with segments the constructor could look like this:

Since we now have a plane that replaces the Square class ( in the code from tutorial II ) I will just remove it and in OpenGLRenderer change the square to a cube…

… and render it.

Group

A group is really good to have when setting up and controlling your 3D scene. What a group really do is to distribute all commands sent to the group to all it’s children. You can see the implementation of a simple group here:

Make the renderer work with a group as a root node and add your cube to it.

And draw our scene:

Suggestions

It’s always a good idea to have different primitives ready to use when you starting up a new project. My experience tell me that in 9 times of 10 you won’t have any meshes from the graphic people when you start coding so it’s really good to have some meshes to work with as place holders. I’ll give you a hint of the way to start with your own meshes library by giving you an idea of how I would do it.

Creating your own meshes is a really good way of getting to know vertices and indices really close up.

Cone

After you have gotten your cube up and ready to go my suggestion is that you move onto a cone. A cone with the right settings could be more then just a cone. if you give is 3-4 sides it will be a pyramid. If you give it the same base and top radius it becomes a cylinder. So you can see why it is so useful. Take a look at this image and see what the this cone can do.

Pyramid

Cylinder

One more thing

Dividing up surfaces is a good thing to know about and by now you know how to divide up a regular square. To divide up a triangle look at the images below. It is a bit different and it might be a bit harder to implement.

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_V
You can also checkout the code from: code.google.com

Previous tutorial: OpenGL ES Tutorial for Android – Part IV – Adding colors
Next tutorial: OpenGL ES Tutorial for Android – Part VI – Textures

82 Comments

  1. Jason Odom

    Another Great tutorial.. keep them coming

  2. Andy

    Great series! Would love to see a tutorial on loading textures. Keep up the good work!

  3. Per-Erik Bergman

    Next tutorial will be about textures so stay tuned :)

  4. Kernle 32DLL

    Excellent tutorial. I only read this tutorial so far, to verify i did all correctly myself. I wish i had this tutorial when i started :)

  5. mtf

    Fantastic tutorial! Congratulations! I am impacient waiting the next one! When will it be?

  6. Spobo

    you are realy doing a great job :) when will you post the next tutorial?

  7. Vaughan

    Really helpful thanks. Any chance of doing a surface normals / lighting tutorial for the next one?

  8. Imti

    cant wait to get home and try these out

  9. vinpa

    Another nice tutorial.

    Could you possibly explain the math involved here? I am pretty sure I grasped the equations you used to determine vertices and indices, but a brief explanation would be greatly appreciated! : )

    Thanks!

  10. Omega

    As always, complete and 100% applicable. Great tutorials!

    I’d love to see a tutorial from you on ray picking on Android!

  11. Winchester

    Thank you for your tutorial!

    But i got a curious..about Cylinder.
    Because i’d like to make a Cylinder.

    If you gotta some time..
    Could U make a Cylinder part plz~!

    I’m so sorry about question.

  12. Ankita

    Thanks for such a great tutorial!

    Eagerly waiting for the next part on textures!! :)
    Thanks again!

  13. Per-Erik Bergman

    vinpa: I’m not sure what math you need, I try to draw every thing on paper and then recreate it in java.
    Omega: Ray picking will be done, but not now. My plan is to do all the basics first.
    Winchester: I don’t have the time at the moment to write about a cylinder. Basicly you do it just as you would do a plane but with with sin/cos to gain the circle shape.

    And as always I’m happy that you read and like my posts.

  14. canny

    please continue with tutorials . Really they are very much help full. thank u thank u…….. please go ahead dont stop.

  15. Hi,
    First of all really great tutorials.
    I have been trying your suggestion on creating the cone.I could draw tetrahedron with the little geometry but could not imagine the generic equation to decide the vertices.At present I am thinking of

    //for a Cone like figure if number of sides 3 then verices = 4
    //For a Cylinder like figure if number of sides = 3 then vertices = 6
    int noOfVertices = numberOfSides + ((topRadius == 0) ? 1 : numberOfSides);

    for most of the cases it may work but for winding the final figure I could not reach to generic LOOP kind of logic. Could you please suggest.

    Thanking you in advance.
    Keep up the great work.

    Regards,
    Quicols Consultancy Services

  16. Checkus

    Hi,

    Excellent tutorial. I have just one problem :
    When I made more then one cube in one group and when I draw the cube i have a problem with the translation.

    // Code //
    for (int i = 0; i < 3; i++){
    Cube enemy = new Cube(1, 1, 1);
    enemy.x = i + 0.0f;
    EnemyG.add(i, enemy);
    }
    // END CODE //

    As you can see the third cube are too shifted. I have the impression that it takes for reference the last cube.

    Is it normal?

    Thanks!

    (Sorry for my English, I’m french)

  17. NoviceAndroidDev

    Hello, I just would like to know how would one go about making it so the cube rotates only upon a key press on the android. For example, let’s say I want to make the cube rotate to the left only when the left key is pressed down. How would this be done? I can’t seem to figure out a way to implement a listener with the OpenGLRenderer class.

  18. AndroidOpenGLBeginner

    @NoviceAndroidDev you can check out lesson 7 here http://insanitydesign.com/wp/projects/nehe-android-ports/

    Implements Event Listeners for key presses. It should be fairly easy to do.

  19. Ramana

    First of all Excellent tutorials.
    Iam doing an augment reality application on android.I have camera preview on surface view.Now i would like to have a 3d grid on GLSurfaceview which rotates with sensor values and i should be able to overlay some png images on to grid which moves accordingly.How do i acheive this?

  20. Awesome tutorial. Thank you very much.

    Texturing would be great, can’t wait. I would also like to see a tutorial on importing OBJs.

    Congratulations for this great series.

  21. Musa

    Just followed this tutorial but could u please explain the math involved? It would be highly/greatly appreciated if u do.. Thanks and keep up the good work!

  22. lost

    Is it possible to have the correction of this tutorial: the cube with segment, please ?

  23. Nov

    These tutorials are really really good, and are a life saver for people new to not only openGL ES but openGL in general.

    Please keep on writing more tutorials for the betterment of the public!

  24. David

    Thanks for a very good starting tutorial to OpenGL Es, wish there was something like this on the android site.

  25. The cube mesh example has the vertices backwards, so you actually have to set the winding to clock-wise instead of counter-clock wise..unless I’m doing something wrong

  26. Alex

    These are the right indices for counter-clockwise order:

    short indices[] = {
    0, 1, 5,
    0, 5, 4,
    1, 0, 3,
    1, 3, 2,
    1, 2, 6,
    1, 6, 5,
    5, 6, 7,
    5, 7, 4,
    4, 7, 3,
    4, 3, 0,
    6, 2, 3,
    6, 3, 7,
    };

  27. JON

    Thank you. This is a great tutorial. OpenGL has always intimidated me. I could not find any book on OpenGL ES, specially with Android for beginners. Wish you could publish a book (with the same style of writing). I will definitely buy that one.

  28. Musa

    Don’t mean to be a punk, but when’s the next tutorial coming? The last one came out since Feb.?!

  29. Please give us next tutorial :)

  30. First, kudos for putting the tutorials together, I’ve been following them closely.

    Quick question – In the draw() method, why is gl.glDisableClientState(GL10.GL_VERTEX_ARRAY) called, but gl.glDisableClientState(GL10.GL_COLOR_ARRAY) is never called?

  31. Per Sandström

    Hi,

    awesome tutorial! I’m really looking forward to the texture-tutorial! My current application only succeeds with loading textures that are exactly 256*256 pixles for some reason :(

  32. There are very good tutorial :)
    Keep in going !

  33. Hi Bergman,
    This tutorial series is great, it helps me a lot in learning OpenGLES.
    The explanation is clear and the code runs well :) .
    Thanks a lot.

  34. Mustafa

    Thanks alot buddy… Loving your tutorials. Helpful… precise and perfect. Made it so easy for person who has started programming recently.

  35. Vishnu

    Hey,
    Awesome tutorials…Best one for beginners..TRUST ME..
    Thanks man…..

    And uhh…I think it will be a lot more easier if you use GL_TRIANGLE_FAN or GL_TRIANGLE_STRIP to draw circle or square like structures….But be careful while applying colors or textures…

  36. hey
    thanks for the tutorials…
    could you please help me with the following thing?
    actually m done with loading different images on all the faces.
    i need to create a text view or an editable text view on one of the faces of the cube.. M really stuck up with this..Please lend a help..
    Thanks

  37. Espen

    Three words: Write-a-book. I would buy it. I have done lots of OpenGL programming in the past and now I just need a jolt of information for OpenGL ES. Hoping for texturing soon though it seems a long time since the last tutorial…

  38. ommar

    Should we be waiting for 6th. tutorial ?

  39. Cisco

    Is the 6th tutorial coming out?

  40. sreekanth

    really awesome material , please give me an idea regarding drawing arc shape which is badly needed for my project

  41. sreekanth

    please suggest me if there are any tool that convert the “openg gl” code to “opengl es”.Actually i got a code to draw arc in c language but i am unable to convert that code into java(android) .
    really great explanation,
    i am eagerly waiting for your next tutorial
    thanks in advance

  42. PaulC

    I have been reading every site I can find trying to get a proper primer on opengl. For me everything starts at too high a level. Your explanations, examples, diagrams and code examples are everything I have been searching for.

    I can imagine that such good stuff takes a very long time to produce, but please don’t give up, as I for one will vouch for the almost unique usefulness of this series of tutorials.

    As others have said, if you wrote a book along these lines I would buy it.

    Waiting with antisipation for the next tutorial.

    Thank you very much.

  43. Jeffrey Blattman

    awesome tutorial.

    i was trying to make a cube with distinctly colored sides. i tried translating 8 colored squares into the right places. this works, but i wonder if it’s the right approach?

    anyway, if i enable face culling with this approach i get strange results. some sides are hidden when they should not be. i wonder if this is because face culling only works within a given “shape”, and since i have 8 different shapes …

    the other problem is that i see the parts of the back faces drawing through to the front, around the edges of the squares. seems to happen at particular angles only.

  44. Riki

    Hello, just wanted to confirm that these tutorial-series is still going or have you (jayway) discontinued it?

  45. Priyanka

    Thanks for tutorial………….
    really awesome

  46. sujit panda

    great tutorial…thnaks ………

  47. ray

    i just want to add texture to this code but i can’t got it
    this is my code

    float vertices[] = { -width, -height, -depth, // 0
    width, -height, -depth, // 1
    width, height, -depth, // 2
    -width, height, -depth, // 3
    -width, -height, depth, // 4
    width, -height, depth, // 5
    width, height, depth, // 6
    -width, height, depth, // 7
    };

    short indices[] = {
    //FRONT
    4, 5, 6,
    4, 6, 7,
    //BACK
    1, 0, 3,
    1, 3, 2,
    //LEFT
    0, 4, 7,
    0, 7, 3,
    //RIGHT
    5, 1, 2,
    5, 2, 6,
    //TOP
    7, 6, 2,
    7, 2, 3,
    //BOTTOM
    0, 1, 5,
    0, 5, 4,
    };

    and textureindex is

    float textureCoordinates[] = {
    1.0f, 1.0f,
    1.0f, 0.0f,
    0.0f, 1.0f,
    0.0f, 0.0f,

    1.0f, 1.0f,
    1.0f, 0.0f,
    0.0f, 1.0f,
    0.0f, 0.0f,

    1.0f, 1.0f,
    1.0f, 0.0f,
    0.0f, 1.0f,
    0.0f, 0.0f,

    1.0f, 1.0f,
    1.0f, 0.0f,
    0.0f, 1.0f,
    0.0f, 0.0f,

    1.0f, 1.0f,
    1.0f, 0.0f,
    0.0f, 1.0f,
    0.0f, 0.0f,

    1.0f, 1.0f,
    1.0f, 0.0f,
    0.0f, 1.0f,
    0.0f, 0.0f,
    };

    what’s wrong with me?
    thanks

  48. Andranik

    Hi Per-Erik!

    You’re doing a great job in this blog! Simple, clear and professionally!
    I have a one little question…

    In the Plane constructor you create indices in the clockwise order, but render it in counterclockwise as in previous tutorials. I try it and it works only in this combination, if I replace CCW to CW in draw method (gl.glFrontFace(GL10.GL_CCW) -> gl.glFrontFace(GL10.GL_CW)) I’ll get an empty screen.

    Сould you shed some light on this situation?

    Best Regards, Andranik

  49. Andranik

    Sorry,

    I forget to flip Y-coordinate, the order of the indices is correct.

  50. Alberto

    This is better than any book and tutorial I could find out there. I want to thank for you making this great set of intuitive tutorials, every other piece out there just rewrites the openGL ES technical documents again .

  51. Ricardo Paiva

    Hi,
    If you want to draw two planes, when you set plane’s X and Y coordinates, what happens it’s a translation.
    What if I want to reset (LoadIdentity) before drawing a new plane, how can I do it?

    Thanks in advance!

  52. Shakthi

    Hi Per-Erik,
    Thanks a lot for such an excellent Tutorial. I have started programming on OpenGL.

    Can you Please tell me how to Draw a Sphere/Circle instead of a Plane?

    Waiting for your Reply.

  53. Excellent tutorials! Thanks for sharing your knowledge!

    I have one question: what is the idea behind this equation (line code):
    int n = y * (widthSegments + 1) + x;
    ?
    Thanks again! These tutorials have helped me a lot with my new project!

  54. 逍遥十四少

    太棒了,看了你的教程我才知道原来我们中国的那些教程有的是把你的教程翻译过去的,我晕,我还佩服他们呢,原来鼻祖在这啊,小弟佩服……

  55. 逍遥十四少

    suprised!

    it’s 22:00 in my country now,but*****

  56. Excellent!
    Great Tutorial!

  57. Rancs

    I have a question about the triangle creation of this tutorial. Here is the indice array given above:
    short indices[] = { 0, 4, 5,
    0, 5, 1,
    1, 5, 6,
    1, 6, 2,
    2, 6, 7,
    2, 7, 3,
    3, 7, 4,
    3, 4, 0,
    4, 7, 6,
    4, 6, 5,
    3, 0, 1,
    3, 1, 2, };

    Do the first 2 lines of this array create 2 triangles (0-4-5 and 0-5-1) or 3 triangles? (0-4-5, 4-5-0 and 0-5-1)

  58. Anay Tamhankar

    Hello Per-Erik,

    Great set of Tutorials ! Thanks for such excellent resource.

    I was looking at the code for memory allocation of indices array in class Plane:

    short[] indices = new short[(widthSegments + 1) * (heightSegments + 1)
    * 6];

    I think the array is getting over-allocated. The correct allocation should be:

    short indices[] = new short[(widthSegments) * (heightSegments) * 2
    * 3];

    My logic:

    1) It takes 3 values to represent triangle (last multiplication by 3)
    2) The number of triangles in any plane will be (widthSegments * heightSegments * 2).

    For example: if a plane is divided into 3 widthsegments and 2 heightsegments, then number of triangles will be 12 (3 * 2 * 2)

    Please correct if I am wrong.

    Thanks!
    Anay

  59. Thank you so much, now I can make my sprite engine! I’m going to port my games to Android! You have been of a great help! I must say, this is the only useful tutorial I’ve found. This is what the Android community needs, more people like you!
    Sharing knowledge makes us all stronger!

  60. Sam

    Please tell me if there is any way to draw 3D curves… Please reply asap.

    Thanks A Lot

  61. CP Gangstaz

    This tutorial is so dope! I’m telling all my homies about it.

  62. abeeleakey

    很不错啊,里面还穿插有设计模式。厉害!

  63. faraon

    Great tutorial! Unfortunatelly there is no GLUT lib for opengl es. Could you please to write about loading and using 3D models. It should be easier then making e.g. sphere from triangles. Thanks.

  64. sensei

    this tutorial is really great,
    can you tell me how to load bitmap for cube or other 3D object?
    thanks for your help…

  65. nebyan

    this tuorial is really helpful for me
    wait for next tutorial.

    Thanks a lot …

  66. Julia

    Excellent tutorial! It is really helpful for me, as a java beginner. I want to use java to write a java barcode generator, which I saw from “http://www.onbarcode.com/tutorial/java-barcode-generation.html ”. It is easy-use, I want to write one like it.

  67. Alex

    Hi, great work!

    Can you tell me if is possible to use text on OpenGL? Page curl and selectable text?

    To resolve this question:
    http://stackoverflow.com/questions/8675360/page-curl-with-text-on-android

    Thanks

  68. zqWu

    this tutorials is very useful for me. Thanks a lot

  69. Ashish kumar singh

    can any one tell me how to draw the circle in the 3d custom image .

    • Code for sphere

      MakeSphere( 20,20,1,1);

      //for more smoother sphere use stacks =100, slices = 100

      private void MakeSphere(int stacks,int slices, float radius, float squash, String textureFile)
      {
      float[] vertexData;
      float[] colorData; //2
      float colorIncrement=0f;
      float blue=0f;
      float red=1.0f;
      int numVertices=0;
      int vIndex=0; //vertex index
      int cIndex=0; //color index
      m_Scale=radius;
      m_Squash=squash;
      colorIncrement=1.0f/(float)stacks; //3
      {
      m_Stacks = stacks;
      m_Slices = slices;
      //vertices
      vertexData = new float[ 3*((m_Slices*2+2) * m_Stacks)]; //4
      //color data
      colorData = new float[ (4*(m_Slices*2+2) * m_Stacks)]; //5
      int phiIdx, thetaIdx;
      //latitude
      for(phiIdx=0; phiIdx < m_Stacks; phiIdx++) //6
      {
      //starts at -90 degrees (-1.57 radians) goes up to +90 degrees
      (or +1.57 radians)
      //the first circle
      //7
      float phi0 = (float)Math.PI * ((float)(phiIdx+0) *
      (1.0f/(float)(m_Stacks)) – 0.5f);
      //the next, or second one.
      //8
      float phi1 = (float)Math.PI * ((float)(phiIdx+1) *
      (1.0f/(float)(m_Stacks)) – 0.5f);
      float cosPhi0 = (float)Math.cos(phi0); //9
      float sinPhi0 = (float)Math.sin(phi0);
      float cosPhi1 = (float)Math.cos(phi1);
      float sinPhi1 = (float)Math.sin(phi1);
      float cosTheta, sinTheta;
      //longitude
      for(thetaIdx=0; thetaIdx < m_Slices; thetaIdx++) //10
      {
      //increment along the longitude circle each "slice"
      float theta = (float) (-2.0f*(float)Math.PI * ((float)thetaIdx) *
      (1.0/(float)(m_Slices-1)));
      cosTheta = (float)Math.cos(theta);
      sinTheta = (float)Math.sin(theta);
      //we're generating a vertical pair of points, such
      //as the first point of stack 0 and the first point of stack 1
      //above it. This is how TRIANGLE_STRIPS work,
      //taking a set of 4 vertices and essentially drawing two triangles
      //at a time. The first is v0-v1-v2 and the next is v2-v1-v3. Etc.
      //get x-y-z for the first vertex of stack
      vertexData[vIndex+0] = m_Scale*cosPhi0*cosTheta; //11
      vertexData[vIndex+1] = m_Scale*(sinPhi0*m_Squash);
      vertexData[vIndex+2] = m_Scale*(cosPhi0*sinTheta);
      vertexData[vIndex+3] = m_Scale*cosPhi1*cosTheta;
      vertexData[vIndex+4] = m_Scale*(sinPhi1*m_Squash);
      vertexData[vIndex+5] = m_Scale*(cosPhi1*sinTheta);
      colorData[cIndex+0] = (float)red; //12
      colorData[cIndex+1] = (float)0f;
      colorData[cIndex+2] = (float)blue;
      colorData[cIndex+4] = (float)red;
      colorData[cIndex+5] = (float)0f;
      colorData[cIndex+6] = (float)blue;
      colorData[cIndex+3] = (float)1.0;
      colorData[cIndex+7] = (float)1.0;
      cIndex+=2*4; //13
      vIndex+=2*3; //14
      }
      blue+=colorIncrement; //15
      red-=colorIncrement;
      // create a degenerate triangle to connect stacks and maintain winding order
      //16
      vertexData[vIndex+0] = vertexData[vIndex+3] = vertexData[vIndex-3];
      vertexData[vIndex+1] = vertexData[vIndex+4] = vertexData[vIndex-2];
      vertexData[vIndex+2] = vertexData[vIndex+5] = vertexData[vIndex-1];
      }
      }
      m_VertexData = makeFloatBuffer(vertexData); //17
      m_ColorData = makeFloatBuffer(colorData);
      }

  70. Stéphane Péchard

    @Anshul: your code is not really clear, how do you use it with Piotrek’s sample code?

    @Piotrek: would you have the kindness to show us how to draw a sphere with a texture on it? Thanks in advance

  71. Wu

    really good tutorial

  72. Alessandro

    Wow!
    You are a awesome great teacher !
    This is an excelent tutorial about OpenGL ES as well scene graph on O.O.P!

  73. Amalan

    Great Man!!. Thank you for your tutorial!

Trackbacks for this post

  1. RealTime - Questions: "Vector java help please?"
  2. OpenGL ES Tutorial for Android – Part VI – Textures — Jayway Team Blog
  3. 3D model modeling, mapping, animation Research (Done by Lai Chin Wang) « Maternal App
  4. OpenGL ES Tutorial for Android – Part V – More on Meshes | Per-Erik Bergman
  5. OpenGL ES Tutorial for Android – Part VI – Textures – Jayway
  6. How To Enable Opengl On Wow | People Life
  7. How To Draw A Cube In Opengl Es 2.0 | Make Loves

Leave a Reply