|
Der primitive Filter feDiffuseLighting
beleuchtet ein Input-Bild mit diffusem Licht und verwendet dabei den Alpha-Kanal des
Input-Bildes als Oberflächenrelief.
Sie können die Relieftiefe und die Intensität des Lichts
durch Attribute beeinflussen.
Die eigentliche Lichtquelle bzw. die Position dieser Lichtquelle wird durch
eins von drei unterschiedlichen Kind-Elementen
feDistantLight, fePointLight oder
feSpotLight festgelegt (siehe letztes Unterkapitel).
Dabei können Sie genau eine Lichtquelle, d.h. genau ein Kind-Element
innerhalb des feDiffuseLighting-Containers verwenden.
Dieses gilt auch für den Beleuchtungsfilter feSpecularLighting
(siehe nächstes Unterkapitel).
Durch das Attribut surfaceScale
können Sie die Relieftiefe verändern, d.h.
Sie können festlegen, dass die Unterschiede der Alphawerte verstärkt
(Werte größer 1) oder
vermindert werden (Werte kleiner 1) und
das Relief so eine ausgeprägtere bzw. flachere Struktur erhält. Voreingestellter
Wert für dieses Attribut ist 1.
Die Intensität des Lichts wird durch das
Attribut diffuseConstant festgelegt.
Eigentlich bestimmen Sie hier eine
Konstante, die bei der Berechung der neuen Farbwerte nach dem
Phong-Lichtmodell für das Input-Bild verwendet wird. Gültiger
Wert ist eine Ganzzahl größer 0.
Voreingestellter Wert ist 1.
feDiffuseLighting kann außerdem
das Attribut lighting-color zugeordnet werden.
Dieses Attribut erwartet eine Farbangabe als Wert, und bestimmt
die Farbe des Lichts. Voreingstellter Wert ist white.
Um den Output eines Beleuchtungsfilters mit dem Originalbild
zu verschmelzen (was notwendig ist), müssen Sie den
primitiven Filter feComposite
mit dem
operator-Wert arithmetic verwenden.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="380px" height="370px"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Der primitive Filter feDiffuseLighting</title>
<desc>
Beispiele für die Verwendung von feDiffuseLighting
</desc>
<defs>
<style type="text/css">
<![CDATA[
text {font-family:Verdana,sans-serif; font-size:16px;
font-weight:bold;}
]]>
</style>
<symbol id="smilie">
<desc>ein lachendes Smilie</desc>
<circle id="gesicht" cx="20" cy="20" r="15"
fill="yellow" stroke="black" />
<circle id="auge-links" cx="15" cy="15" r="2"
fill="black" stroke="black" />
<circle id="auge-rechts" cx="25" cy="15" r="2"
fill="black" stroke="black" />
<line id="nase" x1="20" y1="18" x2="20" y2="23"
stroke="black" stroke-width="2" />
<path id="mund" d="M 13 26 A 5 3 0 0 0 27 26"
stroke="black" fill="none" stroke-width="2" />
</symbol>
<!-- 6 Filter mit feDiffuseLighting -->
<filter id="f1">
<feDiffuseLighting in="SourceAlpha"
result="out1">
<feDistantLight azimuth="225" elevation="45" />
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="out1"
operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" />
</filter>
<filter id="f2">
<feDiffuseLighting in="SourceAlpha"
result="out1">
<feDistantLight azimuth="225" elevation="5" />
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="out1"
operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" />
</filter>
<filter id="f3">
<feGaussianBlur in="SourceAlpha"
stdDeviation="2"
result="out1" />
<feOffset in="out1"
dx="2" dy="2"
result="out2" />
<feDiffuseLighting in="out1"
result="out3">
<feDistantLight azimuth="225" elevation="5" />
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="out3"
operator="arithmetic"
k1="0" k2="1" k3="1" k4="0"
result="out4" />
<feComposite in="out4" in2="out2"
operator="over" />
</filter>
<filter id="f4">
<feGaussianBlur in="SourceAlpha"
stdDeviation="2"
result="out1" />
<feOffset in="out1"
dx="2" dy="2"
result="out2" />
<feDiffuseLighting in="out1"
surfaceScale=".5"
diffuseConstant="3"
result="out3">
<feDistantLight azimuth="225" elevation="5" />
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="out3"
operator="arithmetic"
k1="0" k2="1" k3="1" k4="0"
result="out4" />
<feComposite in="out4" in2="out2"
operator="over" />
</filter>
<filter id="f5">
<feGaussianBlur in="SourceAlpha"
stdDeviation="2"
result="out1" />
<feOffset in="out1"
dx="2" dy="2"
result="out2" />
<feDiffuseLighting in="out1"
surfaceScale="2"
diffuseConstant="1"
result="out3">
<feDistantLight azimuth="225" elevation="5" />
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="out3"
operator="arithmetic"
k1="0" k2="1" k3="1" k4="0"
result="out4" />
<feComposite in="out4" in2="out2"
operator="over" />
</filter>
<filter id="f6">
<feGaussianBlur in="SourceAlpha"
stdDeviation="2"
result="out1" />
<feOffset in="out1"
dx="2" dy="2"
result="out2" />
<feDiffuseLighting in="out1"
surfaceScale="2"
diffuseConstant="1"
lighting-color="yellow"
result="out3">
<feDistantLight azimuth="225" elevation="5" />
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="out3"
operator="arithmetic"
k1="0" k2="1" k3="1" k4="0"
result="out4" />
<feComposite in="out4" in2="out2"
operator="over" />
</filter>
</defs>
<!-- die Instanzen des Symbols "smilie" -->
<use xlink:href="#smilie" transform="translate(20,10) scale(2.7)" />
<use xlink:href="#smilie" transform="translate(150,10) scale(2.7)"
filter="url(#f1)" />
<use xlink:href="#smilie" transform="translate(250,10) scale(2.7)"
filter="url(#f2)" />
<use xlink:href="#smilie" transform="translate(150,130) scale(2.7)"
filter="url(#f3)" />
<use xlink:href="#smilie" transform="translate(250,130) scale(2.7)"
filter="url(#f4)" />
<use xlink:href="#smilie" transform="translate(150,250) scale(2.7)"
filter="url(#f5)" />
<use xlink:href="#smilie" transform="translate(250,250) scale(2.7)"
filter="url(#f6)" />
<!-- Text und Hilfslinien -->
<text x="145" y="130">feDiffuseLighting</text>
<text x="58" y="130">Original</text>
<line x1="137" y1="40" x2="137" y2="330" stroke="black" />
</svg>
Alle Filter f1 bis f6
im obigen Beispiel verwenden den
primitiven Filter feDiffuseLighting mit einer Lichtquelle,
die durch den primitven Filter feDistantLight definiert wird.
In den Filtern f1 und f2 werden
keine zusätzlichen Attribute von feDiffuseLighting
verwendet, sondern lediglich die Lichtquelle feDistantLight
verändert.
Der Winkel des Lichteinfalls wird durch das Attribut
elevation vermindert.
Da zu einem Lichteinfall auch ein Schatten gehört, wird
für allen folgenden Filter f3 bis f6
durch feGaussianBlur und feOffset
ein solcher erzeugt. Selbstverständlich passend zum Einfall des Lichts ;-).
Innerhalb der Filter f4 bis f6
werden die unterschiedlichen
Outputs durch Verwendung der Attribute surfaceScale
und diffuseConstant erzeugt, die dem primitiven Filter
feDiffuseLighting zu Veränderung der Relieftiefe
und der Lichtintensität zur Verfügung stehen.
Im Filter f6 sorgt das Attribut
lighting-color außerdem dafür,
dass eine gelbe Lichtquelle verwendet wird
(Voreinstellung ist weiß).
| 
