pixi.jsのフィルターを試してみました

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いいですねー／それではまた＿(・・)／