Android OpenGLES2.0 isosceles right-angled triangle and colored triangles (iii) _android

We've mapped out a right-angled triangle in the last blog post, although we are relative to the coordinates, we set the right triangle of the two waist is equal, but the actual display is not so, although by calculation, we can calculate the two waist of the triangle, so that they are in the coordinates of the scale, but the reality comes out equal , but when the graphics are more complicated, the workload is too big for us. So how do we do it? The answer is to use the transform matrix to give the computation to OpenGL.

Matrix

In mathematics, a matrix is a set of complex numbers or real numbers arranged according to a rectangular array, which comes first from a matrix of coefficients and constants of a set of equations. This concept was first proposed by the British mathematician Kelly in 19th century.
Matrices are often used in many fields such as image processing, game development, geometrical optics, linear combination of quantum states, and electronics. We are now equivalent to using matrices in the domain of image processing or game development. In the University of higher education, there are learning to matrix, many people in the university to study high numbers, linear algebra and other courses, always feel that learning these things are useless (I also). In fact, these are important for programmers, especially programmers who need to do game development and video processing. I'm getting off the wrong side.
In the three-dimensional graphics, the general use of the 4-order matrix. In DirectX, a row vector, such as [XYZW], is used, so when multiplying with a matrix, the vector is behind the front matrix. OpenGL uses a column vector, such as [xyzx]t, so when multiplying with matrices, the matrix is in front and the vector is behind. On the specific knowledge of the matrix, the blog does not explain in detail, need to understand the students can be consulted.
If you want to write the transformation of the matrix, and then to the matrix to OpenGL processing, but also a more troublesome thing, then how to do? The camera and projection are needed to generate the required matrix.

Camera and projection

Camera

According to the real Life experience we guide, to a scene, with the camera position, the different posture, shooting out the picture is not the same. The camera corresponds to the world of OpenGL, determining the results of the camera (i.e. the final display on the screen), including the camera position, camera direction, and the camera's up direction.

• camera Position: The camera position is better understood, is the camera in 3D space in the coordinate points.
• camera Observation Direction: the camera's direction of observation, indicating the camera lens orientation, you can shoot forward, facing back, you can also face to the left, or other direction.
• camera up direction: the camera's up direction, which can be understood as the direction of the camera's top point. For example, you take the camera slanting, take out the picture is oblique, you take it upside down, clap out is upside down.
  

In the Android Opengles program, we can set up the camera in the following ways:

MATRIX.SETLOOKATM (float[] rm,  //Receive camera transform matrix
    int Rmoffset,  //transform matrix starting position (offset)
    float eyex,float Eyey, Float Eyez,//Camera position
    float centerx,float centery,float Centerz,//observation point position
    float upx,float upy,float upz)// The component of the up vector on XYZ

Projection

The 3D world that you see with your camera will eventually need to be presented to a 2D plane, which is the projection. In Android OpenGLES2.0 (i)--understand OpenGLES2.0 also mentions about projections. In the world of Android Opengles, there are two kinds of projections, one is orthographic projection, the other is perspective projection.

With orthogonal projection, the size of the object does not change with the distance from the viewpoint. In the Android Opengles program, we can set orthographic projections using the following methods:

Matrix.orthom (float[] m,   //Receive the transformation matrix int moffset of orthogonal projection
    ,  ///transformation matrix starting position (offset)
    float left,   // Relative to the observation point near the left margin
    float  right,///relative observation point near the right-hand margin
    float bottom,  //Relative observation point near the bottom margin
    float top,   // Relative observation point near the top margin float near///   relative observation point near-surface distance
    float far   //relative observation point far-surface distance

With perspective projection, the farther away the object is from the viewpoint, the smaller it appears. The closer you get to the point of view, the bigger it appears. In the Android Opengles program, we can set perspective projections by using the following methods:

Matrix.frustumm (float[] m,   //Receive Pivot projection transformation Matrix
    int Moffset,  //transformation matrix starting position (offset)
    float left,   // Relative to the observation point near the left margin
    float  right,///relative observation point near the right-hand margin
    float bottom,  //Relative observation point near the bottom margin
    float top,   // Relative observation point near the top margin float near///   relative observation point near-surface distance
    float far   //relative observation point far-surface distance

Using transformation matrices

Actually the camera settings and projection settings are not really set, instead, by setting the parameters, we get a transformation matrix using the camera's vertex coordinates, and the vertex coordinate transformation matrix under projection, we also need to pass the matrix to the vertex shader and multiply the vector of the coordinates in the vertex shader with the passed-in matrix. Get the actual display of the coordinate vector. Note that the matrix multiplied by the coordinate vector, not the coordinate vector multiplied by the matrix, the matrix multiplication is not satisfied with the Exchange law.
And through the above camera settings and projection settings, we get two matrices, for convenience, we need to multiply the camera matrix and projection matrix, get a real transformation matrix, and then to the vertex shader. Matrix multiplication:

MATRIX.MULTIPLYMM (float[] result,//Receive multiplication results
    int resultoffset,///Receive matrix starting position (offset)
    float[] LHS,  //left matrix
    int Lhsoffset,  //left starting position (offset)
    float[] RHS,  //Right matrix
    int rhsoffset)  //Right matrix starting position (offset)

Realization of isosceles right-angled triangle

On the basis of the previous blog, we need to do the following steps to draw a isosceles right-angled triangle:

1. Modify the vertex shader to increase the matrix transformation:

Attribute Vec4 vposition;
Uniform mat4 Vmatrix;
void Main () {
 gl_position = vmatrix*vposition;
}

2. Set up the camera and projection, get the camera matrix and projection matrix, and then multiply the camera matrix with the projection matrix to get the actual transformation matrix:

@Override public
void onsurfacechanged (GL10 gl, int width, int height) {
 //compute aspect ratio
 float ratio= (float) width/ Height;
 Set Perspective projection
 Matrix.frustumm (mprojectmatrix, 0,-ratio, ratio,-1, 1, 3, 7);
 Set camera position
 MATRIX.SETLOOKATM (mviewmatrix, 0, 0, 0, 7.0f, 0f, 0f, 0f, 0f, 1.0f, 0.0f);
 Compute transformation Matrix
 matrix.multiplymm (mmvpmatrix,0,mprojectmatrix,0,mviewmatrix,0);
}

3. Pass transformation matrix to vertex shader:

@Override public
void Ondrawframe (GL10 gl) {
 //Add the program to the OPENGLES2.0 environment
 Gles20.gluseprogram (mprogram);
 Gets the transformation matrix Vmatrix member handle
 mmatrixhandler= gles20.glgetuniformlocation (Mprogram, "Vmatrix");
 Specifies the value of the Vmatrix
 GLES20.GLUNIFORMMATRIX4FV (mmatrixhandler,1,false,mmvpmatrix,0);
 Gets the vposition member handle of the vertex shader
 mpositionhandle = gles20.glgetattriblocation (Mprogram, "vposition");
 Handles
 Gles20.glenablevertexattribarray (mpositionhandle) with triangle vertices enabled;
 Prepare triangular coordinate data
 gles20.glvertexattribpointer (Mpositionhandle, Coords_per_vertex,
   gles20.gl_float, False,
   vertexstride, vertexbuffer);
 Gets the handle of the Vcolor member of the chip shader
 mcolorhandle = gles20.glgetuniformlocation (Mprogram, "Vcolor");
 Sets the color for drawing triangles
 GLES20.GLUNIFORM4FV (mcolorhandle, 1, color, 0);
 Draw triangular
 gles20.gldrawarrays (gles20.gl_triangles, 0, vertexcount);
 Prevents handle
 Gles20.gldisablevertexattribarray (mpositionhandle) of vertex arrays;
}

Run to get a isosceles right-angled triangle:

Colored triangles

The old display of a white triangle is too monotonous, we need to make this triangle into color. What should I do?
Android OpenGLES2.0 (i)-understand that OpenGLES2.0 also mentioned that vertex shaders are determined vertex positions, executed once for each vertex. The slice-element shader is for the slice element color, and is executed once for each slice element. And in our chip shader, we are directly to the slice element color assignment, external we also only passed a color value, to make the triangle rendering color, we need to assign different color in different slice. To deal with the simplicity, we modified the vertex shader in the example of the last isosceles to keep the slice shader unchanged and achieve the purpose of making the triangle appear in color:

Attribute Vec4 vposition;
Uniform mat4 Vmatrix;
Varying VEC4 vcolor;
Attribute Vec4 Acolor;
void Main () {
 gl_position = vmatrix*vposition;
 Vcolor=acolor;
}

We can see that we have added a acolor (vertex color) as input, passed to the Vcolor. There is a varying in front of the vcolor. Like attribute, uniform, varying are in the shader language of OpenGL to express qualifiers, attribute is generally used for each vertex is different quantity. Uniform is generally used for the same amount of vertices in 3D objects that comprise the same set of vertices. Varying is typically used to pass a vertex shader to the amount of the slice shader. There is also a const that represents a constant. About the shader language, which will be described separately in subsequent blogs.
Then we need to pass in three different vertex colors to the vertex shader:

Set color
float color[] = {
  0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 1.0f
};
   bytebuffer dd = bytebuffer.allocatedirect (
    color.length * 4);
Dd.order (Byteorder.nativeorder ());
Floatbuffer Colorbuffer = Dd.asfloatbuffer ();
Colorbuffer.put (color);
Colorbuffer.position (0);
Gets the handle of the Vcolor member of the chip shader
mcolorhandle = gles20.glgetattriblocation (Mprogram, "Acolor");
Sets the color
Gles20.glenablevertexattribarray (mcolorhandle) for drawing triangles;
Gles20.glvertexattribpointer (mcolorhandle,4,
  gles20.gl_float,false,
  0,colorbuffer);

Run to get a colored isosceles:

Source

All the code is in one project, hosted on the GitHub--android Opengles 2.0 Series Blog Demo

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.