CS 354Vector Graphics &Path RenderingMark KilgardUniversity of TexasApril 10, 2012
CS 354                                        2         Today’s material        In-class quiz            On Bézier curve...
CS 354                            3         My Office Hours        Tuesday, before class            Painter (PAI) 5.35  ...
CS 354                                               4         Last time, this time        Last lecture, we discussed    ...
CS 354                                                                        5                                 On a sheet...
CS 354                                             6         Project 3        Accept Biovision Hierarchy (BVH) files     ...
CS 354                                                    7         Vector Graphics      Confusing term      Used to des...
CS 354                                                                                    8         Taxonomy of Rendering ...
CS 354                                                                     9         Path Rendering StandardsDocument     ...
CS 354                                                                                       10                           ...
11         3D Rendering vs. Path RenderingCS 354 Characteristic                  GPU 3D rendering                        P...
CS 354                                                                                      12                            ...
CS 354                                                                       13         Seminal Path Rendering Paper     ...
CS 354                                                14         Filling vs. Stroking Paths just filling                  ...
CS 354                                       15         Content Defined by Control Points        Bezier Control points!
CS 354                                                                 16         Types of Path Commands        MoveTo x,...
CS 354                                                                 17         Path Examples:         PostScript Path S...
CS 354                                                    18         Path Examples:         SVG Path Syntax        Heart ...
CS 354                                              19         Paths Can Get Very Complicated        Single path…        ...
CS 354                                                       20         Curved Path Commands        Cubic Path Segments  ...
CS 354                                                          21         What does “Inside” Mean for a         Filled Pa...
CS 354                                                     22         Holes Can Be Authored or Avoided               outer...
CS 354                                                      23         Scan-line Edge Algorithms        Intersect path ed...
CS 354                                                    24         Filling of Segmented Path by Adding         and Subtr...
CS 354                                                    25Filling of Curved Path by Addingand Subtracting Coverage      ...
CS 354                                                   26         Handling Curved Edges        Conventional CPU approac...
CS 354                                                                                27         Massively Parallel GPU-ac...
CS 354                                                                  28         Stroking: Pen Analogy        Pull a pe...
CS 354                                                29         Tiger with Stroking        Stroking offsets features (wh...
CS 354                                                      30         Diagram of Circles Sweeping a Generating         Cu...
CS 354                                                         31         Offset Curve Examples          black = generatin...
CS 354                                                         32         Offset Curves         Form Complex Cusps!       ...
CS 354                                                                       33           Stroking is Hard          Topol...
CS 354                                                                                                                    ...
CS 354                                                                     35         Cubic Bezier folding situation     ...
CS 354                                                      36         Sharp turns        Butt end caps create non-linear...
CS 354                                                         37         Butt cases        End of curve overlaps curve i...
CS 354                                                         38         Butt cases        Butt ends intersect each othe...
CS 354                                               39         Butt cases        Butt ends have turns                   ...
CS 354                                            40         Butt cases        Shared end points                         ...
CS 354                                                            41                                         Single stroke...
CS 354                                                                       42                                           ...
CS 354                                                            43         Rasterization Rules         Pixels are blend...
CS 354                                                 44         Conflation Artifacts        Happens whenever coverage i...
CS 354                                     Real                  45                                    Flash              ...
CS 354                                                                                            46     Artists Can Easil...
CS 354                                                                47         Stroking Properties        Line width   ...
CS 354                                                                                      48         Dashing of Stroked ...
CS 354                                      49         Text Glyphs are Defined by Paths
CS 354                                                           50         Glyphs Outlines Have Control Points        Cu...
CS 354                                                           51         Glyphs Outlines Have Control Points        Qu...
CS 354                                                    52         Clipping Paths by Arbitrary Paths           unclipped...
CS 354                                                                  53         Complex Clipping Example               ...
CS 354                            54         Color Gradients        No per-vertex color as         in OpenGL            ...
CS 354                                              55         Gradient Examples        Artists do amazing things with gr...
CS 354                          56         Looks 3D        But really all fake…
CS 354                                                                      57         Example Composite         SVG Filte...
CS 354                                                               58         Path Rendering Trends        Most graphic...
CS 354                                           59         Soon        Mixing path rendering and 3D graphics           ...
CS 354                                                     60     Example of Bump Mapping     on Path Rendered Text      ...
CS 354                                                           61         Next Class        Next lecture            Ty...
Upcoming SlideShare
Loading in...5
×

CS 354 Vector Graphics & Path Rendering

3,984

Published on

CS 354 Computer Graphics; April 10, 2012; University of Texas at Austin

Published in: Technology, Art & Photos
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,984
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
107
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

CS 354 Vector Graphics & Path Rendering

  1. 1. CS 354Vector Graphics &Path RenderingMark KilgardUniversity of TexasApril 10, 2012
  2. 2. CS 354 2 Today’s material  In-class quiz  On Bézier curves lecture  Lecture topic  Project 3  Vector graphics & path rendering
  3. 3. CS 354 3 My Office Hours  Tuesday, before class  Painter (PAI) 5.35  8:45 a.m. to 9:15  Thursday, after class  ACE 6.302  11:00 a.m. to 12  Randy’s office hours  Monday & Wednesday  11 a.m. to 12:00  Painter (PAI) 5.33
  4. 4. CS 354 4 Last time, this time  Last lecture, we discussed  Bezier curves  This lecture  Resolution-independent 2D graphics  Path rendering  Projects  Schedule demos with TA for Project 2  Project 3 due Wednesday, April 18, 2012  Get started!
  5. 5. CS 354 5 On a sheet of paper Daily Quiz • Write your EID, name, and date • Write #1, #2, #3, followed by its answer  How many control points  Multiple choice: are used to define a cubic Geometric continuity Bézier curve? across two curved segments always means  Multiple choice: What percent of a Bézier curve a) The two segments are is contained within the identical convex hull of its control b) The shared end points points? of the segments have the same tangent magnitude a) 33.33% b) 50% c) The shared edge points c) 66.66% have the identical tangent d) 100% directions d) The shared end points are Euclidean variant means
  6. 6. CS 354 6 Project 3  Accept Biovision Hierarchy (BVH) files containing motion capture data  Hierarchy of affine transformations  Visualize a stick figure  Animate the figure
  7. 7. CS 354 7 Vector Graphics  Confusing term  Used to describe several kinds of graphics  Wireframe rendering  Plotting or calligraphic rendering HP DesignJet  Resolution-independent 2D graphics Scalable Vector Graphics (SVG)
  8. 8. CS 354 8 Taxonomy of Rendering scene dimensionality 2D 3D resolution processes primitives independence or samples independent dependent primitives samples path 2D primitive 3D primitive ray rendering rasterization rasterization tracing Examples Examples Examples Examples PostScript, PDF, GDI, Xlib OpenGL, Mental Ray SVG, TrueType, Direct3D Adobe Flash, Microsoft Silverlight, Notice large number of path rendering standards Apple Quartz 2D
  9. 9. CS 354 9 Path Rendering StandardsDocument Resolution- Immersive 2D Graphics OfficePrinting and Independent Web Programming ProductivityExchange Fonts Experience Interfaces Applications Java 2D API OpenType Flash QtGui API TrueType Scalable Mac OS X Vector 2D API Adobe Illustrator GraphicsOpen XMLPaper (XPS) Inkscape Open Source
  10. 10. CS 354 10 scene dimensionality 2D 3D resolution processes primitives independence or samples independent dependent primitives samples path 2D primitive 3D primitive ray rendering rasterization rasterization tracing Examples Examples Examples Examples PostScript, PDF, GDI, Xlib OpenGL, Mental Ray SVG, TrueType, Direct3D Adobe Flash, Microsoft Silverlight, Apple Quartz 2D GPUs already excel at these rendering paradigms
  11. 11. 11 3D Rendering vs. Path RenderingCS 354 Characteristic GPU 3D rendering Path rendering Dimensionality Projective 3D 2D, typically affine Pixel mapping Resolution independent Resolution independent Occlusion Depth buffering Painter’s algorithm Rendering primitives Points, lines, triangles Paths Primitive constituents Vertices Control points Constituents per primitive 1, 2, or 3 respectively Unbounded Topology of filled primitives Always convex Can be concave, self-intersecting, and have holes Degree of primitives 1st order (linear) Up to 3rd order (cubic) Rendering modes Filled, wire-frame Filling, stroking Line properties Width, stipple pattern Width, dash pattern, capping, join style Color processing Programmable shading Painting + filter effects Text rendering No direct support (2nd class support) Omni-present (1st class support) Raster operations Blending Brushes, blend modes, compositing Color model RGB or sRGB RGB, sRGB, CYMK, or grayscale Clipping operations Clip planes, scissoring, stenciling Clipping to an arbitrary clip path Coverage determination Per-color sample Sub-color sample
  12. 12. CS 354 12 scene dimensionality 2D 3D resolution processes primitives independence or samples independent dependent primitives samples path 2D primitive 3D primitive ray rendering rasterization rasterization tracing Examples Examples Examples Examples PostScript, PDF, GDI, Xlib OpenGL, Mental Ray SVG, TrueType, Direct3D Adobe Flash, Microsoft Silverlight, Apple Quartz 2D Conventional wisdom says GPUs aren’t well-positioned for accelerating these rendering paradigms Conventional wisdom is WRONG—though rest of this lecture focuses on just path rendering
  13. 13. CS 354 13 Seminal Path Rendering Paper  John Warnock & Douglas Wyatt, Xerox PARC  Presented SIGGRAPH 1982  Warnock with Chuck Geschke founds Adobe Systems same year  $20.1 billion market capitalization today (NVDA + AMD = $14.3 B) John Warnock Chuck Geschke
  14. 14. CS 354 14 Filling vs. Stroking Paths just filling just stroking filling + stroke = intended content
  15. 15. CS 354 15 Content Defined by Control Points  Bezier Control points!
  16. 16. CS 354 16 Types of Path Commands  MoveTo x,y  Bezier curve segments  LineTo x,y  QuadraticCurveTo  VerticalLineTo y x1,y1,x2,y2  HorizontalLineTo x  CubicCurveTo x1,y1,x2,y2,x3,y3  ClosePath  Partial elliptical arc  ArcTo  Variants rx,ry,x-axis-rotation, large-arc-flag,sweep-flag,  Smooth curves x,y  Relative
  17. 17. CS 354 17 Path Examples: PostScript Path Syntax  Heart  300 300 moveto 100 400 100 200 300 100 curveto 500 200 500 400 300 300 curveto closepath  Star  100 180 moveto 40 10 lineto 190 120 lineto 10 120 lineto 160 10 lineto closepath
  18. 18. CS 354 18 Path Examples: SVG Path Syntax  Heart  M300 300 C 100 400,100 200,300 100,500 200,500 400,300 300Z  Star  M100,180 L40,10 L190,120 L10,120 L160,10 z SVG = Scalable Vector Graphics
  19. 19. CS 354 19 Paths Can Get Very Complicated  Single path…  22,439 commands; 116,424 coordinates
  20. 20. CS 354 20 Curved Path Commands  Cubic Path Segments  Quadratic Path Segments  Partial elliptical arcs
  21. 21. CS 354 21 What does “Inside” Mean for a Filled Path?  Two fill rules: even-odd & non-zero even-odd non-zero counting enters and leaves for even-odd fill mode
  22. 22. CS 354 22 Holes Can Be Authored or Avoided outer = clockwise outer = clockwise inner = counter-clockwise inner = clockwise even-odd non-zero
  23. 23. CS 354 23 Scan-line Edge Algorithms  Intersect path edges with scan-line lines  Then find & color pixels “inside” path edges  Quite sequential algorithm
  24. 24. CS 354 24 Filling of Segmented Path by Adding and Subtracting Coverage  Incremental steps to determine the filled coverage of a path constructed from line segments  Next step is to extend this to curved path segments…
  25. 25. CS 354 25Filling of Curved Path by Addingand Subtracting Coverage Each (order-independent) step adds or subtracts coverage with the next being the curved path region. Credit: [Rueda et.al. 2008]
  26. 26. CS 354 26 Handling Curved Edges  Conventional CPU approach  Sub-divide curved edges until pixel-sized  Loop & Blinn [2005] show a better way  Use GPU to “discard” samples efficiently  Example shader for quadratic Bezier curve  if (s*s > t) discard;
  27. 27. CS 354 27 Massively Parallel GPU-accelerated Path Rendering Visualized Anchored triangle Anchored triangle fans geometry fans net stencil Stencil =1 Path commands and control points Resulting net coverage in stencil Curved segment Curved segment geometry net stencil Stencil -1 Stencil +1Credit: [Kokoji 2006]
  28. 28. CS 354 28 Stroking: Pen Analogy  Pull a pen along the path  The pen’s “tip” should be  Centered on the path  Orthogonal to the path  Mathematical version of this  Offset curves  Studied by Leibniz as parallel curves  Requires higher-order curves to express  Offset curve of arbitrary cubic curve = 10th order  Offset curve of arbitrary quadratic curve = 6th order
  29. 29. CS 354 29 Tiger with Stroking  Stroking offsets features (whiskers, etc.) filled & stroked stroked only
  30. 30. CS 354 30 Diagram of Circles Sweeping a Generating Curve to Generate Offset Curves green = generating curve red = “positive” offset curve blue = “negative” offset curve
  31. 31. CS 354 31 Offset Curve Examples black = generating curve red = offset curve (at two different offset radii)
  32. 32. CS 354 32 Offset Curves Form Complex Cusps! black = generating curve red = offset curve (at two different offset radii)
  33. 33. CS 354 33 Stroking is Hard  Topological occur with increasing stroke width  Holes can fill in when stroke width increases radius=1 radius=13 radius=22 radius=46
  34. 34. CS 354 34 Stroking Can Be Large Share of Relative Frame Time  Visualizing relative cost in normalize frame time Percent of Path Rendering Frame Time 100% 90% 80% 70% 151 paths 60% 1,384 path commands Path Stroking 6,370 coordinates 50% Path Filling Present/Swap Overhead 1024x1024 40% 16 samples/pixel for OpenGL 30% 20% Test configuration Core i7 @ 3.07 Ghz 10% GeForce GT 430 0% OpenGL Direct2D GPU Direct2D Warp Qt Skia Cairo OpenVG RI Fast CPU, slow GPU Path Rendering Implementation
  35. 35. CS 354 35 Cubic Bezier folding situation  Cubic path segment has limited parametric extent  Algebraic rasterization has to respect that extent Image: Tero Karras
  36. 36. CS 354 36 Sharp turns  Butt end caps create non-linear boundaries on the stroked path segment Image: Tero Karras
  37. 37. CS 354 37 Butt cases  End of curve overlaps curve itself Image: Tero Karras
  38. 38. CS 354 38 Butt cases  Butt ends intersect each other Image: Tero Karras
  39. 39. CS 354 39 Butt cases  Butt ends have turns Image: Tero Karras
  40. 40. CS 354 40 Butt cases  Shared end points Image: Tero Karras
  41. 41. CS 354 41 Single stroked cubic Comparing Six Path Renderers segment overlapped; on a Hard Case there should be a small hole    feathers? NV_path_rendering Cairo Direct2D Skia Qt OpenVG Reference Imp.    weird big holes weird big holes
  42. 42. CS 354 42 Single stroked cubic Comparing Six Path Renderers with tight control points; on Another Hard Case should look like butterfly   feathers? NV_path_rendering Cairo Direct2D Skia Qt OpenVG Reference Imp.    tessellation visible curves “smooshed” in
  43. 43. CS 354 43 Rasterization Rules  Pixels are blended once per path  Semi-opaque objects are common  Implies a two step process 1. Determine stencil of path’s filled or stroked region 2. Then paint that region  Porter-Duff compositing operations apply  Partial coverage is converted to alpha  Careful about conflation!
  44. 44. CS 354 44 Conflation Artifacts  Happens whenever coverage is converted into alpha term  Common when paths share exact seams   conflation free lots of conflation
  45. 45. CS 354 Real 45 Flash Scene same scene, GPU-rendered without conflation conflation artifacts abound, rendered by Skia conflation is aliasing & edge coverage percents are un-predicable in general; means conflated pixels flicker when animated slowly
  46. 46. CS 354 46 Artists Can Easily Contribute to Conflation Artifacts  Consider this American Samoa Seal scene  Zooming into the detail shows some artifacts in the hashing  Everything in scene is 100% opaque, but conflation leads to ghosting conflation artifacts NVpr-rendered: good, no conflation Skia-rendered: bad, shows conflation
  47. 47. CS 354 47 Stroking Properties  Line width flat / butt round square  End caps  Join style  Miter limit miter round bevel  Dashing  Dash pattern  Dash caps  Dash offset dashing examples
  48. 48. CS 354 48 Dashing of Stroked Paths Artist made windows with Same cake dashed line missing dashed segment stroking details Technical diagrams and charts often employ dashing Frosting on cake is dashed elliptical arcs with round end caps for “beaded” look; flowers are also dashing Dashing character outlines for quilted look
  49. 49. CS 354 49 Text Glyphs are Defined by Paths
  50. 50. CS 354 50 Glyphs Outlines Have Control Points  Cubic Bezier control points  Typical of PostScript fonts 4 control points per curved segments
  51. 51. CS 354 51 Glyphs Outlines Have Control Points  Quadratic Bezier Curves  Typical of TrueType fonts 3 control points per curved segments
  52. 52. CS 354 52 Clipping Paths by Arbitrary Paths unclipped tiger tiger with pink background clipped to heart
  53. 53. CS 354 53 Complex Clipping Example cowboy clip is tiger is 240 paths the union of 1,366 paths result of clipping tiger to the union of all the cowboy paths
  54. 54. CS 354 54 Color Gradients  No per-vertex color as in OpenGL  Since no vertexes!  Instead color assigned with  Constant color  Linear gradients  Radial gradients  Image gradients
  55. 55. CS 354 55 Gradient Examples  Artists do amazing things with gradients
  56. 56. CS 354 56 Looks 3D  But really all fake…
  57. 57. CS 354 57 Example Composite SVG Filter Effect GaussianBlur of alpha offset source graphic blur specular offset blur lighting “in” add composite covered specular specular source covered specular merge final result
  58. 58. CS 354 58 Path Rendering Trends  Most graphics people interactive with will be resolution- independent 2D  Resolution-dependent 2D “bitmap” graphics is way-of-the-past  Tablets, smart phones, etc. drive this  Denser screens  Apple’s Retinal display  Larger touch screens too  Means more pixels to draw  More interactivity  Static PDFs  interactive HTML 5 style content  Touch interaction demands low latency  Means path rendering needs to be faster  Power matters  CPUs inefficient path rendering won’t cut it
  59. 59. CS 354 59 Soon  Mixing path rendering and 3D graphics  All accelerated by GPUs
  60. 60. CS 354 60 Example of Bump Mapping on Path Rendered Text  Phrase “Brick wall!” is path rendered and bump mapped with a fragment shader light source position
  61. 61. CS 354 61 Next Class  Next lecture  Typography  The specialized problem of rendering legible text  Project 3  Begin work  Due Wednesday, April 18, 2012  (Project 4 will be a simple ray tracer and immediately follow Project 3)
  1. A particular slide catching your eye?

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

×