opengl - bringing the 3d world into the android
DESCRIPTION
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.comTRANSCRIPT
Ziv Gilad
Bringing the 3D World into the Mobile
Bringing the 3D World into the Mobile
Was this created with Photoshop?
First - few Examples
Few Examples from the WebGLWorld:
• 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 of the Khronos Group• Royalty-free• Client-based rendering• Immediate mode rendering
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
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
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
3D Model Example
3D Models
• Can be written in Notepad• In practice we use 3D creation tools
• Blender• Clara.io• Maya• Cinema4D• Unity• 3ds Max
Create a vertex array
Create Simple Model
DemoDemo
Vertices Example
Create an index array
Create Simple Model
OpenGL Pipeline
Vertex Buffer
Attributes
Vertex Shader
Fragmant (Pixel) Shader
Frame Buffer
Uniforms Varyings
Coordinates,Colors,Normals
Transitions
• glsl-transition
Transition Example
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
Vertex Affine Transform
• Rotation:
• Scaling:
• Translation:
Cameras, Perspective, Viewports
• Camera position and orientation
• Model – View matrix• Field of view (FOV)
• Perspective matrix• Viewport
• 2D projection of 3Dscene
DemoDemo
Wireframe Cube Example
DemoDemo
Colored Cube Example
Vertices vs Fragments
• More fragments than vertices
DemoDemo
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
DemoDemo
Textured Cube - Image
DemoDemo
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 - calculates color of individual pixels
• Textures display images on the surface of geometries
Questions?