cirque du filter: a journey into advanced svg filter effects cssdevconf 2013

Michael Mullany

@mmullanymichael aaat sencha.com

Cirque Du Filter

Monday, October 21, 13

mailto:[email protected]

mailto:[email protected]

2


3

First Framework for HTML5 MobileNow in version 2.3


APPLICATION

Sencha TouchTouch Interfaces

BROWSER ENGINES

UI: Templates + Controls + Containers

Foundation: OOP + MVC + RMI + Libraries

Data: Models + Stores + Connectors

JavaScriptHTML CSS

4

Canvas


Ford Dealer Showroom


Atlantic Wire Magazine


Smile Brands Clinic Automation


Motivating Question“Why Can’t We Do

Instagram, PhotoShop and Lightroom On the Web?”


Filter Effects

Visual transformations made before content is renderedColor manipulations

Convolutions & distortionsLighting effects

3 Species of FiltersCSS Filters (“shorthand” filters)

SVG Filters (referenceable from CSS)Custom Filters (OpenGL based)


http://html5-demos.appspot.com/static/css/filters/index.html

CSS Filter Short-‐hands

Apply filters to any HTML content via CSSFilter values are transitionable/animatable

blur() invert() contrast()

greyscale() hue-‐rotate opacity()

sepia() brightness() saturate()

drop-‐shadow() url(#svgfilter)




Source: caniuse.comMonday, October 21, 13

Source: caniuse.com

4.2.2


Filters vs. Img or Canvas

Just like CSS, Filters help:Replace images with declarative text

Define once, apply manyCompact syntax

Particularly usefulBuilt-‐in noise generator, helpful pre-‐built functions

Avoid wire weight of noise effects in imagesAdding effects to user contributed content

Animatable with JavaScript (IE10) & <animate>


Why SVG Filters?

Much more powerful than shorthand CSS Filters

But still works with regular DOM content <video> <img> <p>


http://codepen.io/mullany/details/diolI

iOS7-‐Style Opaque Blur




http://codepen.io/mullany/pen/BkzKL

iOS7-‐Style Color Blends




http://codepen.io/mullany/pen/Hxwvb - From Inkscape

Textures & Grains


http://codepen.io/mullany/pen/Hxwvb

http://codepen.io/mullany/pen/Hxwvb

http://codepen.io/mullany/pen/nFwAu

Highlight Blur




http://codepen.io/mullany/pen/mnBqK

Focus Blur




http://codepen.io/mullany/pen/nfdab

Vignette




http://codepen.io/mullany/pen/ApInK

Selective GreyScale




http://codepen.io/mullany/pen/KrBoF

RGB Weighted Greyscales


http://codepen.io/mullany/pen/yvmgL

http://codepen.io/mullany/pen/yvmgL

Add http://codepen.io/mullany/pen/LpnvF

Black Point Manipulation


http://codepen.io/mullany/pen/LpnvF

http://codepen.io/mullany/pen/LpnvF

http://codepen.io/mullany/pen/xqoIg

White Point Manipulation





RGB Color Channel Separation




http://codepen.io/mullany/pen/oAqpF

Posterizing




http://codepen.io/mullany/pen/Hsrof

Sharpening & Softening




Instagrammaring


http://codepen.io/mullany/details/fdkmI

Shadow Customization




http://codepen.io/mullany/pen/xnthw

Lighting Animation




Fundamental FilterConcepts


Add sample text

SVG Filters Are Graphs

Input 2

Op

Input 3 Op

Output 1

Output 2

Combine Final Output

Input 1 “in”

“in2”

“result”


Add sample text

Filter Syntax

Declare in the <defs> section of your SVG<defs> <filter id= “myfilter”> ...filter primitives... </filter></defs>

Apply with filter property in CSS or SVG<text filter = “url(#myfilter)”>

p {-‐webkit-‐filter=”url(#myfilter)”;}


Key Concept: Filter RegionAdd sample text

• Default: 10% margin around content

• Common Mistakes-‐ Filter region clips large blurs-‐ Lighting bleeds into region-‐ SVG container clips large blurs

<svg>

<rect filter=”url(#F5)”>


Key Concept: Filter RegionAdd sample text

• Default: 10% margin around content

• Common Mistakes-‐ Filter region clips large blurs-‐ Lighting bleeds into region-‐ SVG container clips large blurs

<svg>

Default Filter Region

<rect filter=”url(#F5)”>


Add sample text

SVG Filter Toolbox


Add sample text

SVG Filter Toolbox

Inputs Operations Lighting Combinations

Source ColorMatrix Types Composite

SourceAlpha ComponentXfer Diffuse (matte) Blend

Image/Object ConvolveMatrix Specular (shiny) Merge

Flood (Color Fill) Morphology Sources

Turbulence (Noise) Displacement Distant Light

Background Tile | Offset Spot Light

Paint/Stroke Color GaussianBlur Point Light


A Whirlwind Tour OfFilter Primitives


Inputs


Basic Inputs

SourceGraphic: the default input = the referring elementSourceAlpha: the alpha channel of the source contentfeImage: any image in URL format (or another element)

<feImage xlink:href="http://somedomain.com/image.jpg" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"/>

<feImage xlink:href="url(#anElementInThisDoc)” x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"/>


http://somedomain.com/image.jpg

http://somedomain.com/image.jpg

Color Fill

feFlood: colored rectangle

x,y, width, height, flood-‐color, flood-‐opacity

<feFlood x="5" y="10" width="100" height ="100" flood-‐color="rgb(24,25,250)" flood-‐opacity= “0.5”>


http://codepen.io/mullany/pen/duHbD

Turbulence

feTurbulence -‐ fast noise generator Steam, rippling, marbling, woodgrain etc.

Parameters: baseFrequency: X,Y (higher = more granular)numOctaves: 1,2,etc. (higher=more detail)type: fractalNoise (gas) or turbulence (liquid)




Basic Turbulence Outputs

1 Octave

2 Octave

4 Octave

freq 0.05 0.1 0.5



Add some other primitives ...




Transformations


When It’s UsefulGreyscales

Tints & SepiasBrightness & Contrast

Separating pure R/G/B from mixed colors Eliminating one or more color channels

Extracting brightness informationChanging saturation or hue (but there are bugs)

Greyscales: http://codepen.io/mullany/pen/baLkH

Key Concept: Color Matrix


http://codepen.io/mullany/pen/baLkH


http://docs.webplatform.org/wiki/svg/elements/feColorMatrix

ColorMatrix Shorthands

3 shorthands + Matrix (5x4)saturatehuerotate

luminancetoAlpha




http://codepen.io/mullany/pen/kAbhD

LuminanceToAlpha




Matrix Demo: http://codepen.io/mullany/pen/qJCDk

R-‐>R G-‐>R B-‐>R A-‐>R k1

R-‐>G G-‐>G B-‐>G A-‐>G k2

R-‐>B G-‐>B B-‐>B A-‐>B k3

R-‐>A G-‐>A B-‐>A A-‐>A k4

R

G

B

A

1

R

G

B

A

1

X =

Input Output

adds fixed offset

e.g. factor by which blue channel inputis multiplied and added to red channel output

e.g. factor by which red channel input is multiplied and added to alpha channel

output




http://codepen.io/mullany/pen/qJCDk

http://codepen.io/mullany/pen/qJCDk

When It’s UsefulWhite and Black Point Changes

Posterization“Instagram-‐style” Color Curves Manipulation

Color Thresholding (Floor & Ceiling)Gamma Correction

Color Specific Brightness/ContrastAlpha Channel Manipulation

Key Concept: ComponentTransfers


http://docs.webplatform.org/wiki/svg/elements/feComponentTransfer

ComponentTransfer Types

Manipulate each color channel independently.

5 Typesidentity, table, discrete, linear, gamma

linear: slope*input + interceptgamma: amp * (input^exponent) + offsettable: input ranges mapped to new ranges

discrete: input ranges mapped to specific values





Range Mapping

Table Discrete




http://svg-wow.org/filterEffects/ripple.svg - Credit: Erik Dahlstrom

Key Concept: Displacement Map

When It’s UsefulDistortions (w/Turbulence)

Animated DistortionsPoor-‐man’s vertex shader (!)


http://svg-wow.org/filterEffects/ripple.svg

http://svg-wow.org/filterEffects/ripple.svg

Displacement Map In Action

MSource Graphic

MDisplace in X by Blue Value

Dis

plac

e in

Y b

y Re

d Va

lue

DisplacementMap


MM

Displacement Map In Action

MSource Graphic

MDisplace in X by Blue Value

Dis

plac

e in

Y b

y Re

d Va

lue

DisplacementMap


Lighting E!ects


Key Concept: Lighting Effects

When It’s UsefulPseudo-‐3D depth effectsGlossy buttons & text

Generating mask shapes within a filterEmbossing

Animating Light Source Positions (!)

but...Lighting implementations are stillpretty rough around the edges


Lighting Effects

Two types Diffuse (matte) vs. Specular (shiny)

Three light sourcesPoint, distant and spot


Diffuse vs. Specular

Diffuse is matte lighting, similar to applying semi-‐transparent gradients over content

Specify a diffuseConstant (how concentrated the light is)kernelUnitLength

Specular adds shiny highlights

Both can be used to simulate 3D from 2D content by generating a “bump map” (pseudo z values) from the alpha channel


Diffuse Lighting


http://codepen.io/mullany/pen/aFnpc

Specular Lighting




Combinations


Key Concept: Combinations

When It’s UsefulLayering contentBlending content

MaskingApplying textures

Softening and sharpening



Combinations Part 1

feMerge: simple z-‐layering

feBlend: shorthand combinationsNormal: (=Merge)

Multiply: Multiply pixel values togetherScreen: Sum -‐ Product of pixel values

Darken: Use darker pixelLighten: Use lighter pixel




http://codepen.io/mullany/details/plgDv

Combinations Part 2

Shorthand compositingOver: same as Merge

In: parts of source 1 that overlap source 2Out: parts of source 1 that don’t overlap source 2

Atop: Over minus OutXor: Over minus In

Arithmetic: Product + souce 1 + source 2 + offset




Deep Dive: Focus Blur


Compositing: Focus Blur

Spotlight + Blur + LumToAlpha +Invert

+xor w/original + composite on blurred source


filterfactory.mobi


Browser SupportBugs

Errata


Browser Support & Bugs

Bugs & Missing Features ie moz webkitBackground as input P X XObjects as feImage input P X PFill & stroke paint as input P X XColor space interpolation P P Chrome

Correct lightsource positions P P X<animate> support X P PFilter references P X XCorrect default filter resolution P P Chrome

SVG Filters via CSS X X Chrome


Filter Gotchas

Difficulties reading example codeSilent defaults make code hard to follow sometimesSourceGraphic is default input for first primitive

Previous primitive output is default input for all othersfeMerge composites all leaf results

Filter animations have mixed performance on mobile


http://codepen.io/mullany/pen/fxsuE

hue-‐rotate & high saturation colors

Explicit HSL Colors

hue-‐rotate()of 100% Sat

Red




http://codepen.io/mullany/pen/dqIGE

Better Accuracy With Mid-‐Saturation

Explicit HSL Colors

hue-‐rotate()of 50% Sat

Red




http://codepen.io/mullany/pen/rpgHu

saturate() has lightness issues!

saturate()of 100% Sat

Green

Explicit HSL Colors




New Proposed Filters

hue-‐rotate-‐hsl()saturate-‐hsl()

&feHSL{}

Convert from RGB to HSL before transformation, preserving saturation & lightness correctly


In Conclusion...

SVG Filters Work In All Edge BrowsersBugs Are There But Fairly MinorHardware Acceleration FTWSpiffy New Effects Possible

www.webplatform.orghttp://www.w3.org/TR/SVG/filters.html


http://www.webplatform.org

http://www.webplatform.org

http://www.w3.org/TR/SVG/filters.html

http://www.w3.org/TR/SVG/filters.html

Q&A


cirque du filter: a journey into advanced svg filter effects cssdevconf 2013

Technology

lightinganimation http

whitepointmanipulation

highlightblur http

focusblur http

vignette http

selectivegreyscale http

rgbweightedgreyscales

posterizing http