Framing the Canvas (November 2014)

Slide 1

Slide 1 text

Framing the Canvas Get your Paint together, follow the Path and get to master Shaders

Slide 2

Slide 2 text

Sebastiano Poggi Insult/stalk me on: @seebrock3r +SebastianoPoggi rock3r Android Software Craftsman in London

Slide 3

Slide 3 text

CC-BY-NC Joe Benjamin on Flickr

Slide 4

Slide 4 text

Paint on the Canvas CC-BY-NC-ND anna gutermuth on Flickr

Slide 5

Slide 5 text

Painting on the Canvas

Slide 6

Slide 6 text

• Base for any Android UI • Drawing on a buffer • Hardware or Software • API: Canvas, Paint, … Canvas CC-BY Cara St.Hilaire on Flickr

Slide 7

Slide 7 text

WELL GOOGLE, IF WE COULD HAVE SOME DOCUMENTATION EVERY NOW AND THEN YEAH, THAT’D BE GREAT

Slide 8

Slide 8 text

We should love Skia • Underneath Canvas • Native code • 2D graphics rendering toolkit • Basic painting • Advanced features walcor on DeviantArt

Slide 9

Slide 9 text

• Text is a pain • Weird quirks • E.g., no proper arcs • No documentation …but Skia kinda sucks Eugenio Marletti on Medium

Slide 10

Slide 10 text

Google • Draw using HWUI • Subset of Skia • Honeycomb and later • With limitations (of course) • Revert to software buffer OK, Canvas is still cool

Slide 11

Slide 11 text

Unsupported ops on HW Google

Slide 12

Slide 12 text

Good read Hardware Acceleration on Android Developers website http://goo.gl/HgV8D

Slide 13

Slide 13 text

Using the Canvas • Transforms using matrices and Cameras • Views must use it on the UI thread • Or go with a SurfaceView • Canvas is stateful

Slide 14

Slide 14 text

State of the art 1.Call save() — or saveToCount() 2.Do your stuff 3.Restore original state: restore() — or restoreToCount()

Slide 15

Slide 15 text

Seb’s top tip

Slide 16

Slide 16 text

Seb’s top tip Alpha composite overlaps, the framework way 1.int state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state);

Slide 17

Slide 17 text

Seb’s top tip Alpha composite overlaps, the framework way 1.int state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state); canvas

Slide 18

Slide 18 text

Seb’s top tip Alpha composite overlaps, the framework way 1.int state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state); canvas

Slide 19

Slide 19 text

Seb’s top tip Alpha composite overlaps, the framework way 1.int state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state); canvas

Slide 20

Slide 20 text

Seb’s top tip Alpha composite overlaps, the framework way 1.int state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state); offscreen buffer

Slide 21

Slide 21 text

Seb’s top tip Alpha composite overlaps, the framework way 1.int state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state); offscreen buffer

Slide 22

Slide 22 text

Seb’s top tip Alpha composite overlaps, the framework way 1.int state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state); offscreen buffer PROFIT!

Slide 23

Slide 23 text

Seb’s top tip Alpha composite overlaps, the framework way 1.int state = saveLayerAlpha(…); 2.Do your stuff 3.Blit back: restoreToCount(state); canvas PROFIT!

Slide 24

Slide 24 text

Surfacing ideas CC-BY-NC-SA arbyreed on Flickr

Slide 25

Slide 25 text

Painting on the Canvas

Slide 26

Slide 26 text

Surfaces and flingers • Draw on surfaces • Buffers • SurfaceFlinger • SW or HW backing CC-BY-NC-SA Nicolas Hoizey on Flickr

Slide 27

Slide 27 text

Good read AOSP Graphics on AOSP Source website http://goo.gl/i5iVwH

Slide 28

Slide 28 text

Layers • Offscreen buffers • Every Canvas has one • Can be blitted with a Paint • Different types of layer CC-BY-NC-SA Doug88888 on Flickr

Slide 29

Slide 29 text

View Layer types (3.0+) • NONE: no buffer • SOFTWARE: bitmap buffer • HARDWARE: HW-backed texture • Can improve performances (e.g., animations)

Slide 30

Slide 30 text

CC-BY Brandon Morse on Flickr Pushing pixels

Slide 31

Slide 31 text

Pushing pixels

Slide 32

Slide 32 text

Canvas API Paint Shape Path Matrix Color Drawable Bitmap Camera Movie NinePatch Picture Interpolator SurfaceTexture Typeface

Slide 33

Slide 33 text

Drawable Canvas API Shape Path Color Bitmap Camera Movie Picture Interpolator SurfaceTexture Typeface Matrix NinePatch Paint

Slide 34

Slide 34 text

Paint it (black) • Knows how to draw the pixels • All drawing calls need a Paint • Handles text as well • TextPaint subclass CC-BY-NC-ND Mark Chadwick on Flickr

Slide 35

Slide 35 text

Skia pipeline Adapted from Laurence Gonsalves’ post on Xenomachina

Slide 36

Slide 36 text

Good read Android's 2D Canvas Rendering Pipeline by Laurence Gonsalves on Xenomachina http://goo.gl/4W5R0Z

Slide 37

Slide 37 text

Effective painting • Steps have two phases each • “Two-pass” strategy • Effects modify steps output • Second passes default to identity CC-BY-NC-SA ClintJCL on Flickr

Slide 38

Slide 38 text

Mask ﬁlters • Rasterization phase • Affect alpha mask • Not HW accelerated • Blur and Emboss P S T R

Slide 39

Slide 39 text

Good read Blurring Images (series) by Mark Allison on Styling Android http://goo.gl/zZVs2V

Slide 40

Slide 40 text

Shaders • Shading phase • Similar to OpenGL shaders • Not programmable • TileMode CC-BY-NC-SA Andreas Köberle on Flickr P S T R

Slide 41

Slide 41 text

A Shady bunch Shader BitmapShader ComposeShader *Gradient Use a Bitmap as texture when painting Combine two different shaders and mix them with a Xfermode Paint using a Linear, Radial or Sweep gradient P S T R

Slide 42

Slide 42 text

Color Filters • Adjust colours after Shaders • Uniform transformation for all pixels ColorFilter ColorMatrixColorFilter LightingColorFilter PorterDuffColorFilter Apply a 4x5 colour matrix transform Multiply SRC colours by a colour, and then add a second colour Apply a colour to the SRC colour using a Porter-Duff mode P S T R

Slide 43

Slide 43 text

Transfer modes • Second step of Transfer phase • Blend SRC image onto DST through mask Xfermode AvoidXfermode PixelXorXfermode PorterDuffXfermode Draw (or don’t draw) pixels based on the “distance” from a reference Exclusive-OR source and destination pixels. Drops the alpha channel! Blends the source and destination colours using a Porter-Duff mode P S T R