WebGL FilterはWebGLを使ったWebベースの画像イフェクトソフトウェア。

WebGL FilterはHTML5/JavaScriptのフリーウェア(ソースコードは公開されている)。HTML5では様々な新しい機能をWebの世界に提供する。その一つとして知っておきたいのがWebGLだ。GPUを使ったグラフィカルな表示処理が可能になる。


イフェクト例

だが一般的なWeb開発者からすると敷居が高く、ゲームや3Dグラフィックスを必要としない限り使わない技術に思えてしまう。だがWebGL Filterを見れば考えが変わるかも知れない。

WebGL Filterは画像にイフェクトを施すWebアプリケーションだ。WebGLを使っているので高速、かつリアルタイムに処理が施せるのが特徴になっている。明るさやコントラスト、ぼかしやズーム効果など様々なイフェクトが用意されている。


他のファイルを開く

スライダーを使って処理の程度を変更することや、ポインタを移動して処理の中心を変更することができる。どれもリアルタイムにイフェクトが適用される。なおWebGLに対応している必要があり、かつ処理は意外と重たいので低速なWebブラウザの方はご注意いただきたい。

[s2If current_user_can(access_s2member_level1)]


イフェクト例2(プレミアム限定)

[/s2If]
[s2If current_user_can(access_s2member_level1)]


イフェクト例3(プレミアム限定)

[/s2If]
[s2If current_user_can(access_s2member_level1)]


スライダーを使ってブロックの大きさは変更可(プレミアム限定)

[/s2If]

MOONGIFTはこう見る

処理を行う範囲が指定できないのが残念ではあるが、ドロップダウンからイフェクトを選択してスライダーを動かすだけで画像がぐりぐりと変更されていくのはとても面白い。イフェクトを行った結果は保存も可能になっている。この場合はdata URIで出力される。

3Dグラフィックというと敷居が高いが、画像であればデジカメの写真も含めてオンラインに無数のコンテンツが存在する。WebGL Filterのコードを研究すると、WebGLの利用についてアイディアが湧くかも知れない。

デモ:evanw.github.com/webgl-filter/

evanw/webgl-filter - GitHub