SlideShare a Scribd company logo
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
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
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
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
A
OpenGLES Overview
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
OpenGLES Overview
�� Triangles used to approximate anyTriangles used to approximate any
geometrygeometry
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
OpenGLES Overview
� Renders 3D geometry defined by Triangles
� GPU is efficient in processing geometry and
images
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
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
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Graphics Pipeline
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Transformations
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Camera Analogy
3D model3D model �� 2D image2D image
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj1
2
Camera Analogy
�� Everything inside the viewing volume isEverything inside the viewing volume is
capturedcaptured
camera
model
viewing
volume
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Clipping – objects outside view
volume are discarded
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj1
4
Transformations
� Transform the model
� Transform the camera
� Project from 3D to 2D
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj1
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
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj1
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
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Transformations
Any transformation is
combination of these
basic transformations
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Transformation Matrix
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj1
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
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Transformation Demo
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Graphics Pipeline
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Rasterization
Converts primitives to
pixels/fragments
Rasterization
determines the pixels
inside the triangle
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Rasterization
� Each vertex
has attribute
like Color
� Attributes get
interpolated
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Rasterization
How about overlapping
region
Pixels in individual
triangles are called
fragments
Combine fragments to
get final output pixel
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Fragment Processing
There are many ways to combine Fragments
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Fragment Processing
There are many ways to combine Fragments
Display nearest to camera Blend with existing image
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Graphics pipeline
pixelsvertices fragmentsvertices
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Graphics pipeline
pixelsvertices fragmentsvertices
Add Lighting
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Graphics pipeline
pixelsvertices fragmentsvertices
Add Texturing
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Graphics Pipeline
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Lighting
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj3
2
Lighting
�� Lighting simulates how objects reflectLighting simulates how objects reflect
lightlight
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj3
4
Lights
�� Lighting depends onLighting depends on
� Surface material
� Direction and Position of Light
�� Mathematical modelsMathematical models
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Lighting
� N is surface normal.
H is between light and viewer
H.N.cosθ
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Texture Mapping
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj3
7
Texture Mapping
�� Apply image to geometryApply image to geometry
�� UsesUses
� Add Realism
� Effects like Reflections
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Texture Mapping – adds realism
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Texture Mapping
Effects like
Reflection
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj4
0
Texture Mapping
s
t
x
y
z
image
geometry screen
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Shaders
� Allow these transformations to be user
programmable
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Graphics Pipeline
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Shaders
� User defined programs
� Custom vertex transformation
� Custom fragment generation
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Shader - Examples
Pattern Generation /
Procedural textures
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Shader Example
Particle / Effects Generation
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Shader Examples
Complex Lighting / Image Transformations
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Shader - Examples
Reflection / Shadow Effects
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Shader Examples
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Shader Examples (circle)
� void main(void)
{
dist = (x*x) + (y*y);
color = (dist < r*r) ? white: blue
}
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Blending
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Graphics Pipeline
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
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
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
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();
}
}
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Android - Renderer
draw_triangle() {
// set the vertex info from user data
glVertexAttribPointer
(…, 3, FLOAT,…..vertexData);
glDrawArrays(GL_TRIANGLES)
}
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Additional slides
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Hidden surface removal
� surface closest
to eye is drawn
� Others surfaces
are discarded
� Using Z/depth-Buffer
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj5
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
���������������������������������������������������������������������������
���������������������������������������������������������������������������������
�����������������������������������������������������

More Related Content

PPT
SIGGRAPH Asia 2008 Modern OpenGL
PDF
The Android graphics path, in depth
PDF
Understaing Android EGL
PDF
Design and Concepts of Android Graphics
PDF
Understanding the Android System Server
PDF
Project meeting: Android Graphics Architecture Overview
PPT
NVIDIA OpenGL 4.6 in 2017
PPSX
Vertex Shader Tricks by Bill Bilodeau - AMD at GDC14
SIGGRAPH Asia 2008 Modern OpenGL
The Android graphics path, in depth
Understaing Android EGL
Design and Concepts of Android Graphics
Understanding the Android System Server
Project meeting: Android Graphics Architecture Overview
NVIDIA OpenGL 4.6 in 2017
Vertex Shader Tricks by Bill Bilodeau - AMD at GDC14

What's hot (20)

PDF
Function Level Analysis of Linux NVMe Driver
PDF
Android internals 07 - Android graphics (rev_1.1)
PDF
Android OS Porting: Introduction
PPTX
Android graphic system (SurfaceFlinger) : Design Pattern's perspective
PDF
Introduction to Android Window System
PDF
Android IPC Mechanism
PPTX
DirectX 11 Rendering in Battlefield 3
PPTX
Unreal Engine (For Creating Games) Presentation
PDF
Multiplayer Game Sync Techniques through CAP theorem
PDF
Accessing Hardware on Android
PDF
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
PDF
Android internals
PDF
Embedded Android : System Development - Part I
PDF
Low Level View of Android System Architecture
PDF
Introduction to Qt Creator
 
PDF
qemu + gdb: The efficient way to understand/debug Linux kernel code/data stru...
PDF
Mavenの真実とウソ
PPTX
A Certain Slant of Light - Past, Present and Future Challenges of Global Illu...
PPT
OpenGL 3.2 and More
PPTX
Wrapped diffuse
Function Level Analysis of Linux NVMe Driver
Android internals 07 - Android graphics (rev_1.1)
Android OS Porting: Introduction
Android graphic system (SurfaceFlinger) : Design Pattern's perspective
Introduction to Android Window System
Android IPC Mechanism
DirectX 11 Rendering in Battlefield 3
Unreal Engine (For Creating Games) Presentation
Multiplayer Game Sync Techniques through CAP theorem
Accessing Hardware on Android
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
Android internals
Embedded Android : System Development - Part I
Low Level View of Android System Architecture
Introduction to Qt Creator
 
qemu + gdb: The efficient way to understand/debug Linux kernel code/data stru...
Mavenの真実とウソ
A Certain Slant of Light - Past, Present and Future Challenges of Global Illu...
OpenGL 3.2 and More
Wrapped diffuse
Ad

Viewers also liked (20)

PPT
OpenGL Basics
PPTX
OpenGL ES Presentation
PDF
Broadcast Receiver
PDF
OpenGLES Android Graphics
PDF
Android High performance in GPU using opengles and renderscript
PDF
Big data
PPT
Web gl game development
KEY
Getting Started with WebGL
PPTX
cloud conference 2013 - Infrastructure as a Service in Amazon Web Services
PDF
Web Sockets in Java EE 7
PDF
Graphics programming in open gl
PDF
WebGL and three.js
KEY
jQTouch at jQuery Conference 2010
PDF
OpenGL Starter L01
PPTX
Open stack implementation
PPTX
Introduction to LESS
PDF
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
PDF
Open Stack vs .NET Stack - For Startups
PDF
jQTouch and Titanium
PPT
Introduction to open_gl_in_android
OpenGL Basics
OpenGL ES Presentation
Broadcast Receiver
OpenGLES Android Graphics
Android High performance in GPU using opengles and renderscript
Big data
Web gl game development
Getting Started with WebGL
cloud conference 2013 - Infrastructure as a Service in Amazon Web Services
Web Sockets in Java EE 7
Graphics programming in open gl
WebGL and three.js
jQTouch at jQuery Conference 2010
OpenGL Starter L01
Open stack implementation
Introduction to LESS
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
Open Stack vs .NET Stack - For Startups
jQTouch and Titanium
Introduction to open_gl_in_android
Ad

Similar to OpenGLES - Graphics Programming in Android (20)

PPTX
OpenGL basics
PDF
Open gl programming guide
PDF
OpenGL ES on Android
PPTX
OpenGL - Bringing the 3D World into the Android
PPTX
What is OpenGL ?
PDF
Ujug07presentation
PDF
Computer Graphics - Lecture 01 - 3D Programming I
PDF
GLSL Shading with OpenSceneGraph
PDF
Open gl
PDF
Realizing OpenGL
PPT
3D Visualization on iOS
PPT
september11.ppt
PPT
OpenGL 4 for 2010
PDF
Leaving Flatland: Getting Started with WebGL- SXSW 2012
PDF
Introduction of openGL
PPTX
OpenGL Shading Language
PPTX
OpenGL_summer2012.ccccccccccccccccccpptx
PPT
Advanced Graphics Workshop - GFX2011
PPT
SIGGRAPH Asia 2012 Exhibitor Talk: OpenGL 4.3 and Beyond
OpenGL basics
Open gl programming guide
OpenGL ES on Android
OpenGL - Bringing the 3D World into the Android
What is OpenGL ?
Ujug07presentation
Computer Graphics - Lecture 01 - 3D Programming I
GLSL Shading with OpenSceneGraph
Open gl
Realizing OpenGL
3D Visualization on iOS
september11.ppt
OpenGL 4 for 2010
Leaving Flatland: Getting Started with WebGL- SXSW 2012
Introduction of openGL
OpenGL Shading Language
OpenGL_summer2012.ccccccccccccccccccpptx
Advanced Graphics Workshop - GFX2011
SIGGRAPH Asia 2012 Exhibitor Talk: OpenGL 4.3 and Beyond

More from Arvind Devaraj (20)

PDF
Deep learning for NLP and Transformer
PDF
NLP using transformers
PDF
Nodejs presentation
PDF
Career hunt pitch
PDF
Career options for CS and IT students
PDF
Careerhunt ebook
PDF
Static Analysis of Computer programs
PDF
Hyperbook
PDF
Yourstory Android Workshop
PDF
AIDL - Android Interface Definition Language
PDF
NDK Programming in Android
PDF
Google Cloud Messaging
PPT
Operating system
PDF
Sorting (introduction)
PDF
Data structures (introduction)
PDF
Signal Processing Introduction using Fourier Transforms
PDF
Thesis: Slicing of Java Programs using the Soot Framework (2006)
PDF
Computer Systems
PDF
Computability
PDF
Fourier Transforms
Deep learning for NLP and Transformer
NLP using transformers
Nodejs presentation
Career hunt pitch
Career options for CS and IT students
Careerhunt ebook
Static Analysis of Computer programs
Hyperbook
Yourstory Android Workshop
AIDL - Android Interface Definition Language
NDK Programming in Android
Google Cloud Messaging
Operating system
Sorting (introduction)
Data structures (introduction)
Signal Processing Introduction using Fourier Transforms
Thesis: Slicing of Java Programs using the Soot Framework (2006)
Computer Systems
Computability
Fourier Transforms

Recently uploaded (20)

PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
PDF
Electronic commerce courselecture one. Pdf
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PDF
cuic standard and advanced reporting.pdf
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PDF
Approach and Philosophy of On baking technology
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PDF
Unlocking AI with Model Context Protocol (MCP)
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PDF
Modernizing your data center with Dell and AMD
PPTX
Big Data Technologies - Introduction.pptx
DOCX
The AUB Centre for AI in Media Proposal.docx
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
PDF
Chapter 3 Spatial Domain Image Processing.pdf
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
Electronic commerce courselecture one. Pdf
Advanced methodologies resolving dimensionality complications for autism neur...
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
cuic standard and advanced reporting.pdf
Mobile App Security Testing_ A Comprehensive Guide.pdf
Approach and Philosophy of On baking technology
Per capita expenditure prediction using model stacking based on satellite ima...
Unlocking AI with Model Context Protocol (MCP)
20250228 LYD VKU AI Blended-Learning.pptx
“AI and Expert System Decision Support & Business Intelligence Systems”
Digital-Transformation-Roadmap-for-Companies.pptx
Understanding_Digital_Forensics_Presentation.pptx
Building Integrated photovoltaic BIPV_UPV.pdf
Modernizing your data center with Dell and AMD
Big Data Technologies - Introduction.pptx
The AUB Centre for AI in Media Proposal.docx
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
Chapter 3 Spatial Domain Image Processing.pdf
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf

OpenGLES - Graphics Programming in Android