Simon iPhone-OpenGL ES tutorial-06

 

OpenGL ES 06-3D coordinates of Objects

So far, we have made a good description of 2D objects. It's time to start creating 3D objects. Although we don't need too many changes, they need more vertices (if you create and use vertex arrays) or more coordinate transformations, if you want to use multiple planes to create a cube.

Maybe I should introduce vertices and wires first, but so far we have introduced some texture ing Rectangles and colored triangles, so we don't have to study those interesting shapes!

In addition, we need to look back at the Coordinate Transformation and introduce more details about the rotation. And I do not need to explain the things for beginners. All this means that I have not written any more tutorials.

First, run the drawview Function
Let's talk about 88 of our difficult code work. It is time to bring the drawview function back to the most basic state.

Make the drawview function as follows:

- (void)drawView { // Our new object definition code goes here  [EAGLContext setCurrentContext:context]; glBindFramebufferOES(GL_FRAMEBUFFER_OES, viewFramebuffer); glViewport(0, 0, backingWidth, backingHeight);glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);glMatrixMode(GL_MODELVIEW); // Our new drawing code goes here  glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer); [context presentRenderbuffer:GL_RENDERBUFFER_OES]; [self checkGLError:NO];}

You should thank me for everything I have done for 3D space, because we don't need to explain or add a lot of new code. You are very familiar with this.

Define a 3D object
We will generate a cube because they are easy to construct, are common 3D images, and look cool 3D Rotation and texture ing. Before we draw a 3D cube, we need to know that the 3D cube is composed of six rectangles we have been using. This is easy, but I will break all your previous definitions. Let's first define the front.

Const glfloat cubevertices [] = {

// Define the front face
-1.0, 1.0, 1.0, // top left
-1.0,-1.0, 1.0, // bottom left
1.0,-1.0, 1.0, // bottom right
1.0, 1.0, 1.0, // top right

The top surface is almost identical to the previous surface. Let's take a look:

// Top face
-1.0, 1.0,-1.0, // top left (at rear)
-1.0, 1.0, 1.0, // bottom left (at front)
1.0, 1.0, 1.0, // bottom right (at front)
1.0, 1.0,-1.0, // top right (at rear)

Note that the direction of the top surface is not the same as that of the front. (The front is counter-clockwise, but the top is not) But I start to draw in the same location? If we rotate the cube 90 degrees along the X axis, then the first point is on the top left, followed by the top right?

Next, follow:

// Rear face
1.0, 1.0,-1.0, // top right (when viewed from front)
1.0,-1.0,-1.0, // bottom right
-1.0,-1.0,-1.0, // bottom left
-1.0, 1.0,-1.0, // top left

Have you noticed the starting point of the vertex? We will complete other aspects in this way.
// Bottom face
-1.0,-1.0, 1.0, // bottom left front
1.0,-1.0, 1.0, // right front
1.0,-1.0,-1.0, // right rear
-1.0,-1.0,-1.0, // left rear

We can see that I use the same method and starting point. Imagine how to rotate these planes in your mind and see how points are arranged.

Finally, we complete the left and right sides:

// Left face
-1.0, 1.0,-1.0, // top left
-1.0, 1.0, 1.0, // top right
-1.0,-1.0, 1.0, // bottom right
-1.0,-1.0,-1.0, // bottom left

// Right face
1.0, 1.0, 1.0, // top left
1.0, 1.0,-1.0, // top right
1.0,-1.0,-1.0, // right
1.0,-1.0, 1.0 // left

Here is the complete definition of the cube:

const GLfloat cubeVertices[] = {  // Define the front face -1.0, 1.0, 1.0, // top left -1.0, -1.0, 1.0, // bottom left 1.0, -1.0, 1.0, // bottom right 1.0, 1.0, 1.0, // top right  // Top face -1.0, 1.0, -1.0, // top left (at rear) -1.0, 1.0, 1.0, // bottom left (at front) 1.0, 1.0, 1.0, // bottom right (at front) 1.0, 1.0, -1.0, // top right (at rear)  // Rear face 1.0, 1.0, -1.0, // top right (when viewed from front) 1.0, -1.0, -1.0, // bottom right -1.0, -1.0, -1.0, // bottom left -1.0, 1.0, -1.0, // top left  // bottom face -1.0, -1.0, 1.0, -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0,  // left face -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, -1.0,  // right face 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0 };

If you have problems with the coordinate system, you 'd better imagine it in your mind. If your thinking is still on the 2D plane, you have to work hard. We have already started 3D.

Place cubevertices into the drawview function and describe "new object definition goes here ".

OK. Now we will start to draw this lollipop (not a translation error ).

Draw cube
The simplest way is to use the code you have previously viewed to draw cubes directly. But now, we need to use some advanced (you understand, it is very simple) Methods to draw 3D objects. However, now, let me introduce how to draw images in 3D.

The code we started does not need to be explained. Add the following code under our comment:
Glloadidentity ();
Gltranslatef (0.0, 0.0,-6.0 );
Glvertexpointer (3, gl_float, 0, cubevertices );
Glenableclientstate (gl_vertex_array );

There is no new code. At the beginning, we reset our matrix, moved our cube to the screen, so that we can see that it tells OpenGL the format of the vertex array to be used and the data storage location.

The following code is almost the same as what you used before:

// Draw the front face in Red
GlColor4f (1.0, 0.0, 0.0, 1.0 );
GlDrawArrays (GL_TRIANGLE_FAN, 0, 4 );

There is no new code here. We tell OpenGL to use red as the painting color and extract the four vertices starting from 0 to draw a rectangle. Now, use the next four vertices in our array to draw the top surface.

// Draw the top face in green
GlColor4f (0.0, 1.0, 0.0, 1.0 );
GlDrawArrays (GL_TRIANGLE_FAN, 4, 4 );

Look at the glDrawArrays () function here. If you still remember what I described to you, I said that the second parameter is the data start offset. Yes, because we are drawing the second surface of the cube, we need to tell OpenGL to offset the four values (cubeVertices [4], 0-3 is the first surface ), then we use the following four vertices to draw. (I have read many 3d books. This is the first time I understand the meaning of the second parameter)

Now, let's draw the following:

// Draw the rear face in Blue
GlColor4f (0.0, 0.0, 1.0, 1.0 );
GlDrawArrays (GL_TRIANGLE_FAN, 8, 4 );

In the same definition, we start to draw from cubeVertices [8]. Use the same method to draw the other three faces:

// Draw the bottom face
GlColor4f (1.0, 1.0, 0.0, 1.0 );
GlDrawArrays (GL_TRIANGLE_FAN, 12, 4 );

// Draw the left face
GlColor4f (0.0, 1.0, 1.0, 1.0 );
GlDrawArrays (GL_TRIANGLE_FAN, 16, 4 );

// Draw the right face
GlColor4f (1.0, 0.0, 1.0, 1.0 );
GlDrawArrays (GL_TRIANGLE_FAN, 20, 4 );

We changed the color of each face and changed the offset value for glDrawArrays.

Now, if you click "Build and Go", you will only get a red rectangle. To see all six faces, let's rotate three axes together.

Add the following code before glLoadIdentity.

Rota + = 0.5;

Our old friend Mr. rota is back. (The author is funny, not very clever ). Now we need other old friends glRotatef (). After the glTranslatef () function, add the following:

GlRotatef (rota, 1.0, 1.0, 1.0 );

Before that, we only need to use glRotatef () to rotate an axis. Now we need to rotate three axes at the same time.

Now, click "Build and Go" to see what you get:


Welcome to you, 3d objects.

How does one map the texture?
I think what we need now is not just a solid color object. Let's use the texture in the previous tutorial to map six faces to make the cube more exciting.

Okay, let's keep the texture Loading Function in our project. We only need to modify our drawView function. Now, I will show you how to perform one-time rapid texture ing.

First, do you still remember this?

Const GLshort squareTextureCoords [] = {
// Front face
0, 1, // top left
0, 0, // bottom left
1, 0, // bottom right
1, 1, // top right

Well, we can easily map textures to a surface. We need to expand it. However, this is easy. Remember how I used the same arrangement on each plane of the cube? (Clockwise normalized vertices) Let's find out why.

When OpenGL draws a texture to a plane of the cube, because the offset (, or 12) is used for each plane, the same offset is used for texture ing. Therefore, we need to repeat the previous four coordinates for five times in order to map the six faces.

const GLshort squareTextureCoords[] = { // Front face 0, 1, // top left 0, 0, // bottom left 1, 0, // bottom right 1, 1, // top right  // Top face 0, 1, // top left 0, 0, // bottom left 1, 0, // bottom right 1, 1, // top right  // Rear face 0, 1, // top left 0, 0, // bottom left 1, 0, // bottom right 1, 1, // top right  // Bottom face 0, 1, // top left 0, 0, // bottom left 1, 0, // bottom right 1, 1, // top right  // Left face 0, 1, // top left 0, 0, // bottom left 1, 0, // bottom right 1, 1, // top right  // Right face 0, 1, // top left 0, 0, // bottom left 1, 0, // bottom right 1, 1, // top right };

Data cutting and pasting are complete!

Now, we only need to use a few lines of code to map our cubes.

Add the following code before drawing the first plane:

GlTexCoordPointer (2, GL_SHORT, 0, squareTextureCoords );
GlEnableClientState (GL_TEXTURE_COORD_ARRAY );

This is very simple. Do not delete the color Processing Section. Check the new generation result;

Hey, it's like magic. A texture-mapped 3d object rotates in a 3d space.

A concept in texture ing images
In the previous tutorial, I forgot to explain this concept. Although I suggest you use your own texture for texture ing, the texture size must be a power of 2. The width and height of the image must be 1, 2, 4,... 32,... 512,102 4. The width and height can also be different, but must be a power of 2. So 32x512 is the correct size like 64x64. 30x30 is not.

GlRotatef () and a concept of your object Vertex

Similarly, I encourage you to create your own objects. Have you noticed that I keep using 0, 0 and 0 as the center of my triangle, rectangle and cube? This is because when we rotate, OpenGL will take 0, 0, 0 as the center of the model matrix. It does not adjust its model to 0, 0, 0 in rotation. If your object is not created in the center of 0, 0, 0, you will know what it is called "lop-sided" when you rotate it ".

Original article address:
Http://web.me.com/smaurice/AppleCoder/iPhone_OpenGL/Entries/2009/4/1_OpenGL_ES_06_-_Objects_in_3D.html