Duel of Two Libraries: Cairo & Skia

1 © 2014 SAMSUNG Electronics Co.Open Source Group – Silicon Valley

Bryce Harrington – Senior Open Source Developer

Samsung Research America (Silicon Valley)

[email protected]

A Duel of Two Libraries

Cairo vs. Skia

2

© 2014 SAMSUNG Electronics Co.Open Source Group – Silicon Valley

What is Vector Graphics?

3


Vector Graphics

4


Vector Graphics

Basic TutorialFrom Inkscapeinkscape.org

5


Vector Graphics

Basic TutorialFrom Inkscapeinkscape.org

6


Vector Graphics

Shapes TutorialFrom Inkscapeinkscape.org

7


Vector Graphics


8


Vector Graphics

Fibonacci Little OwlBy ark4ndeviantart.com

9


Vector Graphics

openclipart.orgpublic domain vector graphics

10


Vector Graphics


11


Vector Graphics

SnookerBy Maddrumdeviantart.com

12


Vector Graphics

Iron Manby mrmandersdeviantart.com

13


Vector Graphics

Audi TTby JumpOrDiedeviantart.com

14


What is Cairo?

15


What is Cairo?

2D pen-based drawing model

For both display and print

Includes backends for acceleration and for vector output formats

16


Diagram (c) 2007 Donn Ingle [email protected]. Kubuntu 7.10 & Inkscape

You can use this to control the alpha of groups by:

ctx. push_group () <draw stuff> ctx. pop_group_to_source () ctx. paint_with_alpha ( a )

Cairoglyphicsvers 2.0

CLONE ZONE

SCRAPS

1

2

3

4

5

6

7

8

9

Ove

rvie

wCairoglyphics

vers 2.0

Transforms

Clip

Create Path

Create Path

Source

Source

Diagram (c) 2007 Donn Ingle [email protected]. Kubuntu 7.10 & Inkscape

The Page

Create Mask

Create Mask

This rectangle will be drawn first, shaped by the clip. The clip only lasts for this one operation.

Before you start drawing, you can set up a rotation and scale just like in a vector program like Inkscape.

The Source is like a picture you slip under the Path. It is revealed by the masking commands just like scratching away the surface to see what's underneath.

See Sources, Surfaces & Patterns diagram for details.

This diagram works from left to right. It shows the drawing of two shapes which each go to the page one after the other. All the commands to do this come from a toolbox called the Context. On the next page (Summary) I list many of the commands that you can use.

The star will be drawn on top of the rectangle.1 2

http://www.tortall.net/mu/wiki/CairoTutorialhttp://www.tortall.net/mu/wiki/CairoTutorial

17


Cairo Backends

Format backends ps pdf svg

Platform backends image xlib xcb cairo-glcairo-gl quartz win32 beos skia ( )‽

18


Cairo-gl on the Linux Desktop

Cairo-gl is not enabled for some distros (e.g. Ubuntu): --enable-gl links cairo to libgl NVIDIA's libgl gets linked to every client app Enormous RAM increase per app running (300%) See Launchpad #725434

Several GL backends supported cairo-gl (OpenGL) - EGL, GLX, WGL glesv2 (OpenGL ES 2.0) - EGL glesv3 (OpenGL ES 3.0) - EGLglesv3 (OpenGL ES 3.0) - EGL vg (OpenVG) - EGL, GLX cogl - experimental

19


Installing Cairo

Distro-supplied Cairo usually doesn't include GL support

Cairo Trees:Upstream: http://cgit.freedesk.top.org/cairo

CairoGles fork: https://github.com/SRA-SiliconValley/cairogles

PPAsComing Soon!

20


What is Skia?

21


What is Skia?

Skia Graphics EngineGreek for “shadowshadow”

Written in C++

Nov 1, 2005 - Google buys Skia Inc. Based in Chapel Hill, North Carolina

5 people

Releases Skia Graphics Engine as Open Source

Originally used for Android's WebKit, later added to Chrome web browser, Chrome OS, Chromium OS, and Android OS

22


Skia features

Skia is a 2D graphic library for drawing Text, Geometries, and Images.3x3 matrices w/ perspective

antialiasing, transparency, filters, subpixel text

shaders, transfer modes, maskfilters, patheffects

reads SVG, PS, PDF, Flash and translates into Skia API calls

Device backends for Skia currently include:Raster, OpenGL, PDF, XPS

Picture (for recording and then playing back into another Canvas)

Performance optimizationsCopy-on-write for images and other data types

Extensive use of the stack to avoid memory fragmentation

Thread-safety to enable parallelization

23


Installing Skia

Skia trees:https://skia.googlesource.com/skia

https://github.com/Samsung/skia

• Snapshot dev/m36_1985

Ubuntu PPA:https://launchpad.net/~bryce/+archive/ubuntu/skia/

RPM build spec:Only tested on Tizen

See packaging/skia.spec

24


Cairo vs. Skia!

25


Cairo and Skia Differences

CairoC

Standard build system (autoconf/automake)

Drawing context is in cairo_t

Packages available for all major distributions

API/ABI Stable

Being considered as an ISO Standard

SkiaC++

Custom build system(ninja)

Context is split

• SkCanvas - drawing

• SkPaint - style

Not packaged

Not API/ABI Stable

Promises better Promises better performanceperformance

26


Cairo/Skia Benchmarking“CaskBench”

27


What is caskbench?

?

28


What is Caskbench?

(Yet another?) testsuite with collection of testsProvides equivalent Cairo and Skia test implementations

Establishes comparable rendering environments

Ensures consistent measurements

Selectable rendering systemsImage, EGL, and GLX (coming soon)(coming soon)

Includes a Shapes and Styles LibraryCircles, Rectangles, Triangles, Stars, Rounded Rectangles

Solid, Linear/Radial Gradients, Image Pattern

Stroke Dash, Cap, and Join Styles

Collaboration with OSG, ASWP/ABT and SRI-B. (Thanks!)

29


How to use Caskbench

$ cmake .$ make

$ ./src/caskbench cairobubbles 64 PASS 64 0.005676 0.006731

skiabubbles 64 PASS 64 0.000987 0.001234 81.66%

cairofill 64 PASS 64 0.000789 0.000851

...

$ ./src/caskbench -t egl

$ ./src/caskbench -t egl --iterations 100 --size 42

30


Demo

$ src/caskbench w 1024 h 800 i 8 s 500

31


Caskbench options

Usage: caskbench [ARG...] enableeglsamplebuffers Sets EGL_SAMPLES=4 and EGL_SAMPLE_BUFFERS=1 in EGL attribute list n, dryrun Just list the selected test case names without executing i, iterations=INT The number of times each test case should be run l, listsurfaces List the available surfaces linked in this executable o, outputfile=STRING Filename to write JSON output to t, surfacetype=STRING Type of graphics surface to use (see listsurfaces) s, testsize=INT Controls complexity of the tests, such as number of drawn elements V, version Display the program version S, shape=STRING Controls which shape to be drawn X, xposition=INT The X location to draw the object Y, yposition=INT The Y location to draw the object W, width=INT Width of the shape bject H, height=INT Height of the shape object f, filltype=STRING Limit fill type of objects to solid, gradient, image pattern type g, animation=INT Controls the kinematics of the objects drawn I, imagepath=STRING Path to a stock image for use in clipping, patterns, etc. w, strokewidth=INT Limit stroke with to specified width m, multishapes=INT Randomize shape types used in tests C, capstyle=INT Limit cap style to specified cap style ID J, joinstyle=INT Limit join style to specified cap style ID D, dashstyle=INT Limit dash style to specified cap style ID

Help options: ?, help Show this help message usage Display brief usage message

32


What do test cases look like?

static int max_dim;

int

ca_setup_bubbles(caskbench_context_t *ctx)

{

max_dim = MIN(ctx->canvas_width, ctx->canvas_height)/2;

return 1;

}

void

ca_teardown_bubbles(void)

{

}

int

ca_test_bubbles(caskbench_context_t *ctx)

{

int i, x, y, r;

cairo_t *cr = ctx->cairo_cr;

for (i=0; i<ctx->size; i++) {

cairoRandomizeColor(ctx);

r = ((double)max_dim*rand())/RAND_MAX + 1;

x = (0.5*(double)ctx->canvas_width*rand())/RAND_MAX;

y = (0.5*(double)ctx->canvas_height*rand())/RAND_MAX;

cairo_arc (cr, x, y, r, 0, 2*M_PI);

cairo_fill (cr);

}

return 1;

}

static int max_dim;

int

sk_setup_bubbles(caskbench_context_t *ctx)

{

max_dim = MIN(ctx->canvas_width, ctx->canvas_height)/2;

return 1;

}

void

sk_teardown_bubbles(void)

{

}

int

sk_test_bubbles(caskbench_context_t *ctx)

{

int i, x, y, r;

for (i=0; i<ctx->size; i++) {

skiaRandomizePaintColor(ctx);

r = ((double)max_dim*rand())/RAND_MAX + 1;

x = (0.5*(double)ctx->canvas_width*rand())/RAND_MAX;

y = (0.5*(double)ctx->canvas_height*rand())/RAND_MAX;

ctx->skia_canvas->drawCircle(x, y, r, *ctx->skia_paint);

}

return 1;

}

Cairo Skia

33


Cairo Bubbles Test

34


Skia Bubbles Test

35


Adding New Backends

Backends other than egl, glx and image are welcome

Tasks for adding another backend:cairo-[backend].cpp - surface creation/update/destruction

skia-[backend].cpp - surface creation/update/destruction

[backend].cpp - shared code for both of the above

caskbench-context.cpp - register your backend

caskbench.cpp - add command line options you need

36


Add Another Drawing Library

More drawing libraries beyond Cairo and Skia also welcome

Bit more involved, though:[drawlib]-[backend].cpp - surface creation/update/deletion

[drawlib]-shapes.* - implement shape drawing

[drawlib]-utils.cpp - misc. routines

[drawlib]-tests/*.cpp - reimplement all tests

caskbench_context.cpp - register your drawing library

caskbench.cpp - add command line options, etc.

37


Results (So far...)

38


Performance results (PC)

$ caskbench i 100 s 256 t egl

cpu: Intel(R) Core(TM) i5-2405S CPU @ 2.50GHzplatform: x86_64 GNU/Linuxdistribution: Ubuntu Trusty Tahr (development branch)linux kernel: 3.13xserver: 1.15mesa: OpenGL version string: 3.0 Mesa 10.1.0video: snb-gt2 (8086:0112) sandybridge xserver-xorg-video-intel

39


EGL Performance results (EGL, PC)

test case ca sk

vline 485 508 4.48%

hline 482 499 3.41%

test case ca sk

line 292 510 42.79%

multi_line 430 646 33.46%

40


Performance results (EGL, PC)

test ca sk

cubic 107 402 73.37%

quadratic 123 416 70.47%

test ca sk

curves 11 76 85.44%

41



test ca sk

circle 107 169 36.98%

rect 243 81 201.03%

test ca sk

roundrect 109 232 53.11%

42



test ca sk

star(!) 201 169 19.06%

mulshape 139 197 29.57%

test ca sk

animation 123 375 67.13%

43



test ca sk

fill 166 240 30.54%

bubbles 169 45 274.75%

test ca sk

lin_grad 441 63 601.84%

rad_grad 455 62 631.12%

44



test ca sk

mask 433 876 50.53%

clip(!) 168923 7336.62%

test ca sk

paint 364 6 5811.96%

transform 8 2 258.79%

45



test ca sk

text ! 767 5 15009.39%

text_glyphs ! 708 41 1614.53%

46


Findings

Skia has better performance than Cairo for EGL+MSAA50% faster on average for basic drawing ops (both on PC and M0)

Slower than Cairo in certain cases

Skia can be trickier than Cairo to get rightRendering discrepancies

More sensitive to settings

• Polygons with anti-aliasing segfaults in debug builds (mesa 8 only)

• Rounded rects and stroke width > radius

• Stroke with dashes (fStencilbits<2)

• fSampleCount!=4 causes incorrect output

• … ?

47


Ongoing Work

SkiaMSAA Oval/Circle fill and stroke optimizations

Batch and route GrContext::drawPath() for rects and ellipses

Curved strokes – GrShapePathRenderer

SkDeferredCanvas improvements?

CairoGles3 support

Gaussian blur

GL MSAA compositor & optimizations

Drop shadow, inset shadow; shadow caching

Image downscaling

Perspective transformation

48


Thank you

https://github.com/SRA-SiliconValley/cairoglesSamsung's cairo branch with gles3, etc.

https://github.com/SamsungSamsung's branches of skia

Caskbench

https://github.com/SRA-SiliconValley/cairogles

49


Thank you.

Technology

Duel of Two Libraries: Cairo & Skia