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

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)