OpenGLES - Graphics Programming in Android

5,090 views
4,811 views

Published on

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

Published in: Technology, Art & Photos
3 Comments
12 Likes
Statistics
Notes
  • Android Programming for Beginners --- http://amzn.to/1pCkwYW
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Android Programming: The Big Nerd Ranch Guide (2nd Edition) --- http://amzn.to/1Sb2qX5
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Android Programming In a Day!: The Power Guide for Beginners In Android App Programming --- http://amzn.to/1pCku3q
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,090
On SlideShare
0
From Embeds
0
Number of Embeds
282
Actions
Shares
0
Downloads
206
Comments
3
Likes
12
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. ��������������������������������������������������������������������������� ��������������������������������������������������������������������������������� �����������������������������������������������������

×