Duel of Two Libraries: Cairo & Skia

A Duel of Two Libraries
Cairo vs. Skia
Bryce Harrington – Senior Open Source Developer
Samsung Research America (Silicon Valley)
bryce@osg.samsung.com
1 © 2014 SAMSUNG Open Source Group – Silicon Valley Electronics Co.

2
What is Vector Graphics?
© 2014 SAMSUNG Open Source Group – Silicon Valley Electronics Co.

3
Vector Graphics

4
Vector Graphics
Basic Tutorial
From
Inkscape
inkscape.org

5
Vector Graphics
Basic Tutorial
From
Inkscape
inkscape.org

6
Vector Graphics
Shapes
Tutorial
From
Inkscape
inkscape.org

7
Vector Graphics
Shapes
Tutorial
From
Inkscape
inkscape.org

8
Vector Graphics
Fibonacci
Little Owl
By ark4n
deviantart.com

9
Vector Graphics
openclipart.org
public domain vector
graphics

10
Vector Graphics
Shapes
Tutorial
From
Inkscape
inkscape.org

11
Vector Graphics
Snooker
By Maddrum
deviantart.co
m

12
Vector Graphics
Iron Man
by mrmanders
deviantart.com

13
Vector Graphics
Audi TT
by JumpOrDie
deviantart.co
m

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
Overview
Cairoglyphics vers 2.0
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.
Transforms
Clip
The star will be drawn
on top of the rectangle. 1 2
Create Path
Create Path
Source
Source
The Page
Diagram (c) 2007 Donn Ingle donn.
ingle@gmail.com. Kubuntu 7.10 & Inkscape
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.
hhtttptp:/://w/wwwww.t.otortratalll.ln.neet/tm/muu/w/wikiki/iC/CaairioroTTuutotoriraial l

17
Cairo Backends
Format backends
 ps
 pdf
 svg
Platform backends
 image
 xlib
 xcb
 ccaaiirroo--ggll
 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
 gglleessvv33 ((OOppeennGGLL EESS 33..00)) -- EEGGLL
 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
PPAs
Coming Soon!

20
What is Skia?

21
What is Skia?
Skia Graphics Engine
Greek for “sshhaaddooww”
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 optimizations
Copy-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
Cairo
C
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
Skia
C++
Custom build system
(ninja)
Context is split
• SkCanvas - drawing
• SkPaint - style
Not packaged
Not API/ABI Stable
PPrroommiisseess bbeetttteerr
ppeerrffoorrmmaannccee

26
Cairo/Skia Benchmarking
“CaskBench”

27
What is caskbench?
?

28
What is Caskbench?
(Yet another?) testsuite with collection of tests
Provides equivalent Cairo and Skia test implementations
Establishes comparable rendering environments
Ensures consistent measurements
Selectable rendering systems
Image, EGL, and GLX ((ccoommiinngg ssoooonn))
Includes a Shapes and Styles Library
Circles, 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;
Cairo Skia
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;
}

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.50GHz
platform: x86_64 GNU/Linux
distribution: Ubuntu Trusty Tahr (development branch)
linux kernel: 3.13
xserver: 1.15
mesa: OpenGL version string: 3.0 Mesa 10.1.0
video: 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(!) 1689 23 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+MSAA
50% 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 right
Rendering 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
Skia
MSAA Oval/Circle fill and stroke optimizations
Batch and route GrContext::drawPath() for rects and ellipses
Curved strokes – GrShapePathRenderer
SkDeferredCanvas improvements?
Cairo
Gles3 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/cairogles
Samsung's cairo branch with gles3, etc.
https://github.com/Samsung
Samsung's branches of skia
Caskbench

49
Thank you.

Duel of Two Libraries: Cairo & Skia

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Duel of Two Libraries: Cairo & Skia

Similar to Duel of Two Libraries: Cairo & Skia (20)

More from Samsung Open Source Group

More from Samsung Open Source Group (20)

Recently uploaded

Recently uploaded (20)

Duel of Two Libraries: Cairo & Skia