CS 354 Vector Graphics & Path Rendering

61
CS 354 Vector Graphics & Path Rendering Mark Kilgard University of Texas April 10, 2012

description

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

Transcript of CS 354 Vector Graphics & Path Rendering

Page 1: CS 354 Vector Graphics & Path Rendering

CS 354Vector Graphics &Path RenderingMark KilgardUniversity of TexasApril 10, 2012

Page 2: CS 354 Vector Graphics & Path Rendering

CS 354 2

Today’s material

In-class quiz On Bézier curves lecture

Lecture topic Project 3 Vector graphics & path rendering

Page 3: CS 354 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

Page 4: CS 354 Vector Graphics & Path Rendering

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!

Page 5: CS 354 Vector Graphics & Path Rendering

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

Page 6: CS 354 Vector Graphics & Path Rendering

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

Page 7: CS 354 Vector Graphics & Path Rendering

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)

Page 8: CS 354 Vector Graphics & Path Rendering

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

Page 9: CS 354 Vector Graphics & Path Rendering

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

Page 10: CS 354 Vector Graphics & Path Rendering

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

Page 11: CS 354 Vector Graphics & Path Rendering

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

Page 12: CS 354 Vector Graphics & Path Rendering

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

Page 13: CS 354 Vector Graphics & Path Rendering

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

Page 14: CS 354 Vector Graphics & Path Rendering

CS 354 14

Filling vs. Stroking Paths

just filling just stroking

filling + stroke = intended content

Page 15: CS 354 Vector Graphics & Path Rendering

CS 354 15

Content Defined by Control Points Bezier Control points!

Page 16: CS 354 Vector Graphics & Path Rendering

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

Page 17: CS 354 Vector Graphics & Path Rendering

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

Page 18: CS 354 Vector Graphics & Path Rendering

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

Page 19: CS 354 Vector Graphics & Path Rendering

CS 354 19

Paths Can Get Very Complicated Single path…

22,439 commands; 116,424 coordinates

Page 20: CS 354 Vector Graphics & Path Rendering

CS 354 20

Curved Path Commands

Cubic Path Segments Quadratic Path Segments

Partial elliptical arcs

Page 21: CS 354 Vector Graphics & Path Rendering

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

Page 22: CS 354 Vector Graphics & Path Rendering

CS 354 22

Holes Can Be Authored or Avoided

even-odd non-zero

outer = clockwiseinner = counter-clockwise

outer = clockwiseinner = clockwise

Page 23: CS 354 Vector Graphics & Path Rendering

CS 354 23

Scan-line Edge Algorithms

Intersect path edges with scan-line lines Then find & color pixels “inside” path edges

Quite sequential algorithm

Page 24: CS 354 Vector Graphics & Path Rendering

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…

Page 25: CS 354 Vector Graphics & Path Rendering

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.

Page 26: CS 354 Vector Graphics & Path Rendering

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;

Page 27: CS 354 Vector Graphics & Path Rendering

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]

Page 28: CS 354 Vector Graphics & Path Rendering

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

Page 29: CS 354 Vector Graphics & Path Rendering

CS 354 29

Tiger with Stroking

Stroking offsets features (whiskers, etc.)

filled & stroked stroked only

Page 30: CS 354 Vector Graphics & Path Rendering

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

Page 31: CS 354 Vector Graphics & Path Rendering

CS 354 31

Offset Curve Examples

black = generating curve

red = offset curve (at two different offset radii)

Page 32: CS 354 Vector Graphics & Path Rendering

CS 354 32

Offset CurvesForm Complex Cusps!

black = generating curve

red = offset curve (at two different offset radii)

Page 33: CS 354 Vector Graphics & Path Rendering

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

Page 34: CS 354 Vector Graphics & Path Rendering

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

Page 35: CS 354 Vector Graphics & Path Rendering

CS 354 35

Cubic Bezier folding situation

Cubic path segment has limited parametric extent Algebraic rasterization has to respect that extent

Image: Tero Karras

Page 36: CS 354 Vector Graphics & Path Rendering

CS 354 36

Sharp turns

Butt end caps create non-linear boundaries on the stroked path segment

Image: Tero Karras

Page 37: CS 354 Vector Graphics & Path Rendering

CS 354 37

Butt cases

End of curve overlaps curve itself

Image: Tero Karras

Page 38: CS 354 Vector Graphics & Path Rendering

CS 354 38

Butt cases

Butt ends intersect each other

Image: Tero Karras

Page 39: CS 354 Vector Graphics & Path Rendering

CS 354 39

Butt cases

Butt ends have turns

Image: Tero Karras

Page 40: CS 354 Vector Graphics & Path Rendering

CS 354 40

Butt cases

Shared end points

Image: Tero Karras

Page 41: CS 354 Vector Graphics & Path Rendering

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

Page 42: CS 354 Vector Graphics & Path Rendering

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

Page 43: CS 354 Vector Graphics & Path Rendering

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!

Page 44: CS 354 Vector Graphics & Path Rendering

CS 354 44

Conflation Artifacts Happens whenever coverage is converted into

alpha term Common when paths share exact seams

conflation free lots of conflation

Page 45: CS 354 Vector Graphics & Path Rendering

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

Page 46: CS 354 Vector Graphics & Path Rendering

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

Page 47: CS 354 Vector Graphics & Path Rendering

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

Page 48: CS 354 Vector Graphics & Path Rendering

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

Page 49: CS 354 Vector Graphics & Path Rendering

CS 354 49

Text Glyphs are Defined by Paths

Page 50: CS 354 Vector Graphics & Path Rendering

CS 354 50

Glyphs Outlines Have Control Points Cubic Bezier control points

Typical of PostScript fonts

4 control points per curved segments

Page 51: CS 354 Vector Graphics & Path Rendering

CS 354 51

Glyphs Outlines Have Control Points

Quadratic Bezier Curves Typical of TrueType fonts

3 control points per curved segments

Page 52: CS 354 Vector Graphics & Path Rendering

CS 354 52

Clipping Paths by Arbitrary Paths

unclipped tiger tiger with pink backgroundclipped to heart

Page 53: CS 354 Vector Graphics & Path Rendering

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

Page 54: CS 354 Vector Graphics & Path Rendering

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

Page 55: CS 354 Vector Graphics & Path Rendering

CS 354 55

Gradient Examples

Artists do amazing things with gradients

Page 56: CS 354 Vector Graphics & Path Rendering

CS 354 56

Looks 3D

But really all fake…

Page 57: CS 354 Vector Graphics & Path Rendering

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

Page 58: CS 354 Vector Graphics & Path Rendering

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

Page 59: CS 354 Vector Graphics & Path Rendering

CS 354 59

Soon

Mixing path rendering and 3D graphics All accelerated by GPUs

Page 60: CS 354 Vector Graphics & Path Rendering

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

Page 61: CS 354 Vector Graphics & Path Rendering

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)