2.  Learn some important functions and process in OpenGL ES  Draw some triangles on the screen  Do some transformation on each triangle in each frame so that the triangles will MOVE!!

3.  onCreate: each time you run the program, this function must execute first /** Hold a reference to our GLSurfaceView */ private GLSurfaceView mGLSurfaceView; mGLSurfaceView = new GLSurfaceView(this); GLSurfaceView manages OpenGL surfaces for us and draws it into the Android view system. Call constructor.

4.  Check if system supports OpenGL ES 2.0 final ActivityManager activityManager = (ActivityManager)getSystemService(Context.ACTIVI TY_SERVICE); final ConfigurationInfo configurationInfo = activityManager.getDeviceConfigurationInfo(); After the above code, the OpenGL ES configuration information is in configurationInfo.reqGlEsVersion

5.  Check if system supports OpenGL ES 2.0 final boolean supportsEs2 = true; //configurationInfo.reqGlEsVersion >= 0x20000; If you want to run the code in Android Emulator, you must let the code like above ( that is, let the check passes ), or the emulation would fails !!!

6.  If it supports, set the context and the renderer. if (supportsEs2) { // Request an OpenGL ES 2.0 compatible context. mGLSurfaceView.setEGLContextClientVersion(2); // Set the renderer mGLSurfaceView.setRenderer(new LessonOneRenderer()); }

7.  Some activity functions that can be defined protected void onResume() //resume the saved data protected void onPause() //execute in idle mode, it will save the data

8. Activity starts onCreate() onStart() onResume() Activity Is running onRestart() onStop() Activity comes to the foreground Activity comes to the foreground Use navigates back to the Activity Other applications need memory Shut down Activity onPause() Activity is invisible New Activity is started Process is killed onDestroy()

9.  Let’s start with triangles. /** Store our model data in a float buffer. */ private final FloatBuffer mTriangle1Vertices; private final FloatBuffer mTriangle2Vertices; private final FloatBuffer mTriangle3Vertices; In OpenGL ES 2.0, the vertices become a data that store in the buffer first, so declare the buffers for the triangles.

10.  In constructor MyLessonOneRender() final float[] triangle1VerticesData = { // X, Y, Z, // R, G, B, A -0.5f, -0.25f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.5f, -0.25f, 0.0f, 0.0f, 0.0f, 1.0f, 1.0f, 0.0f, 0.559016994f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f}; Initialize the position and color of the vertices

11. Geometry Position / vertex normals / vertex colors / texture coordinates Topology Primitive Lines / triangles / surfaces / … Geometry Data

12.  In constructor MyLessonOneRender() mTriangle1Vertices = ByteBuffer.allocateDirect(triangle1VerticesData.length * mBytesPerFloat).order(ByteOrder.nativeOrder()).asFloatBuffer(); mTriangle1Vertices.put(triangle1VerticesData).position(0); We need to copy the data in another buffer which will be passed to OpenGL ES API. We must convert our data into a FloatBuffer so that we can use it to hold floating-point data.

13.  Second, the matrices for projecting the objects onto the view space. Three Matrices  Model Matrix M  View Matrix V  Projection Matrix P Putting them together: P V M (model vertices) eye View frustum

15.  The object has its orientation. When you put the object in the scene.  Model Matrix represents the transformation from object space to world space.

16.  Can use the Matrix helper class to help us  Matrix.setIdentityM(mModelMatrix, 0);  Matrix.translateM(mModelMatrix, 0, 1.0f, 0.0f, 0.0f);  Matrix.rotateM(mModelMatrix, 0, angleInDegrees, 0.0f, 0.0f, 1.0f); long time = SystemClock.uptimeMillis() % 10000L; //system time float angleInDegrees = (360.0f / 10000.0f) * ((int) time); //varies based on time Initialize the model matrix Perform simple rotation Perform simple translation

17. Object Space X Z World Space Z X Camera X Z X Z Z X X Z X Z View Space Apply model matrix Apply view matrix

18.  The camera also has its space  The view matrix represent the transforms from world space to camera space.

19. private float[] mViewMatrix = new float[16]; public void onSurfaceCreated(GL10 glUnused, EGLConfig config){ … Matrix.setLookAtM(mViewMatrix, 0, eyeX, eyeY, eyeZ, lookX, lookY, lookZ, upX, upY, upZ);

20. eyeX, eyeY, eyeZ: eye position lookX, lookY, lookZ: look vector upX, upY, upZ: up vector

21. X Z X Z View Space X Z X Z Projection Space Far clipping plane Near clipping plane Z-axis direction: camera view direction

22. 22 Camera 3D Models Lights Projection Plane Board A 3D Scene Projection Matrix The projection matrix specifies near and far view distance, angle of the view of the camera and the screen resolution proportion.

23.  Set Projection Matrix in OpenGL ES Matrix.frustumM(mProjectionMatrix, 0, left, right, bottom, top, near, far);  Combine the above matrix together private float[] mMVPMatrix = new float[16]; //MVPMatrix = Model * View * Projection //( “*” means matrix multiplication)

24.  In openGL ES 2.0, you can define your own vertex shader and fragment shader!!!  Vertex Shader Modify/create/ignore attributes of vertex, such as position, color, normal, texture coordinates  Fragment(Pixel) Shader Per-pixel lighting, allowing complex shading equation to be evaluated per pixel.

25.  Shader coding process in OpenGL ES Edit the shaders Load the shaders Link the shaders into a program

26. final String vertexShader = "uniform mat4 u_MVPMatrix; \n“ + "attribute vec4 a_Position; \n“ + "attribute vec4 a_Color; \n“ + "varying vec4 v_Color; \n" + "void main() \n" + "{ \n" + " v_Color = a_Color; \n“ + " gl_Position = u_MVPMatrix \n" + " * a_Position; \n" + "} \n"; The combined model/view/projection matrix. The final color that will be passed to fragment shader. Pass the color. Shader will help us do triangle interpolation. Multiply the vertex by the matrix to get the final point(gl_Position).

27. final String fragmentShader = "precision mediump float; \n“ + "varying vec4 v_Color; \n" + "void main() \n“ + "{ \n" + " gl_FragColor = v_Color; \n“ + "} \n"; Pass the color through the pipeline.

28.  Load the shaders int vertexShaderHandle = GLES20.glCreateShader(GLES20.GL_VERTEX_SHADER); // Pass in the shader source. GLES20.glShaderSource(vertexShaderHandle, vertexShader); // Compile the shader. GLES20.glCompileShader(vertexShaderHandle); // Get the compilation status. final int[] compileStatus = new int[1]; GLES20.glGetShaderiv(vertexShaderHandle, GLES20.GL_COMPILE_STATUS, compileStatus, 0);

29.  Load the shaders // If the compilation failed, delete the shader. if (compileStatus[0] == 0) { GLES20.glDeleteShader(vertexShaderHandle); vertexShaderHandle = 0; }  Similarly, we can load the fragment shaders.

30.  Link the shaders into a program Before we can use our vertex and fragment shader, we need to bind them together into a program. The process of link the shaders  Create a new program object  If that succeeded, we then attach our shaders  Bind the attributes in the shader code  Link the program

31.  Link the shaders into a program int programHandle = GLES20.glCreateProgram(); // Bind the vertex shader to the program. GLES20.glAttachShader(programHandle, vertexShaderHandle); // Bind the fragment shader to the program. GLES20.glAttachShader(programHandle, fragmentShaderHandle); // Bind attributes GLES20.glBindAttribLocation(programHandle, 0, "a_Position"); GLES20.glBindAttribLocation(programHandle, 1, "a_Color"); // Link the two shaders together into a program. GLES20.glLinkProgram(programHandle);

32.  After linking, we can… Pass data into the program mMVPMatrixHandle = GLES20.glGetUniformLocation(programHandle, "u_MVPMatrix"); mPositionHandle = GLES20.glGetAttribLocation(programHandle, "a_Position"); mColorHandle = GLES20.glGetAttribLocation(programHandle, "a_Color"); Tell OpenGL to use this program for rendering. GLES20.glUseProgram(programHandle);

33.  In the example, we define drawTriangle function to handle the drawing part.  The process of drawTriangle Pass in the position information Pass in the color information Pass in the final matrix to the vertex shader using GLES20.glUniformMatrix4fv(). Converts the points into a triangle and draws it on the screen using GLES20.glDrawArrays().

34.  Can you draw a program to display more triangles?

35.  Learn OpenGL ES http://www.learnopengles.com/ http://www.learnopengles.com/  OpenGL Transformation http://www.songho.ca/opengl/gl_transfo rm.html http://www.songho.ca/opengl/gl_transfo rm.html  World, View and Projection Matrix Unveiled http://robertokoci.com/world- view-projection-matrix-unveiled/http://robertokoci.com/world- view-projection-matrix-unveiled/