1 CSCE 441: Computer Graphics Scan Conversion of Polygons Jinxiang Chai

2/108 OpenGL Geometric Primitives All geometric primitives are specified by vertices GL_QUAD_STRIP GL_POLYGON GL_TRIANGLE_STRIP GL_TRIANGLE_FAN GL_POINTS GL_LINES GL_LINE_LOOP GL_LINE_STRIP GL_TRIANGLES GL_QUADS

3/108 OpenGL Geometric Primitives All geometric primitives are specified by vertices GL_QUAD_STRIP GL_POLYGON GL_TRIANGLE_STRIP GL_TRIANGLE_FAN GL_POINTS GL_LINES GL_LINE_LOOP GL_LINE_STRIP GL_TRIANGLES GL_QUADS

4/108 OpenGL Geometric Primitives All geometric primitives are specified by vertices GL_QUAD_STRIP GL_POLYGON GL_TRIANGLE_STRIP GL_TRIANGLE_FAN GL_POINTS GL_LINES GL_LINE_LOOP GL_LINE_STRIP GL_TRIANGLES GL_QUADS

5/108 Drawing General Polygons How to draw every interior pixel? ?

6/108 Drawing General Polygons How to draw every interior pixel?

7/108 Drawing Curved Objects How to draw every interior pixels?

8/108 Outline Methods for drawing polygons or curved objects - Scanline conversion of polygons - Boundary-fill - Flood-fill Required readings: - HB 6-10 to 6-14

9/108 Drawing Rectangles Which pixels should be filled?

10/108 Drawing Rectangles Is this correct?

11/108 Drawing Rectangles What if two rectangles overlap?

12/108 Drawing Rectangles Is this correct?

13/108 Drawing Rectangles Is this correct? Overlap!!!

14/108 Drawing Rectangles Solution: Exclude pixels on top and right

15/108 Drawing Rectangles Artifacts are possible

16/108 General Polygons – Basic Idea How to draw every interior pixel? - process the screen scan line from the bottom of the boundaries to the top - draw every interior pixel for each scan line.

17/108 General Polygons – Basic Idea How to draw every interior pixel for a scan line?

18/108 General Polygons – Basic Idea Intersect scan lines with edges Find ranges along x Fill interior of those ranges

19/108 General Polygons – Basic Idea Intersect scan lines with edges Find ranges along x Fill interior of those ranges What about this line?

20/108 General Polygons – Basic Idea Intersect scan lines with edges Find ranges along x Fill interior of those ranges Draw odd intervals only

21/108 General Polygons – Basic Idea Intersect scan lines with edges Find ranges along x Fill interior of those ranges Draw odd intervals only Don’t fill top/right Edges may NOT match with line drawing algorithm

22/108 General Polygons – Basic Idea Intersect scan lines with edges Find ranges along x Fill interior of those ranges Draw odd intervals only Use coherence to speed up

23/108 General Polygons – Basic Idea Intersect scan lines with edges Find ranges along x Fill interior of those ranges Draw odd intervals only Use coherence to speed up Edges intersecting one scan line are mostly same as those intersecting previous scan line

24/108 General Polygons – Basic Idea Intersect scan lines with edges Find ranges along x Fill interior of those ranges Draw odd intervals only Use coherence to speed up The x-value of an intersection with one scan line is close to the intersection with the previous one

25/108 How to store polygon edges?

26/108 How to store polygon edges? Scan Lines Associate polygon edges with scan lines

27/108 How to store polygon edges? Scan Lines Associate polygon edges with scan lines: use the lowest end point of a edge to find the corresponding scan line

28/108 How to store polygon edges? Scan Lines Associate polygon edges with scan lines: use the lowest end point of a edge to find the corresponding scan line

29/108 How to store polygon edges? Scan Lines Associate polygon edges with scan lines: use the lowest end point of a edge to find the corresponding scan line

30/108 General Polygons – Data Structures Sorted Edge Table: Scan Lines Edges Store a linked-list per scan- line. Insert edges into table at scan-line associated with lowest end-point.

31/108 General Polygons – Example A B C D EF G Sorted Edge Table Insert edges into table at scan-line associated with lowest end-point!

32/108 General Polygons – Example A B C D EF G Sorted Edge Table Insert edges into table at scan-line associated with lowest end-point!

33/108 General Polygons – Example A B C D EF G ABAG Sorted Edge Table Insert edges into table at scan-line associated with lowest end-point!

34/108 General Polygons – Example A B C D EF G ABAG Sorted Edge Table Exclude horizontal edges! Insert edges into table at scan-line associated with lowest end-point!

35/108 General Polygons – Example A B C D EF G ABAG FGED Sorted Edge Table Insert edges into table at scan-line associated with lowest end-point!

36/108 General Polygons – Example A B C D EF G ABAG FGED CD Sorted Edge Table Insert edges into table at scan-line associated with lowest end-point!

37/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Sorted Edge Table Insert edges into table at scan-line associated with lowest end-point!

38/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Sorted Edge Table Which edges are intersecting with the current scan line? Insert edges into table at scan-line associated with lowest end-point!

39/108 General Polygons – Data Structures Active Edge List: Edges List of all edges intersecting current scan-line sorted by their x-values

40/108 Linked List A data structure consisting of a group of nodes which together form a sequence Each node includes - a datum - a reference (link) to the next node

41/108 General Polygons – Data Structures Active Edge List: Edges List of all edges intersecting current scan-line sorted by their x-values Implement active edge list with linked list

42/108 General Polygons – Data Structures Active Edge List: Edges List of all edges intersecting current scan-line sorted by their x-values Implement active edge list with linked list So what kind of information should be stored in the linked list for our polygon drawing algorithm?

43/108 General Polygons – Data Structures Edge: maxY: highest y-value currentX: x-value of end- point with lowest y-value xIncr: 1 / slope mazY currentX xIncr Edge

44/108 Scan line intersection Scan line y k +1 Scan line y k mazY currentX xIncr Edge

45/108 Scan line intersection Scan line y k +1 Scan line y k mazY currentX xIncr Edge with x k and 1/m, we can efficiently compute the next endpoint! - increment y k by 1 - increment x k by 1/m with y end, we know when to end the edge.

46/108 General Polygons – Data Structures Edge: maxY: highest y-value currentX: x-value of end- point with lowest y-value xIncr: 1 / slope mazY currentX xIncr Edge Horizontal edges will not be used!!!

47/108 General Polygons – Algorithm line = 0 While (line < height ) Add edges to Active Edge List from Sorted Edge Table starting at line Remove edges that end at line Fill pixels Increment x-values on edges in Active Edge List Increment line

48/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Sorted Edge Table Active Edge List

49/108 General Polygons – Algorithm line = 0 While (line < height ) Add edges to Active Edge List from Sorted Edge Table starting at line Remove edges that end at line Fill pixels Increment x-values on edges in Active Edge List Increment line

50/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Sorted Edge Table Active Edge List maxY currentX xIncr AGAB

51/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Sorted Edge Table Active Edge List maxY currentX xIncr AGAB

52/108 General Polygons – Algorithm line = 0 While (line < height ) Add edges to Active Edge List from Sorted Edge Table starting at line Remove edges that end at line Fill pixels Increment x-values on edges in Active Edge List Increment line

53/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Sorted Edge Table Active Edge List maxY currentX xIncr AGAB

54/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Sorted Edge Table Active Edge List AGAB maxY currentX xIncr

55/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Sorted Edge Table Active Edge List?

56/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Sorted Edge Table Active Edge List maxY currentX xIncr EDFG

57/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Sorted Edge Table Active Edge List maxY currentX xIncr EDFG Is it correct?

58/108 General Polygons – Algorithm line = 0 While (line < height ) Add edges to Active Edge List from Sorted Edge Table starting at line Remove edges that end at line Fill pixels Increment x-values on edges in Active Edge List Increment line

59/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Sorted Edge Table Active Edge List AGAB maxY currentX xIncr EDFG

60/108 General Polygons – Algorithm line = 0 While (line < height ) Add edges to Active Edge List from Sorted Edge Table starting at line Remove edges that end at line Fill pixels Increment x-values on edges in Active Edge List Increment line

61/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Active Edge Table Active Edge List AGAB maxY currentX xIncr EDFG

62/108 General Polygons – Algorithm line = 0 While (line < height ) Add edges to Active Edge List from Sorted Edge Table starting at line Remove edges that end at line Fill pixels Increment x-values on edges in Active Edge List Increment line

63/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Active Edge Table Active Edge List AGAB maxY currentX xIncr EDFG ??? ?

64/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Active Edge Table Active Edge List AGAB maxY currentX xIncr EDFG

65/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Active Edge Table Active Edge List AGAB maxY currentX xIncr EDFG

66/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Active Edge Table Active Edge List AGAB maxY currentX xIncr EDFG

67/108 General Polygons – Algorithm line = 0 While (line < height ) Add edges to Active Edge List from Active Edge Table starting at line Remove edges that end at line Fill pixels Increment x-values on edges in Active Edge List Increment scan line

68/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Active Edge Table Active Edge List AGAB maxY currentX xIncr EDFG

69/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Active Edge Table Active Edge List AB maxY currentX xIncr ED

70/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Active Edge Table Active Edge List AB maxY currentX xIncr ED

71/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Active Edge Table Active Edge List AB maxY currentX xIncr ED

72/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Active Edge Table Active Edge List AB maxY currentX xIncr ED

73/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Active Edge Table Active Edge List AB maxY currentX xIncr EDCD

74/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Active Edge Table Active Edge List AB maxY currentX xIncr EDCD

75/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Active Edge Table Active Edge List AB maxY currentX xIncr CD

76/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Active Edge Table Active Edge List AB maxY currentX xIncr CD

77/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Active Edge Table Active Edge List BC maxY currentX xIncr CDAB

78/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Active Edge Table Active Edge List BC maxY currentX xIncr CDAB

79/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Active Edge Table Active Edge List BC maxY currentX xIncr CD

80/108 General Polygons – Example A B C D EF G ABAG FGED CD BC Active Edge Table Active Edge List BC maxY currentX xIncr CD

81/108 General Polygons – Algorithm line = 0 While (line < height ) Add edges to Active Edge List from Sorted Edge Table starting at line Remove edges that end at line Fill pixels //draw pixels on the scanline Increment x-values on edges in Active Edge List Increment scan line // move to the next scanline

82/108 Pixel Fill-in Which intervals should we draw? - Odd intervals. But need to pay attention to scan lines passing through vertices.

83/108 General Polygons – Algorithm line = 0 While (line < height ) Add edges to Active Edge List from Sorted Edge Table starting at line Remove edges that end at line Fill pixels //draw pixels on the scanline Increment x-values on edges in Active Edge List Increment scan line // move to the next scanline

84/108 General Polygons – Problems Sliver polygons may not be drawn correctly No simple solution Long, thin triangles cause problems Want triangles with good aspect ratio (close to equilateral)

85/108 Drawing Curved Objects How to draw every interior pixels? - process the scan line from the bottom to top - find the intersection positions between the current scan line and the boundaries of fill region - use coherence properties to reduce the process - fill interior pixel in the odd intervals. ?

86/108 Drawing Curved Objects Scan-line fill for regions with curved boundaries Extend Scan-line fill for polygons to drawing curved objects - need to calculate intersection points based on curved equation - cannot use the straightforward incremental calculations - For simple curves such as circles or ellipses, use midpoint method for incremental calculations of intersection points. ?

87/108 A More General Fill Approach How to deal with curved or irregular boundaries?

88/108 A More General Fill Approach Basic idea of Boundary fill algorithm - pick an interior pixel - continue re-coloring pixels until it reaches boundary pixels or previously visited pixels. Particularly useful for interactive painting packages - interior points are easily selected - the figure interior is then painted in the fill color Paint demo

89/108 Boundary Fill Start with drawn boundaries and an interior point Recursively recolor outward from that point  If neighbor different, then recolor and recur Everything within the boundary is changed to that color

90/108 Boundary Fill Start with drawn boundaries and an interior point Recursively recolor outward from that point  If neighbor different, then recolor and recur Everything within the boundary is changed to that color

91/108 Boundary Fill Work for inner and outer boundaries

92/108 Boundary Fill Start with drawn outline of a polygon and an interior point Recursively recolor outward from that point  If neighbor pixels are not boundary pixels or previously visited pixels, then recolor and recur Everything within the boundary is changed to that color

93/108 Boundary Fill How to define a neighbor? 4-connected 8-connected

94/108 Boundary Fill – Example Black pixels indicate boundary pixels.

95/108 Boundary Fill – Example Black pixels indicate boundary pixels. Red pixels indicate the filled color (previously visited pixels).

96/108 Boundary Fill – Example Continue checking neighboring pixels until reaching boundary pixels (boundary color) or previously visited pixels (fill color)!

97/108 Boundary Fill – Example Continue checking neighboring pixels until reaching boundary pixels or previously visited pixels!

98/108 Boundary Fill – Example Continue checking neighboring pixels until reaching boundary pixels or previously visited pixels!

99/108 Boundary Fill – Example Continue checking neighboring pixels until reaching boundary pixels or previously visited pixels!

100/108 Boundary Fill – Example Continue checking neighboring pixels until reaching boundary pixels or previously visited pixels!

101/108 Boundary Fill

102/108 Boundary Fill -Might not fill regions correctly if some interior pixels are already displayed in the fill color. - Need to change the color of those pixels before boundary fill

103/108 Boundary Fill – Example Black pixels indicate boundary pixels.

104/108 Boundary Fill – Example Black pixels indicate boundary pixels.

105/108 How to Deal with This? Multiple color boundaries? How to paint this region to yellow?

106/108 How to Deal with This? Multiple color boundaries? How to paint this region to yellow? Three keys: - a start pixel - a target/interior color - a paint color

107/108 Flood Fill/ Seed Fill Start with a point Define color under that point as the interior color Recursively recolor outward from that point  If neighbor is interior color, then recolor and recur Contiguous regions are re-colored

108/108 Flood Fill – Example

109/108 Flood Fill – Example

110/108 Flood Fill – Example Continue setting the colors for neighboring pixels if it is interior pixels!

111/108 Flood Fill – Example Continue setting the colors for neighboring pixels if it is interior pixels!

112/108 Flood Fill – Example Continue setting the colors for neighboring pixels if it is interior pixels!

113/108 Flood Fill – Example Continue setting the colors for neighboring pixels if it is interior pixels!

114/108 Flood Fill – Example Continue setting the colors for neighboring pixels if it is interior pixels!

115/108 Flood Fill – Example Continue setting the colors for neighboring pixels if it is interior pixels!

116/108 Flood Fill – Example Continue setting the colors for neighboring pixels if it is interior pixels!

117/108 Flood Fill – Example Continue setting the colors for neighboring pixels if it is interior pixels!

118/108 Flood Fill – Example Continue setting the colors for neighboring pixels if it is interior pixels!

119/108 Flood Fill – Example Continue setting the colors for neighboring pixels if it is interior pixels!

120/108 Flood Fill – Example Continue setting the colors for neighboring pixels if it is interior pixels!

121/108 Boundary-Fill vs. Flood-Fill Both need to start with an interior pixel. Boundary-Fill requires annotating boundary pixels while flood-fill requires annotating interior pixels. Both are appealing to fill in the irregular boundaries.