SVG/Filter/feSpecularLighting

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

Der primitive Filter feSpecularLighting dient der Beleuchtung einer Eingangsgrafik mit reflektierendem Licht.Dabei wird der Alpha-Kanal der Eingangsgrafik als Relief verwendet.[1] Als Lichtquellen dienen die Kindelemente feDistantLight (entfernte Lichtquelle), fePointLight (Punktlichtquelle) und feSpotLight (Schweinwerfer).

  • SVG 1.1
  • Android
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
Beispiel ansehen …
  <filter id="specular1">
    <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
    <feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" 
          specularExponent="10" lighting-color="white"  
                    result="specOut">
      <fePointLight x="-50" y="-100" z="200"/>
    </feSpecularLighting>
    <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
    <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
                 k1="0" k2="1" k3="1" k4="0" result="out2"/>
    <feMerge>
      <feMergeNode in="out2"/>
    </feMerge>
  </filter>

  <filter id="specular2">
    <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
    <feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" 
          specularExponent="10" lighting-color="white"  
                     result="specOut">
       <fePointLight x="-500" y="-1000" z="2000"/>
    </feSpecularLighting>
    <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
    <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
                 k1="0" k2="1" k3="1" k4="0" result="out2"/>
    <feMerge>
      <feMergeNode in="out2"/>
    </feMerge>
  </filter>
  
  <filter id="specular3">
    <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
    <feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" 
          specularExponent="10" lighting-color="white"  
                    result="specOut">
      <feDistantLight azimuth="45" elevation="45"/>
    </feSpecularLighting>
    <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
    <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
                 k1="0" k2="1" k3="1" k4="0" result="out2"/>
    <feMerge>
      <feMergeNode in="out2"/>
    </feMerge>
  </filter>

  <filter id="specular4">
    <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
    <feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" 
          specularExponent="10" lighting-color="white"  
                    result="specOut">
      <feSpotLight x="-20" y="5" z="30" limitingConeAngle="45"
           pointsAtX="10" pointsAtY="10" pointsAtZ="0"/>
    </feSpecularLighting>
    <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
    <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
                 k1="0" k2="1" k3="1" k4="0" result="out2"/>
    <feMerge>
      <feMergeNode in="out2"/>
    </feMerge>
  </filter>
Im Beispiel werden verschiedene Beleuchtungsfilter angewandt. Zuerst wird die Grafik mit einem feSpecularLighting-Filter beleuchtet. Danach wird die Grafik mittels feComposite mit der Ursprungsgrafik kombiniert.

Die Objekte in der 2. und 3. Spalte werden mit fePointLight mit einer Punktlichtquelle beleuchtet. Während die Lichtquelle in der 2. Spalte schräg über den Objekten platziert ist, kommt das Licht in der dritten Spalte von weit oben und strahlt gleichmäßig.

Die 4. Spalte wird mit feDistantLight indirekt beleuchtet.

Die Beispiele in der rechten Spalte werden mit feSpotLight mit einem Scheinwerfer beleuchtet. Anders als bei feDiffuseLighting ist hier kein ausgeprägter Lichtkegel sichtbar

Attribute[Bearbeiten]

Sie können die Relieftiefe, die Intensität und den Glanz des Lichts durch Attribute beeinflussen.

Folgende Attribute sind möglich:

  • in: Eingangsgrafik
  • surfaceScale: legt die Höhe der Oberfläche fest, auf die ein Beleuchtungs-Filter angewendet wird
  • specularConstant: repräsentiert den ks-Wert im Phong-Beleuchtungsmodell
  • specularExponent: legt den Fokus (Brennpunkt) der Lichtquelle fest (größerer Wert wirkt glänzender)
  • 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 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.



Quellen[Bearbeiten]

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

Referenz[Bearbeiten]