OpenGLES - Graphics Programming in Android

Graphics Programming in
OpenGLES
Arvind Devaraj
GDG DevFest, Bangalore

arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
About me
� @ NVIDIA - Android Graphics
� OpenGLES Driver
� Android Applications
� Android Middleware

Demos and Additional Material
� https://www.facebook.com/groups/ope
ngl/
� Is a community of OpenGL professionals
� Join the community to get more info
� We have tons of demos – Graphics
programming using GLUT, Android, iPhone
� Get your queries answered by expert

arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj4
OpenGLES Overview
�� OpenGL is graphics API.OpenGL is graphics API.
�� Makes programmingMakes programming h/wh/w independentindependent
�� OpenGLESOpenGLES is a subsetis a subset for embeddedfor embedded
platformplatform

A
OpenGLES Overview

OpenGLES Overview
�� Triangles used to approximate anyTriangles used to approximate any
geometrygeometry

OpenGLES Overview
� Renders 3D geometry defined by Triangles
� GPU is efficient in processing geometry and
images

OpenGLES Overview
� Represent Objects as Triangles
� Apply Transformations on triangles
� Rasterize the triangles to get pixels
� Add realism by adding Light and
Texture
� More realism using Shaders

Graphics Pipeline

Transformations

Camera Analogy
3D model3D model �� 2D image2D image

2
Camera Analogy
�� Everything inside the viewing volume isEverything inside the viewing volume is
capturedcaptured
camera
model
viewing
volume

Clipping – objects outside view
volume are discarded

4
Transformations
� Transform the model
� Transform the camera
� Project from 3D to 2D

5
Transformations
�� Transform theTransform the modelmodel
�� i.ei.e move the objectmove the object
�� Transform the camera (Transform the camera (viewview))
� i.e change the viewing volume
�� ProjectionProjection from 3D to 2Dfrom 3D to 2D
� adjust the lens of the camera

6
Transformations - APIs
�� Transform theTransform the modelmodel
�� glRotateglRotate // glTranslateglTranslate etcetc
�� Transform the camera (Transform the camera (viewview))
� gluLookAt
�� ProjectionProjection from 3D to 2Dfrom 3D to 2D
�� glFrustumglFrustum

Transformations
Any transformation is
combination of these
basic transformations

Transformation Matrix

9
v
e
r
t
e
x
Modelview Projection
Object space Eye space Screen space
Transformation
Each triangle (vertex) from 3D model is
converted to screen space

Transformation Demo

Rasterization
Converts primitives to
pixels/fragments
Rasterization
determines the pixels
inside the triangle

Rasterization
� Each vertex
has attribute
like Color
� Attributes get
interpolated

Rasterization
How about overlapping
region
Pixels in individual
triangles are called
fragments
Combine fragments to
get final output pixel

Fragment Processing
There are many ways to combine Fragments

Fragment Processing
There are many ways to combine Fragments
Display nearest to camera Blend with existing image

Graphics pipeline
pixelsvertices fragmentsvertices

Graphics pipeline
Add Lighting

Graphics pipeline
Add Texturing

Lighting

2
Lighting
�� Lighting simulates how objects reflectLighting simulates how objects reflect
lightlight

4
Lights
�� Lighting depends onLighting depends on
� Surface material
� Direction and Position of Light
�� Mathematical modelsMathematical models

Lighting
� N is surface normal.
H is between light and viewer
H.N.cosθ

Texture Mapping

7
Texture Mapping
�� Apply image to geometryApply image to geometry
�� UsesUses
� Add Realism
� Effects like Reflections

Texture Mapping – adds realism

Texture Mapping
Effects like
Reflection

0
Texture Mapping
s
t
x
y
z
image
geometry screen

Shaders
� Allow these transformations to be user
programmable

Shaders
� User defined programs
� Custom vertex transformation
� Custom fragment generation

Shader - Examples
Pattern Generation /
Procedural textures

Shader Example
Particle / Effects Generation

Shader Examples
Complex Lighting / Image Transformations

Shader - Examples
Reflection / Shadow Effects

Shader Examples

Shader Examples (circle)
� void main(void)
{
dist = (x*x) + (y*y);
color = (dist < r*r) ? white: blue
}

Blending

public class ClearActivity extends Activity {
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mGLView = new GLSurfaceView(this);
mGLView.setRenderer(new ClearRenderer());
setContentView(mGLView);
}
private GLSurfaceView mGLView;
}
Android - Activity

Android – Renderer
class ClearRenderer implements GLSurfaceView.Renderer {
public void onSurfaceCreated(GL10 gl, EGLConfig config) {}
public void onSurfaceChanged(GL10 gl, int w, int h) {
gl.glViewport(0, 0, w, h);
}
public void onDrawFrame(GL10 gl) {
draw_triangle();
}
}

Android - Renderer
draw_triangle() {
// set the vertex info from user data
glVertexAttribPointer
(…, 3, FLOAT,…..vertexData);
glDrawArrays(GL_TRIANGLES)
}

Additional slides

Hidden surface removal
� surface closest
to eye is drawn
� Others surfaces
are discarded
� Using Z/depth-Buffer

7
OpenGL Geometric
Primitives
GL_QUAD_STRIPGL_QUAD_STRIP
GL_POLYGONGL_POLYGON
GL_TRIANGLE_STRIPGL_TRIANGLE_STRIP GL_TRIANGLE_FANGL_TRIANGLE_FAN
GL_POINTSGL_POINTS
GL_LINESGL_LINES
GL_LINE_LOOPGL_LINE_LOOPGL_LINE_STRIPGL_LINE_STRIP
GL_TRIANGLESGL_TRIANGLES
GL_QUADSGL_QUADS

��
��
��

OpenGLES - Graphics Programming in Android

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to OpenGLES - Graphics Programming in Android

Similar to OpenGLES - Graphics Programming in Android (20)

More from Arvind Devaraj

More from Arvind Devaraj (20)

Recently uploaded

Recently uploaded (20)

OpenGLES - Graphics Programming in Android