Adobe and the graphical web – New rendering features in HTML – Compositing and blending
Adobe and the graphical web – New rendering features in HTML – Compositing and blending
0 1
SVGOpenKeynote
On Github cabanier / SVGOpenKeynote
Adobe and the graphical web
New rendering features in HTML
Adobe's involvement
Help our users
- Creating new tools
- Hosting and participating in conferences
- Be part of the standards process
- Work on specs that build Adobe's strengths
- CSS Transforms
- CSS Regions and exclusions
- Web Animations
- CSS Filters
- CSS Blending and compositing
- CSS Masking
Compositing and blending
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?
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!
We got many requests toadd the 'missing' Photoshop blend modes
So, we will add them as well:
- Linear dodge
- Linear burn
- Vivid light
- Linear light
- Pin light
- Hard mix
- Divide
- Subtract
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 filtersfilter: url(#svg-filter-id);
grafxdx: dy:
toggle filter
toggle controls
shorthand filtersfilter: <short-hand-function>(<params>)
original
grayscale(1)
sepia(0.8)
saturate(0.2)
hue-rotate(90deg)
opacity(0.2)
invert(0.5)
brightness(0.25)
contrast(0.5)
blur(6px)
drop-shadow(...)
css shader filterfilter: custom(...)
css shaders model
shaders - vertex flowmanipulate the surface by specifying:
the area that the vertex mesh applies to the number of vertex rows and columns a shader programs that deforms the mesh pointsshaders - pixel flow
After creating the mesh, a shader could examine the pixels in the filter region
However, rendered content includes:
- secure information
- third party information
- visited links
which results in a security leak...
How is the information leaked?
Read a pixel at a specific location Depending on the color, execute a function that is fast or slow Time the duration of a rendering pass Infer dataHow did we fix this?
We disallow access to the pixel data...
We use the Angle library to:
Compile the shader Examine the data flow If there is texture access, the shader is rejectedIs 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