|
Der primitive Filter feSpecularLighting
beleutet ein Input-Bild mit reflektierendem Licht und verwendet
dabei den Alpha-Kanal des Input-Bildes als Relief.
Sie können die Relieftiefe, die Intensität und den Glanz 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 vorletztes Unterkapitel).
Dabei können Sie genau eine Lichtquelle, d.h. genau ein Kind-Element
innerhalb des feSpecularLighting-Containers verwenden.
Dieses gilt auch für den Beleuchtungsfilter feDiffuseLighting
(siehe letztes 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 ausgeprägtere bzw. flachere Struktur erhält. Voreingestellter
Wert für dieses Attribut ist 1.
Die Intensität des Lichts wird durch das
Attribut specularConstant 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.
Um den Glanz des Output-Bildes festzulegen, steht das
Attribut specularExponent zur Verfügung. Akzeptierter Wert
dieses Attributs ist eine Zahl zwischen 1 und 128. Voreingestellter
Wert ist 1.
feSpecularLighting 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 feSpecularLighting</title>
<desc>
Beispiele für die Verwendung von feSpecularLighting
</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 feSpecularLighting -->
<filter id="f1">
<feSpecularLighting in="SourceAlpha"
result="out1">
<feDistantLight azimuth="225" elevation="45" />
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="out1"
operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" />
</filter>
<filter id="f2">
<feSpecularLighting in="SourceAlpha"
result="out1">
<feDistantLight azimuth="225" elevation="5" />
</feSpecularLighting>
<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" />
<feSpecularLighting in="out1"
result="out3">
<feDistantLight azimuth="225" elevation="5" />
</feSpecularLighting>
<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" x="-.2" y="-.2" width="1.4" height="1.4">
<feGaussianBlur in="SourceAlpha"
stdDeviation="2"
result="out1" />
<feOffset in="out1"
dx="2" dy="2"
result="out2" />
<feSpecularLighting in="out1"
surfaceScale="15"
result="out3">
<feDistantLight azimuth="225" elevation="5" />
</feSpecularLighting>
<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" x="-.2" y="-.2" width="1.4" height="1.4">
<feGaussianBlur in="SourceAlpha"
stdDeviation="2"
result="out1" />
<feOffset in="out1"
dx="2" dy="2"
result="out2" />
<feSpecularLighting in="out1"
surfaceScale="12"
specularConstant="2"
specularExponent="16"
result="out3">
<feDistantLight azimuth="225" elevation="5" />
</feSpecularLighting>
<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" x="-.2" y="-.2" width="1.4" height="1.4">
<feGaussianBlur in="SourceAlpha"
stdDeviation="2"
result="out1" />
<feOffset in="out1"
dx="2" dy="-2"
result="out2" />
<feSpecularLighting in="out1"
surfaceScale="16"
specularExponent="24"
result="out3">
<feDistantLight azimuth="135" elevation="5" />
</feSpecularLighting>
<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">feSpecularLighting</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 feSpecularLighting mit einer Lichtquelle,
die durch den primitven Filter feDistantLight definiert wird.
In den Filtern f1 und f2 werden
keine zusätzlichen Attribute von feSpecularLighting
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 alle folgenden Filter f3 bis f6
durch feGaussianBlur und feOffset
ein solcher erzeugt.
Innerhalb der Filter f4 bis f6
werden die unterschiedlichen
Outputs durch Verwendung der Attribute surfaceScale,
specularConstant
und specularExponent erzeugt, die dem primitiven Filter
feDiffuseLighting zu Veränderung der Relieftiefe,
der Lichtintensität und dem Glanz des Lichts zur Verfügung stehen.
Im Filter f6 wird außerdem
der Einfall der Lichtquelle und der Schattewurf verändert.
| 
