Successfully reported this slideshow.

CS 354 Vector Graphics & Path Rendering

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

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

More Related Content

CS 354 Vector Graphics & Path Rendering

1. 1. CS 354 Vector Graphics & Path Rendering Mark Kilgard University of Texas April 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 Standards Document Resolution- Immersive 2D Graphics Office Printing and Independent Web Programming Productivity Exchange Fonts Experience Interfaces Applications Java 2D API OpenType Flash QtGui API TrueType Scalable Mac OS X Vector 2D API Adobe Illustrator Graphics Open XML Paper (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 Rendering CS 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 25 Filling of Curved Path by Adding and 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 +1 Credit: [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)