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

SVG Tutorial

  svg tutorial index  |  Kapitel 14   

14.18 feSpecularLighting

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.




index  |  Kapitel 14  |  14.17  <<  | 14.18 |  >>  14.19   feFlood