CS378 - Mobile Computing 3D Graphics 2D Graphics android.graphics - PowerPoint PPT Presentation

CS378 - Mobile Computing 3D Graphics

2D Graphics • android.graphics library for 2D graphics (not Java AWT and Swing) • classes such as Canvas, Drawable, Bitmap, and others to create 2D graphics • Various attempts to make two d graphics appear more "lifelike" and 3 dimensional 2

Gradients • Gradient Paints can add depth to 2d primitives • Notice the gradient paint on the pegs and shading on numbers 3

2D Graphics 4

Parallax Scrolling Example 5

2.5D • Isometric Graphics • "rotate" object to reveal details on the side Ultima Online Zaxxon 6

3D Graphics • Create 3D model – a small scene or a large world • Model rendered into a 2D projection • model includes – objects (boxes, cones, cylinders, sphere, user defined models) – lighting – cameras – textures – dynamic behaviors 7

3D Coordinate System • x and y as expected (positive y is up, not down as in 2d graphics • z axis - positive z is out of screen, negative z is into screen y + z - z + x + 8

Visual Portion • Portion of 3D Scene that is rendered is contained in a frustum (pro: frəstəm) – a pyramid or cone with its top cut off objects in scene, but not visible 9

OpenGL • Developed by Silicon Graphics Inc. – developer of high end graphics systems and machines in 80s and 90s • Integrated Raster Imaging System Graphics Library – 1992 OpenGL – maintained by non profit Khronos Group 10

OpenGL • low level, procedural API – programmer responsible for defining steps to create and render (show) a scene • alternatives use a scene graph where programmer describes scene and actions (behaviors) and library manages the details of rendering it – Example of Graphics libraries that use Scene Graphs: Java3D, Acrobat 3D, AutoCAD, CorelDRAW, RenderMan (Pixar) 11

OpenGL ES • ES = Embedded Systems • Used in a wide variety of devices, not just Android – iPad, iPhone, Blackberry, symbian, Nintendo3DS, Playstation 3, Web GL • OpenGL version ES 2.0 API supported in Android 2.2 and higher (API levels 8 and higher) – prior versions of Android support ES 1.1 • emulator DOES NOT support ES 2.0 12

Android and OpenGL ES • two ways of working with GL: – through the framework APIandroid.opengl package – via the Android Native Development Kit (NDK) • companion tool to Android SDK to build portions of apps in native code in C or C++ • Required Android classes for first approach: – GLSurfaceView and GLSurfaceView.Renderer 13

GLSurfaceView • Similar to SurfaceView • draw and manipulate objects using Open GL API calls • to respond to touch screen events subclass GLSurfaceView and implement touch listeners 14

GLSurfaceView.Renderer • An interface • Must implement these methods: – onSurfaceCreated for actions that only happen once such as initializing GL graphics objects – onDrawFrame() work horse method to create movement and animation – onSurfacechanged() called when size of view changes or orientation 15

Manifest Requirements • To use OpenGL ES 2.0 (Android 2.0 and later) • if app uses texture compression formats must declare which formats application supports – <support-gl-texture> 16

Steps to Use OpenGL • Create activity using GLSurfaceView and GLSurfaceView.Renderer • Create and draw graphics objects • define projection for screen geometry to correct for non square pixels • define a camera view • perform actions to animate objects • make view touch interactive if desired 17

Sample Program • Demonstrate set up of required elements • draw and rotate a 3d object (a cube) • Create Simple Activity that has a GLSurfaceView as its content view • To draw objects must implement GLSurfaceView.Renderer 18

Activity 19

GLSurfaceView • Shell of class • Used to manage surface (special piece of memory), manage EGL display (embedded graphics library, renders on thread decoupled from I thread, and more 20

Skeleton Renderer 21

OpenGL Documentation • Android Documentation for GL10 list constants and methods but have no other useful information • Check the OpenGL ES documentation • http://www.khronos.org/opengles/sdk/1 .1/docs/man/ 22

Low Level Graphics Libraries • "What makes the situation worse is that the highest level CS course I've ever taken is cs4, and quotes from the graphics group startup readme like ' these paths are abstracted as being the result of a topological sort on the graph of ordering dependencies for the entries ' make me lose consciousness in my chair and bleed from the nose." -mgrimes, Graphics problem report 134 23

Draw a Shape • Draw a simple, flat Triangle using OpenGL • (X,Y,Z) coordinate system • (0, 0, 0) center of frame • (1, 1, 0) is top right corner of frame • (-1, -1, 0) is bottom left corner of frame • must define vertices of our triangle 24

Define Triangle -1 0 1 1 0 -1 25

Draw Triangle • init OpenGL to use vertex arrays • call drawing API to draw triangle 26

Result • oooo, ahhhh • Graphics coordinate system assumes a square but mapped to a rectangular frame 27

Correcting Projection • Apply an OpenGL projection view and camera (eye point) to transform coordinates of the triangle – "correct" the position onSurfaceChanged and onDrawframe() 28

onSurfaceChanged 29

onDrawFrame 30

Result of Correcting Projection 31

Adding Motion • in onDrawFrame • define vector of rotation 32

Results X Axis (angle, 1, 0, 0) Y Axis (angle, 0, 1, 0) 33

Results Z Axis (angle, 0, 0, 1) Y Axis (angle, -1, 1, -1) 34

Another Example • Draw a pyramid that bounces around the screen • Same basic steps as previous apps • Activity with GLSurfaceView • Implementation of GLSurfaceView.Renderer • Pyramid class that defines the geometry and appearance of 3d pyramid object 35

Constructing Pyramid • specify vertices for 6 triangles 1 (-1, 1, -1) 2 (1, 1, -1) • 4 sides, 2 triangles for the base 4 (0, 0, 1) imagine it out of screen 0 (-1, -1, -1) 3 (1, -1, -1) 36

Constructing Pyramid • Indices refers to set or coordinate (x, y, z) 37

Coloring Pyramid • Define colors for each of the 5 vertices • Colors blend from one vertex to another • recall, rgba 38

Result 39

OpenGL Options • Renderscript – high performance, but low level – scripts written in C • OpenGLUT, OpenGL Utility Toolkit – not officially part of Android, Android GLUT Wrapper – include more geometric primitives 40