SVG/Filter/feDiffuseLighting

Aus SELFHTML-Wiki
< SVG‎ | Filter
Wechseln zu: Navigation, Suche

Der primitive Filter feDiffuseLighting dient der indirekten Beleuchtung durch diffuses Licht nach dem Phong-Modell[1]. Als Lichtquellen dienen die Kindelemente feDistantLight (entfernte Lichtquelle), fePointLight (Punktlichtquelle) und feSpotLight (Scheinwerfer).

  • SVG 1.1
  • Android
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
Beispiel ansehen …
  <filter id="beleuchtung1">
    <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
      <feDistantLight azimuth="50" elevation="50"/>
    </feDiffuseLighting>

    <feComposite in="SourceGraphic" in2="light"
                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
  </filter>
  
  <filter id="beleuchtung2">
    <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
      <fePointLight x="30" y="30" z="20" />
    </feDiffuseLighting>
    <feComposite in="SourceGraphic" in2="light"
                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
  </filter>
  
 <filter id="beleuchtung3">
    <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
      <feSpotLight x="-20" y="5" z="30" limitingConeAngle="20"
                   pointsAtX="50" pointsAtY="50" pointsAtZ="0"/>
    </feDiffuseLighting>

    <feComposite in="SourceGraphic" in2="light"
                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
  </filter>
Im Beispiel werden verschiedene Beleuchtungsfilter angewandt. Zuerst wird die Grafik mit einem feDiffuseLighting-Filter beleuchtet. Danach wird die Grafik mittels feComposite mit der Ursprungsgrafik kombiniert.

Um die Werte für die Lichtquellen nicht immer anpassen zu müssen, werden die Filter und Objekte auf den Ursprung (0,0) ausgerichtet und mit transform="translate() verschoben.

Die Beispiele in der 2.Spalte werden mit feDistantLight indirekt beleuchtet. Dabei fällt auf, dass sie dunkler als die unbeleuchteteten Elemente in der linken Spalte wirken. Durch eine Erhöhung des elevation-Werts auf 100 können Sie die Helligkeit verstärken.

Die Beispiele in der 3.Spalte werden mit fePointLight mit einer Punktlichtquelle beleuchtet.

Die Beispiele in der rechten Spalte werden mit feSpotLight mit einem Scheinwerfer beleuchtet.

Beachten Sie: Der Beleuchtungseffekt wird umso deutlicher, je heller das zu beleuchtende Objekt ist. Bei der Füllfarbe schwarz ist gar kein Beleuchtungseffekt zu erkennen.

Attribute[Bearbeiten]

Folgende Attribute sind möglich:

  • in: Eingangsgrafik
  • surfaceScale: legt die Höhe der Oberfläche fest, auf die ein Beleuchtungs-Filter angewendet wird
  • diffuseConstant: repräsentiert den kd-Wert im Phong-Beleuchtungsmodell
  • kernelUnitLength: Auflösung; positiver Wert oder Liste zweier positiver Werte (für x und y); negative Werte führen zum Abruch des Dokuments
Empfehlung: Wenn Sie einen Wert für KernelUnitLength angeben, wird der Filter skalierbar. In typischen Darstellungsprogramm ist die Effektivtät am höchsten, wenn ein Pixel der Matrix einem der Filterregion entspricht. [2]



Kindelemente[Bearbeiten]

feDistantLight[Bearbeiten]

Der Filter feDistantLight beleuchtet mit einer entfernten Lichtquelle.[3]

Folgende Attribute sind nötig:

  • azimuth: Richtungswinkel der Lichtquelle
  • elevation: legt den Richtungswinkel (in Grad) der Lichtquelle aus der X,Y- Ebene zur Z-Achse fest



fePointLight[Bearbeiten]

Der Filter fePointLight beleuchtet mit einer Punktlichtquelle.[4]

Folgende Attribute sind möglich:

  • x: Koordinate der X-Achse
  • y: Koordinate der Y-Achse
  • Z: Koordinate der Z-Achse

Falls die Attribute nicht definiert werden, wird ein Wert von 0 angenommen.


feSpotLight[Bearbeiten]

Der Filter feSpotLight beleuchtet mit einem Scheinwerfer.[5]

Folgende Attribute sind möglich:

  • x: Koordinate der X-Achse
  • y: Koordinate der Y-Achse
  • Z: Koordinate der Z-Achse
  • limitingConeAngle: (Standardwert: kein Winkel) legt den Winkel (in Grad) der Beleuchtungsachse ( zwischen der Lichtquelle und dem beleuchteten Punkt) fest
  • pointsAtX: X-Position im Koordinatensystem
  • pointsAtY: Y-Position im Koordinatensystem
  • pointsAtZ: Z-Position im Koordinatensystem
  • specularExponent: legt den Fokus (Brennpunkt) der Lichtquelle fest (Standardwert:1)

Falls die Attribute nicht definiert werden, wird ein Wert von 0 angenommen.



Anwendungsbeispiel[Bearbeiten]

Reliefstruktur[Bearbeiten]

Mit diesem Filter können Sie einen Prägeeffekt in Form einer Reliefstruktur (embossing filter oder embossed photography) erzielen:

Beispiel ansehen …
  <filter id="Relief" width="100%" height="100%" x="0" y="0">
    <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" />
    <feDiffuseLighting surfaceScale="10" lighting-color="white">
      <feDistantLight azimuth="50" elevation="50"/>
    </feDiffuseLighting>
  </filter>
Der feColorMatrix-Filter wandelt die Eingangsgrafik in eine Ebene mit den Alphawerten um. Diese Ebene wird dann vom feDiffuseLighting-Filter beleuchtet und erzielt so den Prägeeffekt.
Empfehlung: Definieren Sie eine Größenangabe für den Filter, da er ansonsten über das Foto herausragt.

Quellen[Bearbeiten]

  1. W3C: feDiffuseLightingElement
  2. wikibooks.de: diffuse Beleuchtung
  3. W3C: feDistantLightElement
  4. W3C: fePointLightElement
  5. W3C: feSpotLightElement

Referenz[Bearbeiten]