1 / 39

Lecture 2 Graphics programming

Lecture 2 Graphics programming. The Sierpinski gasket program OpenGL API Primitives and geometry Color RGB and indexed color Viewing view volumes and orthographic projection Windows Control functions . The Sierpinski gasket. History

sabine
Download Presentation

Lecture 2 Graphics programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lecture 2Graphics programming • The Sierpinski gasket program • OpenGL API • Primitives and geometry • Color • RGB and indexed color • Viewing • view volumes and orthographic projection • Windows • Control functions

  2. The Sierpinski gasket • History Mandelbrot (1977) dubs his construction of Sierpinski’s (1915) curve a gasket • Construction 1. Start with triangle (3 vertices) 2. Randomly select a point inside 3. Randomly choose one of the vertices 4. Find the point halfway between the midpoint the initial point and the vertex and mark it 5. Replace the initial point with the halfway pt 6. Return to step 3.

  3. Gasket.c • We will be using gasket.c to introduce OpenGL • You will need an OpenGL reference, there is good documentation at http://www.opengl.org/Documentation/Documentation.html

  4. Gasket.c • void main(int argc, char** argv) { • /* Standard GLUT initialization */ • glutInit(&argc,argv); • glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); /* default */ • glutInitWindowSize(500,500); /* 500 x 500 pixel window */ • glutInitWindowPosition(0,0); /* place window top left on display */ • glutCreateWindow("Sierpinski Gasket"); /* window title */ • glutDisplayFunc(display); /* invoked when display updated */ • myinit(); /* set attributes */ • glutMainLoop(); /* enter event loop */ • }

  5. Gasket.c • void myinit(void) { • /* attributes */ • glClearColor(1.0, 1.0, 1.0, 1.0); /* white background */ • glColor3f(1.0, 0.0, 0.0); /* draw in red */ • /* set up viewing */ • /* 500 x 500 window with origin lower left */ • glMatrixMode(GL_PROJECTION); • glLoadIdentity(); • gluOrtho2D(0.0, 500.0, 0.0, 500.0); • glMatrixMode(GL_MODELVIEW); • }

  6. Gasket.c • void display( void ) { • /* define a point data type */ • typedef GLfloat point2[2]; • /* define an arbitrary initial triangle */ • point2 vertices[3]={{0.0,0.0},{250.0,500.0},{500.0,0.0}}; • int i, j, k; • int rand(); /* standard random number generator */ • point2 p ={75.0,50.0}; /* arbitrary initial point inside triangle */ • glClear(GL_COLOR_BUFFER_BIT); /*clear the window */

  7. Gasket.c • /* compute and plot 5000 new pts */ • for( k=0; k<5000; k++) { • j=rand()%3; /* pick a vertex at random */ • /* compute pt halfway between selected vertex & old point */ • p[0] = (p[0]+vertices[j][0])/2.0; • p[1] = (p[1]+vertices[j][1])/2.0; • glBegin(GL_POINTS); • glVertex2fv(p); /* plot new point */ • glEnd(); • }

  8. Gasket.c • glFlush(); /* clear buffers */ • } /* end display() */

  9. Sierpinski’s gasket

  10. Sphereflake *http://www.acm.org/tog/editors/erich/

  11. Drawing • To draw a point from (5,10) to (10,20) • moveto(5,10); lineto(10,20); /* toy example*/ • Use points, or vertices (point on object geom) • p = (x,y) same as p = (x,y,0) or p = [ x, y, z] • glVertexnt[v] • n is dimension (2,3,4) • t is type (int, float, double) • v is pointer to array (instead of arg list) • glVertex2i (GLint x, GLint y); • glVertex3fv (Glfloat vertex[3]);

  12. OpenGL API functions • We can specify • primitives (points, polys, text) • attributes (color, typeface, line thickness) • cameras (position, orientation, projection) • transformations (rotate, translate, scale) • input (keyboard, mouse) • system control (windows, errors)

  13. OpenGL packages • GL - OpenGL library • main package • GLU - Graphics utility library • common objects • map coords between screen and object space • GLUT- GL utility tool kit • portable API for windowing environments

  14. Unfilled primitives • Individual points (GL_POINTS) • Line segments (pairs of pts) (GL_LINES) • Polylines (GL_LINE_STRIP) • Closed polylines (GL_LINE_LOOP)

  15. Filled primitives • Polygons (GL_POLYGON, GL_ TRIANGLE, GL_QUADS) • polygons are very important in CG! • used as performance metric • triangles are used to approximate most shapes because they’re convex and planar • convex, concave, holes, self-crossing • default is filled, for edge, draw twice • Strips (GL_ TRIANGLE _STRIP, GL_QUAD_STRIP)

  16. Geometry • Other? • OpenGL supports primitive types • How about spheres and curved surfaces? • Sometimes a mathematical representation will suffice, other times we will tesselate • What about basic cubes? • The answer is...

  17. Questions • 1. In what colors are we drawing? • 2. Where on the screen does our image appear? • 3. How large will the image be? • 4. How do we create an area of the screen - a window - for our image? • 5. How much of our infinite pad will appear on the screen? • 6. How long will the image remain on the screen?

  18. Questions • 1. In what colors are we drawing? • 2. Where on the screen does our image appear? • 3. How large will the image be? • 4. How do we create an area of the screen - a window - for our image? • 5. How much of our infinite pad will appear on the screen? • 6. How long will the image remain on the screen?

  19. What is color? • Light in 350 to 780mn in EM spectrum • Color is a combination of frequencies (mostly) • I.e. a function of wavelength C()

  20. How do we display color? • Obviously, we cannot match all frequencies • We cannot even discern all frequencies! • Two colors, C(), that match perceptually are called metamers, we can discern about 382,720 different colors, or metamers • ~128 different hues (fully saturated colors) • ~130 different saturation levels (e.g. greyscale) • 23 shades (saturation changes given fixed hue and lightness, this is an upper bound)

  21. Perceptual term Hue --------------------> Saturation -------------> Lightness --------------> (reflecting objects) Brightness -------------> (self-luminous objects) Colorimetry Dominant wavelength (wavelength of color) Excitation purity (saturation of color, or pro-portion of pure and white light) Luminance (amount/intensity of light) Luminance Psychophysics vs. physics

  22. How do we display color? • On a CRT, 14 bits or 16, 384 colors suffice for most images • 214 =16,384 • True-color uses 24 bits, which means that about 16 million colors are available • 224 =~16M

  23. RGB color model • Default model for CG • Given RGB as primary colors • All other colors are linear combinations of the primaries • C = T1R + T2G + T3B, where T1-3 are the tristimulus values • Values are additive, think of spotlights on a dark screen • if T1-3 = 0 screen is black • if T1-3 = 1* then screen is white

  24. RGB color model • 3D representation - the cube • Color specified independent of hardware - use floating pt values (not ints) from 0.0-1.0 and let someone else match color • glColor3f(1.0, 0.1, 0.2) • glClearColor(1.0, 1.0, 1.0, 1.0) /* takes alpha*/ • The RGB model is device dependent, so that when you are converting from other color spaces you must account for the parameters of the specific display device

  25. RGB color model • Gamut • Not all colors (metamers) can be reproduced on CRT • The range of colors that can be produced is called the gamut • Gamuts of the eye, film, monitors and printers all differ • http://www.rapidgraphics.com/faq_gamut.html

  26. Indexed color mode • What if we only have 8 bits, (256 colors)? • We could use 3 bits for red, 3 bits for green and 2 bits for blue (for example) • this limits the number of possible colors • what if we were displaying paintings from Picasso’s blue period? • Or, we could store lookup table indices, instead of intensities, in the frame buffer • indirect way to specify color • lookup table (lut) contains the actual colors

  27. Indexed color mode • colors virtually unlimited, e.g. we can have 256 shades of blue! • number of displayed colors, or colors in palette, is 2d, where d is the depth of the frame buffer • Motivation • mostly of historical importance due to reduction in cost of video memory • lut load is very fast < 1 millisecond • switching palettes is useful

  28. Indexed color example: GIF89a global color table a. Description. This block contains a color table, which is a sequence of bytes representing red-green-blue color triplets. … and contains a number of bytes equal to 3 x 2^(Size of Global Color Table+1). c. Syntax. 7 6 5 4 3 2 1 0 Field Name Type http://www.dcs.ed.ac.uk/home/mxr/gfx/2d/GIF89a.txt Red 0 Green 0 Blue 0 Red 1 Green 1 up to Green 255 Blue 255 Byte Byte Byte Byte Byte Byte Byte 0 1 2 3 4 … . 767

  29. Indexed color example: Animated gif images Bouncing ball animation Animation steps LUT entry number* 0 1 2 3 4 5 6 7 0 2 whtwhtwhtwhtwhtwhtwhtwht wht whtwht blkblkblkblkblkblkblkblk blk blkblk red red 1 2 3 4 5 6 7 8 9 10 11 red 3 red 4 red 5 red red 6 LUT# red red 7 red 1 red *Unspecified entries are all white

  30. Questions • 1. In what colors are we drawing? • 2. Where on the screen does our image appear? • 3. How large will the image be? • 4. How do we create an area of the screen - a window - for our image? • 5. How much of our infinite pad will appear on the screen? • 6. How long will the image remain on the screen?

  31. Viewing • Where on the screen is our image displayed? • OpenGL uses a default view volume - a 2x2x2 cube centered at origin (0,0,0) • We can also specify our own view volume • glOrtho(left, right, bottom, top, near, far) • z=0 must be between near and far to view our img • Our view rectangle is a 2D version of the default view volume with z=0, near=-1, far=1 • gluOrtho2D(left, right, bottom, top)

  32. Classic ray tracingWhitted (1980)

  33. Projection • Orthographic projection takes a point (x,y,z) in 3D and projects (i.e. maps) it to 2D (x,y,0) • Camera positioned at origin and points in negative z direction • it ‘sees’ all points in view rect/volume, even those in back of it - this is confusing - essentially, the camera’s position (but not direction) is irrelevant in this particular projection mode • Points projected outside our 2D view rectangle (or 3D volume) get clipped out

  34. Setting the projection matrix • glMatrixMode(GL_PROJECTION) • glLoadIdentity(); • gluOrtho2D(0.0, 500.0, 0.0, 500.0); • glMatrixMode(GL_MODELVIEW);

  35. Questions • 1. In what colors are we drawing? • 2. Where on the screen does our image appear? • 3. How large will the image be? • 4. How do we create an area of the screen - a window - for our image? • 5. How much of our infinite pad will appear on the screen? • 6. How long will the image remain on the screen?

  36. Window vs. Windows • Window denotes a rectangular area of the display, in screen coordinates, or pixels • Windowing system refers to multi-window environments like XWindows or MSWindows • OpenGL assumes window origin (0,0) at bottom left. Check that this matches your system input device coordinate origin. (Top-left also common)

  37. Aspect ratio:The ratio of a rect’s width to its height • Clip window (glOrtho) and display window sizes (glutInitWindowSize) need same aspect ratio or image may be distorted. • Render into a viewport - a rectangular area of the display window - before final output • Scene (world coords) • Clip window (eye coords) • Viewport (normalized screen coords) glViewport(x,y,width,height) (note, vp and clip rect have same a.r.) • Screen (screen coords)

  38. Questions • 1. In what colors are we drawing? • 2. Where on the screen does our image appear? • 3. How large will the image be? • 4. How do we create an area of the screen - a window - for our image? • 5. How much of our infinite pad will appear on the screen? • 6. How long will the image remain on the screen?

  39. Control functions • In immediate-mode (our default mode), objects are computed, rasterized, then displayed; nothing is saved • To continue to display the object we must continue to re-compute it • This is the function of glutMainLoop() • We’ll need to Ctrl-C to exit • how inelegant!

More Related