Ziv Gilad
Ziv.gilad@gmail.com
First - few Examples
Few Examples from the WebGL
World:
• Trigger Rally
• Jellyfish Simulation
• Train Demo
• Mammoth
What is OpenGL?
• Hardware-accelerated 3D graphics
• API for rendering 2D and 3D
• Cross-language
• Multi-platform
• Part ...
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 (A...
WebGL for Android
• Android also supports OpenGL for
the Web
• WebGL is the OpenGL ES JavaScript APIS
• Browser Support:
•...
3D Models
• Defined using meshes
• Mesh composed of triangles
• Triangles are 3 vertices
• Vertices are x, y, z triples
• ...
3D Model Example
3D Models
• Can be written in Notepad
• In practice we use 3D creation tools
• Blender
• Clara.io
• Maya
• Cinema4D
• Unit...
Create a vertex array
Create Simple Model
Demo
Vertices Example
Create an index array
Create Simple Model
OpenGL Pipeline
Vertex Buffer Attributes
Vertex Shader
Fragmant (Pixel)
Shader
Frame Buffer
Uniforms Varyings
Coordinates,...
Transitions
• glsl-transition
Transition Example
Vertex Shader
• Invoked per each vertex
• Shader Input:
• Per vertex – Attributes
• Globally for all vertices – Uniforms
•...
Vertex Affine Transform
• Rotation:
• Scaling:
• Translation:
Cameras, Perspective,
Viewports
• Camera position and orientation
• Model – View matrix
• Field of view (FOV)
• Perspectiv...
Demo
Wireframe Cube Example
Demo
Colored Cube Example
Vertices vs Fragments
• More fragments than vertices
Demo
Colored Cube Interpolation
Example
Vertices vs Fragments
• More fragments than vertices
• Vertex shader varying are
interpolated
Textures
What if we want to display this image
On this surface?
Textures
And get the following result?
Textures
• Display image on the surface
• Use texture mapping
• Apply real time effects
Demo
Textured Cube - Image
Demo
Textured Cube – Two Textures
Lights and materials
• Lightning model use physical principles
• Final Color
• Lights
• Normals
• Material
Phong Reflection
Model
Picking
• Create offscreen framebuffer
• Label objects with unique colors
• Off-screen – on screen render
• Read Pixel Data
Summary
• OpenGL – hardware
accelerated 3D graphics
• Vertex Shader - manipulates
per-vertex data
• Fragment Shader - calc...
Questions?
Ziv Gilad
Ziv.gilad@gmail.com
OpenGL - Bringing the 3D World into the Android
Upcoming SlideShare
Loading in …5
×

OpenGL - Bringing the 3D World into the Android

983
-1

Published on

OpenGL harness the full power of the gpu to create 2D and 3D compelling graphics in a cross-platform manner. In this session we will introduce the OpenGL fundamentals, and we will focus on creating functional OpenGL applications as well as demonstrating WebGL, which brings the OpenGL APIs into the the web world.

As presented in DroidCon Tel Aviv 2014 by:
Ziv Gilad
http://il.droidcon.com

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
983
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
31
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Multi Platform - Linux, MacOS X, and Windows
    Cross-language – c++, C# and Java to Python and Lua
  • OpenGL - Bringing the 3D World into the Android

    1. 1. Ziv Gilad Ziv.gilad@gmail.com
    2. 2. First - few Examples Few Examples from the WebGL World: • Trigger Rally • Jellyfish Simulation • Train Demo • Mammoth
    3. 3. 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
    4. 4. 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
    5. 5. 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
    6. 6. 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
    7. 7. 3D Model Example
    8. 8. 3D Models • Can be written in Notepad • In practice we use 3D creation tools • Blender • Clara.io • Maya • Cinema4D • Unity • 3ds Max
    9. 9. Create a vertex array Create Simple Model
    10. 10. Demo Vertices Example
    11. 11. Create an index array Create Simple Model
    12. 12. OpenGL Pipeline Vertex Buffer Attributes Vertex Shader Fragmant (Pixel) Shader Frame Buffer Uniforms Varyings Coordinates, Colors, Normals
    13. 13. Transitions • glsl-transition
    14. 14. Transition Example
    15. 15. 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
    16. 16. Vertex Affine Transform • Rotation: • Scaling: • Translation:
    17. 17. Cameras, Perspective, Viewports • Camera position and orientation • Model – View matrix • Field of view (FOV) • Perspective matrix • Viewport • 2D projection of 3D scene
    18. 18. Demo Wireframe Cube Example
    19. 19. Demo Colored Cube Example
    20. 20. Vertices vs Fragments • More fragments than vertices
    21. 21. Demo Colored Cube Interpolation Example
    22. 22. Vertices vs Fragments • More fragments than vertices • Vertex shader varying are interpolated
    23. 23. Textures What if we want to display this image On this surface?
    24. 24. Textures And get the following result?
    25. 25. Textures • Display image on the surface • Use texture mapping • Apply real time effects
    26. 26. Demo Textured Cube - Image
    27. 27. Demo Textured Cube – Two Textures
    28. 28. Lights and materials • Lightning model use physical principles • Final Color • Lights • Normals • Material
    29. 29. Phong Reflection Model
    30. 30. Picking • Create offscreen framebuffer • Label objects with unique colors • Off-screen – on screen render • Read Pixel Data
    31. 31. 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
    32. 32. Questions?
    33. 33. Ziv Gilad Ziv.gilad@gmail.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×