OpenGL ES App 1 – Triangles and Transformation

1. OpenGL ES App 1 – Triangles and Transformation

2. Goal 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. Initialize and specify the view GLSurfaceView manages OpenGL surfaces for us and draws it into the Android view system.  Call constructor. • onCreate: each time you run the program, this function must execute first /** Hold a reference to our GLSurfaceView */ private GLSurfaceViewmGLSurfaceView; mGLSurfaceView = new GLSurfaceView(this);

4. Initialize and specify the view After the above code, the OpenGL ES configuration information is in configurationInfo.reqGlEsVersion • Check if system supports OpenGL ES 2.0 final ActivityManageractivityManager = (ActivityManager)getSystemService(Context.ACTIVITY_SERVICE); final ConfigurationInfoconfigurationInfo = activityManager.getDeviceConfigurationInfo();

5. Initialize and specify the view 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 !!! Check if system supports OpenGL ES 2.0 final boolean supportsEs2 = true; //configurationInfo.reqGlEsVersion >= 0x20000;

6. Initialize and specify the view • 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. Initialize and specify the view • 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. OpenGL ES Activity Life Cycle Activity starts onCreate() Use navigates back to the Activity onStart() onRestart() onResume() Activity Is running Process is killed Activity comes to the foreground New Activity is started Activity comes to the foreground Other applications need memory onPause() Activity is invisible onStop() onDestroy() Shut down Activity

9. The Renderer In OpenGL ES 2.0, the vertices become a data that store in the buffer first, so declare the buffers for the triangles. • 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;

10. The Renderer Initialize the position and color of the vertices • 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};

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

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

13. The Renderer View frustum eye • 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)

14. Model Matrix

15. Model Matrix 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. Set Model Matrix in OpenGL ES Initialize the model matrix Perform simple translation Perform simple rotation • 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 timefloat angleInDegrees = (360.0f / 10000.0f) * ((int) time);//varies based on time

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

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

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

20. Set View Matrix in OpenGL ES eyeX, eyeY, eyeZ: eye positionlookX, lookY, lookZ: look vectorupX, upY, upZ: up vector

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

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

23. Projection Matrix • 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. The shaders • In openGL ES 2.0, you can define your own vertex shaderand 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. The shaders • Shader coding process in OpenGL ES • Edit the shaders • Load the shaders • Link the shaders into a program

26. Simple vertex shader The combined model/view/projection matrix. The final color that will be passed to fragment shader. Pass the color. Shaderwill help us do triangle interpolation. Multiply the vertex by the matrix to get the final point(gl_Position). 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";

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

28. Shaders • Load the shaders intvertexShaderHandle = 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. Shaders • 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. Shaders • 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. Shaders • Link the shaders into a program intprogramHandle= 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. Shaders • 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. Display triangle(s) • 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 shaderusing GLES20.glUniformMatrix4fv(). • Converts the points into a triangle and draws it on the screen usingGLES20.glDrawArrays().

34. Display triangle(s) Can you draw a program to display more triangles?

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