The document provides an overview of OpenGL, a hardware-accelerated graphics API used for rendering 2D and 3D graphics across multiple platforms. It discusses OpenGL ES, which is tailored for Android, as well as WebGL for rendering graphics in web browsers, along with a basic introduction to 3D models, shaders, and lighting in graphics programming. Additionally, it highlights the role of vertex and fragment shaders in manipulating vertex data and calculating pixel colors.

1. Ziv Gilad
Ziv.gilad@gmail.com

3. First - few Examples
Few Examples from the WebGL
World:
• Trigger Rally
• Jellyfish Simulation
• Train Demo
• Mammoth

4. What is OpenGL?
• Hardware-accelerated 3D graphics
• API for rendering 2D and 3D
• Cross-language
• Multi-platform
• Part of the Khronos Group
• Royalty-free
• Client-based rendering
• Immediate mode rendering

5. Android Support
• Android uses OpenGL ES
• OpenGL ES 1.0 and 1.1
• Android 1.0 and higher
• OpenGL ES 2.0
• Android 2.2 (API level 8) and higher
• OpenGL ES 3.0
• Android 4.3 (API level 18) and higher
may support
• Requires device manufacturer support

6. WebGL for Android
• Android also supports OpenGL for
the Web
• WebGL is the OpenGL ES JavaScript APIS
• Browser Support:
• FireFox for Mobile 4
• Chrome for Android 25
• Opera Mobile 12

7. 3D Models
• Defined using meshes
• Mesh composed of triangles
• Triangles are 3 vertices
• Vertices are x, y, z triples
• No surface properties
• No color
• No Mateial

8. 3D Model Example

9. 3D Models
• Can be written in Notepad
• In practice we use 3D creation tools
• Blender
• Clara.io
• Maya
• Cinema4D
• Unity
• 3ds Max

10. Create a vertex array
Create Simple Model

11. Demo
Vertices Example

12. Create an index array
Create Simple Model

13. OpenGL Pipeline
Vertex Buffer Attributes
Vertex Shader
Fragmant (Pixel)
Shader
Frame Buffer
Uniforms Varyings
Coordinates,
Colors,
Normals

14. Transitions
• glsl-transition

15. Transition Example

16. Vertex Shader
• Invoked per each vertex
• Shader Input:
• Per vertex – Attributes
• Globally for all vertices – Uniforms
• Manipulate vertex position:
• Scale
• Rotate
• Translate
• Can send data to fragmant shader - Varying

17. Vertex Affine Transform
• Rotation:
• Scaling:
• Translation:

18. Cameras, Perspective,
Viewports
• Camera position and orientation
• Model – View matrix
• Field of view (FOV)
• Perspective matrix
• Viewport
• 2D projection of 3D
scene

19. Demo
Wireframe Cube Example

20. Demo
Colored Cube Example

21. Vertices vs Fragments
• More fragments than vertices

22. Demo
Colored Cube Interpolation
Example

23. Vertices vs Fragments
• More fragments than vertices
• Vertex shader varying are
interpolated

24. Textures
What if we want to display this image
On this surface?

25. Textures
And get the following result?

26. Textures
• Display image on the surface
• Use texture mapping
• Apply real time effects

27. Demo
Textured Cube - Image

28. Demo
Textured Cube – Two Textures

29. Lights and materials
• Lightning model use physical principles
• Final Color
• Lights
• Normals
• Material

30. Phong Reflection
Model

31. Picking
• Create offscreen framebuffer
• Label objects with unique colors
• Off-screen – on screen render
• Read Pixel Data

32. Summary
• OpenGL – hardware
accelerated 3D graphics
• Vertex Shader - manipulates
per-vertex data
• Fragment Shader - calculates
color of individual pixels
• Textures display images on
the surface of geometries

33. Questions?

34. Ziv Gilad
Ziv.gilad@gmail.com