Introduction to OpenGL in Android

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

OpenGL ES

• OpenGL for Embedded Systems (ES)• High performance 2D/3D Graphics for Mobile

Devices• Cross Platform Library• Widely deployed Graphics Library

OpenGL ES 2.0

• Fixed Pipeline replaced by Programmable pipeline

• Provides more control to the programmer

Getting Started – Setting up the View

• Basics– GLSurfaceView• setRenderer()

– GLSurfaceView.Renderer• onSurfaceCreated()• onSurfaceChanged()• onDrawFrame()

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);

}

GLSurfaceView.Rendererpublic 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); } }

Drawing Basic Shapes

Defining Shapes

• Vertex• Edge• Face

• Primitives– GL_POINTS– GL_LINE_STRIP– GL_LINE_LOOP– GL_LINES– GL_TRIANGLES– GL_TRIANGLE_STRIP– GL_TRIANGLE_FAN

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 }

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

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";

Loading the shaderprivate 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; }

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 ProgramGLES20.glAttachShader(shaderProgram, vertexShader); // add the vertex shader to programGLES20.glAttachShader(shaderProgram, fragmentShader); // add the fragment shader to programGLES20.glLinkProgram(shaderProgram); // creates OpenGL program executables // get handle to the vertex shader's vertexPosition memberattributePositionHandle = GLES20.glGetAttribLocation(shaderProgram, "vertexPosition");

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

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

Setting up the projectionprivate 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() methodMatrix.frustumM(projectionMatrix, 0, -ratio, ratio, -1, 1, 3, 7);

//--Matrix.setLookAtM(ViewMatrix, 0, 0, 0, -3, 0f, 0f, 0f, 0f, 1.0f, 0.0f);

Applying the MVP matrixprivate 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");

Applying the MVP matrix (Contd)

// Add program to OpenGL environmentGLES20.glUseProgram(shaderProgram); // Prepare the square dataGLES20.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 squareGLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);

Giving life to the objects(Animation)

// Add program to OpenGL environmentGLES20.glUseProgram(shaderProgram); // Prepare the square dataGLES20.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 squareGLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);

Applying Textures

Loading the textureint[] 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();

Texture coordinates

• UV Coordinates• Mapping the texture coordinates to vertices

Mapping the texture coordinates

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";