CSS Shadersを知りたい人は触ってみよう「CSS Shaders with WebGL」
CSS Shaders with WebGLはWebGLを使ってCSS Shadersを実現するサンプル集です。
CSS Shadersという技術があります。CSSによって要素を変形させるもので、プログラマブルシェーダーというプログラミングによって制御します。それによって何ができるのかその一例としてみておきたいのがCSS Shaders with WebGLです。
カーテン表示。
マウスのポインターを拡大表示。
白黒に変換。
旗のように表示。
こんな感じに斜めに表示。
地図のように折り目のある表示。
CSS Shaders with WebGLはWebGLを使ってCSS Shadersを実現しています。通常であればGoogle ChromeのEnabls CSS Shadersというフラグを有効にしないと使えません。どんどん高度化していくWeb技術を垣間みれる、非常に面白いサンプルになっています。
CSS Shaders with WebGLはHTML5製のオープンソース・ソフトウェア（Public Domain）です。
MOONGIFTはこう見る
CSS Shadersという単語自体、この記事を通してはじめて知ったのですが、WebGLやOpenGLと同じようにシェダー言語（ほぼ互換）を使って3Dグラフィックスを作り出す技術だそうです。シェダー言語はほぼプログラミングであり、その意味でCSSが非常に高度化されているのが分かるかと思います。
ぱっと思いつくのはゲームでしょうか。グラフィックスを描く際にWebGL頼りではなくCSSでできるというのはメリットがあるように思えます。デメリットとしてはソースが全て公開になってしまうことでしょう。Webデザイナーの方でCSS Shadersを使いこなせるレベルになったとすれば、それはとても凄いことのように思えます。