Graphics (Output) Primitives Chapters 3 & 4
Graphic Output and Input Pipeline Scan conversion converts primitives such as lines, circles, etc. into pixel values geometric description a finite scene area Clipping the process of determining the portion of a primitive lying within a region called clip region
Graphic Output Pipeline application model : descriptions of objects application program : generates a sequence of functions to display a model graphics package : clipping, scan conversion, shading, etc. display H/W
Graphic Input Pipeline user interaction (e.g., mouse click) graphic package (by sampling or event-driven input functions) application program modify the model or the image on the screen
Output Pipeline in Software When scan conversion and clipping happen? Clipping before scan conversion for lines, rectangles, and polygons clipping before scan converting each primitive (scissoring) Clipping after scan converting the entire collection of primitives into a temporary canvas for text
Scan Converting Lines A line from (x 1,y 1 ) to (x 2,y 2 ) a series of pixels [Criteria] Straight lines should appear straight Line end-points should be constrained Uniform density and intensity Line algorithms should be fast
Why Study Scan Conversion Algorithms? Every high-end graphics card support this. You will never have to write these routines yourself, unless you become a graphics hardware designer. So why learn this stuff? Maybe you will become a graphics hardware designer. But seriously, the same basic tricks underlie lots of algorithms: 3-D shaded polygons Texture mapping etc.
Simple Scan Converting Lines Based on slope-intercept algorithm from algebra: y = mx + b Simple approach: increment x, solve for y Floating point arithmetic required
Digital Differential Analyzer(DDA) Idea 1. Go to starting end point 2. Increment x and y values by constants proportional to x and y such that one of them is 1. - If 0<m 1, y k+1 = y k + m - If m>1, x k+1 = x k + 1/m 3. Round to the closest raster position ( i x i, y ) ( x 1, Round ( y m)) ( i i i x, Round ( y )) ( x 1, y m) i i i
Digital Differential Analyzer(DDA) Drawbacks rounding to an integer takes time floating-point operations Is there a simpler way? Can we use only integer arithmetic? Easier to implement in hardware
Midpoint Line Algorithm (Bresenham's Line Algorithm) Assume a line from (x 1, y 1 ) to (x 2, y 2 ) with 0<m < 1 and x 1 <x 2. Use symmetry
Midpoint Line Algorithm (Bresenham's Line Algorithm) Suppose that we have just finished drawing a pixel P = (x k, y k ) and we are interested in figuring out which pixel to draw next. If distance(ne,m) > distance(e,m) then select E = (x k +1, y k ) y k +1 y NE d upper else d lower select NE = (x k +1, y k +1) y k P E x k x k +1
Midpoint Line Algorithm (Bresenham's Line Algorithm) y = m(x k +1)+b d lower = y y k = m(x k +1)+b y k d upper = (y k +1) y = y k +1 m(x k +1) b d lower d upper =2m(x k +1) 2y k +2b 1 Decision parameter, p k (by substituting m=δy/δx) p k = Δx(d lower d upper ) = 2Δy x k 2Δx y k +c, where c= 2Δy+ Δx(2b 1) The sign of p k is the same as the sign of (d lower d upper )
Midpoint Line Algorithm (Bresenham's Line Algorithm) p k = Δx(d lower d upper ) If y k is closer to the line path, d lower d upper p k 0 plot the lower pixel (x k +1, y k ) Otherwise, plot the lower pixel (x k +1, y k +1 )
Midpoint Line Algorithm (Bresenham's Line Algorithm) p k+1 = 2Δy x k+1 2Δx y k+1 +c p k = 2Δy x k 2Δx y k +c (subtraction) p k+1 p k = 2Δy(x k+1 x k ) 2Δx(y k+1 y k ) (x k+1 = x k +1) p k+1 = p k +2Δy 2Δx(y k+1 y k ) ( y k+1 y k is either 0 or 1, depending on the sign of p k ) p k+1 = p k +2Δy y k+1 y k = 0 p k 0 p k+1 = p k +2Δy 2Δx y k+1 y k = 1 p k 0
Midpoint Line Algorithm (Bresenham's Line Algorithm) p 0 = 2Δy Δx If p k 0, plot (x k +1, y k ) and p k+1 = p k +2Δy Otherwise, plot (x k +1, y k +1 ) and p k+1 = p k +2Δy 2Δx Advantages Only need add integers and multiply by 2 (which can be done by shift operations) Incremental algorithm
Midpoint Line Algorithm- Example Line end points: (x 0,y 0 ) = (5,8); (x 1,y 1 ) = (9,11) Δx = 4; Δy = 3 p 0 = 2Δy Δx = 2 > 0 select (5+1, 8+1) p 1 = p 0 + 2(Δy - Δx) = 0 Select (6+1,9+1) p 2 = p 1 + 2(Δy Δx)=0-2=-2 Select (7+1, 10) 13 12 11 10 9 8 7 6 4 5 6 7 8 9 10 11
Scan Converting Lines (issues) Endpoint order S 01 is a set of pixels that lie on the line from P 0 to P 1 S 10 is a set of pixels that lie on the line from P 1 to P 0 S 01 should be the same as S 10 Varying intensity of a line as a function of slope For the diagonal line, it is longer than the horizontal line but has the same number of pixels as the latter needs antialiasing Outline primitives composed of lines Care must be taken to draw shared vertices of polylines only once
Scan Converting Lines (issues) Starting at the edge of a clip rectangle Starting point is not the intersection point of the line with clipping edge Clipped line may have a different slope
Scan Converting Circles Eight-way symmetry We only consider 45 of a circle
Midpoint Circle Algorithm Suppose that we have just finished drawing a pixel (x p,y p ) and we are interested in figuring out which pixel to draw next.
Midpoint Circle Algorithm f(x,y) = x 2 + y 2 r 2 < 0 inside the circle = 0 on the circle > 0 outside the circle If f (x p +1, y p ½ ) < 0 then select E(x p +1, y p ); else select SE(x p +1, y p 1)
Midpoint Circle Algorithm p k = f (x k +1, y k ½ ) = (x k +1) 2 + (y k ½) 2 r 2 p k 0 the midpoint is inside the circle and y k is closer to the circle boundary plot the lower pixel (x k +1, y k ) Otherwise, the midpoint is outside or on the circle and y k 1 is closer to the circle boundary plot the lower pixel (x k +1, y k 1 )
Midpoint Circle Algorithm p k = (x k +1) 2 + (y k ½ ) 2 r 2 p k+1 = f (x k+1 +1, y k+1 ½) = [(x k +1)+1] 2 + (y k+1 ½ ) 2 r 2 p k+1 = p k +2(x k +1)+ (y k+1 2 y k2 ) (y k+1 y k ) +1 ( y k+1 is either y k or y k 1, depending on the sign of p k ) p k+1 = p k +2x k+1 +1 y k+1 = y k p k 0 p k+1 = p k + 2x k+1 +1 2y k+1 y k+1 = y k 1 p k 0, where 2x k+1 =2x k +2 2y k+1 =2y k 2
Midpoint Circle Algorithm (x 0, y o ) = (0, r) p 0 = f (1, r ½) = 5/4 r = 1 r (for r an integer) If p k 0, plot (x k +1, y k ) and p k+1 = p k +2x k+1 +1 Otherwise, plot (x k +1, y k 1 ) and p k+1 = p k + 2x k+1 +1 2y k+1, where 2x k+1 =2x k +2 2y k+1 =2y k 2 Advantages Only using integer additions and subtractions Incremental algorithm
Midpoint Ellipse Algorithm Use symmetry of ellipse Divide the quadrant into two regions the boundary of two regions is the point at which the curve has a slope of -1. Process by taking unit steps in the x direction to the point P, then taking unit steps in the y direction Apply midpoint algorithm. Slope = -1 r y P r x
Midpoint Ellipse Algorithm x x rx c 2 y y ry 1 f ellipse (x,y) = r y2 x 2 + r x2 y 2 r x2 r y 2 c < 0 inside the ellipse boundary = 0 on the ellipse boundary > 0 outside the ellipse boundary 2 r y r x p1 k = f ellipse (x k +1, y k ½) p2 k = f ellipse (x k +½, y k 1)
Maintaining Geometric Properties When line drawing, exclude the last point When drawing an enclosed area, display the area using only those pixels that are interior to the object boundaries
Inside-Outside Tests Odd-even Rule (Odd-parity Rule) For each pixel, determine if it is inside or outside of a given polygon. Approach From any point P being tested, cast a ray to a distant point in an arbitrary direction If the number of crossings is odd, then P is an interior point. If the number of crossings is even, then P is an exterior point.
Odd-Even Rule Be sure that the line path does not intersect any line-segment endpoints.
Odd-Even Rule P Edge Crossing Rules an upward edge includes its starting endpoint, and excludes its final endpoint; a downward edge excludes its starting endpoint, and include its final endpoint; horizontal edges are excluded;
Odd-Even Rule Very fragile algorithm Ray crosses a vertex Ray is coincident with an edge Commonly used in ECAD Suitable for H/W
Inside-Outside Tests Nonzero Winding Number Rule A winding number the # of times the boundary of an object winds around a particular point P in the counterclockwise direction Non-zero values: interior points Zero values : exterior points
Nonzero Winding Number Rule Winding num: initialized to 0 From any point P being tested, cast a ray to a distant point in an arbitrary direction +1: edge crossing the line from right to left -1: left to right Use the sign of the cross product of the line and edge vectors Non-zero: interior Zero: exterior Be sure that the line path does not pass through any line-segment endpoints.
How to decide interior Vertices are numbered: 0 1 2 3 4 5 6 7 8 9
Polygon Tables An object described as a set of polygon surface facets Geometric data vertex table edge table surface-fact table Other parameters Color, transparency, lightreflection properties
Area Filling How to generate a solid color/patterned polygon area Scan-line fill algorithm Which pixels? What value?
Scan-Line Fill Algorithm For each scan line (1) Find intersections (the extrema of spans) Use Bresenham's line-scan algorithm Note that in a line drawing algorithm there is no difference between interior and exterior pixels (2) Sort intersections (increasing x order) (3) Fill in between pair of intersections
Scan-Line Fill Algorithm Find intersections x k+1 = x k + Δx / Δy example (left edge) m = 5/2 x min = 3 the sequence of x values 3, 3+2/5, 3+4/5, 3+5/6=4+1/5 y x pixel 1 2 3 4 3 3+2/5 3+4/5 4+1/5 (3,1) (3,2) (4,3) (4,4)
Span Rules intersection at integer coordinate leftmost : interior rightmost: exterior shared vertices count parity at y min vertices only shorten edges horizontal edges do not count vertices A standard convention is to say that a point on a left or bottom edge is inside, and a point on a right or top edge is outside.
Scan-Line Fill Algorithm Not quite simple A scan line passed through a vertex, it intersects two polygon edges at that point.
Scan-Line Fill Algorithm Scan line y intersects an even number of edges Two pairs of intersection points correctly identify the interior span Scan line y intersects an odd number (5) of edges Must count the vertex intersections as only one point
Scan-Line Fill Algorithm How to distinguish these cases (scan lines y & y ) Scan line y Two intersecting edges are on opposite sides of scan line Counted as just one boundary intersection point Scan line y Two intersecting edges are both above the scan line By tracing around the boundary, If three endpoint y values of two consecutive edges monotonically increase or decrease count the shared vertex as a single intersection Otherwise, (a local minimum or maximum) add the two edge intersections with the scan line
Scan-Line Fill Algorithm Implementation To shorten some polygon edges to split those vertices that should be counted as one intersection While processing non-horizontal edges in (counter)clockwise Check each edge whether the edge & next edges have either monotonically increasing or decreasing endpoints If so, shorten the lower edge
Scan-Line Fill Algorithm Coherence properties span coherence - all pixels on a span are set to the same value scan-line coherence - consecutive scan lines are identical edge coherence - edges intersected by scan line i are also intersected by scan line i+1
Scan-Line Fill Algorithm Use edge coherence and the scan-line algorithm Sorted Edge Table Contains all the non-horizontal edges. Edges are sorted by their smaller y coordinates. Table entry : y max, x-intercept value, inverse slope For each scan line, edges are sorted from left to right Active Edge List While processing scan lines from bottom to top, produce an active edge list for each scan line. Contains edges which intersect the current scan line. Edges are sorted on their x intersection values.
Scan-Line Fill Algorithm Sorted Edge Table BC C D DE EA AB
Scan-Line Fill Algorithm Scan line 9 Scan line 10
Area Filling (Filling Methods) Pixel Adjacency 4-connected 8-connected Boundary-Fill Algorithm If the boundary is specified in a single color, fill the interior, pixel by pixel, until the boundary color is encountered starts from an interior point and paints the interior in a specified color or intensity.
Boundary-Fill Algorithm procedure boundaryfill4( x,y : integer // starting point in region bordercolor: color // color that defines boundary fillcolor : color); // filling color var c : color begin c := readpixel(x,y); if ( c bordercolor and c fillcolor ) then begin writepixel(x,y,fillcolor); boundaryfill4(x, y-1, bordercolor, fillcolor ); boundaryfill4(x, y+1, bordercolor, fillcolor ); boundaryfill4(x-1, y, bordercolor, fillcolor ); boundaryfill4(x+1, y, bordercolor, fillcolor ); end end;
Boundary-Fill Algorithm There is the following problem with boundary_fill4: Solve with 8- connected Involve heavy duty recursion which may consume memory and time
Boundary-Fill Algo. Efficiency in space! Starting from the initial interior point, first fill in the span on the starting scan line Locate and stack starting positions for spans on the adjacent scan lines in down to up order in left to right order All upper scan lines processed All lower scan lines processed
Flood-Fill Algorithm Flood-Fill Algorithm When filling an area that is not defined within a single color boundary start from an interior point and reassign all pixel values that are currently set to a given interior color with the desired fill color.
Flood-Fill Algorithm procedure flood_fill4( x,y: integer //starting point in region oldvalue: color // value that defines interior newvalue: color); replacement value begin if readpixel(x,y) = oldvalue then begin writepixel(x,y,newvalue); flood_fill4(x,y-1,oldvalue,newvalue); flood_fill4(x,y+1,oldvalue,newvalue); flood_fill4(x-1,y,oldvalue,newvalue); flood_fill4(x+1,y,oldvalue,newvalue); end end;
Patterned Lines Patterned line from P to Q is not same as patterned line from Q to P. P Q P Q Patterns can be geometric or cosmetic Cosmetic: Texture applied after transformations Geometric: Pattern subject to transformations Cosmetic Geometric
Character, Symbols Bitmap font (Raster font) Set up a pattern of binary values on a rectangular grid The simplest to define and display But, more storage : each variation (size and format) must be saved
Character, Symbols Outline font Use straight-line and curve sections More flexible method Can be increased in size without distorting the character shapes By manipulating curve definitions for the character outlines. More time, since they must be scan converted into the frame buffer Less storage
Character, Symbols Comparison of Methods Outline font Bitmap font easy to rotate rotate by multiples of 90 easy to scale scale by powers of 2 variable length storage scan convert lines (curves) fill if polygons may be anti-aliased or smoothed via curve fitting fixed length storage scan convert points draw as filled or outline may be pre-anti-aliased
Line Attributes Butt cap Round cap Projecting square cap Miter join Round Join Bevel join
Aliasing in CG Which is better?
Aliasing in CG Digital technology can only approximate analog signals through a process known as sampling. Aliasing : the distortion of information due to lowfrequency sampling (undersampling). Choosing an appropriate sampling rate depends on data size restraints, need for accuracy, the cost per sample Errors caused by aliasing are called artifacts. Common aliasing artifacts in computer graphics include jagged profiles, disappearing or improperly rendered fine detail, and disintegrating textures.