Die primitiven Filter für Beleuchtungseffekte
feDiffuseLighting und
feSpecularLighting, die in den folgenden
Unterkapiteln behandelt werden, verwenden zur Bestimmung
der eigentlichen Lichtquelle genau eines der folgenden
primitiven Filter-Elemente zur Definition
einer Lichtquelle und deren Position als Kind-Element:
Bei Verwendung des primitiven Filters feDistantLight können Sie die
die Position der Lichtquelle durch zwei Attribute bestimmen:
azimuth und elevation.
Stellen Sie sich vor Ihre Grafik läge flach auf Ihrer
Arbeisfläche - und nun stülpen Sie gedanklich eine durchsichtige Halbkugel
über Ihre Grafik.
Ausgehend von diesem Modell bestimmt
azimuth die Position der Lichtquelle auf der Grundlinie
der Halbkugel (der Kreislinie um die Grafik). Als Wert ist
ein Winkelmaß (0 bis 360) anzugeben. So bedeutet z.B.
der Wert 0, dass die Lichtquelle
rechts auf der Grundlinie positioniert wird,
der Wert 90 bedeutet das die Lichtquelle vorne
positioniert wird,
bei einem Wert von 180 ist sie links, u.s.w.
Mit dem Attribut elevation bestimmen Sie die Position
der Lichtquelle auf der Halbkugel. Als Wert ist ebenfalls
ein Winkelmaß anzugeben. Dabei bedeutet z.B.
der Wert 0, dass die Lichtquelle
auf der Grundlinie bleibt, der Wert
90 bedeutet den höchsten Punkt der Halbkugel
oberhalb der Grafik, d.h. das Licht fällt senkrecht auf die Grafik. Bei
einem Wert zwischen 180 und 360
wird die Grafik von unten beleuchtet.
Der primitive Filter fePointLight benötigt zu Angabe seiner
Position die Attribute x,
y und z. Durch diese Attribute legen
Sie eine Koordinate innerhalb eines 3-dimensionalen Raumes fest, mit der
die Postion der Lichtquelle bestimmt wird.
Mit x wird die Position auf der x-Achse definiert,
mit y die Position auf der y-Achse und mit
z die Position auf der z-Achse. Positive Werte
für z bedeuten, dass der Punkt oberhalb der Grafik positioniert ist,
negative Werte für z bedeuten,
dass die Grafik von unten beleuchtet wird.
Auch die Positionierung der Lichtquelle bei
feSpotLight wird durch die Attribute x,
y und z vorgenommen.
Zusätlich stehen diesem Element noch
die Attribute pointsAtX,
pointsAtY und pointsAtZ
zur Verfügung. Durch diese Attribute legen Sie einen zweiten
Punkt im 3-dimensionalen Koordinatensystem fest, auf den
die Lichtquelle zielt.
Die Streuung (den Fokus) der Lichtquelle können
Sie mit dem Attribut specularExponent beeinflussen. Es akzeptiert
eine Zahl als Wert. Je höher diese Zahl desto größer die Streuung.
Voreingestellter Wert ist 1.
Um das Ausmaß des Lichtkegels im Zielbereich des Lichts einzuschränken (normalerweiser erfolgt
keine Einschränkung), steht das Attribut
limitingConeAngle zur Verfügung. Dieses Attribut
akzeptiert ein Winkelmaß als Wert. Sie geben den Winkel zwischen der Lichtachse, die
ihren Ursprung am Punkt der Lichtquelle hat und durch den Zielpunkt des Lichts verläuft, und
einer zweiten Achse an, die ihren Ursprung ebenfalls am Punkt der Lichtquelle hat.
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="390px"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Die primitiven Filter
feDistantLight, fePointLight, feSpotLight</title>
<desc>
Beispiele für die Verwendung von feDistantLight, fePointLight
und feSpotLight zur Definition von Lichtquellen
</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>
<!-- 2 Filter mit feDistantLight -->
<filter id="f1">
<feDiffuseLighting in="SourceAlpha" result="out1">
<feDistantLight azimuth="0" elevation="45" />
</feDiffuseLighting>
</filter>
<filter id="f2">
<feDiffuseLighting in="SourceAlpha" result="out1">
<feDistantLight azimuth="180" elevation="45" />
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="out1"
operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" />
</filter>
<!-- 2 Filter mit fePointLight -->
<filter id="f3">
<feDiffuseLighting in="SourceAlpha" result="out1">
<fePointLight x="100" y="100" z="100" />
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="out1"
operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" />
</filter>
<filter id="f4">
<feDiffuseLighting in="SourceAlpha" result="out1">
<fePointLight x="-100" y="-100" z="100" />
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="out1"
operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" />
</filter>
<!-- 2 Filter mit feSpotLight -->
<filter id="f5">
<feDiffuseLighting in="SourceAlpha" result="out1">
<feSpotLight x="-100" y="-100" z="50"
pointsAtX="350" pointsAtY="350" pointsAtZ="-10"
specularExponent="1" />
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="out1"
operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" />
</filter>
<filter id="f6">
<feDiffuseLighting in="SourceAlpha" result="out1">
<feSpotLight x="-100" y="-100" z="50"
pointsAtX="350" pointsAtY="350" pointsAtZ="-10"
specularExponent=".1"
limitingConeAngle="13" />
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="out1"
operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" />
</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">feDistantLight
<tspan x="145" dy="120">fePointLight</tspan>
<tspan x="145" dy="120">feSpotLight</tspan>
</text>
<text x="58" y="130">Original</text>
<line x1="137" y1="40" x2="137" y2="330" stroke="black" />
</svg>
Im obigen Beispiel sind 6 Beleuchtungsfilter
f1 bis f6 durch das Element
feDiffuseLighting definiert.
Der Output von feDiffuseLighting wird
in den Filtern f2 bis f6 zusätzlich
durch den primitiven Filter feComposite mit
dem Originalbild verschmolzen.
Die Filter f1 und f2
verwenden als Lichtquelle das Element feDistantLight,
dabei kommt das
Licht im Filter f1 von rechts und
im Filter f2 einmal von links. Dies wurde durch die
verschiedenen Werte von azimuth
bewirkt. Der Winkel des Lichteinfalls wird für beide Lichtquellen
durch das Attribut elevation auf 45° Grad festgelegt.
Der Filter f1
zeigt nur die Ausgabe des Beleuchtungsfilters,
da feComposite nicht
verwendet wird.
In den Filtern f3 und f4 wird die
Lichquelle fePointLight verwendet.
Die unterschiedlichen Werte von x und y
lassen das Licht im Filter
f3 von links oben und
das Licht im Filter f4 von rechts unten
in die Grafik fliessen. Der Wert 100 für das
Attribut z
in beiden Lichtquellen bewirkt,
dass die Grafik von oben beleuchtet wird.
Die letzten beiden Beleuchtungfilter in
f5 und f6
verwenden feSpotLight als Lichtquelle.
Im Filter f6 wird zusätzlich zur Positionierung
der Lichtquelle und der Definition des Zielpunkts durch die
Attribute pointsAtX,
pointsAtY und pointsAtZ der Fokus der
Lichtquelle durch specularExponent und das Ausmaß des
Lichtkegels durch limitingConeAngle verändert.
|