1 / 27

CS148: Introduction to Computer Graphics and Imaging Triangles

Learn how to draw triangles on screen with pixel coordinates, OpenGL conventions, and handling singularities in rasterization process. Understand triangle orientation, testing point inside triangle, bounding rectangle computation, and efficient interpolation techniques. Explore barycentric coordinates for precise rendering methods.

tbessie
Download Presentation

CS148: Introduction to Computer Graphics and Imaging Triangles

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. CS148: Introduction to Computer Graphics and Imaging Triangles CS148 Lecture 3

  2. How to draw a triangle on the screen Rasterization CS148 Lecture 3

  3. Pixel Coordinates Window edges at integers y (4,3) Pixels inside window (1,1) (0,1) (0,0) (1,0) x

  4. Pixel Coordinates OpenGL: Pixel centers correspond to half-integer coordinates y (.5, 1.5) (1.5, 1.5) (1.5, .5) (.5, .5) Note: Other graphics packages may use a different convention x

  5. Triangle Rasterization Rule Output fragment if pixel center is inside the triangle CS148 Lecture 3

  6. Triangle Rasterization rasterize( vert v[3] ) { for( int y=0; y<YRES; y++ ) for( int x=0; x<XRES; x++ ) if( inside3(v,x,y) ) fragment(x,y); } v0 l1 l2 v2 l0 v1 CS148 Lecture 3

  7. Normal to the Line CS148 Lecture 3

  8. Line Equation This equation must be true for all point p on the line CS148 Lecture 3

  9. Line Divides Plane into 2 Half-Spaces Normal n points to the right of the line; Inside (negative values) to the left of the line. CS148 Lecture 3

  10. Make a Line from Two Vertices makeline( vert& v0, vert& v1, line& l ) { l.a = v1.y - v0.y; l.b = v0.x - v1.x; l.c = -(l.a * v0.x + l.b * v0.y); } v1 v0 l CS148 Lecture 3

  11. Triangle Orientation v1 v2 v0 v0 v1 v2 CW (Back Facing) CCW (Front Facing) Convention: Inside a CCW polygon is equivalent to inside every lines of the polygon (on their left) CS148 Lecture 3

  12. rasterize( vert v[3] ) { line l0, l1, l2; makeline(v[0],v[1],l2); makeline(v[1],v[2],l0); makeline(v[2],v[0],l1); for( y=0; y<YRES; y++ ) { for( x=0; x<XRES; x++ ) { e0 = l0.a * x + l0.b * y + l0.c; e1 = l1.a * x + l1.b * y + l1.c; e2 = l2.a * x + l2.b * y + l2.c; if( e0<=0 && e1<=0 && e2<=0 ) fragment(x,y); } } } Point Inside Triangle Test v0 l1 l2 v2 l0 v1 CS148 Lecture 3

  13. Singularities • Singularities: Edges that touch pixels (e == 0) • Causes two fragments to be generated • Wasted effort drawing duplicated fragments • Problems with transparency (later lecture) • Not including singularities (e < 0) causes gaps CS148 Lecture 3

  14. int shadow( line l ) { return (l.a>0) || (l.a == 0 && l.b > 0); } int inside( value e, line l ) { return (e == 0) ? !shadow(l) : (e < 0); } Handling Singularities • Create shadowed edges (thick lines) • Don’t draw pixels on shadowed edges • Solid drawn; hollow not drawn CS148 Lecture 3

  15. rasterize( vert v[3] ) { line l0, l1, l2; makeline(v[0],v[1],l2); makeline(v[1],v[2],l0); makeline(v[2],v[0],l1); for( y=0; y<YRES; y++ ) { for( x=0; x<XRES; x++ ) { e0 = l0.a * x + l0.b * y + l0.c; e1 = l1.a * x + l1.b * y + l1.c; e2 = l2.a * x + l2.b * y + l2.c; if( inside(e0,l0)&&inside(e1,l1)&&inside(e2,l2) ) fragment(x,y); } } } Better Point Inside Triangle Test v0 l1 l2 v2 l0 v1 CS148 Lecture 3

  16. Compute Bounding Rectangle (BBox) bound3( vert v[3], bbox& b ) { b.xmin = ceil(min(v[0].x, v[1].x, v[2].x)); b.xmax = ceil(max(v[0].x, v[1].x, v[2].x)); b.ymin = ceil(min(v[0].y, v[1].y, v[2].y)); b.ymax = ceil(max(v[0].y, v[1].y, v[2].y)); } Calculate tight bound around the triangle Round coordinates upward (ceil) to the nearest integer CS148 Lecture 3

  17. Compute Bounding Rectangle (BBox) bound3( vert v[3], bbox& b ) { b.xmin = ceil(min(v[0].x, v[1].x, v[2].x)); b.xmax = ceil(max(v[0].x, v[1].x, v[2].x)); b.ymin = ceil(min(v[0].y, v[1].y, v[2].y)); b.ymax = ceil(max(v[0].y, v[1].y, v[2].y)); } Tested points indicated by filled circles Don’t need to test hollow circles CS148 Lecture 3

  18. rasterize( vert v[3] ) { bbox b; bound3(v, b); line l0, l1, l2; makeline(v[0],v[1],l2); makeline(v[1],v[2],l0); makeline(v[2],v[0],l1); for( y=b.ymin; y<b.ymax, y++ ) { for( x=b.xmin; x<b.xmax, x++ ) { e0 = l0.A * x + l0.B * y + l0.C; e1 = l1.A * x + l1.B * y + l1.C; e2 = l2.A * x + l2.B * y + l2.C; if( inside(e0,l0)&&inside(e1,l1)&&inside(e2,l2) ) fragment(x,y); } } } More Efficient Bounding Box Version CS148 Lecture 3

  19. Interpolation Convert discrete values to a continuous function by filling in “in between” values CS148 Lecture 3

  20. Linear Interpolation 0 1 CS148 Lecture 3

  21. Barycentric Interpolation Edge Triangle CS148 Lecture 3

  22. Barycentric Interpolation on Triangles Can be used to interpolate colors r = a0 r0 + a1 r1 + a2 r2 g = a0 g0 + a1 g1 + a2 g2 b = a0 b0 + a1 b1 + a2 b2 Can be used to interpolate texture coordinates u = a0 u0 + a1 u1 + a2 u2 v = a0 v0 + a1 v1 + a2 v2 Can be used to interpolate z or depth z = a0 z0 + a1 z1 + a2 z2 Can be used to interpolate normals… CS148 Lecture 3

  23. Finding Barycentric Coordinates CS148 Lecture 3

  24. How to Compute Triangle Area C B A CS148 Lecture 3

  25. Barycentric Coordinates: Linear System Determinant of matrix is equal to zero if the points are co-linear CS148 Lecture 3

  26. Barycentric Coordinates: Basis Vectors CS148 Lecture 3

  27. Barycentric Coordinates vs. Basis Vector Coordinates A point p inside triangle p0p1p2 can be expressed using barycentric coordinates as Point p can also be expressed in the basis vector coordinates (of last slide as) Therefore, we get the relations CS148 Lecture 3

More Related