Graphics Programming in
OpenGLES
Arvind Devaraj
GDG DevFest, Bangalore
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
About me
� @ NVIDIA - Android Graphics
� OpenGLES Driver
� And...
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Demos and Additional Material
� https://www.facebook.com/group...
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj4
OpenGLES Overview
�� OpenGL is graphics API.OpenGL is graphic...
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 anyTriangle...
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
OpenGLES Overview
� Renders 3D geometry defined by Triangles
�...
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
OpenGLES Overview
� Represent Objects as Triangles
� Apply Tra...
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 isEv...
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 camer...
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj1
5
Transformations
�� Transform theTransform the modelmodel
��...
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj1
6
Transformations - APIs
�� Transform theTransform the modelm...
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Transformations
Any transformation is
combination of these
bas...
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 Scr...
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
Rasteriz...
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Rasterization
� Each vertex
has attribute
like Color
� Attribu...
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Rasterization
How about overlapping
region
Pixels in individua...
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
D...
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 Texturi...
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 ...
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj3
4
Lights
�� Lighting depends onLighting depends on
� Surface ...
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Lighting
� N is surface normal.
H is between light and viewer
...
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 ge...
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...
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...
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 o...
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Android – Renderer
class ClearRenderer implements GLSurfaceVie...
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
Android - Renderer
draw_triangle() {
// set the vertex info fr...
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
� Oth...
arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj5
7
OpenGL Geometric
Primitives
GL_QUAD_STRIPGL_QUAD_STRIP
GL_P...
���������������������������������������������������������������������������
����������������������������������������������...
Upcoming SlideShare
Loading in...5
×

OpenGLES - Graphics Programming in Android

3,578

Published on

Presentation at Google Developer Group GDG DevFest Bangalore on OpenGLES Graphics Programming

Published in: Technology, Art & Photos
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,578
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
145
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

OpenGLES - Graphics Programming in Android

  1. 1. Graphics Programming in OpenGLES Arvind Devaraj GDG DevFest, Bangalore
  2. 2. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj About me � @ NVIDIA - Android Graphics � OpenGLES Driver � Android Applications � Android Middleware
  3. 3. 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
  4. 4. 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
  5. 5. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj A OpenGLES Overview
  6. 6. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj OpenGLES Overview �� Triangles used to approximate anyTriangles used to approximate any geometrygeometry
  7. 7. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj OpenGLES Overview � Renders 3D geometry defined by Triangles � GPU is efficient in processing geometry and images
  8. 8. 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
  9. 9. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Graphics Pipeline
  10. 10. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Transformations
  11. 11. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Camera Analogy 3D model3D model �� 2D image2D image
  12. 12. 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
  13. 13. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Clipping – objects outside view volume are discarded
  14. 14. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj1 4 Transformations � Transform the model � Transform the camera � Project from 3D to 2D
  15. 15. 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
  16. 16. 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
  17. 17. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Transformations Any transformation is combination of these basic transformations
  18. 18. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Transformation Matrix
  19. 19. 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
  20. 20. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Transformation Demo
  21. 21. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Graphics Pipeline
  22. 22. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Rasterization Converts primitives to pixels/fragments Rasterization determines the pixels inside the triangle
  23. 23. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Rasterization � Each vertex has attribute like Color � Attributes get interpolated
  24. 24. 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
  25. 25. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Fragment Processing There are many ways to combine Fragments
  26. 26. 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
  27. 27. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Graphics pipeline pixelsvertices fragmentsvertices
  28. 28. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Graphics pipeline pixelsvertices fragmentsvertices Add Lighting
  29. 29. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Graphics pipeline pixelsvertices fragmentsvertices Add Texturing
  30. 30. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Graphics Pipeline
  31. 31. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Lighting
  32. 32. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj3 2 Lighting �� Lighting simulates how objects reflectLighting simulates how objects reflect lightlight
  33. 33. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
  34. 34. 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
  35. 35. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Lighting � N is surface normal. H is between light and viewer H.N.cosθ
  36. 36. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Texture Mapping
  37. 37. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj3 7 Texture Mapping �� Apply image to geometryApply image to geometry �� UsesUses � Add Realism � Effects like Reflections
  38. 38. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Texture Mapping – adds realism
  39. 39. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Texture Mapping Effects like Reflection
  40. 40. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj4 0 Texture Mapping s t x y z image geometry screen
  41. 41. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Shaders � Allow these transformations to be user programmable
  42. 42. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Graphics Pipeline
  43. 43. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Shaders � User defined programs � Custom vertex transformation � Custom fragment generation
  44. 44. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Shader - Examples Pattern Generation / Procedural textures
  45. 45. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Shader Example Particle / Effects Generation
  46. 46. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Shader Examples Complex Lighting / Image Transformations
  47. 47. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Shader - Examples Reflection / Shadow Effects
  48. 48. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Shader Examples
  49. 49. 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 }
  50. 50. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Blending
  51. 51. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Graphics Pipeline
  52. 52. 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
  53. 53. 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(); } }
  54. 54. 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) }
  55. 55. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Additional slides
  56. 56. 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
  57. 57. 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
  58. 58. ��������������������������������������������������������������������������� ��������������������������������������������������������������������������������� �����������������������������������������������������
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×