メモログ

⛰ 塵が積もって山とならないメモのログ 👄

Filter Effects / Adobe CSS FilterLab

Filter Effects 1.0では、HTML上に配置した画像とかにグレースケールなどのフィルターをかけることができます。Understanding CSS Filter Effects - HTML5 Rocksにて詳しく紹介されていますが、HTMLの要素に適用できるようにSVGから取り入れられた仕様で、多くのFilter Functionは高速に動きます(手元で試している限りではblurも速い)。対応状況は、Can I use CSS Filter Effectsにて。今のところChromeとSafariでのみwebkitのプレフィックス付きで確認できます。

Adobeが公開しているCSS FilterLabでは、Filter Functionを簡単に試すことができて便利。最新のGoogle Chrom Canaryを使用すると、さらにCustom Filter (CSS Shade)も試すことができて、よくわからないけどすごい。最新のGoogle Chrome Canaryは、通常のGoogle Chromeとは別にインストールができるのでわりと気楽にインストールしても大丈夫( chrome://flags/ を開いて、「CSS シェーダを有効にする」の項目を有効にする必要があります)。

Custom Filterについては、CSS shaders: Cinematic effects for the web | Adobe Developer Connectionに概要とサンプルがありますが、よくわかっておりません。動きとしては、HTMLの構成要素をvertex mesh状にして、vertex shader(vs)によってvertexを操作することで変形させて、ピクセルにレンダリングするときにfragment shader (fs)で設定している色でレンダリングしていくという感じみたい。OpenGL ES Shading Language (PDF)に詳細の仕様が書かれています。