こんにちは。フロントエンドエンジニアのノートです。
フロントエンド
エンジニア
ノート
「ぼくのなつやすみ」の最新作を期待して10年が経ちました。もう夏も終わりそうなので今年も諦めています。
フロントエンド
エンジニア
ノート
今回は題目通り、「フィルター表現の幅を広げる」ということで、
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;
} See the Pen QWNWYpN by LOGICAL STUDIO PR部 (@ls_pr) on CodePen.
画像に少し、ノイズがかかってちょっと古いテレビのようになっているのではないでしょうか。
なぜなら、それはもちろんノイズのフィルターをかけたからです。おばあちゃんの家のテレビにこんなノイズがかかっていた気がします。
上のフィルター部分の記述を消してもらったら、ノイズが消えてフィルターなしの画像だけが表示されるはずです。
ノイズだけじゃない様々なフィルター
もちろん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});
});
See the Pen zYqaNjM by LOGICAL STUDIO PR部 (@ls_pr) on CodePen.
画像をホバーするとぐにゃっと歪んでいるかと思います。溶けかけのチョコレートのようですね。
チョコレートの画像でやってみると美味しそうかもしれません。
最後に
今までWebGLでしか実装できなかった多彩なフィルター表現も、
PixiJSのお陰で環境構築や学習コスト含め、物凄く敷居が下がったのかなと思います。
「CSS Shader」という、CSSでシェーダーをいじれるものもありますが、使い分けが必要になってくるでしょう。。
また、こちらの記事にも書いてある通り、カスタムフィルターにはフラグメントシェーダーしか記述しなくても良いので、
シェーダーの入りの勉強には良いかもしれません。ね。
では、今回はここら辺で失礼します。ありがとうございました。
ロジカルスタジオにあなたという新しいフィルターをかけてみませんか？どんな色になるのか楽しみにお待ちしております。↓
