Presentation is loading. Please wait.

Presentation is loading. Please wait.

Questions about Graphics Pipeline 1.What is graphics pipeline? 2.What coordinate systems and transformations are involved in graphics pipeline? 3.What.

Similar presentations


Presentation on theme: "Questions about Graphics Pipeline 1.What is graphics pipeline? 2.What coordinate systems and transformations are involved in graphics pipeline? 3.What."— Presentation transcript:

1 Questions about Graphics Pipeline 1.What is graphics pipeline? 2.What coordinate systems and transformations are involved in graphics pipeline? 3.What is graphics primitive? Give three examples of possible primitives. CP411 Computer Graphics 1

2 2 1.OpenGL architecture –How OpenGL work –Exam the OpenGL implementation 2.OpenGL and interactive graphics –Mouse pointing –Menu –Keyboard 3.Graphics storage –Bitmap –Compressed storage Lecture 4

3 CP411 Computer Graphics 3 Execution sequence glutMainLoop() picks up a event from the queue, creates the window, and calls display(). When the  button of the window is clicked, a event is inserted in the queue. When this event is processed, the execution terminates main() start glutMainLoop() init(); glutDisplayFunc(lin eSegment); glutInit(); Event Queue Functions that specify a new window lineSegment() Clicking  button stop

4 CP411 Computer Graphics 4 glutMainLoop() is the function that drives the major operations in all our graphics programs. The function iterates indefinitely. In each iteration, it checks whether there are any events in a queue. If yes, it removes and processes the first event. It terminates the execution of the program when a event is processed. Events include windows event, and that of input devices, and drawing Event Queue Extract an event Process the event Event insertion: Window creation, moving, maximizing, closing, etc.

5 CP411 Computer Graphics 5 2. OpenGL event register functions OpenGL program is an even driven type of program Events are registered by register functions glutDisplayFunc (lineSegment); glutReshapeFunc(reshape) glutMouseFunc(MouseButton);// register the mouse glutMotionFunc(MouseMotion); glutKeyboardFunc(curveDrawing); glutSpecialFunc(specialKey); … Some event register function corresponds to a special procedure which has certain arguments for getting parameters from the event

6 CP411 Computer Graphics 6 What happens after the program starts? 1.main: find GL visual and create window 2.initialize GL states (e.g. viewing, color, lighting) 3.initialize display lists 4.loop 1.check for events (and process them) 2.if window event (window moved, exposed, etc.) 3.modify viewport, if needed 4.redraw 5.else if mouse or keyboard 6.do something, e.g., change states and redraw 7.redraw: clear screen (to background color) change state(s), if needed render some graphics change more states render some more graphics swap buffers

7 CP411 Computer Graphics 7 3. What happens when a render function is invoked? This is when a core OpenGL program starts. OpenGL program works like statement machine, it does the graphic pipeline according the current states setting State variables specify information such as line width, line stipple pattern, color, shading method, polygon culling, etc... Each state variable has a default value. The values of the state variables, whether set by default or by the programmer, remain in effect until changed. "On" and "Off" State Variables glEnable(GLenum capability) and glDisable(GLenum capability)

8 CP411 Computer Graphics 8 Mode State Variables –Mode state variables require commands specific to the state variable being accessed in order to change its value. One example of this is the command to set the shading mode state variable, GL_SHADE_MODEL. glShadeModel(GLenum mode)glShadeModel(GLenum mode) where mode is either GL_SMOOTH for smooth shading or GL_FLAT for flat shading, the default Value State Variables –Value state variables require commands specific to the state variable being accessed in order to change it value.

9 CP411 Computer Graphics 9 –Color glColor3f (1.0, 0.0, 0.0); –Point Size –To control the size of a rendered point use the command glPointSize(GLfloat size)glPointSize(GLfloat size) –Line Width To control the width of lines use the command glLineWidth(GLfloat width) glLineWidth(GLfloat width) –Stippled Lines To make stippled (dotted or dashed) lines, the stipple pattern must be defined using the command glLineStipple(GLint factor, GLushort pattern) glLineStipple(GLint factor, GLushort pattern)

10 CP411 Computer Graphics 10 4. openGL matrix stack Matrix is used for transformations from MC to DC The openGL matrix stack is a powerful construct. A stack is a last-in-first out structure. –The commands for this are glPushMatrix() and glPopMatrix(). Every point that is drawn will be mulitipled by whatever is on the matrix stack –Command glLoadIdentity() initializes matrix stack by putting the identity matrix into the current top of the stack –glMatrixMode() specifies which matrix stack is being altered –glTranslate and glRotate also place matrices on stack that cause translations and rotations

11 CP411 Computer Graphics 11 Matrix Manipulation Each of these postmultiplies the current matrix –E.g., if current matrix is C, then C=CS –The current matrix is either the modelview matrix or the projection matrix, or a texture matrix –Set these with glMatrixMode() glMatrixMode(GL_MODELVIEW); glMatrixMode(GL_PROJECTION);

12 CP411 Computer Graphics 12 Modeling Transforms OpenGL provides several commands for performing modeling transforms: –glTranslate{fd}(x, y, z) Creates a matrix T that transforms an object by translating (moving) it by the specified x, y, and z values –glRotate{fd}(angle, x, y, z) Creates a matrix R that transforms an object by rotating it counterclockwise angle degrees about the vector {x, y, z} –glScale{fd}(x, y, z) Creates a matrix S that scales an object by the specified factors in the x, y, and z directions

13 CP411 Computer Graphics 13 OpenGL basically just renders vertices –Vertices can be grouped to form polygons –Polygons can be grouped to form shapes (solids) Each glVertex rendered by OpenGL is transformed by the top matrix on the MODELVIEW matrix stack –As we saw before, a matrix corresponding to a CCW rotation of 90 degrees could be put on the stack Every vertex rendered by an OpenGL camera is also multiplied by the top matrix on the PROJECTION matrix –The projection matrix controls such effects as: Field of view Perspective vs. Orthographic Clipping planes Viewing frustum

14 CP411 Computer Graphics 14 5. OpenGL routines to draw primitives void lineSegment (void) { glClear (GL_COLOR_BUFFER_BIT); // Clear display window. glColor3f (0.0, 0.0, 1.0); // Set line segment color to red. glBegin (GL_LINES); glVertex2i (180, 15); // Specify line-segment geometry. glVertex2i (10, 145); glEnd ( ); glFlush ( ); // Clean buffers, make the processing routines fast }

15 CP411 Computer Graphics 15 Function names indicate argument type and number –Functions ending with f take floats –Functions ending with i take ints –Functions ending with b take bytes –Functions ending with ub take unsigned bytes –Functions that end with v take an array. –Examples glColor3f() takes 3 floats glColor4fv() takes an array of 4 floats

16 CP411 Computer Graphics 16 Specifying Geometry Simple case first: object vertices already in world coordinates Geometry in OpenGL consists of a list of vertices in between calls to glBegin() and glEnd() A simple example: telling GL to render a triangle glBegin (GL_POLYGON); glVertex2i (80, 10); glVertex2i (30, 100); glVertex2i (120, 50); glEnd ( ); –Usage: glBegin( geomtype ) where geomtype is: points, lines, polygons, triangles, quadrilaterals, etc...

17 CP411 Computer Graphics 17 void display() { glClear( GL_COLOR_BUFFER_BIT); // Clear the frame buffer glColor3f( 0.0, 1.0, 0.0); // Set current color to green glBegin( GL_POLYGON); // Draw the triangle glVertex2f( -0.7, -0.7); glVertex2f( 0.7, -0.7); glVertex2f( 0, 0.7); glEnd(); glFlush(); // Force to display the new drawings immediately }

18 CP411 Computer Graphics 18 Triangle Strips An OpenGL triangle strip primitive reduces this redundancy by sharing vertices: glBegin(GL_TRIANGLE_STRIP); glVertex3fv(v0); glVertex3fv(v1); glVertex3fv(v2); glVertex3fv(v3); glVertex3fv(v4); glVertex3fv(v5); glEnd(); Drawing rectangle glRecti(40, 40, 260, 130); // draw a rectangle with filled color How to draw a rectangle with out fill color? Just outline v0v0 v2v2 v1v1 v3v3 v4v4 v5v5

19 CP411 Computer Graphics 19 Draw a filled circle #include const float DEG2RAD = 3.14159/180; void drawCircle(float radius, float x, float y) { glBegin(GL_LINE_LOOP); for (int i=0; i < 360; i++) { float degInRad = i*DEG2RAD; glVertex2f(x+cos(degInRad)*radius, y+sin(degInRad)*radius); } glEnd }

20 CP411 Computer Graphics 20 void init (void) { glClearColor (1.0, 1.0, 1.0, 0.0); // Set display-window color to white. glMatrixMode (GL_PROJECTION); // Set transformation mode glLoadIdentity(); // set current matrix to identity gluOrtho2D (0.0, 100.0, 0.0, 150.0); // Set projection parameters. } Usually, we need another function, init(), that specifies permanent features of the drawings. This function is invoked only once in the beginning.

21 CP411 Computer Graphics, graphics file formats 21 Graphics File Formats Two methods of representing images: –Geometric representation => vector file format –Raster representation => raster file format Examples of vector file formats –ps (postscript), eps, pdf –SVG (Scalable Vector Graphics) has been introduced for the Internet. This promises to make web sites better, as images can then be scaled to suit various screen resolutions. Examples of raster file format –Bitmap, GIF, JPG, PNG

22 PostScript known for its use as a page description language in the electronic and desktop publishing areas. –a dynamically typed concatenative programming language –created by John Warnock and Charles Geschke in 1982. Example of ps file %!PS % Example 1 newpath 100 200 moveto 200 250 lineto 100 300 lineto 2 setlinewidth stroke showpage CP411 Computer Graphics, graphics file formats 22 The graphics

23 Example of SVG Save the above as test.xml and open it by Firefox CP411 Computer Graphics, graphics file formats 23

24 CP411 Computer Graphics, graphics file formats 24 Bitmap Bitmap format is historic but still commonly used..bmp A BMP file consists of either 3 or 4 parts as shown in the diagram on the right. –The first part is a header – This is followed by a information section –If the image is indexed colour then the palette follows Data structure BITMAPFILEHEADER bmfh; BITMAPINFOHEADER bmih; RGBQUAD aColors[]; BYTE aBitmapBits[];

25 CP411 Computer Graphics, graphics file formats 25 The BITMAPFILEHEADER: start size name stdvalue purpose 1 2 bfType 19778 must always be set to 'BM' to declae 3 4 bfSize ?? specifies the size of the file in bytes. 7 2 bfReserved1 0 must always be set to zero. 9 2 bfReserved2 0 must always be set to zero. 11 4 bfOffBits 1078 offset from beginning of the file to data

26 CP411 Computer Graphics, graphics file formats 26 The BITMAPINFOHEADER start size name stdvalue purpose 15 4 biSize 40 specifies the size of the INFOHEADER 19 4 biWidth 100 specifies the width in pixels. 23 4 biHeight 100 specifies the height in pixels. 27 2 biPlanes 1 specifies the number of planes 29 2 biBitCount 8 specifies the number of bits per pixel. 31 4 biCompression 0 Specifies the type of compression 35 4 biSizeImage 0 Specifies he size of the image data, in bytes. If there is no compression, it is valid to set this member to zero. 39 4 biXPelsPerMeter 0 specifies the the horizontal pixels per meter on the designated targer device, usually set to zero. 43 4 biYPelsPerMeter 0 specifies the the vertical pixels per meter on the designated targer device, usually set to zero. 47 4 biClrUsed 0 specifies the number of colors used in the bitmap, if set to zero the number of colors is calculated using the biBitCount member. 51 4 biClrImportant 0 specifies the number of color that are 'important' for the bitmap, if set to zero, all colors are important.

27 CP411 Computer Graphics, graphics file formats 27 The RGBQUAD array start size name stdvalue purpose 1 1 rgbBlue - specifies the blue part of the color. 2 1 rgbGreen - specifies the green part of the color. 3 1 rgbRed - specifies the red part of the color. 41 rgbReserved - must always be set to zero.

28 CP411 Computer Graphics, graphics file formats 28 Pixel data Pixel data is stored in byte one row after another in stream fashion A pixel data can be byte if color palette is used, or three bytes in RGB or BGR order. The number bytes in each line of the file should be divided by 4

29 CP411 Computer Graphics, graphics file formats 29 File header implementation typedef struct { unsigned short int type; /* Magic identifier */ unsigned int size; /* File size in bytes */ unsigned short int reserved1, reserved2; unsigned int offset; /* Offset to image data, bytes */ } HEADER;

30 CP411 Computer Graphics, graphics file formats 30 Infoheader implementation typedef struct { unsigned int size; /* Header size in bytes */ int width,height; /* Width and height of image */ unsigned short int planes; /* Number of colour planes */ unsigned short int bits; /* Bits per pixel */ unsigned int compression; /* Compression type */ unsigned int imagesize; /* Image size in bytes */ int xresolution, yresolution; /* Pixels per meter */ unsigned int ncolours; /* Number of colours */ unsigned int importantcolours; /* Important colours */ } INFOHEADER; See examples for read and save bitmap with OpenGL

31 CP411 Computer Graphics, graphics file formats 31 Graphics compression techniques Run Length Encoding if there are the same in of some length, then express it as “run length x color value” E.g. RED:GREEN:GREEN:GREEN:GREEN:BLUE -> RED:4xGREEN:BLUE) Compress by token –If the same pattern appear many times, then use an abbreviation for the pattern. –E.g. (RED:AMBER:GREEN:RED:AMBER:GREEN) -> (LIGHTS:LIGHTS) where LIGHTS represents RED:AMBER:GREEN More efficient coding –Coding Hoffman code: use short code for frequent symbols

32 CP411 Computer Graphics, graphics file formats 32 Compress rate Compress rate = (original file size – compressed file size) / original file size Lossless compression –Original bitmap can be recovered Lossy compression –Original bitmap can not be recovered

33 CP411 Computer Graphics, graphics file formats 33 Lossless compressed graphic file formats GIF (Graphics Interchange format) –up to 256 colors –uses a token type compression algorithm developed by Lempel-Ziv-Welch (LZW) patented. –Lossless –Good for headings, buttons, borders, simple diagrams PNG (Portable Network Graphics) –it can be used to replace both the GIF and JPG file formats. –lossless compression

34 CP411 Computer Graphics, graphics file formats 34 Lossy compression Color expression reduction –Change 24 bit color to 16 bit color or 8 bit color Mathematical compression –Modern image compression techniques are much more mathematically intensive, they generally divide the image into small blocks (usually 8 x 8 pixels), then save only as much as is "visually" necessary, by cosin transformation convert from value domain to frequency domain –Example: JPEG

35 JPEG (Joint Photographic Experts Group) The main idea: Use Cosine transformation transfer each image block into frequency domain, then apply a filter to make high frequency components zero, followed by Hoffman coding to compress. Read http://en.wikipedia.org/wiki/JPEG for detailhttp://en.wikipedia.org/wiki/JPEG Lossy, high compression rate CP411 Computer Graphics, graphics file formats 35

36 Example testing 1.SVG example in slide 23 2.Examples in Ch.3, Ch.4. 3.Examples in Ch.5, Ch.20 interactive graphics Try to understand how OpenGL works. CP411 Computer Graphics 36


Download ppt "Questions about Graphics Pipeline 1.What is graphics pipeline? 2.What coordinate systems and transformations are involved in graphics pipeline? 3.What."

Similar presentations


Ads by Google