cs 354 vector graphics & path rendering
DESCRIPTION
CS 354 Computer Graphics; April 10, 2012; University of Texas at AustinTRANSCRIPT
CS 354Vector Graphics &Path RenderingMark KilgardUniversity of TexasApril 10, 2012
CS 354 2
Today’s material
In-class quiz On Bézier curves lecture
Lecture topic Project 3 Vector graphics & path rendering
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
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!
CS 354 5
Daily Quiz1. How many control points
are used to define a cubic Bézier curve?
Multiple choice: What percent of a Bézier curve is contained within the convex hull of its control points?
a) 33.33%b) 50%c) 66.66%d) 100%
3. Multiple choice: Geometric continuity across two curved segments always means
a) The two segments are identical
b) The shared end points of the segments have the same tangent magnitude
c) The shared edge points have the identical tangent directions
d) The shared end points are Euclidean variant means
On a sheet of paper• Write your EID, name, and date• Write #1, #2, #3, followed by its answer
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
CS 354 7
Vector Graphics Confusing term Used to describe several kinds of graphics
Wireframe rendering
Plotting or calligraphic rendering
Resolution-independent 2D graphics
HP DesignJet
Scalable Vector Graphics (SVG)
CS 354 8
Taxonomy of Renderingscene
dimensionality
resolutionindependence
processes primitivesor samples
2D 3D
2D primitiverasterization
ExamplesGDI, Xlib
pathrendering
dependent
ExamplesPostScript, PDF,SVG, TrueType,Adobe Flash,Microsoft Silverlight,Apple Quartz 2D
3D primitiverasterization
raytracing
ExamplesMental Ray
ExamplesOpenGL,Direct3D
primitives samplesindependent
Notice large number of path rendering standards
CS 354 9
Path Rendering StandardsDocumentPrinting andExchange
ImmersiveWebExperience
2D GraphicsProgrammingInterfaces
OfficeProductivityApplications
Resolution-IndependentFonts
OpenType
TrueType
Flash
Open XMLPaper (XPS)
Java 2DAPI
Mac OS X2D API Adobe Illustrator
InkscapeOpen Source
ScalableVectorGraphics
QtGuiAPI
CS 354 10
scenedimensionality
resolutionindependence
processes primitivesor samples
2D 3D
2D primitiverasterization
pathrendering
dependent
3D primitiverasterization
raytracing
primitives samplesindependent
GPUs already excel at these rendering paradigms
ExamplesGDI, Xlib
ExamplesPostScript, PDF,SVG, TrueType,Adobe Flash,Microsoft Silverlight,Apple Quartz 2D
ExamplesMental Ray
ExamplesOpenGL,Direct3D
CS 354 11
3D Rendering vs. Path RenderingCharacteristic GPU 3D rendering Path renderingDimensionality 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
CS 354 12
scenedimensionality
resolutionindependence
processes primitivesor samples
2D 3D
2D primitiverasterization
pathrendering
dependent
3D primitiverasterization
raytracing
primitives samplesindependent
Conventional wisdom saysGPUs aren’t well-positioned for
accelerating these rendering paradigms
Conventional wisdom is WRONG—though rest of this lecturefocuses on just path rendering
ExamplesGDI, Xlib
ExamplesPostScript, PDF,SVG, TrueType,Adobe Flash,Microsoft Silverlight,Apple Quartz 2D
ExamplesMental Ray
ExamplesOpenGL,Direct3D
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
CS 354 14
Filling vs. Stroking Paths
just filling just stroking
filling + stroke = intended content
CS 354 15
Content Defined by Control Points Bezier Control points!
CS 354 16
Types of Path Commands
MoveTo x,y LineTo x,y
VerticalLineTo y HorizontalLineTo x
ClosePath
Variants Smooth curves Relative
Bezier curve segments QuadraticCurveTo
x1,y1,x2,y2 CubicCurveTo
x1,y1,x2,y2,x3,y3 Partial elliptical arc
ArcTorx,ry,x-axis-rotation,large-arc-flag,sweep-flag,x,y
CS 354 17
Path Examples:PostScript Path Syntax
Heart 300 300 moveto
100 400 100 200 300 100 curveto500 200 500 400 300 300 curveto closepath
Star 100 180 moveto
40 10 lineto 190 120 lineto 10 120 lineto 160 10 linetoclosepath
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
CS 354 19
Paths Can Get Very Complicated Single path…
22,439 commands; 116,424 coordinates
CS 354 20
Curved Path Commands
Cubic Path Segments Quadratic Path Segments
Partial elliptical arcs
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 leavesfor even-odd fill mode
CS 354 22
Holes Can Be Authored or Avoided
even-odd non-zero
outer = clockwiseinner = counter-clockwise
outer = clockwiseinner = clockwise
CS 354 23
Scan-line Edge Algorithms
Intersect path edges with scan-line lines Then find & color pixels “inside” path edges
Quite sequential algorithm
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…
CS 354 25
Filling of Curved Path by Adding and Subtracting Coverage
Credit: [Rueda et.al. 2008]
Each (order-independent) stepadds or subtracts coveragewith the next being the curvedpath region.
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;
CS 354 27
Massively Parallel GPU-accelerated Path Rendering Visualized
Stencil -1
Stencil +1
Stencil =1
Anchored trianglefans geometry
Anchored trianglefans net stencil
Resulting netcoverage in stencil
Curved segmentnet stencil
Curved segmentgeometry
Path commandsand control points
Credit: [Kokoji 2006]
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
CS 354 29
Tiger with Stroking
Stroking offsets features (whiskers, etc.)
filled & stroked stroked only
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
CS 354 31
Offset Curve Examples
black = generating curve
red = offset curve (at two different offset radii)
CS 354 32
Offset CurvesForm Complex Cusps!
black = generating curve
red = offset curve (at two different offset radii)
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
CS 354 34
Stroking Can Be Large Share of Relative Frame Time
Visualizing relative cost in normalize frame timePercent of Path Rendering Frame Time
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
OpenGL Direct2D GPU Direct2D Warp Qt Skia Cairo OpenVG RI
Path Rendering Implementation
Path Stroking
Path Filling
Present/Swap Overhead
Test configurationCore i7 @ 3.07 Ghz
GeForce GT 430
Fast CPU, slow GPU
151 paths1,384 path commands
6,370 coordinates
1024x102416 samples/pixel
for OpenGL
CS 354 35
Cubic Bezier folding situation
Cubic path segment has limited parametric extent Algebraic rasterization has to respect that extent
Image: Tero Karras
CS 354 36
Sharp turns
Butt end caps create non-linear boundaries on the stroked path segment
Image: Tero Karras
CS 354 37
Butt cases
End of curve overlaps curve itself
Image: Tero Karras
CS 354 38
Butt cases
Butt ends intersect each other
Image: Tero Karras
CS 354 39
Butt cases
Butt ends have turns
Image: Tero Karras
CS 354 40
Butt cases
Shared end points
Image: Tero Karras
CS 354 41
Comparing Six Path Rendererson a Hard Case
Direct2DCairoNV_path_rendering
OpenVG Reference Imp.QtSkia
Single stroked cubicsegment overlapped;there should be a small hole
feathers?
weird big holes weird big holes
CS 354 42
Comparing Six Path Rendererson Another Hard Case
Direct2DCairoNV_path_rendering
OpenVG Reference Imp.QtSkia
Single stroked cubicwith tight control points;should look like butterfly
feathers?
tessellation visible curves “smooshed” in
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!
CS 354 44
Conflation Artifacts Happens whenever coverage is converted into
alpha term Common when paths share exact seams
conflation free lots of conflation
CS 354 45
RealFlash
Scene
conflationartifacts abound,rendered by Skia
same scene, GPU-renderedwithout conflation
conflation is aliasing &edge coverage percentsare un-predicable in general;means conflated pixelsflicker when animated slowly
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
conflationartifacts
NVpr-rendered: good, no conflation Skia-rendered: bad, shows conflation
CS 354 47
Stroking Properties Line width
End caps Join style
Miter limit
Dashing Dash pattern Dash caps Dash offset
miter round bevel
flat / butt round square
dashing examples
CS 354 48
Dashing character outlines for quilted look
Frosting on cake is dashedelliptical arcs with roundend caps for “beaded” look;flowers are also dashing
Same cakemissing dashedstroking details
Artist made windows with dashed line
segment
Technical diagramsand charts often employ dashing
Dashing of Stroked Paths
CS 354 49
Text Glyphs are Defined by Paths
CS 354 50
Glyphs Outlines Have Control Points Cubic Bezier control points
Typical of PostScript fonts
4 control points per curved segments
CS 354 51
Glyphs Outlines Have Control Points
Quadratic Bezier Curves Typical of TrueType fonts
3 control points per curved segments
CS 354 52
Clipping Paths by Arbitrary Paths
unclipped tiger tiger with pink backgroundclipped to heart
CS 354 53
Complex Clipping Example
cowboy clip isthe union of 1,366 pathstiger is 240 paths
result of clipping tigerto the union of all the cowboy paths
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
CS 354 55
Gradient Examples
Artists do amazing things with gradients
CS 354 56
Looks 3D
But really all fake…
CS 354 57
Example CompositeSVG Filter Effect
source graphic
blur
GaussianBlur of alpha
offset
offset blur
specular lighting
specular
coveredspecular
coveredspecularsource
finalresult
“in”compositeadd
merge
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
CS 354 59
Soon
Mixing path rendering and 3D graphics All accelerated by GPUs
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
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)