SVG/Filter/feDiffuseLighting
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).
<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>
Inhaltsverzeichnis
Attribute[Bearbeiten]
Folgende Attribute sind möglich:
in: EingangsgrafiksurfaceScale: legt die Höhe der Oberfläche fest, auf die ein Beleuchtungs-Filter angewendet wirddiffuseConstant: repräsentiert den kd-Wert im Phong-BeleuchtungsmodellkernelUnitLength: Auflösung; positiver Wert oder Liste zweier positiver Werte (für x und y); negative Werte führen zum Abruch des Dokuments
Kindelemente[Bearbeiten]
feDistantLight[Bearbeiten]
Der Filter feDistantLight beleuchtet mit einer entfernten Lichtquelle.[3]
Folgende Attribute sind nötig:
azimuth: Richtungswinkel der Lichtquelleelevation: 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-Achsey: Koordinate der Y-AchseZ: 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-Achsey: Koordinate der Y-AchseZ: Koordinate der Z-AchselimitingConeAngle: (Standardwert: kein Winkel) legt den Winkel (in Grad) der Beleuchtungsachse ( zwischen der Lichtquelle und dem beleuchteten Punkt) festpointsAtX: X-Position im KoordinatensystempointsAtY: Y-Position im KoordinatensystempointsAtZ: Z-Position im KoordinatensystemspecularExponent: 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:
<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>
Quellen[Bearbeiten]
- ↑ W3C: feDiffuseLightingElement
- ↑ wikibooks.de: diffuse Beleuchtung
- ↑ W3C: feDistantLightElement
- ↑ W3C: fePointLightElement
- ↑ W3C: feSpotLightElement
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.