OpenGLES - Graphics Programming in Android

Graphics Programming in OpenGLES

Arvind Devaraj

GDG DevFest, Bangalore

[email protected] OpenGL Discussion GroupArvind Devaraj

About me

� @ NVIDIA - Android Graphics � OpenGLES Driver � Android Applications� Android Middleware


Demos and Additional Material

� https://www.facebook.com/groups/opengl/� 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

[email protected] OpenGL Discussion GroupArvind Devaraj4

OpenGLES Overview

�� OpenGL is graphics API.OpenGL is graphics API.�� Makes programming Makes programming h/wh/w independentindependent

�� OpenGLESOpenGLES is a subsetis a subset for embedded for embedded platformplatform


A

OpenGLES Overview


OpenGLES Overview

�� Triangles used to approximate any Triangles 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 model 3D model �� 2D image 2D image


Camera Analogy

�� Everything inside the viewing volume is Everything inside the viewing volume is capturedcaptured

camera

model

viewingvolume


Clipping – objects outside view volume are discarded


Transformations

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


Transformations

�� Transform the Transform 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


Transformations - APIs

�� Transform the Transform 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


vertex

Modelview Projection

Object space Eye space Screen space

Transformation

Each triangle (vertex) from 3D model is converted to screen space


Transformation Demo


Graphics Pipeline


Rasterization

Converts primitives to pixels/fragments

Rasterizationdetermines the pixels

inside the triangle


Rasterization

� Each vertex has attribute like Color

� Attributes get interpolated


RasterizationHow 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


Graphics Pipeline


Lighting


Lighting

�� Lighting simulates how objects reflect Lighting simulates how objects reflect lightlight


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


Texture Mapping

�� Apply image to geometry Apply image to geometry

�� UsesUses

� Add Realism � Effects like Reflections


Texture Mapping – adds realism


Texture Mapping

Effects like Reflection


Texture Mapping

s

t

x

y

z

image

geometry screen


Shaders

� Allow these transformations to be user programmable


Graphics Pipeline


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


Graphics Pipeline


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 – Rendererclass 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


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

Technology

Transcript of OpenGLES - Graphics Programming in Android