# INTRODUCTION

TO

COMPUTER

GRAPHIC S

Geometric Modeling; The Graphics Framework; Introduction to OpenGL

credits: van Dam,R. Hwa

September 6-8, 2011

OpenGL 1/54

INTRODUCTION

TO

COMPUTER

GRAPHIC S

Recap
•  CG markets: entertainment and science
–  same tools (hw & sw), different apps –  come talk to me about a Directed Study

–  sample-based graphics (pixels, image processing) –  geometry-based graphics

•  Geometric modeling
–  primitives –  decomposition of a model

credits: van Dam,R. Hwa

September 6-8, 2011

OpenGL 2/54

INTRODUCTION

TO

COMPUTER

GRAPHIC S

Decomposition of a Geometric Model
•  Divide and Conquer •  Hierarchy of geometrical components •  Reduction to primitives (e.g., spheres, cubes, etc.) •  Simple vs. not-so-simple elements (nail vs. screw)

composition decomposition

credits: van Dam,R. Hwa

September 6-8, 2011

OpenGL 3/54

INTRODUCTION

TO

COMPUTER

GRAPHIC S

Hierarchical (Tree) Diagram of Nail
•  Object to be modeled is (visually) analyzed, and then decomposed into collections of primitive shapes. Tree diagram provides visual method of expressing “composed of” relationships of model

•

Nail Head Body (cylinder) Shaft Point (cylinder) (cone) tree diagram
•  •

root node

leaf nodes

Such diagrams are part of 3D program interfaces (e.g., 3D Studio MAX, Maya) As data structure to be rendered, it is called a scenegraph

credits: van Dam,R. Hwa

September 6-8, 2011

OpenGL 4/54

g. Done with “affine transformations. credits: van Dam.INTRODUCTION TO COMPUTER GRAPHIC S Composition of a Geometric Model Translate Translate and Scale Translate and Rotate Primitives in their own modeling coordinate system Composition in world (root) coordinate system •  Primitives created in decomposition process must be assembled to create final object. S (as in above example). R. Constructive Solid Geometry – CSG -. 2011 OpenGL 5/54 .uses Boolean operators).” T.R.. Hwa September 6-8. •  Other composition operators exist (e.

Hwa September 6-8. 2011 OpenGL 6/54 .R.INTRODUCTION TO COMPUTER GRAPHIC S 2D Primitives Line Polyline Y Y X X Polygon Y Y Circle X X credits: van Dam.

Hwa September 6-8.R. 2011 OpenGL 7/54 .INTRODUCTION TO COMPUTER GRAPHIC S Curves •  Piecewise linear approximation •  Splines: higher-order polynomials –  piecewise curvilinear approximation French Curves Draftman’s Spline Mathematical Splines (“duck”) Natural Cubic Spline: credits: van Dam.

Hwa September 6-8.R.INTRODUCTION TO COMPUTER GRAPHIC S Example 3D Primitives Polyline Polyhedron Sphere Patch (spline boundary curve) credits: van Dam. 2011 OpenGL 8/54 .

INTRODUCTION TO COMPUTER GRAPHIC S What Kind of Math do We Need? Cartesian Coordinates •  Typically modeling space is floating point. based on raster scan (0. screen space is integer x. y Cartesian grid Integer Grid NB:Often.R. 2011 OpenGL 9/54 . Hwa September 6-8. screen coordinates are measured top to bottom.0) credits: van Dam.

indeed dominant •  •  application model (objects) Application program Graphics Library (GL) Graphics System credits: van Dam. Hwa September 6-8. OpenGL) is intermediary between application and display hardware (Graphics System) Application program maps application objects to views (images) of those objects by calling on graphics library This hardware and software framework is more than 4 decades old but is still useful. 2011 OpenGL 10/54 .R.INTRODUCTION TO COMPUTER GRAPHIC S Conceptual Framework for Interactive Graphics •  Graphics library/package (e..g.

2011 OpenGL 11/54 .INTRODUCTION TO COMPUTER GRAPHIC S 2D Hw/Sw Topics a) Display Hardware: Raster scan vs. simple types of animation c) BitBlt/RasterOp for operating on blocks of pixels credits: van Dam. Vector b) Color Tables –  indirect specification of (pseudo) color –  color correction.R. Hwa September 6-8.

2011 OpenGL 12/54 . bitmap. Hwa Filled primitives September 6-8.R. random-scan) –  still used in some plotters Ideal Drawing Vector Drawing •  Raster (TV. used in displays and laser printers Raster Outline primitives credits: van Dam. stroke. pixmap).INTRODUCTION TO COMPUTER GRAPHIC S a) Graphics Display Hardware •  Vector (calligraphic.

through memory operations Video controller draws all scan-lines at consistent > 60 Hz. or bitmaps) in a frame buffer. 2011 OpenGL 13/54 . also known as bitmap buffer.INTRODUCTION TO COMPUTER GRAPHIC S 2D Raster Architecture Frame buffer Display •  Raster displays store images (pixmaps. or refresh buffer The frame buffer is a chunk of memory located either in separate hardware (VRAM) or in CPU’s main memory (DRAM) The frame buffer can be accessed directly. Hwa September 6-8. –  separates update rate of the frame buffer and refresh rate of the display –  contains Color-Table •  •  •  credits: van Dam.R.

2011 OpenGL 14/54 .R.INTRODUCTION TO COMPUTER GRAPHIC S b) Color Tables: 1-bit vs. Hwa September 6-8. n-bit Display •  2n intensities or colors credits: van Dam.

7 million.R. some other 2n in another image –  224 = approx.INTRODUCTION TO COMPUTER GRAPHIC S Image Display System Look-up Table •  •  Any specific 2n colors may be inadequate (n may be as low as 16 in low-end systems) Look-up table allows 2n colors out of 224 colors to be used in one image. 16. exceeds eye’s ability to discriminate (somewhere between 7-10 million) •  Color table is resource managed (usually) by window manager credits: van Dam. Hwa September 6-8. 2011 OpenGL 15/54 .

G.INTRODUCTION TO COMPUTER GRAPHIC S Color Look–Up Table Operation •  Pixel value is indexed to color look up table (CLUT) where color is stored. each color has its own 8-bit CLUT (0-255) CLUT allows variety of effects –  fast image changes: change table rather than stored image –  multiple images: select or composite/blend –  animation hack •  •  •  credits: van Dam. 3 x 8 bits for R. B.R. Hwa September 6-8. 2011 OpenGL 16/54 . 24 bits are used CLUT look-up done at video rates In 24-bit “true” color systems. Here we use only 12 bits (4bits per color) for clarity – typically.

Hwa September 6-8. to move/scroll windows on screen •  RasterOp (Source. Destination)  Destination •  In some implementations S and D need not be same size pixmap stored in frame buffer credits: van Dam.g.INTRODUCTION TO COMPUTER GRAPHIC S c) BitBlt/RasterOp (1/3) •  Logically operate on each pixel in rectangular source and destination regions in same or different pixmaps to achieve dynamics. e. 2011 OpenGL 17/54 .R..

D): S is non-destructively “added” to D.R.INTRODUCTION TO COMPUTER GRAPHIC S BitBlt/RasterOp •  •  (2/3) AND (S. used for painting. Hwa September 6-8. transparent and “kerned” characters (where characters extend beyond their boxes) Here’s how you can use them: Let’s say you want to add some game sprites to background… 1. 1 (white) AND anything is anything 2. 2011 OpenGL 18/54 . Mask out with black AND = 0 (black) AND anything is 0.D): S can mask out pixels in D OR (S. Add sprites in OR = 0 OR anything is anything credits: van Dam.

i.D): S destructively replaces D. Hwa September 6-8. scroll Copy (S.R. is deleted and copied on top of D (also called Move).. 2011 OpenGL 19/54 . used in 1-bit systems for cheap cursors: S XOR (S XOR D) = D 0 = W. icons.D) as above. 1 = B XOR S XOR S •  D D’ D’ D Note: effects in color systems for all but replace may be weird credits: van Dam. but S is not deleted XOR (S.D) S selectively inverts D.INTRODUCTION TO COMPUTER GRAPHIC S More BitBlt/RasterOp •  •  •  (3/3) Replace (S.e. used for making opaque characters.

INTRODUCTION TO COMPUTER GRAPHIC S Recap •  Geometry-based paradigm (model decomposition.R. raster. 2011 OpenGL 20/54 . the video controller. the framebuffer. the display –  color-tables –  BitBlt operation Application program Graphics Library (GL) Graphics System credits: van Dam. Hwa September 6-8. scenegraphs) •  The Graphics Framework •  2D hw/sw select topics –  display hw: vector vs.

2011 OpenGL 21/54 . Hwa September 6-8.R.INTRODUCTION TO COMPUTER GRAPHIC S Next: the Graphics Library Application model Application program Graphics Library (GL) Graphics System credits: van Dam.

2011 OpenGL 22/54 . –  retained mode: library compiles and displays from scenegraph.R. give the library a pointer to a bunch of Vertex data and tell it to render from there credits: van Dam. X3D™ provides representations and support for: –  primitives –  attributes •  color •  line style •  material properties for 3D –  lights –  transformations •  immediate mode vs. Hwa September 6-8. retained mode –  immediate mode: no stored representation. and application must completely draw each frame. requires at least one function call for every vertex to be drawn. simple to use but slow.INTRODUCTION TO COMPUTER GRAPHIC S Graphics Library •  •  examples: OpenGL™. package holds only attribute state. DirectX™.

normals. R. Hwa September 6. Windows. iPhone.INTRODUCTION TO COMPUTER GRAPHICS What is OpenGL? •  The Open Graphics Library –  3-D graphics API specification –  “a software interface to graphics hardware”1 –  raster graphics library •  pass in vertices. 2011 OpenGL 23/54 . PSP… •  specification publicly available 1 “The OpenGL Graphics System: A Speciﬁcation” Version 3. and other scene data •  get pixels out –  industry standard •  supported across many platforms –  Mac OS.0 credits: van Dam. Linux.

-1.0. -1. 1. processes commands –  note: client and server usually on the same computer. Hwa September 6. 1) vertex (1. 1) vertex (-1. -1) vertex (-1. R.INTRODUCTION TO COMPUTER GRAPHICS OpenGL Architecture (1/2) •  OpenGL uses a client-server model –  client sends commands to the server –  server interprets. -1. 1) end triangle <scan-converts the given triangle with normal (0. -1.-1) at all vertices> OpenGL credits: van Dam. 0. 2011 OpenGL 24/54 . -1. but need not be •  your program = client •  OpenGL = server –  example interaction: program begin triangle normal (0.

2011 OpenGL 25/54 . this makes some sense – want to have precise control –  procedural model •  usually accessed through a plain C API •  NOT object-oriented at all (though this changes gradually in OpenGL 3. it remains in effect until changed •  considering we are working with hardware. Hwa September 6. R. etc –  state does not change until explicitly set •  once some state is set. lights. textures.1 and beyond) –  can be cumbersome if you are used to working with object-oriented systems •  one line can affect how all subsequent code executes •  sometimes difficult to encapsulate functionality •  have to be mindful of default state as well credits: van Dam.INTRODUCTION TO COMPUTER GRAPHICS OpenGL Architecture (2/2) •  OpenGL is state-full and procedural –  the current OpenGL state (collectively called a context) contains data describing how rendering should proceed •  ex: current color.

D3D development is tightly integrated with Visual Studio and other powerful tools •  –  Direct3D provides a much more object-oriented API than GL. 2011 OpenGL 26/54 . while Direct3D is a proprietary API written by Microsoft. they provide basically the same functionality. R. –  Still. –  Overall. Hwa September 6. at the end of the day. Direct3D •  •  Direct3D is Microsoft’s low-level 3D graphics API and plays a similar role to OpenGL in the graphics pipeline. (both used in the games industry. it generally tries to abstract away details of dealing with the hardware.) credits: van Dam.INTRODUCTION TO COMPUTER GRAPHICS OpenGL vs. –  Direct3D exposes the programmer to the graphics hardware much more than OpenGL does. OpenGL is more widely used than Direct3D due to its simplicity and availability on a wider range of platforms. D3D’s tight coupling with windows has its advantages •  Development environment is standardized and robust. Direct3D on the other hand. allows much more fine-grained control but sacrifices some ease of use to do so. Differences –  OpenGL is a specification with several free implementations on different platforms. While OpenGL certainly supports hardware acceleration. –  For Windows users. however OpenGL used also w/out fail in scivis. many would argue Direct3D is clunkier and harder to use than OpenGL. Though the APIs feel somewhat different.

platform independent –  hides details about basic window operations and context creation –  a simple framework for writing OpenGL applications independent of any particular platform credits: van Dam. Hwa September 6-8. polygons) –  sets up an environment for graphical programming •  May be useful to think of it as a state machine •  GLU (OpenGL Utility Library) –  higher-level features (e. lines.R. and GLUT •  OpenGL (Graphics Library) –  offers a platform-independent software interface with graphics hardware –  supports basic geometric primitives (points.g.INTRODUCTION TO COMPUTER GRAPHIC S OpenGL. 2011 OpenGL 27/54 . curved surfaces) built out of basic OpenGL functions •  GLUT (OpenGL Utility Toolkit) –  separate library by Mark Kilgard. GLU.

300). glutCreateWindow("GLUT Skeleton"). glutInitWindowPosition(0. 2011 OpenGL 28/54 . //…initialize callbacks here //… my_setup().0). } credits: van Dam. char **argv) { glutInit( &argc. glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB).h> … int main(int argc. return(0).INTRODUCTION TO COMPUTER GRAPHIC S Anatomy of an OpenGL program #include <GL/glut. glutInitWindowSize(400.R. glutMainLoop(). Hwa September 6-8. argv ).h> #include <stdio.

R. swap buffers credits: van Dam. 2011 OpenGL 29/54 . Hwa September 6-8.INTRODUCTION TO COMPUTER GRAPHIC S Single vs. Double Buffering •  Use two buffers (two chunks of memory) •  Draw always on the back buffer •  When done drawing.

R.0). GLUT_RGBA. //…initialize callbacks here //… my_setup(). glutMainLoop(). GLUT_INDEX •  GLUT_DEPTH credits: van Dam. char **argv) { glutInit( &argc. glutInitWindowPosition(0. 300). } •  GLUT_DOUBLE. return(0). argv ). glutInitWindowSize(400.h> … int main(int argc.h> #include <stdio. glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB). 2011 OpenGL 30/54 . glutCreateWindow("GLUT Skeleton"). Hwa September 6-8. GLUT_SINGLE •  GLUT_RGB.INTRODUCTION TO COMPUTER GRAPHIC S glutInitDisplayMode() #include <GL/glut.

h> #include <stdio. glutMainLoop().h> … int main(int argc. return(0).0). glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB). argv ). //…initialize callbacks here //… my_setup().R. glutInitWindowPosition(0. 2011 OpenGL 31/54 . glutInitWindowSize(400. char **argv) { glutInit( &argc. Hwa September 6-8. 300). glutCreateWindow("GLUT Skeleton").INTRODUCTION TO COMPUTER GRAPHIC S glutInitWindow*() #include <GL/glut. } credits: van Dam.

glutInitWindowPosition(0.INTRODUCTION TO COMPUTER GRAPHIC S glutCreateWindow() #include <GL/glut.0). Hwa September 6-8. glutCreateWindow("GLUT Skeleton"). } •  glutCreateWindow merely ‘requests’ a window credits: van Dam. //…initialize callbacks here //… my_setup(). char **argv) { glutInit( &argc.h> … int main(int argc. glutMainLoop(). argv ). return(0). 300).R. glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB). 2011 OpenGL 32/54 .h> #include <stdio. glutInitWindowSize(400.

h> … int main(int argc.0). glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB).INTRODUCTION TO COMPUTER GRAPHIC S Anatomy of an OpenGL program #include <GL/glut. char **argv) { glutInit( &argc. 300). glutMainLoop(). glutInitWindowSize(400.R. return(0). 2011 OpenGL 33/54 . glutInitWindowPosition(0. argv ). Hwa September 6-8. } credits: van Dam.h> #include <stdio. //…initialize callbacks here //… my_setup(). glutCreateWindow("GLUT Skeleton").

g. –  when an interesting event occurs. overlapping-window removed etc) credits: van Dam. keyboard etc) –  system-generated (window creation. keyboard. waiting for things to happen –  e. etc..R. mouse inputs.INTRODUCTION TO COMPUTER GRAPHIC S glutMainLoop() •  Event-Driven Programming –  Interactive graphics program are typically event-driven •  Main program goes into a loop. 2011 OpenGL 34/54 . callback function returns control to program •  The ‘events’ can be –  user-input generated (mouse. Hwa September 6-8.

2011 OpenGL 35/54 .R. Hwa September 6-8.INTRODUCTION TO COMPUTER GRAPHIC S Callbacks •  OpenGL handles events through the mechanism of callbacks: •  associate events with procedures •  procedure gets “called-back” whenever its associated event takes place •  Every OpenGL program must handle the display event credits: van Dam.

glutIdleFunc( my_idle ).INTRODUCTION TO COMPUTER GRAPHIC S Common Callbacks •  Input events: –  glutMouseFunc –  glutKeyboardFunc •  System events: –  glutDisplayFunc (!!!) –  glutReshapeFunc –  glutTimerFunc –  glutIdleFunc •  Example: setting up callbacks glutDisplayFunc( my_display ). Hwa September 6-8.R. credits: van Dam. 2011 OpenGL 36/54 .

1) .0. Hwa September 6-8.75).95. glColor3f(0. glVertex2f(-0.55). } return . glVertex2f(0. glutSwapBuffers().INTRODUCTION TO COMPUTER GRAPHIC S Example my_display() void my_display(void) { //insert your drawing code always here glClear(GL_COLOR_BUFFER_BIT) . 2011 OpenGL 37/54 . -0.75).25. glVertex2f(-0. credits: van Dam. 0.R. glEnd(). -0. glBegin(GL_POLYGON).55). glVertex2f(0.95. 0.25.

Hwa September 6-8. 2011 OpenGL 38/54 .INTRODUCTION TO COMPUTER GRAPHIC S The Callback for Displaying •  my_display gets called: –  at initial creation of the window –  when window becomes unobstructed –  when the program requests it •  glutPostRedisplay() credits: van Dam.R.

7).0. glColor3f(0.1) .INTRODUCTION TO COMPUTER GRAPHIC S A Simple Display Function void my_display(void) { glClear(GL_COLOR_BUFFER_BIT) .3). glBegin(GL_POLYGON).9. glVertex2f(0. glVertex2f(-0. Hwa September 6-8. glutSwapBuffers().7).1. glEnd(). return .3).1.9. 2011 OpenGL 39/54 .R. glVertex2f(-0. 0. } credits: van Dam. glVertex2f(0. 0. -0. -0.

INTRODUCTION TO COMPUTER GRAPHIC S What Goes Between glBegin and glEnd •  Specification of mode –  GL_POINTS –  GL_LINES.R. GL_TRIANGLE_STRIP. GL_LINE_LOOP –  GL_POLYGON –  GL_TRIANGLES. or double •  Attributes –  Color –  Point size –  Line width. Hwa September 6-8. float. style –  Patterns for filled polygons credits: van Dam. GL_TRIANGLE_FAN –  GL_QUADS. GL_QUADS_STRIP •  Declaration of vertices –  glVertex{2|3|4}{i|f|d}[v] –  integer. GL_LINE_STRIP. 2011 OpenGL 40/54 .

0.9.INTRODUCTION TO COMPUTER GRAPHIC S How does the output change with respect to different modes? void my_display(void) { glClear(GL_COLOR_BUFFER_BIT) .1) . Hwa September 6-8.-0. glVertex2f(-0.5. 0. glVertex2f(-0.9). 0.R.-0. glVertex2f( 0.2).9). glColor3f(0. glVertex2f( 0.0. glutSwapBuffers(). } credits: van Dam. 0.5. glEnd(). glVertex2f( 0.9. 2011 OpenGL 41/54 .2).9). return . glBegin(??).

Hwa . GLUT_DOWN –  x.R. int state. int x.INTRODUCTION TO COMPUTER GRAPHIC S Mouse Inputs •  Associate mouse events with my_mouse procedure: glutMouseFunc(my_mouse) •  Write your own code inside my-mouse: void my_mouse(int button. int y) where –  button can take these values: GLUT_LEFT_BUTTON. GLUT_RIGHT_BUTTON –  state: GLUT_UP. y: •  position in window (in pixels) with origin at upper left September 6-8. GLUT_MIDDLE_BUTTON. 2011 OpenGL 42/54 credits: van Dam.

100). 2011 OpenGL 43/54 . -0. glutInitWindowPosition(0.R.1.7).1. } •  What is the expected image output? credits: van Dam. 0. glVertex2f(-0. Hwa September 6-8.INTRODUCTION TO COMPUTER GRAPHIC S Drawing Space void glut_setup(void) { … glutInitWindowSize(400. glVertex2f(-0. glutSwapBuffers().9. glVertex2f(0.7).9. return .3). 0.3). glVertex2f(0. … return . … glutDisplayFunc(my_display). -0. } void my_display(void) { … glBegin(GL_POLYGON).0). glEnd().

2011 OpenGL 44/54 . Hwa September 6-8.INTRODUCTION TO COMPUTER GRAPHIC S Viewport •  Defines where in the window to display the image •  Uses within window coordinate system (pixel unit. origin at lower left corner) •  OpenGL default: set to be the entire window –  default window reshape: set viewport to whole window credits: van Dam.R.

origin_y. width.height). •  note that origin is at the lower left corner credits: van Dam.INTRODUCTION TO COMPUTER GRAPHIC S Adding-in a Viewport Function •  Define callback: my_reshape(w. viewport will be set to whole window again –  In the function my_reshape call: glViewport(origin_x. 2011 OpenGL 45/54 . Hwa September 6-8.h) –  Otherwise.R.

this is done with the projection matrix glMatrixMode (GL_PROJECTION).top). Hwa September 6-8.R.right.bottom.1] •  Graphics system does the mapping –  in OpenGL. gluOrtho2D(left. glLoadIdentity().INTRODUCTION TO COMPUTER GRAPHIC S Define User-Friendly Coordinate System •  More intuitive instead of square in the interval of [-1. credits: van Dam. 2011 OpenGL 46/54 .

credits: van Dam. glVertex2i(1.2).0. glViewPort(0.10). glutInitWindowPosition(0. Hwa September 6-8. glVertex2i(7.2). glEnd().8.12).500).500. glutInitWindowSize(800. 2011 OpenGL 47/54 . gluOrtho2D(2.300). glVertex2i(4.R.5.0).INTRODUCTION TO COMPUTER GRAPHIC S Changes of Co-Ordinates glBegin(GL_POLYGON).

R. Hwa September 6-8. *pixel_array) – write a block of pixels to the frame buffer credits: van Dam. y position where we want to write some pixels –  glDrawPixels( ….Initialize array with original image values 3.Write array to Frame Buffer: –  glRasterPos( x.Perform desired operations on pixel array 4. 2011 OpenGL 48/54 . y ) – specify x.Allocate space for pixel array –  1 x width x height x sizeof(pixel) array of pixels (grayscale image) or –  3 x width x height sizeof(pixel) array (RGB image) or –  4 x width x height array sizeof(pixel) (RGBA image) etc 2.INTRODUCTION TO COMPUTER GRAPHIC S Bonus: Operating on the Frame Buffer Steps: 1.