CISC 181 Introduction to Open GL Course web

CISC 181: Introduction to Open. GL Course web page: http: //nameless. cis. udel. edu/class_wiki/index. php/CISC 181_S 2010 April 15, 2010

Outline • Open. GL & GLUT basics – Setting up a program – 2 -D drawing – 2 -D transformations – Applying textures to shapes

Open. GL – What is It? • GL (Graphics Library): Library of 2 -D, 3 -D drawing primitives and operations – API for 3 -D hardware acceleration • GLU (GL Utilities): Miscellaneous functions dealing with camera set-up and higher-level shape descriptions • GLUT (GL Utility Toolkit): Window-system independent toolkit with numerous utility functions, mostly dealing with user interface • Course web page has links to online function references (functions from each library start with library prefix—i. e. , gl*, glut*)

Event-driven GLUT program structure 1. Configure and open window 2. Initialize Open. GL state, program variables 3. Register callback functions • • • Display (where rendering occurs) Resize User input: keyboard, mouse clicks, motion, etc. (on Thursday) 4. Enter event processing loop Portions of some slides adapted from “An Interactive Introduction to Open. GL Programming”, D. Shreiner, E. Angel, V. Shreiner, SIGGRAPH 2001 course

Simple Open. GL program (no animation) #include <stdio. h> #include <GL/glut. h> void main(int argc, char** argv) { glut. Init(&argc, argv); glut. Init. Display. Mode(GLUT_RGB | GLUT_DOUBLE); glut. Init. Window. Size(100, 100); glut. Create. Window(“hello”); init(); // set Open. GL states, variables glut. Display. Func(display); glut. Main. Loop(); // register callback routines // enter event-driven loop } adapted from E. Angel

Initialization • glut. Init: Pass command-line flags on to GLUT • glut. Init. Display. Mode: OR together bit masks to set modes on pixel type (indexed vs. true color), buffering, etc. • glut. Init. Window. Size, glut. Create. Window: Set drawing window attributes, then make it • init(): Set Open. GL state, program variables – Use GL types/typedefs GLfloat, GLint, GL_TRUE, GL_FALSE, etc. for cross-platform compatibility void init() { gl. Clear. Color(0. 0, 0. 0); gl. Matrix. Mode(GL_MODELVIEW); gl. Load. Identity(); glu. Ortho 2 D(0, right, 0, top); } sets “units” of subsequent draw commands

Open. GL screen coordinates • Bottom left corner is origin • glu. Ortho 2 D() sets the units of the screen system coordinate from Hill • glu. Ortho 2 D(0, w, 0, h) means the coordinates are in units of pixels • glu. Ortho 2 D(0, 1, 0, 1) means the coordinates are in units of “fractions of window size” (regardless of actual window size)

Example: Specifying the center of a square glu. Ortho 2 D(0, 640, 0, 480) (320, 240)

Example: Specifying the center of a square glu. Ortho 2 D(0, 1, 0, 1) 1 (0. 5, 0. 5) 1

Simple Open. GL program #include <stdio. h> #include <GL/glut. h> void main(int argc, char** argv) { glut. Init(&argc, argv); glut. Init. Display. Mode(GLUT_RGB | GLUT_DOUBLE); glut. Init. Window. Size(100, 100); glut. Create. Window(“hello”); init(); // set Open. GL states, variables glut. Display. Func(display); glut. Main. Loop(); // register callback routines // enter event-driven loop } adapted from E. Angel

Rendering Steps (no animation) • In function registered with glut. Display. Func(): 1. Clear window: gl. Clear(GL_COLOR_BUFFER_BIT) 2. Draw shapes • • Set colors, patterns, point/line sizes Specify type of geometric primitive(s) and list vertices 3. Make offscreen draw buffer the display buffer with glut. Swap. Buffers()

Callback registration functions • • • Render Key down in window Key up in window Button press/release Mouse motion (with button down) • Window reshaping • Nothing happening glut. Display. Func() glut. Keyboard. Up. Func() glut. Mouse. Func() glut. Motion. Func() glut. Resize. Func() glut. Idle. Func() • Passive motion, other input devices, etc. : Look these up on GLUT reference pages on web

Example: Keyboard callback • What key has been pressed and where the cursor is: glut. Keyboard. Func(keyboard); void keyboard(unsigned char key, int x, int y) { switch(key) { case ‘q’ : case ‘Q’ : exit(1); break; case ‘r’ : case ‘R’ : rotate_mode = GL_TRUE; break; } }

Example: Mouse button callback • Which mouse button, where, and has it been pressed or released: glut. Mouse. Func(mouse); void mouse(int button, int state, int x, int y) { if (button == GLUT_LEFT_BUTTON) { if (state == GLUT_DOWN) { left_down = TRUE; mouse_x = x; mouse_y = y; } else if (state == GLUT_UP) left_down = FALSE; } }

Example: Idle callback • Use for animation and continuous update glut. Idle. Func(idle); void idle(void) { // change position variables, etc. t += dt; } // call glut. Display. Func() callback ASAP glut. Post. Redisplay();

Open. GL Geometric Primitives

Specifying Geometric Primitives • Primitives are specified using gl. Begin(prim. Type); . . . gl. End(); – prim. Type determines how vertices are combined GLfloat red, green, blue; GLfloat x, y; gl. Begin(prim. Type); for (i = 0; i < n. Verts; i++) { gl. Color 3 f(red, green, blue); gl. Vertex 2 f(x, y); . . . // change coord. values } gl. End();

Open. GL Command Formats gl. Vertex 3 fv( v ) gl. Color 3 fv( v ) Number of components 2 - (x, y) 3 - (x, y, z), (r, g, b) 4 - (x, y, z, w), (r, g, b, a) Data Type b ub s us i ui f d - byte unsigned byte short unsigned short int unsigned int float double Vector omit “v” for scalar form– e. g. , gl. Vertex 2 f(x, y) gl. Color 3 f(r, g, b)

Drawing: Miscellaneous • gl. Color(): Range is [0, 1] for each color channel for gl. Color 3 f(); [0, 255] for gl. Color 3 ub() • Can set persistent “pen size” outside of gl. Begin()/ gl. End() – gl. Point. Size(GLfloat size) – gl. Line. Width(GLfloat width) • gl. Rect(x 1, y 1, x 2, y 2) specifying opposite corners of rectangle is equivalent to GL_POLYGON with four vertices listed (i. e. , filled)

Why We Need Transformations • What can we do so far? – Draw 2 -D shapes by exhaustively listing their vertices • Something missing: – The ability to specify the intrinsic shape of an object independently of its location, scale, or orientation

Example: Shape vs. Viewing Issues

Transformations for modeling, viewing 1. Make object model in canonical coordinate frame 2. Transform object with appropriate translation, scaling, rotation as needed • Also useful for building complex objects from simpler parts from Hill

2 -D Transformations: Open. GL • 2 -D transformation functions* – gl. Translatef(x, y, 0) – gl. Scalef(sx, sy, 0) – Negative scaling is reflection – gl. Rotatef(theta, 0, 0, 1) (angle in degrees; direction is counterclockwise) • Notes – Set gl. Matrix. Mode(GL_MODELVIEW) first – Transformations should be specified before drawing commands to be affected – Multiple transformations are applied in reverse order *Technically, these are 3 -D

Example: 2 -D Translation in Open. GL Two ways to do this: gl. Rectf(. 25, . 75, . 75); gl. Translatef(. 5, 0); gl. Rectf(-. 25, . 25); Assuming glu. Ortho 2 D(0, 1, 0, 1)

Example: Order of transformations gl. Rotatef(45, 0, 0, 1); gl. Translatef(. 5, 0); gl. Rectf(-. 25, . 25); gl. Translatef(. 5, 0); gl. Rotatef(45, 0, 0, 1); gl. Rectf(-. 25, . 25); Remember: Order of application is backwards from drawing commands

Why does the order of transformations seem backwards? • Because transformations are implemented with matrix multiplications • Thus the rules of linear algebra dictate that T x R x p means “rotate p, then translate it” • Can also think of it functionally: T(R(p))

Limiting “Scope” of Transformations • Transformations are ordinarily applied to all subsequent draw commands • To limit effects, use push/pop functions: gl. Push. Matrix(); // transform // draw affected by transform gl. Pop. Matrix(); // draw unaffected by transform

Example: Pushing, popping transformations gl. Push. Matrix(); gl. Translatef(. 5, 0); gl. Rotatef(45, 0, 0, 1); gl. Rectf(-. 25, . 25); gl. Pop. Matrix(); gl. Push. Matrix(); // draw axis lines gl. Pop. Matrix();

What is Texture Mapping? • Spatially-varying modification of surface appearance at the pixel level • Characteristics – Color – Shininess – Transparency – Bumpiness – Etc. • “Sprite” when on polygon with no 3 -D from Hill

Texture mapping applications: Billboards from Akenine-Moller & Haines from www. massal. net/projects Also called ”impostors”: Image aligned polygons in 3 -D

Open. GL texturing steps (Red book) 1. Create a texture object and specify a texture for that object 2. Indicate how the texture is to be applied to each pixel 3. Enable texture mapping with gl. Enable(GL_TEXTURE_2 D) 4. Draw the scene, supplying both texture and geometric coordinates 5. Open. GL does many things with globals and side effects, so it can be confusing!

Create Texture Object • From where? – Create programmatically (aka “procedurally” -see Red Book Chap. 9 checker. c) – Load image from file (e. g. , load_ppm() in Sprite. cpp) • Name it – // Get unused “names” – not mandatory gl. Gen. Textures(GLsizei n, GLuint *textures) – // Create texture object w/ default params (or switch to existing one) gl. Bind. Texture(GLenum target, GLuint texture) • // Store data in bound texture object (no ref because it’s global) gl. Tex. Image 2 D( GLenum target, GLint level, GLint internal. Format, GLsizei width, GLsizei height, GLint border, GLenum format, GLenum type, const GLvoid *pixels)

Rasterization: Texture application modes • decal: Overwrite object pixel with texel • modulate: Combine object pixel with texel via multiplication – Need this for multitexturing (i. e. , lightmaps) courtesy of Microsoft

Texture mapping applications: Lightmaps + = courtesy of K. Miller

Open. GL: Texture application modes • gl. Tex. Env(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, param), where param is one of: – GL_REPLACE: Just overwrite surface pixel – GL_DECAL: Use alpha values of surface pixel and texel to blend in standard way – GL_MODULATE: Multiply surface pixel and texel colors – GL_BLEND: Blend surface and texel colors with GL_TEXTURE_ENV_COLOR (see gl. Tex. Env() man page for details)

Alpha Channel • Remember gl. Color 4 f(r, g, b, a)? • a is called the alpha channel and is used to specify transparency when blending textures • Used for overlapping sprites in Game! code – load_ppm() sets full transparency when image pixel color is a particular color, full opacity otherwise

Open. GL: Enabling and Drawing • • – – • – To draw textured shape, texturing must first be enabled: gl. Enable(GL_TEXTURE_2 D) Load current texture image with gl. Tex. Image 2 D() Width, height must be powers of 2 (plus 2 if border is used) Only one texture current; faster to change textures by preloading all and switching with gl. Bind. Texture() rather than reloading each time (this is what Sprite. cpp does) Assign texture coordinates gl. Tex. Coord() (s, t) to vertices with Similar to gl. Color() command—sets a property for subsequent vertices that holds until it is changed

Robins’ texture tutor