Chapitre 8 Les filtres 

Extrait

La primitive 'feDiffuseLighting'
Cette primitive 'feDiffuseLighting' éclaire une source graphique en utilisant le canal alpha des objets. 
L'image produite est une image RGBA opaque basée sur la couleur de la lumière. 
Si nous avons alpha = 1.0 sur toute l'image (une image bitmap par exemple) le résultat sera entièrement opaque.
Syntaxe de l'élément 'feDiffuseLighting':

<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">
            < éléments feSpotLight feDistantLight ou fePointLight />
</feDiffuseLighting>

Nous pouvons ici aussi utiliser plusieurs sources lumineuses pour 'feDiffuseLighting'.

Diagram 8-8. Syntaxe de 'feDiffuseLighting'

( voir ce diagramme comme svg

Les attributs de 'feDiffuseLighting' sont ' in', 'result' vus précédemment et: 
surfaceScale : hauteur des reliefs créés (1 par défaut) 
diffuseConstant : Un nombre positif. (1 par défaut)
kernelUnitLength : Un ou deux nombres positifs séparés par un espâce ou une virgule
lighting-color : Couleur de la lumière
Un exemple de code plus complet:

 <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'/>

La figure 8-6 montre l'influence des valeurs de l'attribut 'surfaceScale'. Nous utilisons ici l'éclairage d'une turbulence.

Figure 8-6. L'attribut 'surfaceScale'

( vioir cette image comme svg )

La figure 8-7 montre quelques effets sur une image bitmap. 
Nous utilisons 'feColorMatrix' avec type="luminanceToAlpha" pour obtenir une nouvelle image, 
nous éclairons cette image et composons la lumière obtenue avec l'image originale.

Figure 8-7. Effets avec 'feColorMatrix' et 'feDiffuseLighting'

 ( voir cette image comme svg )