OpenGLES - Graphics Programming in Android
Upcoming SlideShare
Loading in...5
×
 

OpenGLES - Graphics Programming in Android

on

  • 2,906 views

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

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

Statistics

Views

Total Views
2,906
Views on SlideShare
2,688
Embed Views
218

Actions

Likes
2
Downloads
80
Comments
0

6 Embeds 218

https://funnel.hasgeek.com 194
http://funnel.local 12
http://funneldev.hasgeek.in 6
http://belimitless.co 4
https://www.google.com.tr 1
https://www.google.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

OpenGLES - Graphics Programming in Android Presentation 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. ��������������������������������������������������������������������������� ��������������������������������������������������������������������������������� �����������������������������������������������������