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?

  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!

We got many requests to
add 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 filters
filter: url(#svg-filter-id);

grafx
toggle filter toggle controls

shorthand filters
filter: <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 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

However, rendered content includes:

  • secure information
  • third party information
  • visited links

which results in a security leak...

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

The End.