Ein komplexes Beispiel zu Filtern
<< < > >> > Hauptteil > Elemente > zur Darstellung > Filter > Beispiel

Es wurde auf den Seiten zuvor oftmals erwähnt, dass ein Filterprimitiv alleine meistens schon einen netten Effekt hat, aber die Kombination von vielen Filterprimitiven zu einem komplexen Filter auch möglich und sehr interessant sei. In diesem Kapitel soll nun also nichts Neues vorgestellt werden, sondern anhand eines Beispiels ein komplexer Filter zusammengebaut werden.

Der gewünschte Effekt des Filters ist ein 3D-Effekt. Beispiel 22 zeigt eine einfache Navigationsleiste und diese soll nun durch den 3D-Effekt noch verschönert werden. Im Folgenden sollen die einzelnen Schritte, die zu dem komplexen Ergebnisfilter führen, beschrieben werden:

1. Für einen 3D-Effekt braucht das Objekt, das als dreidimensional dargestellt werden soll, einen Schatten. Dazu braucht nur der Alpha-Kanal des Objektes geblurt (<feBlur>) werden und später hinter das Objekt gelegt zu werden: Beispiel 35_1.

2. Als nächstes muss eine virtuelle Wölbung erzeugt werden, flach würde das Objekt schliesslich nicht dreidimensional aussehen. Hier kommt zum einen spekulares Licht (<feSpecularLighting>) zum Einsatz, zum anderen eine Punktlichtquelle (<fePointLight>), die sehr weit hinter dem Betrachter von links oben auf das Objekt scheint. Im Filter wird die Lichtquelle aber nicht direkt auf die SourceGraphic, sondern auf das Resultat des Weichzeichners ("weicherSchatten") - den Schatten - angewendet, sonst würden die Übergänge zu hart und unrealistisch werden: Beispiel 35_2.

3. Wie man an dem Beispiel sieht, wirkt sich die Lichtquelle noch global aus, aber den Effekt wollen wir nur auf den Objekten haben, auch das Verschwimmen der Zwischenräume ist ärgerlich. Daher muss nur das Ergebnis des Lichteffekts (in="lichtEffekt") mit dem Alphakanal der Originalgrafik (in2="SourceAlpha") kombiniert werden. Dies geschieht mit Hilfe des "in"-Operators von <feComposite>, der ja nur die Pixel des Lichteffekts zeichnet, die auch über dem Objekt (bzw. dessen Alphakanal) selber liegen: Beispiel 35_3.

4. Als Letztes muss nur noch das eigentliche Objekt mit dem Lichteffekt und dem Schatten kombiniert werden. Auch hier wird wieder <feComposite> benutzt, diesmal mit dem Operator "arithmetic", wobei k1 und k4 den Wert 0 und k2 und k3 den Wert 1 haben. Dadurch ergibt sich als Resultatfarbwert die Addition der zwei Farbwerte. Nun muss noch der Schatten (wie auch schon immer den vorigen Beispielen) hinzugefügt werden und fertig ist der Effekt: Beispiel 35.