a modern 2d graphics library · 2017-12-14 · a modern 2d graphics library introduction to eduardo...

49
A modern 2D graphics library Introduction to Eduardo Lima Mitev [email protected] October 14th, 2014

Upload: others

Post on 15-Apr-2020

11 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

A modern 2D graphics library

Introduction to

Eduardo Lima [email protected]

October 14th, 2014

Page 2: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

What is Skia?

Page 3: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

A library for drawing 2D Text, Geometries and Images

What is Skia?

Page 4: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Focus on accurate, high qualityand high performance rendering

What is Skia?

Page 5: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Cross-platform: Linux, Android,ChromeOS, Mac, Windows, ...

What is Skia?

and hardware architectures too:x86, x86_64, ARMv7, AArch64, MIPS, ...

Page 6: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Open source, licensed underthe New BSD free software license

What is Skia?

Page 7: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Figure 1. Skia in the software stack

Skia in a typical software stack

Page 8: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Originally developed by Skia, Inc,acquired by Google in 2005,then released as open source

History

Page 9: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Sponsored and managed by Google ever since

History

Page 10: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Cairo, QPainter (Qt), Direct2D, Cocoa Drawing

Similar projects

Page 11: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Why should I care?Lets hold on this one for a while...

Page 12: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Who uses Skia?

Page 13: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Who uses Skia?

Android Chromium Chrome Firefox Firefox OS

Page 14: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Combined user-base could be above 1.5 billion

Who uses Skia?

Page 15: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

How Skia works?

Page 16: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

(Figure 2. High level architecture)

How Skia works?

Page 17: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

● Raster● OpenGL (ES)● PDF● XPS● Picture

Skia backends

Page 18: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

API overview

Page 19: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

SkCanvas: main drawing API(drawRect, drawText, drawLine, drawPath, etc)

API overview

Page 20: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

SkPaint: encapsulates styling of draw calls (color, path style, blending mode, font, etc)

API overview

Page 21: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

SkDevice: abstracts the backend (SkBitmapDevice, SkGpuDevice, SkPDFDevice, etc)

API overview

Page 22: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

SkPicture, SkPicturePlayback: records and replay draw operations

API overview

Page 23: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Main features

Page 24: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Linear transforms and perspective(3x3 matrices)

Main features

Page 25: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Shaders, xfermodes, mask filters, path effects

Main features

Page 26: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Antialiasing, transparency, filters

Main features

Page 27: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Deferred drawing (SkDeferredCanvas, SkPicture)

Main features

Page 28: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Subpixel text rendering

Main features

Page 29: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Ganesh: the OpenGL(ES) backend

Page 30: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Backend where most of the work is currently focused

Ganesh: the OpenGL(ES) backend

Page 31: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Accelerates 2D Canvas in Chromium/Chrome and Firefox

Ganesh: the OpenGL(ES) backend

Page 32: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Expected to accelerate full web content rendering in the future

Ganesh: the OpenGL(ES) backend

Page 33: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Some features:

Ganesh: the OpenGL(ES) backend

● Accelerate and combine effects with on-demand shaders

● Batching and merging of draw operations● Geometry shaders● Accelerated path rendering if available

(NV_path_rendering)

Page 34: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Performance

Page 35: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Performance

Great tools available:● Benchmarks in Skia repository under /bench● Skia-telemetry● skiaperf.com

● Chromium/Chrome’s about:tracing can also help

Page 36: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Performance

Lack of public benchmarks against similar libraries

Page 37: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

The future of Skia

Page 38: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Roadmap

Backend work:● Enhance PDF for Android and Chrome● Many GPU backend changes

Page 39: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Roadmap

Platform support:● C++11 enablement● GLSL ES 3.0

Page 40: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Roadmap

APIs and New Features:● Shareable pictures across process boundaries● sRGB support, in partnership with Chrome

Page 41: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Roadmap

Dev and Test Infrastructure:● New correctness testing framework● More frequent recapturing of web archives for

buildbot and cluster telemetry testing

Page 42: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Contributing to Skia

Page 43: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Three well defined roles:developer, contributor, committer

Contributing to Skia

Page 44: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Report bugs to the issue tracker

Contributing to Skia

Page 45: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Test: try Skia in your platform/hardware. Feed back!

Contributing to Skia

Page 46: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Contribute code: fix bugs, implement features in the roadmap

Contributing to Skia

beginners, look for issues tagged GoodFirstBug

Page 47: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Benchmark: compare Skia perf against other libraries in your platform/hardware; publish results!

Contributing to Skia

Page 48: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

https://sites.google.com/site/skiadocs/

For references and more info:

Page 49: A modern 2D graphics library · 2017-12-14 · A modern 2D graphics library Introduction to Eduardo Lima Mitev elima@igalia.com October 14th, 2014. ... Cairo, QPainter (Qt), Direct2D,

Q & A

Thank you!