Line & Area  Chen Jing-Fung (2006/10/24)   Assistant Research Fellow,      Digital Media Center,National Taiwan Normal Uni...
Coordinate                    representations                           Viewing & Projection                              ...
Reshape function          Video Processing Lab   3             臺灣師範大學數位媒體中心視訊處理研究室
Monitor                                        monitor                              Video Processing Lab            4http:...
2D graph• Plot figure in 2D coordinate  – X-coordinate indicated horizontal  – Y-coordinate indicated vertical  – Z-coordi...
Coordinate Reference• A set of coordinate extents                         y   – Bounding box (3D), bounding rectangle (2D)...
Coordinate specifications• Absolute coordinate & Relative  coordinate  – Last position (current position): (3, 8)  – => So...
2D world-coordinate in           OpenGL• An orthogonal projection function  – gluOrtho2D   glMatrixMode (GL_PROJECTION);  ...
How to a parameter  drawing line?        Video Processing Lab            臺灣師範大學數位媒體中心視訊處理研究室              National Taiwan ...
Bresenham’s line algorithm• Bresenham’s line is an accurate and  efficient raster line-generating algorithm• Use only incr...
Parallel Bresenham line algorithm • Drawing parallel processing   – Two different line on the same plane and     along a l...
How to buffer value by   the structure?          Video Processing Lab              臺灣師範大學數位媒體中心視訊處理研究室                Nati...
Setting frame-buffer values • Since scan-conversion algorithms generate   pixel positions which are labeled from (0, 0)   ...
Another drawing line     method     Use Midpoint         Video Processing Lab             臺灣師範大學數位媒體中心視訊處理研究室             ...
Circle-generating algorithms • A circle is defined as the set of points   – Radius = r, center position (xc, yc)          ...
Symmetry of a circle• Eight octants  – Calculation if a circle point (x, y) in one octant    yields the circle points show...
Midpoint circle algorithm (1)• The basic idea is to test the halfway  position between two pixels  – Determine inside or o...
Midpoint circle algorithm (2)    • To apply the midpoint method, we define a      circle function as:         – fcirc(x, y...
Other curves• Various curve functions are useful in object  modeling, animation path specification and other  graphics app...
Fill-Area   Video Processing Lab       臺灣師範大學數位媒體中心視訊處理研究室         National Taiwan Normal University
Fill-Area Primitives• Polygon area (solid-color, patterned)  – scan-line to fill polygon    •   Intersection points locate...
Fill-area primitives• Describing components of a picture is  an area that is filled with some solid  color  – Polygon is a...
Concave polygons• The direction of surface is “z’’ axle• Given two consecutive vertex (V)  positions, Vk and Vk+1, we defi...
Splitting concave polygons• Vector method  – All vector cross products have the same    sign => convex• Rotational method ...
Inside-Outside Tests• Testing interior vs. exterior object  boundaries  – Odd-even (parity) rule or nonzero winding    par...
Nonzero winding parity         rule• Nonzero winding parity rule may yield  different interior and exterior regions  – Set...
3D inside-outside     • Consider a sphere, x2 + y2 + z2 = 1.        – Interior: the set of all points that          satisf...
Polygon Surfaces (1)• Set of surface polygons enclose  object interior = Boundary  Representation (“B-rep”)               ...
Polygon Surfaces (2)• Polygon tables (B-rep lists)  – Geometric and attribute tables  – Vertex, edge, polygon tables  – Co...
Two polygon surfaces     • Geometric data-table representation for       two adjacent polygon surface facets,       formed...
Video Processing Lab      31http://www.icg.tu-graz.ac.at/courses/bacgvis/slides                                           ...
Plane equations • Ax+By+Cz+D=0     – Plane parameter: A, B, C and D • Normal vector (N)                         the plane ...
3D cartesian coordinate          y axis                                       y axis                                      ...
Front and Back Polygon         Faces (1)• Back face = polygon side that faces into  the object interior• Front face = poly...
Front and Back Polygon         Faces (2)• Ax + By + Cz + D = 0 for points on the  surface                   < 0 for points...
What is Cross product (x) ? • A mathematical joke asks,   – "What do you get when you cross a     mountain-climber with a ...
Cross product (x)• The orientation determined by the  right-hand rule                        Video Processing Lab         ...
OpenGL polygon fill-area      functions• OpenGL provides a special rectangle function   – glRect*(x1, y1, x2, y2);      • ...
How to design “font”?A complete set of type of one size            and face.               Video Processing Lab           ...
South China Morning Post, 13       Sep., 2005Video Processing Lab           40   臺灣師範大學數位媒體中心視訊處理研究室
Texture• Graphics displays often include  textural information :  – labels on graphs and charts  – signs on buildings or v...
Typeface (1)• Letters, numbers and other characters can  be displayed in a variety of sizes and  styles.  – The overall de...
Typeface (2)the letter B represented with an 8x8 bilevelbitmap pattern and with an outline shapedefined with straight line...
Homework (1)• Select 6 points and try to draw primitive  constant  – (a) GL_POLYGON (b) GL_TRIANGLES (c)    GL_TRIANGLE_ST...
Homework (2)• Draw switch  – (1) parabolic    • x = y2      (-10≦y ≦10)  – (2) 2D curve path    • 2D : Set (x0, y0) & step...
Reference• http://www.icg.tu-  graz.ac.at/courses/bacgvis/slides• South China Morning Post, 13 Sep.,  2005• Computer Graph...
Upcoming SlideShare
Loading in...5
×

CG OpenGL line & area-course 3

943

Published on

Computer Graphs about line & area designs (OpenGL)

Published in: Design, Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
943
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
33
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "CG OpenGL line & area-course 3"

  1. 1. Line & Area Chen Jing-Fung (2006/10/24) Assistant Research Fellow, Digital Media Center,National Taiwan Normal University Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室 National Taiwan Normal University
  2. 2. Coordinate representations Viewing & Projection Coordinates 1 1 Modeling 1 Video Monitor(local or master) Coordinates Plotter World Normalized (Cartesian) Coordinates Coordinates Other Output Device Coordinates Video Processing Lab 2 臺灣師範大學數位媒體中心視訊處理研究室
  3. 3. Reshape function Video Processing Lab 3 臺灣師範大學數位媒體中心視訊處理研究室
  4. 4. Monitor monitor Video Processing Lab 4http://groups.csail.mit.edu/graphics/classes/6.837/F04/calendar.html 臺灣師範大學數位媒體中心視訊處理研究室
  5. 5. 2D graph• Plot figure in 2D coordinate – X-coordinate indicated horizontal – Y-coordinate indicated vertical – Z-coordinate indicated depth simple nonsimple Video Processing Lab 5 臺灣師範大學數位媒體中心視訊處理研究室
  6. 6. Coordinate Reference• A set of coordinate extents y – Bounding box (3D), bounding rectangle (2D) 5 – Max & Min (x, y, z), (x, y) 4• Screen coordinates 3 2 – Scan line number: y 1 – Column number: x 0 x 01 2345• A low-level procedure of the pixel position – setPixel(x, y);• Retrieve the current frame-buffer setting for a pixel location – getPixel(x, y, color); Combine RGB bit codes Video Processing Lab 6 臺灣師範大學數位媒體中心視訊處理研究室
  7. 7. Coordinate specifications• Absolute coordinate & Relative coordinate – Last position (current position): (3, 8) – => Some graph packages is used relative coordinate: (2, -1) -> Absolute position: (5, 7) Video Processing Lab 7 臺灣師範大學數位媒體中心視訊處理研究室
  8. 8. 2D world-coordinate in OpenGL• An orthogonal projection function – gluOrtho2D glMatrixMode (GL_PROJECTION); glLoadIdentity (); Assign the identity matrix gluOrtho2D (xmin, xmax, ymin, ymax); World coordinate range ymax Display window ymin xmin xmax Video Processing Lab 8 臺灣師範大學數位媒體中心視訊處理研究室
  9. 9. How to a parameter drawing line? Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室 National Taiwan Normal University
  10. 10. Bresenham’s line algorithm• Bresenham’s line is an accurate and efficient raster line-generating algorithm• Use only incremental integer calculations.• Determine at next sample point whether to plot. – The positive-slope line: if start point (50, 50), next point? • (51, 50) or (51, 51) Video Processing Lab 10 臺灣師範大學數位媒體中心視訊處理研究室
  11. 11. Parallel Bresenham line algorithm • Drawing parallel processing – Two different line on the same plane and along a line path simultaneously. yk+1 yk xk+1 11 P. 99-101 Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室
  12. 12. How to buffer value by the structure? Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室 National Taiwan Normal University
  13. 13. Setting frame-buffer values • Since scan-conversion algorithms generate pixel positions which are labeled from (0, 0) to (xmax, ymax), the frame-buffer bit address is calculated as – (x, y) Screen • addr(x, y) = addr(0, 0) + y(xmax + 1)+x yend – (x+1, y) • addr(x+1, y) = addr(x, y) + 1 (x, y) – (x+1, y+1) y0 • addr(x+1, y+1) = addr(x, y) + xmax + 2 x0 xend Frame buffer: (0, 0) (1, 0) (2, 0) (0, 1) (x, y) (xmax, 0) (xmax, ymax) addr(0, 0) addr(x, y) Video Processing Lab 13 臺灣師範大學數位媒體中心視訊處理研究室
  14. 14. Another drawing line method Use Midpoint Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室 National Taiwan Normal University
  15. 15. Circle-generating algorithms • A circle is defined as the set of points – Radius = r, center position (xc, yc) (x-xc)2+(y-yc)2=r2 – X axis in unit steps from xc- r to xc+ r and calculating the corresponding y values at each position as y  y c  r 2  ( xc  x )2 – using polar coordinates r and θ Video Processing Lab 15 p.103-104 臺灣師範大學數位媒體中心視訊處理研究室
  16. 16. Symmetry of a circle• Eight octants – Calculation if a circle point (x, y) in one octant yields the circle points shown for the other seven octants• More efficient circle algorithm are based on incremental calculation of decision parameters, which involves only simple integer operations. (as in the Bresenham line algorithm) Video Processing Lab 16 臺灣師範大學數位媒體中心視訊處理研究室
  17. 17. Midpoint circle algorithm (1)• The basic idea is to test the halfway position between two pixels – Determine inside or outside the circle boundary.• Midpoint method = Bresenham line algorithm – Integer circle radius – A straight-line segment Video Processing Lab 17 臺灣師範大學數位媒體中心視訊處理研究室
  18. 18. Midpoint circle algorithm (2) • To apply the midpoint method, we define a circle function as: – fcirc(x, y) = x2+y2-r2 x 2 + y2 - r 2 = 0 yk <0, if (x,y) is inside the circle boundary yk-1 Midpointfcirc(x,y) =0, if (x,y) is on the circle boundary yk-2 >0, if (x,y) is outside the circle boundary xk xk+1 xk+2 – Decision parameter (each xk, k=0 & pk<0) • pk= fcirc(xk+1, yk-1/2) • pk+1=pk+2(xk+1) + (yk+12-yk2) - (yk+1-yk)+1 – Increment? What is different between midpoint and line- based? Video Processing Lab 18 p.105-109 臺灣師範大學數位媒體中心視訊處理研究室
  19. 19. Other curves• Various curve functions are useful in object modeling, animation path specification and other graphics applications.• Commonly encountered curves include conics, general polynomials and spline functions. – Conic sections: Ax2+ By2+Cxy+Dx+Ey+F=0 v0 g – Parabolic y0 • trajectory: y=y0+a(x-x0)2+b(x-x0) • Projection point: x=x0+vx0t; y=y0+vy0t-1/2gt2 – Hyperbola: (x/rx)2-(y/ry)2=1 x0 Spline curve formed with individual ry cubic polynomial sections between specified coordinate positions rx Video Processing Lab 19 臺灣師範大學數位媒體中心視訊處理研究室
  20. 20. Fill-Area Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室 National Taiwan Normal University
  21. 21. Fill-Area Primitives• Polygon area (solid-color, patterned) – scan-line to fill polygon • Intersection points located and sorted • Consecutive pairs define interior span • Attention with vertex intersections • Exploit coherence (incremental calculations) – flood fill algorithm Video Processing Lab 21 臺灣師範大學數位媒體中心視訊處理研究室
  22. 22. Fill-area primitives• Describing components of a picture is an area that is filled with some solid color – Polygon is a plane figure specified by • Vertices: three or more coordinate positions • Edges or sides: straight-line segments concave convey <1800 >1800 • Area…. Video Processing Lab 22 臺灣師範大學數位媒體中心視訊處理研究室
  23. 23. Concave polygons• The direction of surface is “z’’ axle• Given two consecutive vertex (V) positions, Vk and Vk+1, we define the edge vector (E) as Ek = Vk+1 - Vk (Cross product) y V6 V5 (E1 x E2)z > 0 E4 (E2 x E3)z > 0 V4 Where is “z” (E3 x E4)z < 0 convex E3 E2 V3 V1 V2 E1 x concave Test!! Video Processing Lab 23 臺灣師範大學數位媒體中心視訊處理研究室
  24. 24. Splitting concave polygons• Vector method – All vector cross products have the same sign => convex• Rotational method – rotate polygon-edges onto x-axis, always same direction => convex – Each vertex vk Area 1 V1 • Origin: translate Vk V3 V2 • Rotate clockwise Vk+1 on x-axis • If vertex below x-axis => split Area 2 V4 Video Processing Lab 24 臺灣師範大學數位媒體中心視訊處理研究室
  25. 25. Inside-Outside Tests• Testing interior vs. exterior object boundaries – Odd-even (parity) rule or nonzero winding parity rule• Odd-even rule – number of segments crossed by the line drawn from P to distant point outside the coordinate extents • bounding rectangle or box is odd it is interior point • else it is exterior point – use the rule for color filling of rings, 2 concentric polygons Video Processing Lab 25 臺灣師範大學數位媒體中心視訊處理研究室
  26. 26. Nonzero winding parity rule• Nonzero winding parity rule may yield different interior and exterior regions – Setup vectors along object edges and the reference line. – Compute cross product of vector u along the line from P to a distant point, with object vector E for each edge that crosses the line. – With 2 D object in XY plane direction of cross product will be + z direction or –z direction. • if z component for a crossing is +ve that segment crosses from left to right, add 1 to winding number • else if it is left to right subtract 1 from winding number simpler Video Processing Lab 26 臺灣師範大學數位媒體中心視訊處理研究室
  27. 27. 3D inside-outside • Consider a sphere, x2 + y2 + z2 = 1. – Interior: the set of all points that satisfy x2 + y2 + z2 < 1 – The solids surface: x2 + y2 + z2 <= 1. – Exterior: x2 + y2 + z2 > 1. Interior point A boundary Boundary point C Exterior point B Video Processing Lab 27http://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/model/closure.html 臺灣師範大學數位媒體中心視訊處理研究室
  28. 28. Polygon Surfaces (1)• Set of surface polygons enclose object interior = Boundary Representation (“B-rep”) wireframe representation of a cylinder with back (hidden) lines removed Video Processing Lab 28 臺灣師範大學數位媒體中心視訊處理研究室
  29. 29. Polygon Surfaces (2)• Polygon tables (B-rep lists) – Geometric and attribute tables – Vertex, edge, polygon tables – Consistency, completeness checks Video Processing Lab 29 臺灣師範大學數位媒體中心視訊處理研究室
  30. 30. Two polygon surfaces • Geometric data-table representation for two adjacent polygon surface facets, formed with six edges and five vertices VERTEX TABLE EDGE TABLE V1 E1: V1, V2 V1: x1, y1, z1 E2: V2, V3 V2: x2, y2, z2 E1 E3 E6 E3 V3 S1 E4 V4 S2 V5 E5 V5 E2 V E6 3 E 4 E5 SURFACE-FACET TABLEV2 S1: E1, E2,E3 V4 S2: E3, E4, E5, E6 Video Processing Lab 30 臺灣師範大學數位媒體中心視訊處理研究室
  31. 31. Video Processing Lab 31http://www.icg.tu-graz.ac.at/courses/bacgvis/slides 臺灣師範大學數位媒體中心視訊處理研究室
  32. 32. Plane equations • Ax+By+Cz+D=0 – Plane parameter: A, B, C and D • Normal vector (N) the plane equation: x − 1 = 0.The normal vector:N=( A, B, C )Plane equationAx + By + Cz + D = 0 Video Processing Lab 32 臺灣師範大學數位媒體中心視訊處理研究室
  33. 33. 3D cartesian coordinate y axis y axis z axis x axis x axis z axis Left-handed cartesian Right-handed cartesian Video Processing Lab 33 臺灣師範大學數位媒體中心視訊處理研究室
  34. 34. Front and Back Polygon Faces (1)• Back face = polygon side that faces into the object interior• Front face = polygon side that faces outward• Behind a polygon plane = visible to the polygon back face• In front of a polygon plane = visible to the polygon front face Video Processing Lab 34 臺灣師範大學數位媒體中心視訊處理研究室
  35. 35. Front and Back Polygon Faces (2)• Ax + By + Cz + D = 0 for points on the surface < 0 for points behind > 0 for points in front – right-handed coordinate system – polygon points in counterclockwise order• V1, V2, V3 counterclockwise => normal vector N = (V2 - V1) x (V3 - V1) Video Processing Lab 35 臺灣師範大學數位媒體中心視訊處理研究室
  36. 36. What is Cross product (x) ? • A mathematical joke asks, – "What do you get when you cross a mountain-climber with a mosquito? " • On the television sitcom, Head of the Class asks, – "What do you get when you cross an elephant and a grape?" Video Processing Lab 36 http://mathworld.wolfram.com/CrossProduct.html 臺灣師範大學數位媒體中心視訊處理研究室
  37. 37. Cross product (x)• The orientation determined by the right-hand rule Video Processing Lab 37 http://mathworld.wolfram.com/CrossProduct.html 臺灣師範大學數位媒體中心視訊處理研究室
  38. 38. OpenGL polygon fill-area functions• OpenGL provides a special rectangle function – glRect*(x1, y1, x2, y2); • *: i (integer), s (short), f (float), d (double) and v (vector) • plRectiv(vertex1, vertex2);• Fill rectangle use “glVertex” • glBegin (GL_POLYGON); – glVertex2iv (p1); – glVertex2iv (p2); p6 p5 – glVertex2iv (p3); – glVertex2iv (p4); – glVertex2iv (p5); p1 p4 – glVertex2iv (p6); • glEnd (); p2 p3 Video Processing Lab 38 臺灣師範大學數位媒體中心視訊處理研究室
  39. 39. How to design “font”?A complete set of type of one size and face. Video Processing Lab 臺灣師範大學數位媒體中心視訊處理研究室 National Taiwan Normal University
  40. 40. South China Morning Post, 13 Sep., 2005Video Processing Lab 40 臺灣師範大學數位媒體中心視訊處理研究室
  41. 41. Texture• Graphics displays often include textural information : – labels on graphs and charts – signs on buildings or vehicles – General identifying information for simulation and visualization applications. Video Processing Lab 41 臺灣師範大學數位媒體中心視訊處理研究室
  42. 42. Typeface (1)• Letters, numbers and other characters can be displayed in a variety of sizes and styles. – The overall design style for a set of characters – Routines for generating character primitives • 20-point Courier Italic or 28-point Palatino Bold • font : – 14 points, a total character height is about 0.5 cm. A – 72 points is about 2.54 cm (1 inch) B Video Processing Lab 42 臺灣師範大學數位媒體中心視訊處理研究室
  43. 43. Typeface (2)the letter B represented with an 8x8 bilevelbitmap pattern and with an outline shapedefined with straight line and curvesegments Video Processing Lab 43 臺灣師範大學數位媒體中心視訊處理研究室
  44. 44. Homework (1)• Select 6 points and try to draw primitive constant – (a) GL_POLYGON (b) GL_TRIANGLES (c) GL_TRIANGLE_STRIP (d) GL_TRIANGLE_FAN• Select 8 points and try to draw primitive constant – (a) GL_QUADS (b) GL_QUAD_STRIP• Draw 50 100 100 200 Video Processing Lab 44 臺灣師範大學數位媒體中心視訊處理研究室
  45. 45. Homework (2)• Draw switch – (1) parabolic • x = y2 (-10≦y ≦10) – (2) 2D curve path • 2D : Set (x0, y0) & step (relate to θ), m:integer – r=sin (mθ) r=A+Bcos(mθ) r=e-mθ r=mθ Video Processing Lab 45 臺灣師範大學數位媒體中心視訊處理研究室
  46. 46. Reference• http://www.icg.tu- graz.ac.at/courses/bacgvis/slides• South China Morning Post, 13 Sep., 2005• Computer Graphics with OpenGL 3/e, Hearn Baker, Third edition, ISBN: 0131202383 Video Processing Lab 46 臺灣師範大學數位媒體中心視訊處理研究室
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×