Why Lines? Lines: Design of Line Algorithms Line Requirements – most common 2D primitive - done 100s or 1000s of times each frame – even 3D wireframes are eventually 2D lines! – optimized algorithms contain numerous tricks/techniques that help in designing more advanced algorithms Basic Math Review Must compute integer coordinates of pixels which lie on or near a line or circle. Pixel level algorithms are invoked hundreds or thousands of times when an image is created or modified – must be fast! Lines must create visually satisfactory images. Point-slope formula for a line 6 – Lines should appear straight – Lines should terminate accurately – Lines should have constant density Line algorithm should always be defined. P = (X,Y) Given two points (X1,Y1), (X2, Y2) Consider a third point on the line: P = (X,Y) Length of line segment between P1 and P2: L= ( x2 − x1 ) 2 + ( y2 − y1 ) 2 Midpoint of a line segment between P1 and P3: P2 = ( (X1+X3)/2 , (Y1+Y3)/2 ) Two lines are perpendicular if 1) M1 = -1/M2 2) Cosine of the angle between them is 0. 4 P2 = (X 2,Y2) 3 M = Slope = (Y2 - Y1)/(X2 - X1) = (Y - Y1)/(X - X1) 2 1 Solving For Y Y = [(Y2-Y1)/(X2-X1)]*(X-X1)+ Y1 P1 = (X 1,Y1) 1 can be arranged as Y=M*X+B with B=(X2Y1-X1Y2)/(X2-X1) Other Helpful Formulas 5 2 SLOPE = 3 RISE RUN 4 5 = Y2-Y 1 X2-X 1 Parametric Form Given points P1 = (X1, Y1) and P2 = (X2, Y2) X = X1 + t(X2-X1) Y = Y1 + t(Y2-Y1) t is called the parameter. When t = 0 we get (X1,Y1) t = 1 we get (X2,Y2) As 0 < t < 1 we get all the other points on the line segment between (X1,Y1) and (X2,Y2). 6 Simple DDA* Line Algorithm void DDA(int X1,Y1,X2,Y2) { int Length, I; float X,Y,Xinc,Yinc; Algorithm ideas based on parametric form? X = X1; Y = Y1; while(X<X2){ Plot(Round(X),Round(Y)); X = X + Xinc; Length = ABS(X2 - X1); if (ABS(Y2 - Y1) > Length) Length = ABS(Y2-Y1); Xinc = (X2 - X1)/Length; Yinc = (Y2 - Y1)/Length; Y = Y + Yinc; } } DDA creates good lines but it is too time consuming due to the round function and long operations on real values. *DDA: Digital Differential Analyzer DDA Example DDA Example Line from (6,9) to (11,12). Length := Max of (ABS(11-6), ABS(12-9)) = 5 Xinc := 1 Yinc := 0.6 13 12 Values computed are: (6,9), (7,9.6), (8,10.2), (9,10.8), (10,11.4), (11,12) 11 10 9 6 7 8 9 10 11 12 13 13 12 11 10 9 6 ! ! 8 9 10 11 12 13 Fast Lines (cont.) Fast Lines – Midpoint Method ! 7 NE = (xi + 1, yi + 1) Simplifying assumptions: Assume we wish to draw a line between points (0,0) and (a,b) with slope m between 0 and 1 (i.e. line lies in first octant). The general formula for a line is y = mx + B where m is the slope of the line and B is the y-intercept. From our assumptions m = b/a and B = 0. y = (b/a)x + 0 => f(x,y) = bx - ay = 0 is an equation for the line. +y -x (a,b) For lines in the first octant, given one pixel on the line, the next pixel is to the right (E) or to the right and up (NE). (xi +1, yi + ½ + e) e (xi +1, yi + ½) +x P = (xi ,yi ) -y E = (xi + 1, yi) Having turned on pixel P at (xi, yi ), the next pixel is NE at (xi+1, yi+1) or E at (xi+1, yi). Choose the pixel closer to the line f(x, y) = bx - ay = 0. Fast Lines (cont.) ! "# $ % %& ' $ ) # * ) ' ' - %& ' . "/ ) f(xi+1, yi+ ½ + e) = 0 (point on line) = b(xi + 1) - a(yi+ ½ + e) = b(xi + 1) - a(yi + ½) – a*e = f(xi + 1, yi + ½) – a*e NE = (xi + 1, yi + 1) e (xi +1, yi + ½) * ' 0 ) +, P = (xi ,yi ) 7 8 9 : 6 7 ; < = > ? @ Therefore, we only need to know the sign of di to choose between pixels E and NE. If di ≥ 0 choose NE, else choose E. But, calculating di directly each time requires at least two adds, a subtract, and two multiplies => too slow! E = (xi + 1, yi) ' 1 Fast Line Algorithm Decision Variable calculation B C D Algorithm: Calculate d0 directly, then for each i >= 0: if di ≥ 0 Then Choose NE = (xi + 1, yi + 1) as next point di+1 = f(xi+1 + 1, yi+1 + ½) = f(xi + 1 + 1, yi + 1 + ½) = b(xi + 1 + 1) - a(yi + 1 + ½) = f(x i + 1, yi + ½) + b - a = di + b - a else Choose E = (xi + 1, yi) as next point di+1 = f(xi+1 + 1, yi+1 + ½) = f(xi + 1 + 1, yi + ½) = b(xi + 1 + 1) - a(yi + ½) = f(xi + 1, yi + ½) + b = d i + b A 3 45 6 Let di = f(xi + 1, yi + ½) = a*e; di is known as the decision variable. Since a ≥ 0, di has the same sign as e. ") % 2 (xi +1, yi + ½ + e) ((' # % ! The Decision Variable Knowing di, we need only add a constant term to find di+1 ! {Bresenham for lines with slope between 0 and 1} a = ABS(xend - xstart); b = ABS(yend - ystart); d = 2*b - a; for (i = 0; i<a; i++){ Incr1 = 2*(b-a); Plot(x,y); Incr2 = 2*b; x = x + 1; if (xstart > xend) { if (d ≥ 0) { y = y + 1; x = xend; d = d + incr1; y = yend } } else else { d = d + incr2; x = xstart; } y = ystart } } G C D O T LXY \ LM N G C D L M N U K IH ] B C D ND L M N D S G C D ^S Y ] O D P EQ EM F H G ^_ ` Z H I b M N EG C U \ R X ^Z a LM N H IEF D H X ^_ ` Z LNM U \ R D P H I P K IH G D O O E N D P G IV R a H _ ` XY SY Z GM XH SR Z EF G CD L E N Q G M P G H F G EQ c else { x = x + 1; d = d + b i++) { } } + 1; + 1; + b - a; d e f g f h i f f h g e j k l j e j m nj f g o g p q i k r g ns i t u v i p nf h z g f n v h g i ko e p nf h z J H N EH R ID S O T S U H V W M EF G X Y S Y Z [ x = 0; y = 0; d = b - a/2; for(i = 0; i < a; Plot(x,y); if (d ≥ 0) { x = x y = y d = d } Bresenham’s Line Algorithm We can also generalize the algorithm to work for lines beginning at points other than (0,0) by giving x and y the proper initial values. This results in Bresenham's Line Algorithm. E F EG EH I J H IK D LNM U w x y g f h g j z r kf n{ k l | l u f e o g f } ~ u } y g i j } e i k k nj f g o g p s f n k k y e p s s nj g y g e j kl i p g i | e r f f h g s no j j e f f h g q i kr g e x } v Optimizations Speed can be increased even more by detecting cycles in the decision variable. These cycles correspond to a repeated pattern of pixel choices. The pattern is saved and if a cycle is detected it is repeated without recalculating. 16 15 14 13 12 11 10 9 6 di= 7 2 8 -6 9 6 10 -2 11 10 12 13 2 -6 14 15 16 6 -2 10 17 The aliasing problem Antialiasing - solutions Aliasing can be smoothed out by using higher addressability. Aliasing is cause by finite addressability of the display. If addressability is fixed but intensity is variable, use it to control the address of a "virtual pixel". Two adjacent pixels can be used to give the impression of a point between them. The perceived location of the point depends upon the ratio of the intensities used at each. The impression of a pixel located halfway between two addressable points can be given by having two adjacent pixels at half intensity. Approximation of lines and circles with discrete points often gives a staircase appearance or "Jaggies". An antialiased line has a series of virtual pixels each located at the proper address. Aliased rendering of the line Desired line Antialiased Bresenham Lines Aliasing / Antialiasing Examples Line drawing algorithms such as Bresenham's can easily be modified to implement virtual pixels. We use the distance (e = di/a) value to determine pixel intensities. Three possible cases which occur during the Bresenham algorithm: e>0 0 > e > -0.5 A e < -0.5 A A B B e e e B C A = 0.5 + e B = 1 - abs(e+0.5) C=0 C C A = 0.5 + e B = 1 - abs(e+0.5) C=0 A=0 B = 1 - abs(e+0.5) C = -0.5 - e Polygons Processing Polygons A polygon is a many-sided planar figure composed of vertices and edges. Vertices are represented by points (x,y). Edges are represented as line segments which connect two points, (x1,y1) and (x2,y2). P = { (xi , yi ) } i=1,n E1 (x1,y1) (x2,y2) E2 E3 (x3,y3) Convex and Concave Polygons Convex Polygon - For any two points P1, P2 inside the polygon, all points on the line segment which connects P1 and P2 are inside the polygon. – All points P = uP1 + (1-u)P2, u in [0,1] are inside the polygon provided that P1 and P2 are inside the polygon. Concave Polygon - A polygon which is not convex. Inside test: A point P is inside a polygon if and only if a scanline intersects the polygon edges an odd number of times moving from P in either direction. 2 trivial simple sequence of line renderings requires proper termination of lines at endpoints Max-Min Test Inside Polygon Test 1 Rendering unfilled polygons When crossing a vertex, if the vertex is a local maximum or minimum then count it twice, else count it once. 3 1 or or Count twice Count once Does the vertex count as two points? Or should it count as one point? Filling Polygons Fill the polygon 1 scanline at a time Scan-Line Algorithm For each scan-line: 1. Find the intersections of the scan line with all edges of the polygon. 2. Sort the intersections by increasing xcoordinate. 3. Fill in all pixels between pairs of intersections. For scan-line number 7 the sorted list of x-coordinates is (1,3,7,9) Therefore fill pixels with x-coordinates 1-3 and 7-9. 8 Determine which pixels on each scanline are inside the polygon and set those pixels to the appropriate value. Key idea: Don’t check each pixel for “inside-ness”. Instead, look only for those pixels at which changes occur. Problem: Calculating intersections is slow. Solution: Incremental computation / coherence 6 4 2 1 3 7 9 Edge Coherence Processing Polygons Observation: Not all edges intersect each scanline. Many edges intersected by scanline i will also be intersected by scanline i+1 Polygon edges are sorted according to their minimum Y. Scan lines are processed in increasing (upward) Y order. When the current scan line reaches the lower endpoint of an edge it becomes active. When the current scan line moves above the upper endpoint, the edge becomes inactive. Active Edges Formula for scanline s is y = s, for an edge is y = mx + b Their intersection is s = mxs + b => xs = (s-b)/m For scanline s + 1, xs+1 = (s+1 - b)/m = x s + 1/m Not yet active edges Finished edge Ignored horizontal edge Incremental calculation: xs+1 = xs + 1/m Polygon fill rules (to ensure consistency) 1. Horizontal edges: Do not include in edge table 2. Horizontal edges: Drawn on the bottom, not on the top. 3. Vertices: If local max or min, then count twice, else count once. 4. Vertices at local minima are drawn, vertices at local maxima are not. 5. Only turn on pixels whose centers are interior to the polygon: round up values on the left edge of a span, round down on the right edge Polygon fill example D (16,18) F (2,15) E (8,12) C (16,6) A (2,3) B (8,1) Antialiasing Polygons ! " # ' ! " # $% $% $% $% # " Xi Xi+1 1 02 3 + , - 0 ) ( - 0 2 3 ) 7 8 4 02 3 5 6 4 ) ) , 6 . , . 9 1 1 92 3 ( - 9 ! &" & ' ' $" $% Fill patterns can be used to put a noticeable texture inside a polygon. A fill pattern can be defined in a 0-based, m x n array. A pixel (x,y) is assigned the value found in: pattern((x mod m), (y mod n)) Xj Xj+1 0 1 + , , - . ) ) / + , - $% Fill Patterns ( ) * / + $# ) 7 8 9 2 3 4 5 96 Pattern Pattern filled polygon Halftoning For bitmapped displays, fill patterns with different fill densities can be used to vary the range of intensities of a polygon. The result is a tradeoff of resolution (addressability) for a greater range of intensities and is called halftoning. The pattern in this case should be designed to avoid being noticed. Modeling Curves and Surfaces These fill patterns are chosen to minimize banding. Motivation Naïve approach Need representations of smooth real world objects Art / drawings using CG need smooth curves Animation: camera paths – curve: piecewise linear function – lots of storage if high accuracy desired – hard to interactively manipulate the shape Instead, we’ll use higher-order functions Note: difference between stored model and rendered shape Parametric Curves Approaches Explicit Functions: Simply use lines & polygons to approximate curves & surfaces y = f(x) [e.g. y = 2x2] Linear: 1. Only one value of y for each x y = ayt + by 2. Difficult to represent a slope of infinity Implicit Equations: f(x,y) = 0 [e.g. x2 + y2 - r2 = 0] x = axt + bx z = azt + bz Quadratic: 1. Need constraints to model just one part of a curve x = axt2 + bxt + cx y = ayt2 + byt + cy 2. Joining curves together smoothly is difficult z = azt2 + bzt + cz Parametric Equations: x = f(t), y = f(t) [e.g. x = t2+3, y = 3t2+2t+1] 1. Slopes represented as parametric tangent vectors 2. Easy to join curve segments smoothly Cubic: x = axt3 + bxt2+ cxt + dx y = ayt3 + byt2+ cyt + dy z = azt3 + bzt2+ czt + dz ≤ ≤ Joining Curve Segments Together G0 G1 geometric continuity: The directions of the two segments’ tangent vectors are equal at the join point Joining Examples geometric continuity: Two curve segments join together S R0 TV3 C1 continuity: Tangent vectors of the two segments are equal in magnitude and direction Q3 TV2 – (C1 ➜ G1 unless tangent vector = [0,0,0]) P Cn continuity: Direction and magnitude through the nth derivative are equal at the join point R2 R1 Q2 Q1 Alternate Notation Notation Q(t) = T M G x = axt3 + bx t2+ cxt + dx y = ayt3 + by t2+ cyt + dy [t Q(t) = T C z = azt3 + bzt2+ czt + dz [ T=t t 2 ax bx C= cx dx ay by cy dy ] t 1 az bz cz dz ax Q (t ) = [t 1] bx m13 m21 m22 m23 m24 m31 m32 m33 m34 m41 m42 m43 m44 Basis Matrix m Q(t ) = [t 1] 11 m21 ! " # m12 ! G1 x " m22 G2 x G1 = P1 ay by az bz G2 y G2 z We know that at t = 0, t=0 &) ) Q′(t ) = [1 0] G1 G2 G3 G4 Geometry Matrix G2 = P2. & m11 m12 G1 y G1z m21 m22 G2 x G2 y G2 z ' % $( G1x t<0 P1 %$ P2 Q(0) = P1 Q'(0) = P2 - P1 at t = 1, ' ( What is the basis matrix? t=1 G1 z Since two points, P1 & P2 define a straight line, then the geometry matrix should be: G1 y The basis matrix contains information about the general family of curve that will be produced. t>1 # m14 Example (cont.) ax Q′(t ) = [1 0 ] bx az bz m12 Idea: Different curves can be specified by changing the geometric information in the geometry matrix. ay by t 1] m11 T Matrix x'(t) = ax y'(t) = ay z'(t) = az 2 Example: Parametric Line x(t) = axt + bx y(t) = ayt + by z(t) = azt + bz t 3 3 Q(1) = P2 Q'(1) = P2 - P1 Example (cont.) Example (cont.) Solve these simultaneous equations to find the basis matrix Mline: m21x1 + m22x2 = x1 (m11 + m21)x1 + (m12 + m22)x2= x2 m21y1 + m22y2 = y1 (m11 + m21)y1 + (m12 + m22)y2 = y2 m21z1 + m22z2 = z1 (m11 + m21)z1 + (m12 + m22)z2= z2 m11x1 + m12x2 = x2 - x1 m11 = -1 m12 = 1 m11y1 + m12y2 = y2 - y1 m21 = 1 m22 = 0 Q(0) = (0, 1) Mline G = P1 Q'(0) = (1, 0) Mline G = P2 - P1 Q(1) = Q'(1) = (1, 1) Mline G = P2 m11z1 + m12z2 = z2 - z1 M line (1, 0) Mline G = P2 - P1 Multiplying the T and M matrices gives you a set of functions in t; these are called blending functions. There is one blending function for each of the pieces of geometric information in the G matrix. The value of a blending function at a certain value of t determines the effect of the corresponding piece of geometric information at that point along the curve. [t 1] Hermite Curves Blending functions Line blending functions: −1 1 = 1 0 −1 1 t] = [1 − t 1 0 R1 P4 R4 f(t) x 1 P1 fn. P2 fn. 0 1 = (1 − t ) x1 + tx2 P1 y = (1 − t ) y1 + ty2 t Hermite Curve Examples (cont.) Hermite Curve Examples Tangent vector direction at point P 1. Magnitude varies for each curve P1 Tangent vector direction at point P 4. Magnitude varies for each curve P4 Family of Hermite parametric cubic curves. Only the tangent vector at P1 varies for each curve, increasing for the higher curves Family of Hermite parametric cubic curves. Only the direction of the tangent vector at the left starting point varies; all tangent vectors have the same magnitude. A smaller magnitude would eliminate the loops in some of the curves Hermite Matrices Q(t) = T MH GH GH = P1 T = [t 3 t 2 Q(t) = T MH GH t 1] Q(t) = (2t 3 − 3t 2 + 1)P1 + P4 R1 R4 Hermite Blending Functions −2 2 −3 MH = 0 1 1 1 0 0 0 (−2t 3 + 3t 2 )P4 + − 2 −1 1 0 3 0 (t 3 − 2t 2 + t)R1 + (t 3 − t 2 )R4 Bézier Curves Bézier Matrices GB = P3 P2 Q(t) = T MB GB P4 • R1 = 3(P2-P1), R4 = 3(P4-P3) T = [t 3 t 2 P3 P2 • constant velocity curves if control points are equally spaced MB = Two Bezier curves and their control points. Notice that the convex hulls shown as dashed lines need not involve all four control points Bézier Blending Functions • P1 & P4: endpoints P4 P1 P1 P1 P2 P3 P4 t 1] −1 3 3 −6 3 0 −3 3 0 0 1 0 −3 1 0 General Bézier Curves Let P1 through Pn+1 be points that define the curve. Then: Q (t ) = QB (t) = (−t + 3t − 3t + 1) P1 + 3 The Bernstein polynomials, which are weighting functions for Bezier curves. At t=0, only BB1 is nonzero, so the curve interpolates P1; similarly, at t=1, only BB4 is nonzero, and the curve interpolates P4 2 (3t 3 − 6t 2 + 3t ) P2 + (−3t 3 + 3t 2 ) P3 + t 3 P4 n i =0 Pi +1 Bi ,n (t),t ∈[0,1] where Bi,n(t) = C(n,i) ti (1-t)n-i {Blending functions} and C(n,i) = n!/(i!(n-i)!) {Binomial coefficient} 0 General Bézier Curves Bézier Curve Characteristics The functions interpolate the first and last vertex points. For two points, n = 1: The tangent at P0 is given by P1 - P0, and the tangent at Pn by Pn - Pn-1 QB(t) = (1-t)P1 + tP2 The blending functions are symmetric with respect to t and (1-t). This means that we can reverse the sequence of vertex points defining the curve without changing the shape of the curve. For three points, n = 2: The curve, Q(t), lies within the convex hull defined by the control points. QB(t) = (1-t)2P1 + 2t(1-t)P2 + t2P3 If the first and last vertices coincide, then we produce a closed curve. If complicated curves are to be generated, they can be formed by piecing together several Bézier sections. For four points, n = 3: QB(t) = (1-t)3P1 + 3t(1-t)2P2 + 3t2(1-t)P3 + t3P4 Modeling surfaces By specifying multiple coincident points at a vertex, we pull the curve in closer and closer to that vertex. Matrix representation Extension of parametric cubic curves called “parametric bicubic surfaces” Idea: infinite # of curves stacked together – equations now have 2 parameters – Q(s,t) P1(t) t=0.75 G1 (t ) G2 (t ) G= G3 (t ) P4(t) t=0.25 t s Matrix representation (cont.) A single curve was expressed Q(t) = TMG Now, the geometric information varies Q(s,t) = SMG Since each Gi is a cubic curve, it can be written: Gi(t) = TMGi Gi = g i1 gi4 Matrix representation (cont.) Substituting, we obtain: TMG1 G1 G2 = SMTM G3 G4 TMG3 TMG 4 Q(s,t) = SM TMG 2 gi2 gi 3 G4 (t ) each Gi(t) is itself a cubic curve This formulation does not work in terms of matrix dimensions... Matrix representation (cont.) So, use the transpose rule: Gi(t) = GiT MT TT Q(s,t) = S M g11 g12 g13 g14 g 21 g 31 g 22 g32 g 23 g33 g 24 g 34 g 41 g 42 g 43 g 44 =SM T G1 T G2 MT TT T G3 T G4 Finally, remember that the large geometry matrix has 3 components (x, y, z) for each gij, so that we get three parametric equations: x(s,t) = S M Gx MT TT y(s,t) = S M Gy MT TT z(s,t) = S M Gz MT TT MT TT Hermite surfaces Matrix representation (cont.) Hermite surface matrices x(s,t) = S M GHx MT TT y(s,t) = S M GHy MT TT z(s,t) = S M GHz MT TT extension of Hermite curves to parametric bicubic surfaces four elements of the geometry matrix are now P1(t), P4(t), R1(t), R4(t) can be thought of as interpolating the curves Q(s,0) and Q(s,1) or Q(0,t) and Q(1,t) P1 x (t) = TMG1x g11 g12 G1 x = g13 g11 g 21 = g 31 g 41 GH x g12 g 22 g32 g 42 g13 g 23 g33 g 43 g14 g 24 g34 g 44 g14 Rendering curves Iterative method based on parametric formula evaluation Rendering surfaces – t=0 – plot x(t), y(t), z(t) – increment t by a small amt. and repeat until t¡ 1 This is slow, depending on step size Can increase performance using difference methods (as with line drawing) Can also use iterative methods in s and t Grid representation: – render curves of constant t and constant s – use perspective and hidden lines to indicate surface shape Solid representation: – subdivide surface into “flat” sections – render quadrilateral for each section – shape indicated by shading (need normal) Examples Examples Closed surfaces can be formed by setting the last control point equal to the first. If the tangents also match between the first two and last two control points then the closed surface will have first order continuity. The corresponding properties of the Bézier curve apply to the Bézier surface • The surface does not in general pass through the control points except for the corners of the control point grid. • The surface is contained within the convex hull of the control points. Along the edges of the grid patch the Bézier surface matches that of a Bézier curve through the control points along that edge. While a cylinder/cone can be formed from a Bézier surface, it is not possible to form a sphere. • Examples Homework Given 2 points in 3D: P1=(-4,4,12) and P2=(5,7.5,7.5), center of projection O=(0,0,0), image plane z=3, and the origin of the image plane in XYZ coordinates Op=(-3,-2,3), calculate: • • (-4, 4, 12) • Y Yp (5,7.5,7.5) • Z P3 • Recalculate 1.b and 1.c when the center of projection moves to O’=(1,2,0) • Recalculate 1.b and 1.c when the image plane rotates with 45° around Y p (Op = (-3,-2,3) and O=(0,0,0)) (the sense of the rotation is indicated in the figure) P4 (-3,-2,3) image plane (0,0,0) Bezier surface patches rendered using different methods Xp X the parametric equations for the line P1P2 determine the intersections P 3 and P 4 of the OP 1 and OP2 lines with the image plane. which are the coordinates of P3 and P4 in image coordinates (XpYp)? use Bresenham algorithm to determine which pixels in the image plane are activated when you draw the line P3P4. Hint: compute the new image plane equation and in the parametric line equations compute t that constrains P3 and P4 to lay in the image plane
© Copyright 2024