LIGアドベントカレンダー19日目です！こんにちは@jun01itoです。デザイナーやってます。アワードなんかを見ていると、WebGL系がすごい勢いですね~中でも、

WebGL 2D系 pixi.js
WebGL 3D系 three.js

を使っているなぁという印象です。そんなわけでWebGL~シェーダーを簡単に追加できるpixi.jsのフィルターを試してみました。公式サンプル見ながらやってみます。
公式のpixi sample

今回のバージョンは Pixi.js 3.0.8

サンプルがv3じゃない...

sampleとドキュメントを見比べてみるのが良さそうです。
pixi docs

new PIXI.filtersに変更されてる
フィルター数も増えてる

はじめにテクスチャを読み込んでみます

    var WW = document.documentElement.clientWidth;
    var WH = document.documentElement.clientHeight;

    var renderer = PIXI.autoDetectRenderer(WW, WH,{backgroundColor : 0x000000});
        renderer.view.style.position = "absolute"
        renderer.view.style.width = window.innerWidth + "px";
        renderer.view.style.height = window.innerHeight + "px";
        renderer.view.style.display = "block";

    document.body.appendChild(renderer.view);

    var stage = new PIXI.Container();
    var texture = PIXI.Texture.fromImage("テクスチャ画像のパス");
    var sprite1 = new PIXI.Sprite(texture);
    stage.addChild(sprite1);

    //- ここでフィルターを呼ぶ

    render();
    function render() {
        requestAnimationFrame(render);
        renderer.render(stage);
    }

これだけでcanvasにテクスチャ画像が読み込まれます。

次にフィルターを適応してみます

以下を追加するだけ。

var twistFilter = new PIXI.filters.TwistFilter();
stage.filters = [ twistFilter ];

たったの2行でした。。。
フィルターの追加は、filtersの配列に追加すればOKのようです。
読み込む順番も関係しているようで、sampleに合わせた順番で。

他のフィルターも試してみます

他のフィルターも試してみて、displacementFilterというフィルターが他のと少し違うフィルターでした。displacementは「置換」という意味通りで、テクスチャ画像をフィルター画像に置き換えるエフェクトのようです。

sampleではこんな画像を読み込んでいました

photoshopでdisplacement.jpg

ベタ塗り(#000000)
描画(ファイバー)
描画(雲模様1)
白黒

の順番で効果をかけると似たような画像が作れました。この画像でよければご自由にお使いください。読み込んだテクスチャ画像でフィルターエフェクトがかけられますので色々応用できそうです。

displacementFilter

var displacementFilter = new PIXI.filters.DisplacementFilter(PIXI.Sprite.fromImage("フィルター用の画像パス"));
displacementFilter.scale.x = 70;
displacementFilter.scale.y = 70;

分かりやすいように、displacementFilterだけ適用してみました。いい感じです。

まとめ

filterの追加は、filters配列に追加する
複数読み込みの場合は順番に注意

あとは、blurのエフェクトがキレイな感じで使いどころ多そう。

pixi.jsいいですねー／それではまた＿(・・)／