Skip to content
Marco edited this page Mar 4, 2019 · 7 revisions

Filter

Beschreibung

Filter sind ein vielseitiges Werkzeug um eine Leinwand mit Visuellen Effekten zu versehen. Filter können als Post processing betrachtet werden, da sie mit dem fertig gerenderten Frame arbeiten. Und somit als letzte instant Anpassungen ermöglichen.

Aufgabe

Filter geben dem Anwender die Möglichkeit seine Leinwände mit vielseitige Visuelle Effekten zu erweitern. Eine Auswahl solcher Effekte ist hier zu finden.

Implementation

Filter lassen sich einfach über ein Untermenü in der Sidebar ein- und ausschalten. Zurzeit stehen zwei filter zur Verfügung: Ein Alpha-Filter, der vergangene Frames verblassen lässt und ein Pixelate-Filter, der die Leinwand verpixelt erscheinen lässt. Der Alpha-Filter ist, selbst geschrieben. Der Pixelate-Filter wurde aus pixi.js übernommen. Diese beiden varianten zeigen, dass Filter selbst erstellt oder auch von anderen übernommen werden können.

Die beiden Filter sind Instanzen eines pixi.js-Filters, der als Interface für WebGL-Shader dient. Da wir mit einem zwei dimensionalen Canvas arbeiten greifen wir lediglich auf Fragment-Shader zurück.

Beispiele

Alpha

Alpha

Pixelate

Pixelate

Pixelate + Alpha

Pixelate + Alpha

Clone this wiki locally