201108Nov

WebGL Filter: Bibliothek für HTML5-Bildeffekte

Dass WebGL nicht automatisch mit 3D-Programmierung verbunden werden muss, zeigt sehr schön das Projekt WebGL Filter: Bei dieser gelungenen JavaScript-Bibliothek werden die Canvas- und WebGL-Technologien eingesetzt, um spezielle Bildeffekte zu erzielen. Auf der Demo-Seite können die unterschiedlichen Filter (wie Gradationskurven, Helligkeit, Kontrast, Farbton, Sättigung, Weichzeichner, Scharfzeichner, Tilt Shift, Wölbung, Perspektive) in Echtzeit auf eine Grafik angewendet werden.

WebGL Filter

Die Filter werden zwar mit Canvas dargestellt, doch die eigentlichen Berechnungen werden durch WebGL vorgenommen. Dazu kommt das WebGL-Framework GLFX.js zum Einsatz, das ebenfalls vom Entwickler Evan Wallace stammt. Bei GitHub steht der Quelltext des Projekts zum Download bereit. Um die manipulierten Bilder abzuspeichern, setzt der Entwickler das SimpleHTTPServer-Modul von Python ein.