Computer Graphics Chapter 4 Attributes of Graphics Primitives Somsak Walairacht, Computer Engineering, KMITL 1
Outline OpenGL State Variables Point Attributes Line Attributes Fill-Area Attributes Scan-Line Polygon-Fill Algorithm Fill Methods for Areas with Irregular Boundaries Character Attributes Antialiasing Computer Graphics 2
Introduction A parameter that affects the way a primitive is to be displayed is referred to as an Attribute Parameter For example, lines can be dotted or dashed, fat or thin, and blue or orange Areas might be filled Text can appear from left to right, slanted diagonally, or in vertical Computer Graphics 3
OpenGL State Variables For example, Color and other primitive attributes, the current matrix mode, the elements of the model-view matrix, the current position for the frame buffer, and the parameters for the lighting effects in a scene Remained in effect until their new values are specified We can query the system to determine the current value of a state parameter Computer Graphics 4
Point Attributes Two attributes for points: color and size Color components are set with RGB values or an index into a color table Size is an integer multiple of the pixel size Computer Graphics 5
Line Attributes Three basic attributes: color, width, and style Additionally, lines may be generated with other effects, such as pen and brush strokes Computer Graphics 6
Fill-Area Attributes Most graphics packages limit fill areas to polygons, because they are described with linear equations Further restriction requires fill areas to be convex Computer Graphics 7
Fill-Area Attributes (2) There are two basic procedures for filling an area on raster systems 1 (simple shape) Determines the overlap intervals for scan lines that cross the area Pixel positions along these overlap intervals are set to the fill color 2 (not so simple shape) Start from a given interior position and paint outward pixel-by-pixel until boundary Computer Graphics 8
Fill-Area Attributes (3) The scan-line approach is usually applied to simple shapes such as circles or regions with polyline boundaries General graphics packages use this fill method While using a starting interior point, it is useful for filling areas with more complex boundaries and in interactive painting systems Computer Graphics 9
Color-Blended Fill Regions Foreground color (or pattern) could be combined with background colors Using a transparency factor that determines how much of the background should be mixed with the object color 1.0 representing complete opacity 0.0 representing complete transparency www.opengl.org/sdk/docs/man/html/glblendfunc.xhtml Computer Graphics 10
Color-Blended Fill Regions (2) Simple logical or replace operations Computer Graphics 11
Color-Blended Fill Regions (3) Algorithm using color-blending (Soft-fill or Tint-fill algorithms) A foreground color F with a single background color B The current RGB color P of each pixel within the area to be refilled is some linear combination of F and B P = tf + (1 t)b where 0 < t < 1 (the transparency factor) P = (P R, P G, P B ), F = (F R, F G, F B ), B = (B R, B G, B B ) t = P k B k / F k B k where k = R, G, or B, and F k B k Similarly, a foreground color is to be merged with multiple background color P = t 0 F + t 1 B 1 +(1 t 0 t 1 )B 2 where t 0 + t 1 +(1 t 0 t 1 ) = 1 Computer Graphics 12
1. General Scan-Line Polygon- Fill Algorithm A scan-line fill of a region is performed by first determining the intersection positions of the boundaries of the fill region with the screen scan lines Then the fill colors are applied to each section of a scan line that lies within the interior of the fill region The scan-line fill algorithm identifies the same interior regions as the odd-even rule Computer Graphics 13
General Scan-Line Polygon-Fill Algorithm (2) Basic scan-line procedure: 2 steps 1. Edge intersections are sorted from left to right 2. The pixel positions between, and including, each intersection pair are set to the specified fill color 3 4 2 Sort x-intersection ascending 5 1 Computer Graphics 14
General Scan-Line Polygon-Fill Algorithm (3) To split those vertices that should be counted as one intersection When the endpoint y coordinates of the two edges are increasing, the y value of the upper endpoint for the current edge is decreased by 1 preserves the order When the endpoint y values are monotonically decreasing, the y coordinate of the upper endpoint of the edge following the current edge is decreased by 1 next current current next Computer Graphics 15
General Scan-Line Polygon-Fill Algorithm (4) การเก ยวพ น,การเช อมโยง Coherence properties can be used in computer-graphics algorithms to reduce processing It often involves incremental calculations applied along a single scan line or between successive scan lines Computer Graphics 16
Determining Fill-Area Edge Intersections Two successive scan lines crossing the left edge of a triangle The slope of this edge m = (y k+1 y k )/(x k+1 x k ) The change in y coordinates y k+1 y k = 1 Each successive x intercept can thus be calculated by adding the inverse of the slope and rounding to the nearest integer x k+1 = x k +1/m Computer Graphics 17
Coherence Methods Method 1 counter = 0 counter += dx If counter dy then { x++, counter -= dy } y++ Method 2 counter = 0 counter += 2dx If counter dy then { x++, counter -= 2dy } y++ int counter, dx, dy m=7/3 [1] [2] Computer Graphics 18
2. Sorted Edge Table Proceeding around the edges in either a clockwise or a counterclockwise order, sorted on the smallest y value of each edge Only nonhorizontal edges are entered into the table For a particular scan line, stores the maximum y value for that edge, the x-intercept value (at the lower vertex) for the edge, the inverse slope of the edge For each scan line, the edges are in sorted order from left to right Computer Graphics 19
Sorted Edge Table (2) Process the scan lines from the bottom of the polygon to its top -> active edge list for each scan line For a scan line contains all edges crossed, uses iterative coherence calculations to obtain the edge intersections For each scan line, fill interior pixel at x-intercept values from left to right Computer Graphics 20
3. Scan-Line Fill of Convex Polygons Uses coordinate extents to determine which edges cross a scan line Intersection calculations with these edges then determine the interior pixel span Any vertex crossing is counted as a single point Some graphics packages restrict fill areas to be triangles This makes filling even easier Computer Graphics 21
4. Scan-Line Fill for Regions with Curved Boundaries For simple curves such as circles or ellipses, apply fill methods for convex polygons Each scan line cross just two boundary intersections Determine these two intersection points using the incremental calculations in the midpoint method Simply fill in the horizontal pixel spans Applies symmetric property between quadrants Computer Graphics 22
5. Fill Methods For Areas with Irregular Boundaries Boundary-fill algorithm, is employed in interactive painting packages, where interior points are easily selected Select a fill color, specify the boundary color, and pick an interior point Computer Graphics 23
Fill Methods For Areas with Irregular Boundaries (2) Two methods for processing neighboring pixels from a current test position 4-connected : pixel positions that are right, left, above, and below the current pixel 8-connected : Neighboring positions to be tested includes the four diagonal pixels Computer Graphics 24
6. Boundary Fill Computer Graphics 25
7. Flood-Fill Algorithm Paints areas by replacing a specified interior color instead of searching for a particular boundary color Starting from a specified interior point (x, y) and reassign all pixel values to a given interior color Using either a 4-connected or 8-connected approach Computer Graphics 26
8. Character Rendering Letters, digits, non-alphanumeric Font overall design style of a set of characters Times New Roman, Courier, Arial Fonts can vary in appearance Normal, Bold, Italic Rendering techniques Bitmap font Outlined fonts - Examples are PostScript Type 1 and Type 3 fonts, TrueType and OpenType. Computer Graphics 27
Character Attributes Characters with attributes such as font, size, color, and orientation Color settings for displayed text can be stored in the system attribute list Adjusts text size by scaling the overall dimensions (height and width) of characters or by scaling only the height or the width Computer Graphics 28
About Point Font size usually denoted in point (e.g. 10-point, 12- point) Denotes height of the characters in inches A term from typography Smallest unit of measure We are concerned with desktop publishing (DTP) point, also called the PostScript point Not the original typographical point 1 DTP point = 1/72 of an inch or approx 0.0139 inch Computer Graphics 29
Character Attributes (2) The orientation for a character string can be set according to the direction of a character up vector Computer Graphics 30
OpenGL Character Functions OpenGL Character functions Bitmap font, representing character with a pattern of binary values on rectangle grid glutbitmapcharacter (font, character); Outline font (stroke font), using straight-line and curve sections to describe characters glutstrokecharater (font, Character); Example: glrasterposition2i (x, y); for (k =0; k <36; k++) glutbitmapcharacter (GLUT_BITMAP_9_BY_15,text [k]); Computer Graphics 31
OpenGL Character Functions (2) Bitmapped GLUT fonts glutbitmapcharacter (font, character); We can select a fixed-width font by GLUT_BITMAP_8_BY_13 GLUT_BITMAP_9_BY_15 GLUT_BITMAP_TIMES ROMAN_10 GLUT_BITMAP_HELVETICA_10 or, 12-point Times-Roman, 12-point and 18-point Helvetica fonts Computer Graphics 32
OpenGL Character Functions (3) Outline character glutstrokecharacter (font, character); Assign parameter font either GLUT_STROKE_ROMAN or, GLUT_STROKE_MONO_ROMAN Example: glrasterposition2i (x, y); for (k = 0; k < 36; k++) glutbitmapcharacter (GLUT_BITMAP_9_BY_15, text [k]); OR glutstrokecharater (GLUT_STROKE_ROMAN, text[k]); Computer Graphics 33
Aliasing Jagged or stair-step appearance happens because the sampling process digitizes coordinate points on an object to discrete integer pixel positions This distortion due to low-frequency sampling (undersampling) is called aliasing Computer Graphics 34
Aliasing (2) Starting with a continuous signal, then sample the signal at discreet points Those samples are then used to reconstruct a new signal It is intended to represent the original signal However, the reconstructed signals are a false representation of the original signals In the English language, When a person uses a false name, it is known as an alias So, it was adapted in signal analysis to apply to falsely represented signals Aliasing in computer graphics usually results in visually distracting artifacts A lot of effort goes into trying to stop it This is known as antialiasing Computer Graphics 35
Nyquist Frequency Theoretically, in order to adequately reconstruct a signal of frequency x, the original signal must be sampled with a frequency of greater than 2x This is known as the Nyquist Sampling Frequency or Nyquist Limit However, this is assuming that we are doing a somewhat idealized sampling and reconstruction In practice, it s probably a better idea to sample signals at a minimum of 4x Computer Graphics 36
Nyquist Sampling Interval The sampling interval should be no larger than one-half the cycle interval x s = x cycle / 2 where x cycle = 1/ f max Computer Graphics 37
Antialiasing To increase sampling rate, simply displays objects at higher resolution Limitations: How big the frame buffer Refresh rate 60 fps or more Modify pixel intensities Appropriately varying the intensities of pixels along the boundaries of primitives Computer Graphics 38
Antialiasing (2) Pre-filtering Filter before sampling- determine pixels from the continuous signal Disadvantage: percent calculation introduces complexity Post-filtering Filter after sampling- determine pixels from the discreet samples of the continuous signal Computer Graphics 39
Antialiasing (3) Supersampling (or Post-filtering) use multiple sample points across the finer grid to determine an appropriate intensity level for each screen pixel Area sampling (or Pre-filtering) by calculating the areas of overlap of each pixel with the objects to be displayed Pixel phasing Hardware approach by shifting the display location of pixel areas ( micropositioning the electron beam in relation to object geometry) Computer Graphics 40
Supersampling Straight-Line Segments Divide each pixel into a number of subpixels and count the number of subpixels that overlap the line path The intensity level for each pixel is then set to a value that is proportional to this subpixel count 1 2 2 3 1 Computer Graphics 41
Supersampling Straight-Line Segments : Advantage Represent the line with finite width The number of possible intensity levels for each pixel is equal to the total number of subpixels within the pixel area Computer Graphics 42
Supersampling Straight-Line Segments : Advantage (2) Since a particular line might cross several different color areas We can average subpixel intensities to obtain pixel color settings Ex. 5 subpixels within a particular pixel area are determined to be inside a red line and the remaining 4 subpixels fall within a blue background pixel color = (5 red + 4 blue) / 9 Computer Graphics 43
Subpixel Weighting Mask By giving more weight to subpixels near the center of a pixel area Since these subpixels are to be more important in determining the overall intensity of a pixel Intensities calculated for each of the 9 subpixels Center subpixel is weighted by a factor of 1/4 Top, bottom, and side subpixels are each of 1/8 Corner subpixels are each weighted by 1/16 Computer Graphics 44
Area Sampling Straight-Line Segments A method for estimating pixel overlap areas The pixel with grid coordinates (10, 20) is about 90% covered by the line area, so its intensity would be set to 90% of the maximum intensity Similarly (10, 21) would be set to 15% Computer Graphics 45
Filtering Techniques A more accurate method for antialiasing lines Similar to those for applying a weighting mask, but now we integrate over the pixel surface to obtain the weighted average intensity Computer Graphics 46
Pixel Phasing With the technique by moving (micropositioning) pixel positions closer to the line path The electron beam is typically shifted by ¼, ½, or ¾ of a pixel diameter to plot points closer to the true path of a line or object edge Computer Graphics 47
Pixel Phasing (2) Computer Graphics 48
Compensating for Line Intensity Differences The diagonal line is longer than the horizontal line by a factor of 2 By adjusting the intensity of each line according to its slope Horizontal and vertical lines would be displayed with the lowest intensity, while 45 lines would be given the highest intensity Computer Graphics 49
Antialiasing Area Boundaries Smooth area boundaries by shifting pixel positions Adjust pixel intensity at a boundary according to the percent of the interior Adjustments, based on the percent of pixel area coverage Computer Graphics 50
Antialiasing Area Boundaries (2) Supersampling methods Along the two scan lines, 3 of the subpixel areas are inside the boundary So we set the pixel intensity at 75% Computer Graphics 51
Antialiasing Area Boundaries (3) Determining the percentage of pixel area within a fill region By Pitteway and Watkinson, based on the midpoint line algorithm Computer Graphics 52
Overlap Area of the Pixel Parameter p y - y mid = p = [m(x k + 1) + b] (y k +0.5) + (1 m) Pixel at y k is nearer if p < 1 m, and at y k + 1 is nearer if p > 1 m The interior part of the pixel area = m x k + b y k + 0.5 By evaluating p, we also determine the percentage of area coverage for the current pixel Computer Graphics 53
OpenGL Antialiasing Functions To activate the antialiasing routines glenable (primitivetype); where primitivetype is GL_POINT_SMOOTH, GL_LINE_SMOOTH, or GL_POLYGON_SMOOTH Color-blending operations glenable (GL_BLEND); glblendfunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); Computer Graphics 54
End of Lecture 4 Computer Graphics 55