Cirque Du Filter
Michael Mullany
@mmullany
michael aaat sencha.com

Monday, October 21, 13
2
Monday, October 21, 13
First	
  Framework	
  for	
  HTML5	
  Mobile
Now	
  in	
  version	
  2.3
3
Monday, October 21, 13
APPLICATION

UI: Templates + Controls + Containers
Data: Models + Stores + Connectors
Foundation: OOP + MVC + RMI + Librar...
Ford	
  Dealer	
  Showroom
Monday, October 21, 13
Atlantic	
  Wire	
  Magazine
Monday, October 21, 13
Smile	
  Brands	
  Clinic	
  Automation
Monday, October 21, 13
Motivating Question
“Why Can’t We Do
Instagram, PhotoShop and
Lightroom On the Web?”

Monday, October 21, 13
Visual	
  transformations	
  made	
  before	
  content	
  is	
  rendered
Color	
  manipulations
Convolutions	
  &	
  disto...
Apply	
  filters	
  to	
  any	
  HTML	
  content	
  via	
  CSS
Filter	
  values	
  are	
  transitionable/animatable
blur()
...
Source: caniuse.com
Monday, October 21, 13
4.2.2

Source: caniuse.com
Monday, October 21, 13
Just	
  like	
  CSS,	
  Filters	
  help:
Replace	
  images	
  with	
  declarative	
  text
Define	
  once,	
  apply	
  many
...
Much	
  more	
  powerful	
  than	
  shorthand	
  CSS	
  Filters
But	
  still	
  works	
  with	
  regular	
  DOM	
  content...
iOS7-­‐Style	
  Opaque	
  Blur
http://codepen.io/mullany/details/diolI
Monday, October 21, 13
iOS7-­‐Style	
  Color	
  Blends
http://codepen.io/mullany/pen/BkzKL
Monday, October 21, 13
Textures	
  &	
  Grains
http://codepen.io/mullany/pen/Hxwvb - From Inkscape
Monday, October 21, 13
Highlight	
  Blur
http://codepen.io/mullany/pen/nFwAu
Monday, October 21, 13
Focus	
  Blur
http://codepen.io/mullany/pen/mnBqK
Monday, October 21, 13
Vignette
http://codepen.io/mullany/pen/nfdab
Monday, October 21, 13
Selective	
  GreyScale
http://codepen.io/mullany/pen/ApInK
Monday, October 21, 13
RGB	
  Weighted	
  Greyscales
http://codepen.io/mullany/pen/KrBoF
Monday, October 21, 13
Black	
  Point	
  Manipulation
Add http://codepen.io/mullany/pen/LpnvF
Monday, October 21, 13
Black	
  Point	
  Manipulation
Add http://codepen.io/mullany/pen/LpnvF
Monday, October 21, 13
White	
  Point	
  Manipulation
http://codepen.io/mullany/pen/xqoIg
Monday, October 21, 13
White	
  Point	
  Manipulation
http://codepen.io/mullany/pen/xqoIg
Monday, October 21, 13
RGB	
  Color	
  Channel	
  Separation
http://codepen.io/mullany/pen/xqoIg
Monday, October 21, 13
Posterizing
http://codepen.io/mullany/pen/oAqpF
Monday, October 21, 13
Sharpening	
  &	
  Softening
http://codepen.io/mullany/pen/Hsrof
Monday, October 21, 13
Instagrammaring
Monday, October 21, 13
Shadow	
  Customization
http://codepen.io/mullany/details/fdkmI
Monday, October 21, 13
Lighting	
  Animation
http://codepen.io/mullany/pen/xnthw
Monday, October 21, 13
Lighting	
  Animation
http://codepen.io/mullany/pen/xnthw
Monday, October 21, 13
Lighting	
  Animation
http://codepen.io/mullany/pen/xnthw
Monday, October 21, 13
Fundamental Filter
Concepts

Monday, October 21, 13
Input 1

“in”

“result”
Op

Input 2

Input 3

Output 1

	
  

“in2”

Op

Combine

Output 2

SVG	
  Filters	
  Are	
  Graph...
Declare	
  in	
  the	
  <defs>	
  section	
  of	
  your	
  SVG
<defs>
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  <filter	
  id...
<rect filter=”url(#F5)”>

Default:	
  10%	
  margin	
  around	
  
content

•

<svg>

•

Common	
  Mistakes
	
  
-­‐ Filter	...
Default:	
  10%	
  margin	
  around	
  
content

•

<svg>

•

Common	
  Mistakes
	
  
-­‐ Filter	
  region	
  clips	
  lar...
SVG	
  Filter	
  Toolbox
Add sample text
Monday, October 21, 13
Inputs

Operations

Lighting

Combinations

Source

ColorMatrix

Types

Composite

SourceAlpha

ComponentXfer

Diffuse (ma...
Inputs

Operations

Lighting

Combinations

Source

ColorMatrix

Types

Composite

SourceAlpha

ComponentXfer

Diffuse (ma...
Inputs

Operations

Lighting

Combinations

Source

ColorMatrix

Types

Composite

SourceAlpha

ComponentXfer

Diffuse (ma...
Inputs

Operations

Lighting

Combinations

Source

ColorMatrix

Types

Composite

SourceAlpha

ComponentXfer

Diffuse (ma...
A Whirlwind Tour Of
Filter Primitives

Monday, October 21, 13
Inputs

Monday, October 21, 13
SourceGraphic:	
  the	
  default	
  input	
  =	
  the	
  referring	
  element
SourceAlpha:	
  the	
  alpha	
  channel	
  o...
feFlood:	
  colored	
  rectangle
x,y,	
  width,	
  height,	
  flood-­‐color,	
  flood-­‐opacity
<feFlood	
  x="5"	
  y="10"	...
feTurbulence	
  -­‐	
  fast	
  noise	
  generator	
  
Steam,	
  rippling,	
  marbling,	
  woodgrain	
  etc.
Parameters:	
 ...
freq	
  0.05

0.1

0.5

1	
  Octave

2	
  Octave

4	
  Octave

Basic	
  Turbulence	
  Outputs
Monday, October 21, 13
Add	
  some	
  other	
  primitives	
  ...
http://codepen.io/mullany/pen/duHbD
Monday, October 21, 13
Transformations

Monday, October 21, 13
When	
  It’s	
  Useful
Greyscales
Tints	
  &	
  Sepias
Brightness	
  &	
  Contrast
Separating	
  pure	
  R/G/B	
  from	
  ...
3	
  shorthands	
  +	
  Matrix	
  (5x4)
saturate
huerotate
luminancetoAlpha

ColorMatrix	
  Shorthands
http://docs.webplat...
LuminanceToAlpha
http://codepen.io/mullany/pen/kAbhD
Monday, October 21, 13
e.g.	
  factor	
  by	
  which	
  blue	
  channel	
  input
is	
  multiplied	
  and	
  added	
  to	
  red	
  channel	
  outp...
When	
  It’s	
  Useful
White	
  and	
  Black	
  Point	
  Changes
Posterization
“Instagram-­‐style”	
  Color	
  Curves	
  M...
Manipulate	
  each	
  color	
  channel	
  independently.
5	
  Types
identity,	
  table,	
  discrete,	
  linear,	
  gamma
l...
Table

Discrete

	
  

	
  Range	
  Mapping
http://codepen.io/mullany/pen/oAqpF
Monday, October 21, 13
When	
  It’s	
  Useful
Distortions	
  (w/Turbulence)
Animated	
  Distortions
Poor-­‐man’s	
  vertex	
  shader	
  (!)

Key	...
M

Displace in Y by Red Value

Source Graphic

Displace in X by Blue Value

M

DisplacementMap

Displacement	
  Map	
  In	...
M

Displace in Y by Red Value

Source Graphic

Displace in X by Blue Value

M
M
M

DisplacementMap

Displacement	
  Map	
 ...
Lighting Effects

Monday, October 21, 13
When	
  It’s	
  Useful
Pseudo-­‐3D	
  depth	
  effects
Glossy	
  buttons	
  &	
  text
Generating	
  mask	
  shapes	
  withi...
Two	
  types	
  
Diffuse	
  (matte)	
  vs.	
  Specular	
  (shiny)
Three	
  light	
  sources
Point,	
  distant	
  and	
  spo...
Diffuse	
  is	
  matte	
  lighting,	
  similar	
  to	
  applying	
  semi-­‐transparent	
  
gradients	
  over	
  content
Spe...
 

Diffuse	
  Lighting
Monday, October 21, 13
 

Specular	
  Lighting
http://codepen.io/mullany/pen/aFnpc
Monday, October 21, 13
Combinations

Monday, October 21, 13
When	
  It’s	
  Useful
Layering	
  content
Blending	
  content
Masking
Applying	
  textures
Softening	
  and	
  sharpening...
feMerge:	
  simple	
  z-­‐layering
feBlend:	
  shorthand	
  combinations
Normal:	
  (=Merge)
Multiply:	
  Multiply	
  pixe...
Shorthand	
  compositing
Over:	
  same	
  as	
  Merge
In:	
  parts	
  of	
  source	
  1	
  that	
  overlap	
  source	
  2
...
<svg	
  width="800"	
  height="650"	
  viewBox="0	
  0	
  800	
  650">
<defs>
	
  	
  	
  	
  	
  
	
  	
  <filter	
  id="...
Deep Dive: Focus Blur

Monday, October 21, 13
Spotlight

+ Blur

+xor w/original

+ LumToAlpha

+ composite on blurred
source

Compositing:	
  Focus	
  Blur
Monday, Oct...
<filter	
  id="f1"	
  x="0%"	
  y="0%"	
  width="100%"	
  height="100%">
	
  	
  <feDiffuseLighting	
  result="diffSpot"	
...
filterfactory.mobi

Monday, October 21, 13
Browser Support
Bugs
Errata

Monday, October 21, 13
Bugs & Missing Features

ie

moz

webkit

Background as input
Objects as feImage input

P
P
P
P
P
X
P
P
X

X
X
...
Difficulties	
  reading	
  example	
  code
Silent	
  defaults	
  make	
  code	
  hard	
  to	
  follow	
  sometimes
SourceGra...
hue-­‐rotate()
of	
  100%	
  Sat
Red

Explicit	
  
HSL	
  
Colors

hue-­‐rotate	
  &	
  high	
  saturation	
  colors
http:...
hue-­‐rotate()
of	
  50%	
  Sat
Red

Explicit	
  
HSL	
  
Colors

Better	
  Accuracy	
  With	
  Mid-­‐Saturation
http://co...
saturate()
of	
  100%	
  Sat
Green

Explicit	
  
HSL	
  
Colors

saturate()	
  has	
  lightness	
  issues!
http://codepen....
hue-­‐rotate-­‐hsl()
saturate-­‐hsl()
&
feHSL{}
Convert	
  from	
  RGB	
  to	
  HSL	
  before	
  transformation,	
  preser...
SVG	
  Filters	
  Work	
  In	
  All	
  Edge	
  Browsers
Bugs	
  Are	
  There	
  But	
  Fairly	
  Minor
Hardware	
  Acceler...
Q&A

Monday, October 21, 13
Nächste SlideShare
Wird geladen in …5
×

Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013

6.042 Aufrufe

Veröffentlicht am

Presented at CSS Dev Conf 2013 - CO
Intro to Advanced SVG Filters with extensive demo links for unsharp masking, focus blurs, iOS7-style blending, lighting effects, color curve manipulation and more.

Veröffentlicht in: Technologie, Kunst & Fotos
  • http://stackoverflow.com/questions/32732843/svg-edge-smoothing-anti-alias-after-applying-fedisplacementmap-filter
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Cirque du filter: A Journey Into Advanced SVG Filter Effects CSSDEVCONF 2013

  1. 1. Cirque Du Filter Michael Mullany @mmullany michael aaat sencha.com Monday, October 21, 13
  2. 2. 2 Monday, October 21, 13
  3. 3. First  Framework  for  HTML5  Mobile Now  in  version  2.3 3 Monday, October 21, 13
  4. 4. APPLICATION UI: Templates + Controls + Containers Data: Models + Stores + Connectors Foundation: OOP + MVC + RMI + Libraries Sencha Touch Touch Interfaces BROWSER ENGINES HTML JavaScript CSS Canvas 4 Monday, October 21, 13
  5. 5. Ford  Dealer  Showroom Monday, October 21, 13
  6. 6. Atlantic  Wire  Magazine Monday, October 21, 13
  7. 7. Smile  Brands  Clinic  Automation Monday, October 21, 13
  8. 8. Motivating Question “Why Can’t We Do Instagram, PhotoShop and Lightroom On the Web?” Monday, October 21, 13
  9. 9. Visual  transformations  made  before  content  is  rendered Color  manipulations Convolutions  &  distortions Lighting  effects 3  Species  of  Filters CSS  Filters  (“shorthand”  filters) SVG  Filters  (referenceable  from  CSS) Custom  Filters  (OpenGL  based) Filter  Effects Monday, October 21, 13
  10. 10. Apply  filters  to  any  HTML  content  via  CSS Filter  values  are  transitionable/animatable blur() invert() contrast() greyscale() hue-­‐rotate opacity() sepia() brightness() saturate() drop-­‐shadow() url(#svgfilter) CSS  Filter  Short-­‐hands http://html5-demos.appspot.com/static/css/filters/index.html Monday, October 21, 13
  11. 11. Source: caniuse.com Monday, October 21, 13
  12. 12. 4.2.2 Source: caniuse.com Monday, October 21, 13
  13. 13. Just  like  CSS,  Filters  help: Replace  images  with  declarative  text Define  once,  apply  many Compact  syntax Particularly  useful Built-­‐in  noise  generator,  helpful  pre-­‐built  functions Avoid  wire  weight  of  noise  effects  in  images Adding  effects  to  user  contributed  content Animatable  with  JavaScript  (IE10)  &  <animate>   Filters  vs.  Img  or  Canvas Monday, October 21, 13
  14. 14. Much  more  powerful  than  shorthand  CSS  Filters But  still  works  with  regular  DOM  content   <video>  <img>  <p> Why  SVG  Filters? Monday, October 21, 13
  15. 15. iOS7-­‐Style  Opaque  Blur http://codepen.io/mullany/details/diolI Monday, October 21, 13
  16. 16. iOS7-­‐Style  Color  Blends http://codepen.io/mullany/pen/BkzKL Monday, October 21, 13
  17. 17. Textures  &  Grains http://codepen.io/mullany/pen/Hxwvb - From Inkscape Monday, October 21, 13
  18. 18. Highlight  Blur http://codepen.io/mullany/pen/nFwAu Monday, October 21, 13
  19. 19. Focus  Blur http://codepen.io/mullany/pen/mnBqK Monday, October 21, 13
  20. 20. Vignette http://codepen.io/mullany/pen/nfdab Monday, October 21, 13
  21. 21. Selective  GreyScale http://codepen.io/mullany/pen/ApInK Monday, October 21, 13
  22. 22. RGB  Weighted  Greyscales http://codepen.io/mullany/pen/KrBoF Monday, October 21, 13
  23. 23. Black  Point  Manipulation Add http://codepen.io/mullany/pen/LpnvF Monday, October 21, 13
  24. 24. Black  Point  Manipulation Add http://codepen.io/mullany/pen/LpnvF Monday, October 21, 13
  25. 25. White  Point  Manipulation http://codepen.io/mullany/pen/xqoIg Monday, October 21, 13
  26. 26. White  Point  Manipulation http://codepen.io/mullany/pen/xqoIg Monday, October 21, 13
  27. 27. RGB  Color  Channel  Separation http://codepen.io/mullany/pen/xqoIg Monday, October 21, 13
  28. 28. Posterizing http://codepen.io/mullany/pen/oAqpF Monday, October 21, 13
  29. 29. Sharpening  &  Softening http://codepen.io/mullany/pen/Hsrof Monday, October 21, 13
  30. 30. Instagrammaring Monday, October 21, 13
  31. 31. Shadow  Customization http://codepen.io/mullany/details/fdkmI Monday, October 21, 13
  32. 32. Lighting  Animation http://codepen.io/mullany/pen/xnthw Monday, October 21, 13
  33. 33. Lighting  Animation http://codepen.io/mullany/pen/xnthw Monday, October 21, 13
  34. 34. Lighting  Animation http://codepen.io/mullany/pen/xnthw Monday, October 21, 13
  35. 35. Fundamental Filter Concepts Monday, October 21, 13
  36. 36. Input 1 “in” “result” Op Input 2 Input 3 Output 1   “in2” Op Combine Output 2 SVG  Filters  Are  Graphs Add sample text Monday, October 21, 13 Final Output
  37. 37. 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)”;} Filter  Syntax Add sample text Monday, October 21, 13
  38. 38. <rect filter=”url(#F5)”> Default:  10%  margin  around   content • <svg> • Common  Mistakes   -­‐ Filter  region  clips  large  blurs -­‐ Lighting  bleeds  into  region -­‐ SVG  container  clips  large  blurs Key  Concept:  Filter  Region Add sample text Monday, October 21, 13
  39. 39. Default:  10%  margin  around   content • <svg> • Common  Mistakes   -­‐ Filter  region  clips  large  blurs -­‐ Lighting  bleeds  into  region -­‐ SVG  container  clips  large  blurs Default Filter Region <rect filter=”url(#F5)”> Key  Concept:  Filter  Region Add sample text Monday, October 21, 13
  40. 40. SVG  Filter  Toolbox Add sample text Monday, October 21, 13
  41. 41. 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 SVG  Filter  Toolbox Add sample text Monday, October 21, 13
  42. 42. 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 SVG  Filter  Toolbox Add sample text Monday, October 21, 13
  43. 43. 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 SVG  Filter  Toolbox Add sample text Monday, October 21, 13
  44. 44. 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 SVG  Filter  Toolbox Add sample text Monday, October 21, 13
  45. 45. A Whirlwind Tour Of Filter Primitives Monday, October 21, 13
  46. 46. Inputs Monday, October 21, 13
  47. 47. SourceGraphic:  the  default  input  =  the  referring  element SourceAlpha:  the  alpha  channel  of  the  source  content feImage:  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"/> Basic  Inputs Monday, October 21, 13
  48. 48. 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”> Color  Fill Monday, October 21, 13
  49. 49. 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) Turbulence http://codepen.io/mullany/pen/duHbD Monday, October 21, 13
  50. 50. freq  0.05 0.1 0.5 1  Octave 2  Octave 4  Octave Basic  Turbulence  Outputs Monday, October 21, 13
  51. 51. Add  some  other  primitives  ... http://codepen.io/mullany/pen/duHbD Monday, October 21, 13
  52. 52. Transformations Monday, October 21, 13
  53. 53. When  It’s  Useful Greyscales Tints  &  Sepias Brightness  &  Contrast Separating  pure  R/G/B  from  mixed  colors   Eliminating  one  or  more  color  channels Extracting  brightness  information Changing  saturation  or  hue  (but  there  are  bugs) Key  Concept:  Color  Matrix Greyscales: http://codepen.io/mullany/pen/baLkH Monday, October 21, 13
  54. 54. 3  shorthands  +  Matrix  (5x4) saturate huerotate luminancetoAlpha ColorMatrix  Shorthands http://docs.webplatform.org/wiki/svg/elements/feColorMatrix Monday, October 21, 13
  55. 55. LuminanceToAlpha http://codepen.io/mullany/pen/kAbhD Monday, October 21, 13
  56. 56. e.g.  factor  by  which  blue  channel  input is  multiplied  and  added  to  red  channel  output Input   R R-­‐>R G B X R-­‐>G R-­‐>B G-­‐>R G-­‐>G G-­‐>B B-­‐>R B-­‐>G B-­‐>B A-­‐>R A-­‐>G A-­‐>B Output   R k1 k2 G = k3 A A R-­‐>A G-­‐>A B-­‐>A A-­‐>A k4 1 1 e.g.  factor  by  which  red  channel  input   is  multiplied  and  added  to  alpha  channel   output adds  fixed  offset Matrix Demo: http://codepen.io/mullany/pen/qJCDk Monday, October 21, 13 B
  57. 57. When  It’s  Useful White  and  Black  Point  Changes Posterization “Instagram-­‐style”  Color  Curves  Manipulation Color  Thresholding  (Floor  &  Ceiling) Gamma  Correction Color  Specific  Brightness/Contrast Alpha  Channel  Manipulation Key  Concept:  ComponentTransfers Monday, October 21, 13
  58. 58. Manipulate  each  color  channel  independently. 5  Types identity,  table,  discrete,  linear,  gamma linear:  slope*input  +  intercept gamma:  amp  *  (input^exponent)  +  offset table:  input  ranges  mapped  to  new  ranges discrete:    input  ranges  mapped  to  specific  values ComponentTransfer  Types http://docs.webplatform.org/wiki/svg/elements/feComponentTransfer Monday, October 21, 13
  59. 59. Table Discrete    Range  Mapping http://codepen.io/mullany/pen/oAqpF Monday, October 21, 13
  60. 60. When  It’s  Useful Distortions  (w/Turbulence) Animated  Distortions Poor-­‐man’s  vertex  shader  (!) Key  Concept:  Displacement  Map http://svg-wow.org/filterEffects/ripple.svg - Credit: Erik Dahlstrom Monday, October 21, 13
  61. 61. M Displace in Y by Red Value Source Graphic Displace in X by Blue Value M DisplacementMap Displacement  Map  In  Action Monday, October 21, 13
  62. 62. M Displace in Y by Red Value Source Graphic Displace in X by Blue Value M M M DisplacementMap Displacement  Map  In  Action Monday, October 21, 13
  63. 63. Lighting Effects Monday, October 21, 13
  64. 64. When  It’s  Useful Pseudo-­‐3D  depth  effects Glossy  buttons  &  text Generating  mask  shapes  within  a  filter Embossing Animating  Light  Source  Positions  (!) but... Lighting  implementations  are  still pretty  rough  around  the  edges Key  Concept:  Lighting  Effects Monday, October 21, 13
  65. 65. Two  types   Diffuse  (matte)  vs.  Specular  (shiny) Three  light  sources Point,  distant  and  spot Lighting  Effects Monday, October 21, 13
  66. 66. 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  vs.  Specular Monday, October 21, 13
  67. 67.   Diffuse  Lighting Monday, October 21, 13
  68. 68.   Specular  Lighting http://codepen.io/mullany/pen/aFnpc Monday, October 21, 13
  69. 69. Combinations Monday, October 21, 13
  70. 70. When  It’s  Useful Layering  content Blending  content Masking Applying  textures Softening  and  sharpening Key  Concept:  Combinations Monday, October 21, 13
  71. 71. feMerge:  simple  z-­‐layering feBlend:  shorthand  combinations Normal:  (=Merge) Multiply:  Multiply  pixel  values  together Screen:  Sum  -­‐  Product  of  pixel  values Darken:  Use  darker  pixel Lighten:  Use  lighter  pixel Combinations  Part  1 http://codepen.io/mullany/pen/BkzKL Monday, October 21, 13
  72. 72. Shorthand  compositing Over:  same  as  Merge In:  parts  of  source  1  that  overlap  source  2 Out:  parts  of  source  1  that  don’t  overlap  source  2 Atop:  Over  minus  Out Xor:  Over  minus  In Arithmetic:  Product  +  souce  1  +  source  2  +  offset Combinations  Part  2 http://codepen.io/mullany/details/plgDv Monday, October 21, 13
  73. 73. <svg  width="800"  height="650"  viewBox="0  0  800  650"> <defs>              <filter  id="displacement"  filterUnits="objectBoundingBox">        <feTurbulence  type="fractalNoise"  baseFrequency=".1"  numOctaves="2"    result="turb">            <animate  attributeType="XML"  attributeName="baseFrequency"  values=".1;  .12;  .1"     dur="16s"  repeatCount="indefinite"/>            </feTurbulence>                                                                    <feDisplacementMap  in="SourceGraphic"  in2="turb"  scale="20"  result="displace"   xChannelSelector="B"/>                <feGaussianBlur  in="displace"  result="displaceblur"  stdDeviation="1"/>        <feComponentTransfer  in="displaceblur"  result="displaceR">                      <feFuncR  type="discrete"  tableValues=".4  .4"/>          </feComponentTransfer>            <feComposite  operator="over"  in2="SourceGraphic"  in="displaceR"/>          </filter> Monday, October 21, 13
  74. 74. Deep Dive: Focus Blur Monday, October 21, 13
  75. 75. Spotlight + Blur +xor w/original + LumToAlpha + composite on blurred source Compositing:  Focus  Blur Monday, October 21, 13 +Invert
  76. 76. <filter  id="f1"  x="0%"  y="0%"  width="100%"  height="100%">    <feDiffuseLighting  result="diffSpot"  diffuseConstant="1"  lighting-­‐          color="white">          <feSpotLight  id="loc"  x  =  "50"  y  =  "100"  z  =  "150"  pointsAtX  =                        "200"  pointsAtY  =  "200"                  pointsAtZ  =  "40"  specularExponent  ="12"  limitingConeAngle="20"/>    </feDiffuseLighting>        <feGaussianBlur  in="diffSpot"  result="blurSpot"  stdDeviation="3"/>    <feColorMatrix  in="blurSpot"  result="alphaSpot"  type="luminanceToAlpha"/>    <feComponentTransfer  in="alphaSpot"  result="invertSpot">          <feFuncA  type="table"  tableValues="1  0  0  0"/>    </feComponentTransfer>    <feComposite  operator="xor"  result="inFocus"  in2="SourceGraphic"   in="invertSpot"/>          <feGaussianBlur  in="SourceGraphic"  result="outfocus"  stdDeviation="6"/>          <feComposite  operator="over"  in="inFocus"  in2="outfocus"/>           </filter> http://codepen.io/mullany/pen/mnBqK Monday, October 21, 13
  77. 77. filterfactory.mobi Monday, October 21, 13
  78. 78. Browser Support Bugs Errata Monday, October 21, 13
  79. 79. Bugs & Missing Features ie moz webkit Background as input Objects as feImage input P P P P P X P P X X X X P P P X P X X P X Fill & stroke paint as input Color space interpolation Correct lightsource positions <animate> support Filter references Correct default filter resolution SVG Filters via CSS Chrome X P X Chrome Chrome Browser  Support  &  Bugs Monday, October 21, 13
  80. 80. Difficulties  reading  example  code Silent  defaults  make  code  hard  to  follow  sometimes SourceGraphic  is  default  input  for  first  primitive Previous  primitive  output  is  default  input  for  all  others feMerge  composites  all  leaf  results Filter  animations  have  mixed  performance  on  mobile Filter  Gotchas Monday, October 21, 13
  81. 81. hue-­‐rotate() of  100%  Sat Red Explicit   HSL   Colors hue-­‐rotate  &  high  saturation  colors http://codepen.io/mullany/pen/fxsuE Monday, October 21, 13
  82. 82. hue-­‐rotate() of  50%  Sat Red Explicit   HSL   Colors Better  Accuracy  With  Mid-­‐Saturation http://codepen.io/mullany/pen/dqIGE Monday, October 21, 13
  83. 83. saturate() of  100%  Sat Green Explicit   HSL   Colors saturate()  has  lightness  issues! http://codepen.io/mullany/pen/rpgHu Monday, October 21, 13
  84. 84. hue-­‐rotate-­‐hsl() saturate-­‐hsl() & feHSL{} Convert  from  RGB  to  HSL  before  transformation,  preserving   saturation  &  lightness  correctly New  Proposed  Filters Monday, October 21, 13
  85. 85. SVG  Filters  Work  In  All  Edge  Browsers Bugs  Are  There  But  Fairly  Minor Hardware  Acceleration  FTW Spiffy  New  Effects  Possible www.webplatform.org http://www.w3.org/TR/SVG/filters.html In  Conclusion... Monday, October 21, 13
  86. 86. Q&A Monday, October 21, 13

×