CS 354 Vector Graphics & Path Rendering
Download as PPT, PDF10 likes11,546 views
This document summarizes a lecture on vector graphics and path rendering. It discusses topics like Bézier curves, vector graphic standards, the differences between 3D rendering and path rendering, filling and stroking paths, offset curves for stroking, and challenges with path rendering like sharp turns and overlapping control points. Hard cases are shown where different path rendering implementations produce differing results. Rasterization rules and avoiding conflation artifacts are also covered.
![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]](https://image.slidesharecdn.com/22pathrender-120410213939-phpapp02/85/CS-354-Vector-Graphics-Path-Rendering-25-320.jpg)
![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;](https://image.slidesharecdn.com/22pathrender-120410213939-phpapp02/85/CS-354-Vector-Graphics-Path-Rendering-26-320.jpg)
![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]](https://image.slidesharecdn.com/22pathrender-120410213939-phpapp02/85/CS-354-Vector-Graphics-Path-Rendering-27-320.jpg)
CS 354 Vector Graphics & Path Rendering
- 1. CS 354 Vector Graphics & Path Rendering Mark Kilgard University of Texas April 10, 2012
- 2. CS 354 2 Today’s material In-class quiz On Bézier curves lecture Lecture topic Project 3 Vector graphics & path rendering
- 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. 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. 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. 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. 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. 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. 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. 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 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. 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. 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. CS 354 14 Filling vs. Stroking Paths just filling just stroking filling + stroke = intended content
- 15. CS 354 15 Content Defined by Control Points Bezier Control points!
- 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. 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. 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. CS 354 19 Paths Can Get Very Complicated Single path… 22,439 commands; 116,424 coordinates
- 20. CS 354 20 Curved Path Commands Cubic Path Segments Quadratic Path Segments Partial elliptical arcs
- 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. CS 354 22 Holes Can Be Authored or Avoided outer = clockwise outer = clockwise inner = counter-clockwise inner = clockwise even-odd non-zero
- 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. 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. 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. 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. 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. 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. CS 354 29 Tiger with Stroking Stroking offsets features (whiskers, etc.) filled & stroked stroked only
- 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. CS 354 31 Offset Curve Examples black = generating curve red = offset curve (at two different offset radii)
- 32. CS 354 32 Offset Curves Form Complex Cusps! black = generating curve red = offset curve (at two different offset radii)
- 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. 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. 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. CS 354 36 Sharp turns Butt end caps create non-linear boundaries on the stroked path segment Image: Tero Karras
- 37. CS 354 37 Butt cases End of curve overlaps curve itself Image: Tero Karras
- 38. CS 354 38 Butt cases Butt ends intersect each other Image: Tero Karras
- 39. CS 354 39 Butt cases Butt ends have turns Image: Tero Karras
- 40. CS 354 40 Butt cases Shared end points Image: Tero Karras
- 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. 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. 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. 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. 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. 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. 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. 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. CS 354 49 Text Glyphs are Defined by Paths
- 50. CS 354 50 Glyphs Outlines Have Control Points Cubic Bezier control points Typical of PostScript fonts 4 control points per curved segments
- 51. CS 354 51 Glyphs Outlines Have Control Points Quadratic Bezier Curves Typical of TrueType fonts 3 control points per curved segments
- 52. CS 354 52 Clipping Paths by Arbitrary Paths unclipped tiger tiger with pink background clipped to heart
- 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. 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. CS 354 55 Gradient Examples Artists do amazing things with gradients
- 56. CS 354 56 Looks 3D But really all fake…
- 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. 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. CS 354 59 Soon Mixing path rendering and 3D graphics All accelerated by GPUs
- 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. 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)