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

5,648 views

Published on

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.

Published in: Technology, Art & Photos
1 Comment
6 Likes
Statistics
Notes
  • http://stackoverflow.com/questions/32732843/svg-edge-smoothing-anti-alias-after-applying-fedisplacementmap-filter
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,648
On SlideShare
0
From Embeds
0
Number of Embeds
80
Actions
Shares
0
Downloads
22
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

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

×