Your SlideShare is downloading. ×
  • Like
OpenGLES - Graphics Programming in Android
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

OpenGLES - Graphics Programming in Android

  • 2,842 views
Published

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

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

Published in Technology , Art & Photos
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,842
On SlideShare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
105
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Graphics Programming in OpenGLES Arvind Devaraj GDG DevFest, Bangalore
  • 2. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj About me � @ NVIDIA - Android Graphics � OpenGLES Driver � Android Applications � Android Middleware
  • 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. 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. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj A OpenGLES Overview
  • 6. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj OpenGLES Overview �� Triangles used to approximate anyTriangles used to approximate any geometrygeometry
  • 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. 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. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Graphics Pipeline
  • 10. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Transformations
  • 11. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Camera Analogy 3D model3D model �� 2D image2D image
  • 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. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Clipping – objects outside view volume are discarded
  • 14. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj1 4 Transformations � Transform the model � Transform the camera � Project from 3D to 2D
  • 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. 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. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Transformations Any transformation is combination of these basic transformations
  • 18. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Transformation Matrix
  • 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. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Transformation Demo
  • 21. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Graphics Pipeline
  • 22. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Rasterization Converts primitives to pixels/fragments Rasterization determines the pixels inside the triangle
  • 23. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Rasterization � Each vertex has attribute like Color � Attributes get interpolated
  • 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. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Fragment Processing There are many ways to combine Fragments
  • 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. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Graphics pipeline pixelsvertices fragmentsvertices
  • 28. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Graphics pipeline pixelsvertices fragmentsvertices Add Lighting
  • 29. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Graphics pipeline pixelsvertices fragmentsvertices Add Texturing
  • 30. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Graphics Pipeline
  • 31. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Lighting
  • 32. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj3 2 Lighting �� Lighting simulates how objects reflectLighting simulates how objects reflect lightlight
  • 33. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj
  • 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. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Lighting � N is surface normal. H is between light and viewer H.N.cosθ
  • 36. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Texture Mapping
  • 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. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Texture Mapping – adds realism
  • 39. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Texture Mapping Effects like Reflection
  • 40. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj4 0 Texture Mapping s t x y z image geometry screen
  • 41. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Shaders � Allow these transformations to be user programmable
  • 42. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Graphics Pipeline
  • 43. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Shaders � User defined programs � Custom vertex transformation � Custom fragment generation
  • 44. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Shader - Examples Pattern Generation / Procedural textures
  • 45. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Shader Example Particle / Effects Generation
  • 46. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Shader Examples Complex Lighting / Image Transformations
  • 47. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Shader - Examples Reflection / Shadow Effects
  • 48. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Shader Examples
  • 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. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Blending
  • 51. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Graphics Pipeline
  • 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. 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. 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. arvind.iisc@gmail.com OpenGL Discussion GroupArvind Devaraj Additional slides
  • 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. 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. ��������������������������������������������������������������������������� ��������������������������������������������������������������������������������� �����������������������������������������������������