Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 14   

14.16 feDistantLight fePointLight feSpotLight

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.




index  |  Kapitel 14  |  14.15  <<  | 14.16 |  >>  14.17   feDiffuseLighting