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

- Rik Cabanier / @rcabanier

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

  • 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?

Takes the colors of the shape and the background Combine the colors using a 'mixing' formula 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!

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 points

shaders - 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 data

How 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 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

The End.