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

▶
cs378 mobile computing
SMART_READER_LITE
LIVE PREVIEW

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

Jun 22, 2023 11 likes •413 views

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

slide-1
SLIDE 1

CS378 - Mobile Computing

3D Graphics

slide-2
SLIDE 2

2D Graphics

  • android.graphics library

for 2D graphics (not Java AWT and Swing)

  • classes such as Canvas,

Drawable, Bitmap, and

  • thers to create 2D

graphics

  • Various attempts to

make two d graphics appear more "lifelike" and 3 dimensional

2

slide-3
SLIDE 3

Gradients

  • Gradient Paints can

add depth to 2d primitives

  • Notice the gradient

paint on the pegs and shading on numbers

3

slide-4
SLIDE 4

2D Graphics

4

slide-5
SLIDE 5

Parallax Scrolling Example

5

slide-6
SLIDE 6

2.5D

  • Isometric Graphics
  • "rotate" object to reveal details on the side

6

Zaxxon Ultima Online

slide-7
SLIDE 7

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

slide-8
SLIDE 8

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

8

y+ x+ z+ z-

slide-9
SLIDE 9

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

9

  • bjects in

scene, but not visible

slide-10
SLIDE 10

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

slide-11
SLIDE 11

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

slide-12
SLIDE 12

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

slide-13
SLIDE 13

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
  • f apps in native code in C or C++
  • Required Android classes for first

approach:

–GLSurfaceView and GLSurfaceView.Renderer

13

slide-14
SLIDE 14

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

slide-15
SLIDE 15

GLSurfaceView.Renderer

  • An interface
  • Must implement these methods:

–onSurfaceCreated for actions that only happen once such as initializing GL graphics

  • bjects

–onDrawFrame() work horse method to create movement and animation –onSurfacechanged() called when size of view changes or orientation

15

slide-16
SLIDE 16

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

slide-17
SLIDE 17

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

slide-18
SLIDE 18

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

slide-19
SLIDE 19

Activity

19

slide-20
SLIDE 20

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

slide-21
SLIDE 21

Skeleton Renderer

21

slide-22
SLIDE 22

OpenGL Documentation

  • Android Documentation for GL10 list

constants and methods but have no

  • ther useful information
  • Check the OpenGL ES documentation
  • http://www.khronos.org/opengles/sdk/1

.1/docs/man/

22

slide-23
SLIDE 23

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

slide-24
SLIDE 24

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

slide-25
SLIDE 25

Define Triangle

25

  • 1

0 1 1

  • 1
slide-26
SLIDE 26

Draw Triangle

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

26

slide-27
SLIDE 27

Result

  • oooo, ahhhh
  • Graphics coordinate

system assumes a square but mapped to a rectangular frame

27

slide-28
SLIDE 28

Correcting Projection

  • Apply an OpenGL projection view and

camera (eye point) to transform coordinates of the triangle

–"correct" the position onSurfaceChanged and onDrawframe()

28

slide-29
SLIDE 29
  • nSurfaceChanged

29

slide-30
SLIDE 30
  • nDrawFrame

30

slide-31
SLIDE 31

Result of Correcting Projection

31

slide-32
SLIDE 32

Adding Motion

  • in onDrawFrame
  • define vector of rotation

32

slide-33
SLIDE 33

Results

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

33

slide-34
SLIDE 34

Results

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

34

slide-35
SLIDE 35

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

slide-36
SLIDE 36

Constructing Pyramid

  • specify vertices for

6 triangles

  • 4 sides, 2 triangles

for the base

36

0 (-1, -1, -1) 1 (-1, 1, -1) 2 (1, 1, -1) 3 (1, -1, -1) 4 (0, 0, 1) imagine it out

  • f screen
slide-37
SLIDE 37

Constructing Pyramid

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

37

slide-38
SLIDE 38

Coloring Pyramid

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

38

slide-39
SLIDE 39

Result

39

slide-40
SLIDE 40

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