1. Introduction to OpenGL in
Android

2. Agenda
• OpenGL ES 2.0 – Brief Introduction
• Getting started – Setting up the View
• Drawing basic Shapes
• Filling the shape with colors
• Giving Life to Objects (Animation)
• Applying texture to the shape

3. OpenGL ES
• OpenGL for Embedded Systems (ES)
• High performance 2D/3D Graphics for Mobile
Devices
• Cross Platform Library
• Widely deployed Graphics Library

4. OpenGL ES 2.0
• Fixed Pipeline replaced by Programmable
pipeline
• Provides more control to the programmer

5. Getting Started – Setting up the View
• Basics
– GLSurfaceView
• setRenderer()
– GLSurfaceView.Renderer
• onSurfaceCreated()
• onSurfaceChanged()
• onDrawFrame()

6. GLSurfaceView
/* add the following code snippet to add the OpenGL View to the layout*/
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Create a GLSurfaceView instance and set it
// as the ContentView for this Activity
GLSurfaceView view = new GLSurfaceView(this);
view.setRenderer(new ES2Renderer());
setContentView(view);
}

7. GLSurfaceView.Renderer
public class ES2Renderer implements GLSurfaceView.Renderer {
public void onSurfaceCreated(GL10 unused, EGLConfig config) {
// Set the background frame color
GLES20.glClearColor(0.5f, 0.5f, 0.5f, 1.0f);
}
public void onDrawFrame(GL10 unused) {
// Redraw background color
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);
}
public void onSurfaceChanged(GL10 unused, int width, int height) {
GLES20.glViewport(0, 0, width, height);
}
}

8. Drawing Basic Shapes

9. Defining Shapes
• Vertex
• Edge
• Face
• Primitives
– GL_POINTS
– GL_LINE_STRIP
– GL_LINE_LOOP
– GL_LINES
– GL_TRIANGLES
– GL_TRIANGLE_STRIP
– GL_TRIANGLE_FAN

10. Defining the Shapes (Contd)
private void initShapes(){
float squareCoords[] = {
// X, Y, Z
-1.0f, -1.0f, 0.0f, // Bottom Left
1.0f, -1.0f, 0.0f, // Bottom Right
1.0f, 1.0f, 0.0f, // Top Right
-1.0f, 1.0f, 0.0f, // Top Left
};
// initialize vertex Buffer for square
ByteBuffer vbb = ByteBuffer.allocateDirect(
// (# of coordinate values * 4 bytes per float)
squareCoords.length * 4);
vbb.order(ByteOrder.nativeOrder());// use the device hardware's native byte order
squareVB = vbb.asFloatBuffer(); // create a floating point buffer from the ByteBuffer
squareVB.put(squareCoords); // add the coordinates to the FloatBuffer
squareVB.position(0); // set the buffer to read the first coordinate
}

11. Shader Programs
• Vertex Shader
• Fragment Shader
• Loading the shader objects
• Attaching the Shader objects to Shader
program
• Linking the program to create executable
shader program

12. Shader Programs (Contd)
private final String vertexShaderCode =
"attribute vec4 vertexPosition; n" +
"void main(){ n" +
" gl_Position = vertexPosition; n" +
"} n";
private final String fragmentShaderCode =
"precision mediump float; n" +
"void main(){ n" +
" gl_FragColor = vec4 (0.5, 0.5, 0. 5, 1.0); n" +
"} n";

13. Loading the shader
private int loadShader(int type, String shaderCode){
// create a vertex shader type (GLES20.GL_VERTEX_SHADER)
// or a fragment shader type (GLES20.GL_FRAGMENT_SHADER)
int shader = GLES20.glCreateShader(type);
// add the source code to the shader and compile it
GLES20.glShaderSource(shader, shaderCode);
GLES20.glCompileShader(shader);
return shader;
}

14. Compiling and Linking the Shader
programs
private int shaderProgram;
private int attributePositionHandle;
int vertexShader = loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode);
int fragmentShader = loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentShaderCode);
shaderProgram = GLES20.glCreateProgram(); // create empty OpenGL Program
GLES20.glAttachShader(shaderProgram, vertexShader); // add the vertex shader to program
GLES20.glAttachShader(shaderProgram, fragmentShader); // add the fragment shader to program
GLES20.glLinkProgram(shaderProgram); // creates OpenGL program executables
// get handle to the vertex shader's vertexPosition member
attributePositionHandle = GLES20.glGetAttribLocation(shaderProgram, "vertexPosition");

15. Drawing the Vertices
// Add program to OpenGL environment
GLES20.glUseProgram(shaderProgram);
// Prepare the square data
GLES20.glVertexAttribPointer(attributePositionHandle, 3, GLES20.GL_FLOAT, false, 12, squareVB);
GLES20.glEnableVertexAttribArray(attributePositionHandle);
// Draw the square
GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);

16. Making the square look like square on
screen
(Setting up the projection)

17. Setting up the projection
private int MVPMatrixHandle;
private float[] MVPMatrix = new float[16];
private float[] modelMatrix = new float[16];
private float[] viewMatrix = new float[16];
private float[] projectionMatrix = new float[16];
//--
GLES20.glViewport(0, 0, width, height);
float ratio = (float) width / height;
// this projection matrix is applied to object coodinates
// in the onDrawFrame() method
Matrix.frustumM(projectionMatrix, 0, -ratio, ratio, -1, 1, 3, 7);
//--
Matrix.setLookAtM(ViewMatrix, 0, 0, 0, -3, 0f, 0f, 0f, 0f, 1.0f, 0.0f);

18. Applying the MVP matrix
private final String vertexShaderCode =
// This matrix member variable provides a hook to manipulate
// the coordinates of the objects that use this vertex shader
"uniform mat4 MVPMatrix; n" +
"attribute vec4 vertexPosition; n" +
"void main(){ n" +
// the matrix must be included as a modifier of gl_Position
" gl_Position = MVPMatrix * vertexPosition; n" +
"} n";
//--
MVPMatrixHandle = GLES20.glGetUniformLocation(shaderProgram, "MVPMatrix");

19. Applying the MVP matrix (Contd)
// Add program to OpenGL environment
GLES20.glUseProgram(shaderProgram);
// Prepare the square data
GLES20.glVertexAttribPointer(attributePositionHandle, 3, GLES20.GL_FLOAT, false,
12, squareVB);
GLES20.glEnableVertexAttribArray(attributePositionHandle);
Matrix.multiplyMM(MVPMatrix, 0, projectionMatrix, 0, viewMatrix, 0);
GLES20.glUniformMatrix4fv(MVPMatrixHandle, 1, false, MVPMatrix, 0);
// Draw the square
GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);

20. Giving life to the objects
(Animation)

21. // Add program to OpenGL environment
GLES20.glUseProgram(shaderProgram);
// Prepare the square data
GLES20.glVertexAttribPointer(attributePositionHandle, 3, GLES20.GL_FLOAT, false, 12, squareVB);
GLES20.glEnableVertexAttribArray(attributePositionHandle);
long time = SystemClock.uptimeMillis() % 4000L;
float angle = 0.090f * ((int) time);
Matrix.setRotateM(modelMatrix, 0, angle, 0, 0, 1.0f);
Matrix.multiplyMM(MVPMatrix, 0, viewMatrix, 0, modelMatrix, 0);
Matrix.multiplyMM(MVPMatrix, 0, projectionMatrix, 0, viewMatrix, 0);
GLES20.glUniformMatrix4fv(MVPMatrixHandle, 1, false, MVPMatrix, 0);
// Draw the square
GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);

22. Applying Textures

23. Loading the texture
int[] textures = new int[1];
GLES20.glGenTextures(1, textures, 0);
mTextureID = textures[0];
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTextureID);
GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST);
GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_REPEAT);
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_REPEAT);
InputStream is = mContext.getResources() .openRawResource(R.raw.robot);
Bitmap bitmap;
try {
bitmap = BitmapFactory.decodeStream(is);
} finally {
try {
is.close();
} catch(IOException e) {
// Ignore.
}
}
GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);
bitmap.recycle();

24. Texture coordinates
• UV Coordinates
• Mapping the texture coordinates to vertices

25. Mapping the texture coordinates

26. private final String vertexShaderCode =
"uniform mat4 MVPMatrix; n" +
"attribute vec4 vertexPosition; n" +
"attribute vec2 attributeTextureCoordinate;n" +
"varying vec2 varyingTextureCoordinate;n" +
"void main(){ n" +
" gl_Position = MVPMatrix * vertexPosition; n" +
" varyingTextureCoord inate= attributeTextureCoordinate;n" +
"} n";
private final String fragmentShaderCode =
"precision mediump float;n" +
"varying vec2 varyingTextureCoordinate;n" +
"uniform sampler2D sTexture;n" +
"void main() {n" +
" gl_FragColor = texture2D(sTexture, varyingTextureCoordinate);n" +
"}n";