Slides: Accelerating Vector Graphics Rendering using the Graphics Hardware Pipeline

Accelerating Vector Graphics Rendering using the Graphics Hardware Pipeline

Vineet Batra, Harish KumarAdobe Systems

Mark J. Kilgard, Tristan LorachNVIDIA

HD (1920 x 1080)

5k (5120 x 2880)(312 x 390) Ultra HD (3840 x 2160)

Vectors are not pixels !

Prior Work

• SIGGRAPH research on fast vector graphics scene renderingGanacim et al. Massively-parallel vector graphics (2014)

Nehab & Hoppe, Random-accessrendering of general vector graphics (2008)

We build upon…

Kilgard-Bolz, 2012 Loop-Blinn, 2005

Vatti, 1992

Porter-Duff, 1984

Kokojima et al., 2006

Accelerated rendering of Adobe PDF Standard

Contributions

Shading• Gradients• Patterns

Transparency Groups• Isolated• Non-Isolated• Knockout• Blend Modes

Paths, Text & Images

Accelerated rendering of Adobe PDF Standard

Contributions

Smooth rendering of Gradient Meshes

True CMYK & N-Channel Rendering

Accelerated rendering of Adobe PDF Standard

Contributions

Smooth rendering of Gradient Meshes

Layer based drawing in Adobe Illustrator

Porter-Duff Compositing

αr⋅Cr = αs⋅Cs + 1–αs⋅αb⋅Cb

αr = αs + 1–αs⋅αb

Porter-Duff Compositing

αr⋅Cr = αs⋅Cs + 1–αs⋅αb⋅Cb

αr = αs + 1–αs⋅αb

PDF Compositingαr⋅Cr = 1–αs⋅αb⋅Cb + 1–αb⋅αs⋅Cs + αb⋅αs⋅B(CbCs)

αr = αs + 1–αs⋅αb Blend mode

αr⋅Cr = αs⋅Cs + 1–αs⋅αb⋅Cb

αr = αs + 1–αs⋅αb

Blend Modes

Porter-Duff Compositing

αr⋅Cr = αs⋅Cs + 1–αs⋅αb⋅Cb

αr = αs + 1–αs⋅αb

PDF Compositingαr⋅Cr = 1–αs⋅αb⋅Cb + 1–αb⋅αs⋅Cs + αb⋅αs⋅B(CbCs)

αr = αs + 1–αs⋅αb Blend mode

For Normal Blend Mode, B(CbCs) = Cs

αr⋅Cr = αs⋅Cs + 1–αs⋅αb⋅CbPorter-Duff

KnockoutNon Knockout

Knockout Groups

Orange composites “over” Blue

Orange overwrites(Knocks out) Blue

KnockoutNon Knockout

Knockout Groups

See through text on opaque background

Orange composites “over” Blue

Orange overwrites(Knocks out) Blue

Method•Iterate objects from top to bottom•Accumulate coverage in the stencil buffer•Use stencil test to reject already marked pixels

Compositing Knock Out Groups

Stencil Buffer Color BufferPath Object

Method•Iterate objects from top to bottom•Accumulate coverage in the stencil buffer•Use stencil test to reject already marked pixels

Compositing Knock Out Groups

Stencil Buffer Color BufferPath Object

Method•Iterate objects from top to bottom•Accumulate coverage in the stencil buffer•Use stencil test to reject already marked pixels

Compositing Knock Out Groups

Stencil Buffer Color BufferPath Object

Method•Iterate objects from top to bottom•Accumulate coverage in the stencil buffer•Use stencil test to reject already marked pixels

Compositing Knock Out Groups

Stencil Buffer Color BufferPath Object

Method•Iterate objects from top to bottom•Accumulate coverage in the stencil buffer•Use stencil test to reject already marked pixels

Compositing Knock Out Groups

Stencil Buffer Color BufferPath Object

Method•Iterate objects from top to bottom•Accumulate coverage in the stencil buffer•Use stencil test to reject already marked pixels

Compositing Knock Out Groups

Knockout Non-knockout

Isolated

Non-isolated

Isolated & Non-isolated transparency groups

Compositing Isolated & Non-isolated transparency groups

Details in the paper

RGB CCMMYYKKR

B GKC

Y M

RGB CCMMYYKK

Not Entirely BlackAdd KK

RGB CCMMYYKK

RR = 1.0 – min(1.0, CC + KK)

GG = 1.0 – min(1.0, MM + KK)

BB = 1.0 – min(1.0, YY + KK)RR

BB GG

CC

MM YY

RGB CCMMYYKK

KK = min(1.0–RR, 1.0–GG, 1.0 – BB)

CC = 1.0 – RR – KK

MM = 1.0 – GG– KK

YY = 1.0 – BB – KKRR

BB GG

CC

MM YY

RGB CCMMYYKK

KC

Y M

KC

Y M

R

B G

KC

Y M

R

B G

Color Burn

Difference

Color Dodge

Hard Light

Overlay

Color Burn

Difference

Color Dodge

Hard Light

Overlay

Spot Colors• Advanced printing processes may have additional “spot

colors”

• Examples• Pantone Colors• Metallic ink• Fluorescent ink• Spot varnish• Custom hand-mixed ink

http://www.pantone.comPantone Colors

Challenges in CCMMYYKK Rendering

No built-in support for 4+ channelsCMYK color + 1 alpha + N Spot colors >= 5 8-bit channels

No support for blend modes in subtractive color spaceGPU blending assumes additive color space

Performance overhead in composition of transparency groups

Framebuffer setup on GPUR

B G

KC

Y M

Color Attachment 0

R G B A …R G B A R G B A

R G B A …R G B A R G B A

R G B A …R G B A R G B A

… … … … … …

Color Attachment 0

a bSpot Colors

… … … … … …

C M Y Aa bK C M Y Aa bK…

C M Y Aa bK C M Y Aa bK…C M Y Aa bK C M Y Aa bK…

C M Y Aa bK C M Y Aa bK…

No hardware support

Framebuffer setup on GPU – Proposed solution for CMYKR

B G

KC

Y M

… … … … … …

…C M Y A C M A C M Y A

…C M Y A C M A C M Y A

…C M Y A C M A C M Y A

Color Attachment 0

… … … … … …

…aK b A K a b A K a b A

K a b A K a b A K a b A

K a b A K a b A K a b A

Color Attachment 1

R G B A …R G B A R G B A

R G B A …R G B A R G B A

R G B A …R G B A R G B A

… … … … … …

Color Attachment 0

a bSpot Colors

Y

Y

Y

RGB

RGBresult = RGBsource + (1-Asource) * RGBdestination

Aresult = Asource + (1-Asource) * Adestination

Normal Blend mode

RGB

RGBresult = RGBsource + (1-Asource) * RGBdestination

Aresult = Asource + (1-Asource) * Adestination

Normal Blend mode

CCMMYYKK

CCMMYYKKresult = 1-((1-CCMMYYKKsource) + (1-Asource) * (1-CCMMYYKKdestination))

Aresult = Asource + (1-Asource) * Adestination

CCMMYYKK

CCMMYYKKresult = 1-((1-CCMMYYKKsource) + (1-Asource) * (1-CCMMYYKKdestination))

RGB

RGBresult = RGBsource + (1-Asource) * RGBdestination

Normal Blend mode

CCMMYYKK

CCMMYYKKresult = 1-((1-CCMMYYKKsource) + (1-Asource) * (1-CCMMYYKKdestination))

RGB

RGBresult = RGBsource + (1-Asource) * RGBdestination

final compliment

Normal Blend mode

CCMMYYKK

CCMMYYKKresult = CCMMYYKKsource + (1-Asource) * CCMMYYKKdestination

Aresult = Asource + (1-Asource) * Adestination

CCMMYYKK = (1-CCMMYYKK)

RGB

RGBresult = RGBsource + (1-Asource) * RGBdestination

Aresult = Asource + (1-Asource) * Adestination

Normal Blend mode

C M Y K A

shader input color

1−C 1−M 1−Y 1−K A

complemented source color

1−x

color componentcomplement

C M Y K Alogical destination color1−x

color componentcomplement

blendmode

1−C 1−M 1−Y 1−K Acomplemented destination color

CMYK Blending on the GPU

C M Y K A

shader input color

1−C 1−M 1−Y 1−K A

complemented source color

1−x

color componentcomplement

C M Y K Alogical destination color1−x

color componentcomplement

R G B A

display color

multisample resolve + CMYK color space RGB

blendmode

1−C 1−M 1−Y 1−K Acomplemented destination color

CMYK Blending on the GPU

QualityRGB CMYK

CPU

GPU

Adobe Illustrator CC 2015

System Configuration

Window 764 bit

Quad Core3.4 GHz, 8 GB

GeForce GTX780 Ti, 2GB

Performance EvaluationFull HD

1920 x 1080

R

B G

* * * *CMYK RGB

Performance EvaluationFull HD

1920 x 1080

R

B G

* * * *CMYK RGB

Performance EvaluationFull HD

1920 x 1080

R

B GPaths:132138

Trans. Groups: 66792

Paths: 9428

Trans. Groups:1457

Gradients: 1096

Paths: 11214

Trans. Groups: 2105

Gradients: 1973

Paths: 1041

Gradients: 291Paths:84995

Trans. Groups: 25614

Paths:14403

Trans. Groups: 14313

* * * *CMYK RGB

Performance EvaluationFull HD

1920 x 1080

R

B GPaths:132138

Trans. Groups: 66792

Paths: 9428

Trans. Groups:1457

Gradients: 1096

Paths: 11214

Trans. Groups: 2105

Gradients: 1973

Paths: 1041

Gradients: 291Paths:84995

Trans. Groups: 25614

Paths:14403

Trans. Groups: 14313

Gain

Avg. = 6.95xMax. = 18.8x

* * * *CMYK RGB

Performance Evaluation R

B G

Ultra HD3840 x 2160

*CMYK RGB* * *

Performance Evaluation R

B G

Ultra HD3840 x 2160Gain

Avg. = 9.03xMax. = 22.6x

*CMYK RGB* * *

Performance Evaluation KC

Y M

Full HD1920 x 1080

Paths:84995

Trans. Groups:

25614

Paths: 9428

Trans. Groups:1457

Gradients: 1096

Paths: 1041

Gradients: 291

Performance Evaluation KC

Y M

CPU Rendering (in ms)

GPU Rendering (in ms)

Full HD1920 x 1080

Paths:84995

Trans. Groups:

25614

Paths: 9428

Trans. Groups:1457

Gradients: 1096

Paths: 1041

Gradients: 291

Performance Evaluation KC

Y M

CPU Rendering (in ms)

GPU Rendering (in ms)

Gain

Avg. = 3.3xMax. = 7.76x

Full HD1920 x 1080

Paths:84995

Trans. Groups:

25614

Paths: 9428

Trans. Groups:1457

Gradients: 1096

Paths: 1041

Gradients: 291

Performance Evaluation C

Y M3840 x 2160 KC

Y M

Ultra HD3840 x 2160

Paths:84995

Trans. Groups:

25614

Paths: 9428

Trans. Groups:1457

Gradients: 1096

Paths: 1041

Gradients: 291

Performance Evaluation C

Y M3840 x 2160 KC

Y M

CPU Rendering

GPU Rendering

Ultra HD3840 x 2160

Paths:84995

Trans. Groups:

25614

Paths: 9428

Trans. Groups:1457

Gradients: 1096

Paths: 1041

Gradients: 291

Performance Evaluation C

Y M3840 x 2160 KC

Y M

CPU Rendering

GPU Rendering

Gain

Avg. = 5.68xMax. = 9.29x

Ultra HD3840 x 2160

Paths:84995

Trans. Groups:

25614

Paths: 9428

Trans. Groups:1457

Gradients: 1096

Paths: 1041

Gradients: 291

Demo

Future Work

• Achieve high quality anti-aliasing of text without using bitmaps generated on the CPU

• Improve the quality of sub-pixel anti aliasing• Improve CMYK rendering performance by reducing memory overhead• Extend the vector graphics rendering pipeline to support style effects such as

shadows and blurs

Thank you!