1
/
5

PixiJSで歪みやノイズなどのフィルターを使って表現の幅を広げる。




今回は題目通り、「フィルター表現の幅を広げる」ということで、

PixiJSを用いて、フィルター表現を試していきたいと思います。

シェーダーをいじらないとできない表現が簡単にできるので、知っておくと便利です。

フィルターの記述

PixiJSでフィルターをかけるのは簡単で、記述は下記の通りです。

フィルターのパラメーターはそれぞれのフィルターによって様々なので、リファレンスを参照してください。

const noiseFilter = new PIXI.filters.NoiseFilter(); //ノイズフィルター
noiseFilter.noise = 0.8; //ノイズの大きさ
noiseFilter.seed = 0.5; //ノイズのランダム度合い
img.filters = [noiseFilter]; //imgにフィルタを追加

フィルターを使ってみる

ではでは、早速フィルターをかけ、かつ動かしていきたいと思います。

パラメーターを設定するだけだと単純にフィルターがかかるだけですが、

下記のようにapp.tickerの中で値を動かすとアニメーションさせることができます。

app.ticker.add(animate);
function animate() {
noiseFilter.seed += 0.002;
}



画像に少し、ノイズがかかってちょっと古いテレビのようになっているのではないでしょうか。

なぜなら、それはもちろんノイズのフィルターをかけたからです。おばあちゃんの家のテレビにこんなノイズがかかっていた気がします。

上のフィルター部分の記述を消してもらったら、ノイズが消えてフィルターなしの画像だけが表示されるはずです。


ノイズだけじゃない様々なフィルター

もちろんPixiJSのフィルターには「ノイズ」だけでなく、

「歪み」や「モザイク」、「グリッチ」などなど多数のフィルターが備わっています。

GLSL(シェーダーの記述言語)を記述することができれば、自前のカスタムフィルターも作れます。


下記のGitHubのデモの中でいろんなフィルターを試すことができますので、試してみてください。

https://github.com/pixijs/pixi-filters

https://pixijs.io/pixi-filters/tools/demo/


これだけ種類があって、一つ一つにインパクトがあると、

スライドショーと組み合わせたりマウスイベントに反応させると、面白そうですし、もっとできることが増えそうです。

GSAP(TweenMax)でアニメーションをつけてみる

ということで、思いついたらやってみようの精神なので、

GSAPでマウスイベントに反応させてアニメーションをつけていきたいと思います。

下記のようにGSAPを使って値をいじることにより、画像をホバーしたら歪ませてみます。


img.on('mouseover', function() {
TweenMax.to(
displacementFilter.scale,
2,
{x:0, y:100, ease: Expo.easeOut});
});

img.on('mouseout', function() {
TweenMax.to(
displacementFilter.scale,
2,
{x:0, y:0, ease: Expo.easeOut});
});



画像をホバーするとぐにゃっと歪んでいるかと思います。溶けかけのチョコレートのようですね。

チョコレートの画像でやってみると美味しそうかもしれません。


最後に

今までWebGLでしか実装できなかった多彩なフィルター表現も、

PixiJSのお陰で環境構築や学習コスト含め、物凄く敷居が下がったのかなと思います。


CSS Shaderという、CSSでシェーダーをいじれるものもありますが、使い分けが必要になってくるでしょう。。


また、こちらの記事にも書いてある通り、カスタムフィルターにはフラグメントシェーダーしか記述しなくても良いので、シェーダーの入りの勉強には良いかもしれません。ね。


では、今回はここら辺で失礼します。ありがとうございました。


ロジカルスタジオにあなたという新しいフィルターをかけてみませんか?どんな色になるのか楽しみにお待ちしております。↓

フロントエンドエンジニア
即戦力募集!最新技術を追い求めるフロントエンドエンジニアをWanted!
ロジカルスタジオは、テクノロジーとデザインの視点からクライアントの課題解決をめざす、大阪のクリエイティブプロダクションです。 クライアントの期待を超えて「もっと良くなる、を見つける」のが私たちのスタイル。企画・提案からデザイン制作・システム構築、運用、改善提案をワンストップで行えるのが一番の強みです。近年ではその実績と品質が評価され、案件も急増しています。 代表の古川が掲げる企業理念は「絆を大切に、周りの人を豊かにし、社会に貢献する」。 私たちはこのミッションを推進するため、「新しい技術へのチャレンジ精神」を軸に、「切磋琢磨する仲間」と「働きやすい職場環境」を整え、「成長と可能性を大切にする風土」を育ててきました。 2019年9月に増床し、外部向けのセミナーにも活用できるカンファレンスルームを拡充。スタッフによる公式ブログや、マスコットキャラクター「ロージー&カール」によるTwitterなど、情報発信も強化しています。 可能性の芽をすくい上げられるこの場所を、より大きくしていきたい。 私たちと一緒に、このビジョンを実現しませんか。
株式会社ロジカルスタジオ
株式会社ロジカルスタジオ's job postings
12 Likes
12 Likes

Weekly ranking

Show other rankings
If this story triggered your interest, go ahead and visit them to learn more