Ziv Gilad

Ziv.gilad@gmail.com

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?

Ziv Gilad

Ziv.gilad@gmail.com

Thank You!Thank You!