Android OpenGL es Drawing tutorial two: defining shapes

<span id="Label3"></p><span style="font-size:14px"><span style="font-size:14px">you can define the shape you want to draw in OpenGL ES view, which is the first step in creating a masterpiece of high-end Graphics. It's a bit tricky to draw without knowing some basics, such as how OpenGL ES defines graphical objects.<br>This tutorial explains the relationship between the OpenGL ES coordinate system and the Android device screen, if you define the underlying shapes, such as triangles and quads.<br>1. Define a triangle<br>OpenGL ES allows you to define a drawing object in a three-dimensional coordinate system, so you must define its coordinates before you draw the Triangle. In opengl, the typical way to define coordinates is to define a floating-point array of vertex coordinates that, in order to maximize efficiency, write these coordinates into a bytebuffer, which will be passed to the graphics pipeline of OpenGL ES for Processing.<br></span></span> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">public class Triangle {<br> <br>     Private Floatbuffer vertexbuffer; <br> <br>    //number of dimensions for each vertex coordinate in an array <br>     static final int coords_per_vertex = 3; <br>     static Float trianglecoords[] = { //counterclockwise direction: <br>              0.0f,  0.622008459f, 0.0f,//top <br>             -0.5f, -0.311004243f, 0.0f,//bottom left<b r>             0.5f, -0.311004243f, 0.0f  //bottom right <br>    }; <br> <br>    //Set color with red, green, blue and Alpha (opacity) values <br>     float color[] = {0.6 3671875f, 0.76953125f, 0.22265625f, 1.0f}; <br> <br>     public Triangle () {<br> </b></span> <b r> </b> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">//initialize vertex buffer for shape coordinates</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">Bytebuffer bb = Bytebuffer.allocatedirect (</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> The length of the <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">//coordinate array * The number of bytes per float</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">trianglecoords.length * 4);</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">//byte order using device hardware</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">Bb.order (byteorder.nativeorder ());</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px"><br></span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">//create A floating point buffer</span> </blockquote> from the Bytebuffer </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">//create a floating-point buffer from the Bytebuffer</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">vertexbuffer = Bb.asfloatbuffer ();</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">//add The coordinates</span> </blockquote> to the Floatbuffer </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">vertexbuffer.put (trianglecoords);</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">//set the buffer to read</span> </blockquote> the first coordinate </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">//set Buffer to point to the first coordinate</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">vertexbuffer.position (0);</span> </blockquote> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">}<br>}</span> </blockquote> </blockquote><span style="font-size:14px"><span style="font-size:14px">by default, OpenGL ES assumes a coordinate system where [0,0,0] (x, y, Z) is located in the center of the Glsurfaceview frame, [1,1,0] (x, y, z) in the upper-right corner of the frame, [ -1,-1,0] in the Lower-left corner of the frame, For a description of the coordinate system, see the OpenGL ES development Wizard.<br></span></span><p><p><span style="font-size:14px">Note that the coordinates of the shape are defined in counter-clockwise order, and the order of the drawing is very important because it determines which side is the front of the shape (front face) and the rear (back face), using OpenGL Es's cull face feature, which should be drawn in front, The back should not be drawn. For more information on face and culling, please see the OpenGL ES development Wizard.</span></p></p><p><p><span style="font-size:14px"><br></span></p></p><span style="font-size:14px"><span style="font-size:14px">2. Define a square<br>Defining a triangle in OpenGL is relatively straightforward, but what if you want to define a complex point shape? Like a square? There are several ways to implement this requirement, but a common way to draw squares is to use two triangles:<br></span></span><span style="font-size:14px"><span style="font-size:14px">    </span></span><span style="font-size:14px"><span style="font-size:14px"> <br> <br>         similarly, You should define vertices in a counterclockwise order for the two triangles that make up the square, and put those values into Bytebuffer. To avoid defining two triangles common coordinates two times, use a drawing list to tell the OpenGL ES pipeline how to draw these vertices, here is the code that defines the Square: <br> </span></span> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">public class Square {<br> <br>     Private Floatbuffer vertexbuffer; <br>     Private Shortbuffer drawlistbuffer; <br> <br>    //number of coordinates per vertex in this array <br>    //dimensions for each vertex coordinate in an array <br>     s tatic Final int coords_per_vertex = 3; <br>     static float squarecoords[] = {<br>             -0.5f,  0.5f, 0.0f, &N Bsp Top left <br>             -0.5f, -0.5f, 0.0f,  //bottom left <br>              0.5f, -0.5f, 0.0f,  //bottom right <br>              0 .5f,  0.5f, 0.0f}; Top right <br> <br>     Private short draworder[] = {0, 1, 2, 0, 2, 3};//order to draw vertices the sequence of drawing vertices <br> <b r>    Public Square () {<br> </b></span> <b r> </b> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">//initialize vertex byte buffer for shape coordinates</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">Bytebuffer bb = Bytebuffer.allocatedirect (</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">//(# of coordinate values * 4 bytes per float)</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">squarecoords.length * 4);</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">Bb.order (byteorder.nativeorder ());</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">vertexbuffer = Bb.asfloatbuffer ();</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">vertexbuffer.put (squarecoords);</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">vertexbuffer.position (0);</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px"><br></span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">//initialize byte buffer for the draw list</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">Bytebuffer DLB = Bytebuffer.allocatedirect (</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">//(# of coordinate values * 2 bytes per short)</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">draworder.length * 2);</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">Dlb.order (byteorder.nativeorder ());</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">Drawlistbuffer = Dlb.asshortbuffer ();</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">drawlistbuffer.put (draworder);</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">drawlistbuffer.position (0);</span> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">    }</span> </blockquote> </blockquote> </blockquote> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <blockquote style="margin:0 0 0 40px; border:none; padding:0px"> <span style="font-size:14px">}</span> </blockquote> </blockquote><span style="font-size:14px"><span style="font-size:14px"><br>This example shows you how to create complex shapes in opengl, usually using a collection of triangles to draw objects, and in the next section you will learn how to draw them on the Screen. </span></span><p><p> Android OpenGL es drawing tutorial two: defining shapes </p> </p></span>