Chapter 8  Effective Filters

Extract

feDiffuseLighting primitive

This filter primitive feDiffuseLighting lights a source graphic using the alpha channel as a bump map.The resulting image is an RGBA opaque image based on the light color with alpha = 1.0 everywhere, it's opaque image. 

This is syntax for feDiffuseLighting element : 

<feDiffuseLighting  id="name"
                        in="SourceGraphic | SourceAlpha | BackgroundImage |
                             BackgroundAlpha | FillPaint | StrokePaint |
    <filter-primitive-reference>"
            result="<filter-primitive-reference>"
            x="NumberOrPercentage"
            y="NumberOrPercentage"
            width="NumberOrPercentage"
            height="NumberOrPercentage"
           surfaceScale="Number"
            diffuseConstant="Number"
            kernelUnitLength="NumberOptionalNumber"
            lighting-color="property">
            <feSpotLight feDistantLight or fePointLight element />
</feDiffuseLighting>

We can put several lighting sources as children of feDiffuseLighting element. 

For feDiffuseLighting attributes are in, result and

surfaceScale : height of surface when A_in = 1. ( 1 by default ) 
diffuseConstant : This can be any non-negative number. ( 1 by default )
kernelUnitLength : One or two positive numbers. ( space or comma as separator ) 
lighting-color : color value for light

Diagram 8-8. Chart for 'feDiffuseLighting' syntax

( view this chart as svg ) 

Here example of code :

 <filter id="MyFilter" filterUnits='objectBoundingBox' x='0%' y='0%' width='100%' height='100%'>
  <feColorMatrix in='SourceGraphic' result='pict0' type='luminanceToAlpha'/>
    <feDiffuseLighting in='pict0' result='pict1' lighting-color='white' diffuseConstant='1' surfaceScale='9'>
      <feDistantLight azimuth='45' elevation='45'/>
  </feDiffuseLighting>
  <feComposite in2='pict1' in='SourceGraphic' operator='arithmetic' k1='0.6' k2='1.1' k3='0.6' k4='0'/>
</filter>
<image x="100" y="80" width='200' height='200' filter='url(#MyFilter)' xlink:href='fondu1.jpg'/>

Figure 8-6 show effect for values of attribute surfaceScale. We use lighting on feTurbulence.

Figure 8-6. Different values for surfaceScale attribute

( view this picture as svg )

Figure 8-7 show some nice effects on raster. We use feColorMatrix with type="luminanceToAlpha" to get new picture, we light this picture and composite lighting with original picture.

Figure 8-7. Some effects using feColorMatrix and feDiffuseLighting

 ( view this picture as svg )