Compositing and blending

• Builds upon existing SVG spec
• Collaboration between Adobe and Canon
• Contains all of blend modes. Widely use by graphic designers
• Matches all the compositing modes in Canvas

Why add this?

• SVG filters are not as easy to use
• Not all blending modes are available in the filters spec
• Existing compositing spec only applied to SVG
• New spec breaks compositing and blending into 2 steps:
  • blend-mode
  • alpha-compositing

What is blending?

1. Takes the colors of the shape and the background
2. Combine the colors using a 'mixing' formula
3. Use the alpha of the background to create a new color

Step 1 + 2: apply blending formula

Alpha of source and background are ignored

step 3: account for background alpha

Image is on top of the 2 rectangles

Result = α x blendedColor + (1 - α) x original

Different blend modes

• normal
• multiply
• screen
• overlay
• darken
• lighten
• color-dodge
• color-burn
• hard-light
• soft-light
• difference
• exclusion
• hue
• saturation
• color
• luminosity

Additions to canvas

Extend globalCompositeOperation to take blend modes

Wait, there's more!

Compositing

• combines graphical objects (also known as shapes)
• Works with the alpha channel and premultiplied colors
• Is a low level primitive for graphical effects
• Already part of the canvas specification

Simple alpha Compositing

Result = source + (1 - αs) x backdrop

Different blend modes

• clear
• src
• dst
• src-over
• dst-over
• src-in
• dst-in
• src-out
• dst-out
• src-atop
• dst-atop
• xor
• plus

Group compositing

01    <rect ...>
02    <g id="gsave">
03        <circle ...>
04        <circle style="alpha-compositing: clear" ...>

.gsave: hover {opacity: .5};

The shape buffer

This is an extra channel that keeps track of the shape

Group isolation and knockout

Current status

• Working draft since August 16
• Partially implemented in WebKit
• Working prototype available

CSS masking

• standardize '-mask-image'
• defines how the mask maps onto the CSS box model
• Allow arbitrary SVG shapes or polygons as a hard clip

clip-path: polygon(evenodd, 10px 175px, ...)

CSS filters

• Alignment of SVG and CSS feature sets
• Allows use of SVG filters on HTML content
• filter shorthands for basic filters
• support for custom shaders

svg filters
filter: url(#svg-filter-id);

shorthand filters
filter: <short-hand-function>(<params>)

css shader filter
filter: custom(...)

css shaders model

shaders - vertex flow
manipulate the surface by specifying:

1. the area that the vertex mesh applies to
2. the number of vertex rows and columns
3. a shader programs that deforms the mesh points

shaders - pixel flow

After creating the mesh, a shader could examine the pixels in the filter region

How is the information leaked?

1. Read a pixel at a specific location
2. Depending on the color, execute a function that is fast or slow
3. Time the duration of a rendering pass
4. Infer data

How did we fix this?

We disallow access to the pixel data...

We use the Angle library to:

1. Compile the shader
2. Examine the data flow
3. If there is texture access, the shader is rejected

Is a pixel shader still useful?

YES!

• Information can be passed from vertex shaders
• Mix() function specifies blending and compositing of the shader's result
• Shader can specify a color matrix

Pixel shader data flow