Introduction To OpenGL in Android

Tamillharasan Chandran&

Krishnaprasad

Concepts

Code! 

Basic Shapes

Animation

Concepts

GPUCross-Platform

Concepts

    OpenGL

OpenGL ES

OpenGL ES

Not just Android!

Concepts

Vector Graphics

Raster Graphics

Lines points, lines, polygons, Surface normals etc ..

Grid of pixels

OpenGL Rendering Pipeline Simplified

One more thing!

State Machine

Code!

Make sure to add this!

Two Steps

GLSurfaceViewGLSurfaceView.Renderer

GLSurfaceView

What is it?

Why is it needed?

GLSurfaceView    

    GLSurfaceView view = new GLSurfaceView(this);

    view.setEGLContextClientVersion(2);

    view.setRenderer(new SquareRenderer());

GLSurfaceView.Renderer

What is it?

Why is it needed?

• Create a Subclass of GLSurfaceView.Renderer 

• Setup the view port

GLSurfaceView.Renderer

public class SquareRenderer implements GLSurfaceView.Renderer {

    public void onSurfaceCreated(GL10 unused, EGLConfig config) {              }    public void onDrawFrame(GL10 unused) {

    }    public void onSurfaceChanged(GL10 unused, int width, int height)   {

           }}

GLES20.glViewport(0, 0, width, height);

GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);

 GLES20.glClearColor(0.5f, 0.5f, 0.5f, 1.0f);

There you go!! Your First Android OpenGL App

Drawing a Basic Shape

Define a Square

• All the 2D/ 3D objects needs to be defined using Primitives.

• Vertex - A vertex is a point where two or more edges meet

• Edges - A vertex (vertices in plural) is the smallest building block of 3D model. A vertex is a point where two or more edges meet

• Face is a triangle. Face is a surface between three corner vertices and three surrounding edges. 

-0.5f, -0.5f, 0.0f, // Bottom Left0.5f, -0.5f, 0.0f, // Bottom Right-0.5f, 0.5f, 0.0f, // Top Left0.5f, 0.5f, 0.0f, // Top Right

private void initShapes(){ float squareCoords[] = {   //The coordinates     };

  // initialize vertex Buffer for square ByteBuffer vbb = ByteBuffer.allocateDirect(squareCoords.length * 4);

  vbb.order(ByteOrder.nativeOrder());  squareVB = vbb.asFloatBuffer();   squareVB.put(squareCoords);   squareVB.position(0);}

Draw Methods o glDrawArrays()o glDrawElements() 

Available Primitives in OpenGL ES

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

Draw a square 

GL_POINTS GL_LINES GL_LINE_STRIP

GL_TRIANGLES GL_TRIANGLE_STRIP GL_TRIANGLE_FAN

OpenGL Rendering Pipeline Simplified

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

Vertex Shader

    

Fragment Shader

   

attribute vec4 vertexPosition;void main(){  gl_Position = vertexPosition;

}

precision mediump float;void main(){ gl_FragColor = vec4(0.5, 0.5, 0.5, 1.0);}

Loading the Shader

GLES20.glCompileShader(vertexShader);

• GLES20.GL_FRAGMENT_SHADER

int vertexShader =           GLES20.glCreateShader(GLES20.GL_VERTEX_SHADER);

GLES20.glShaderSource(vertexShader, shaderCode);

Compiling and Linking the Shader program

shaderProgram = GLES20.glCreateProgram();

GLES20.glAttachShader(shaderProgram, vertexShader); GLES20.glAttachShader(shaderProgram, fragmentShader);

GLES20.glLinkProgram(shaderProgram);

attributePositionHandle =     GLES20.glGetAttribLocation(shaderProgram,"vertexPosition");

Drawing the square

GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);

GLES20.glUseProgram(shaderProgram);

GLES20.glVertexAttribPointer(attributePositionHandle,                              3, GLES20.GL_FLOAT, false, 12, squareVB);

GLES20.glEnableVertexAttribArray(attributePositionHandle);

GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);

Apply Projection and Camera View

• Square Coordinate system is a mapped to non-square screen

• To display Objects in correct proportions on different device screens

Setting up the projection

private float[] MVPMatrix = new float[16];private float[] projectionMatrix = new float[16];//--

float ratio = (float) width / height;

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

Applying the MVP matrix

uniform mat4 MVPMatrix;attribute vec4 vertexPosition; void main(){ gl_Position = MVPMatrix * vertexPosition;  }

Applying the MVP matrix(Contd)

...

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)

Animation

Matrix.multiplyMM(modelViewProjectionMatrix, 0, projectionMatrix, 0, modelMatrix, 0);GLES20.glUniformMatrix4fv(MVPMatrixHandle, 1, false, modelViewProjectionMatrix, 0);

long time = SystemClock.uptimeMillis() % 4000L;float angle = 0.090f * ((int) time);Matrix.setRotateM(modelMatrix, 0, angle, 0, 0, 1.0f);

Matrix.multiplyMM(modelViewProjectionMatrix,0,projectionMatrix,0,viewMatrix,0);