Download - OpenGLES - Graphics Programming in Android
![Page 1: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/1.jpg)
Graphics Programming in OpenGLES
Arvind Devaraj
GDG DevFest, Bangalore
![Page 2: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/2.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
About me
� @ NVIDIA - Android Graphics � OpenGLES Driver � Android Applications� Android Middleware
![Page 3: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/3.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
Demos and Additional Material
� https://www.facebook.com/groups/opengl/� 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
![Page 4: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/4.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj4
OpenGLES Overview
�� OpenGL is graphics API.OpenGL is graphics API.�� Makes programming Makes programming h/wh/w independentindependent
�� OpenGLESOpenGLES is a subsetis a subset for embedded for embedded platformplatform
![Page 6: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/6.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
OpenGLES Overview
�� Triangles used to approximate any Triangles used to approximate any geometrygeometry
![Page 7: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/7.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
OpenGLES Overview
� Renders 3D geometry defined by Triangles
� GPU is efficient in processing geometry and images
![Page 8: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/8.jpg)
[email protected] 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
![Page 11: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/11.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
Camera Analogy
3D model 3D model �� 2D image 2D image
![Page 12: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/12.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj12
Camera Analogy
�� Everything inside the viewing volume is Everything inside the viewing volume is capturedcaptured
camera
model
viewingvolume
![Page 13: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/13.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
Clipping – objects outside view volume are discarded
![Page 14: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/14.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj14
Transformations
� Transform the model� Transform the camera� Project from 3D to 2D
![Page 15: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/15.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj15
Transformations
�� Transform the Transform 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
![Page 16: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/16.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj16
Transformations - APIs
�� Transform the Transform the modelmodel�� glRotateglRotate / / glTranslateglTranslate etcetc
�� Transform the camera (Transform the camera (viewview))� gluLookAt
�� ProjectionProjection from 3D to 2Dfrom 3D to 2D�� glFrustumglFrustum
![Page 17: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/17.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
Transformations
Any transformation is combination of these
basic transformations
![Page 19: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/19.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj19
vertex
Modelview Projection
Object space Eye space Screen space
Transformation
Each triangle (vertex) from 3D model is converted to screen space
![Page 22: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/22.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
Rasterization
Converts primitives to pixels/fragments
Rasterizationdetermines the pixels
inside the triangle
![Page 23: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/23.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
Rasterization
� Each vertex has attribute like Color
� Attributes get interpolated
![Page 24: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/24.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
RasterizationHow about overlapping region
Pixels in individual triangles are called fragments
Combine fragments to get final output pixel
![Page 25: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/25.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
Fragment Processing
There are many ways to combine Fragments
![Page 26: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/26.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
Fragment Processing
There are many ways to combine Fragments
Display nearest to camera Blend with existing image
![Page 27: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/27.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
Graphics pipeline
pixelsvertices fragmentsvertices
![Page 28: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/28.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
Graphics pipeline
pixelsvertices fragmentsvertices
Add Lighting
![Page 29: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/29.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
Graphics pipeline
pixelsvertices fragmentsvertices
Add Texturing
![Page 32: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/32.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj32
Lighting
�� Lighting simulates how objects reflect Lighting simulates how objects reflect lightlight
![Page 33: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/33.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
![Page 34: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/34.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj34
Lights
�� Lighting depends onLighting depends on� Surface material � Direction and Position of Light
�� Mathematical modelsMathematical models
![Page 35: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/35.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
Lighting
� N is surface normal. H is between light and viewer
H.N.cosθ
![Page 37: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/37.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj37
Texture Mapping
�� Apply image to geometry Apply image to geometry
�� UsesUses
� Add Realism � Effects like Reflections
![Page 40: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/40.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj40
Texture Mapping
s
t
x
y
z
image
geometry screen
![Page 41: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/41.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
Shaders
� Allow these transformations to be user programmable
![Page 43: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/43.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
Shaders
� User defined programs � Custom vertex transformation� Custom fragment generation
![Page 44: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/44.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
Shader - Examples
Pattern Generation / Procedural textures
![Page 45: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/45.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
Shader Example
Particle / Effects Generation
![Page 46: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/46.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
Shader Examples
Complex Lighting / Image Transformations
![Page 47: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/47.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
Shader - Examples
Reflection / Shadow Effects
![Page 49: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/49.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
Shader Examples (circle)
� void main(void) {
dist = (x*x) + (y*y);color = (dist < r*r) ? white: blue
}
![Page 52: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/52.jpg)
[email protected] 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
![Page 53: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/53.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
Android – Rendererclass 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();
}}
![Page 54: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/54.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
Android - Renderer
draw_triangle() {// set the vertex info from user data
glVertexAttribPointer(…, 3, FLOAT,…..vertexData);
glDrawArrays(GL_TRIANGLES)}
![Page 56: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/56.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj
Hidden surface removal
� surface closest to eye is drawn
� Others surfaces are discarded
� Using Z/depth-Buffer
![Page 57: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/57.jpg)
[email protected] OpenGL Discussion GroupArvind Devaraj57
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
![Page 58: OpenGLES - Graphics Programming in Android](https://reader034.vdocument.in/reader034/viewer/2022051211/554f7acfb4c9052a518b4a2f/html5/thumbnails/58.jpg)
�����������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������