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

SVG Tutorial

  svg tutorial index  |  Kapitel 14   

14.17 feDiffuseLighting

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ß).




index  |  Kapitel 14  |  14.16  <<  | 14.17 |  >>  14.18   feSpecularLighting