はじめに
PixiJSで文字にフィルターをかけたかったのですが、色々詰まったのでまとめます。
公式でなんとかならないかな～
簡単にかけてみる
CrossHatchFilterを文字にかけてみる。
See the Pen
pixi def filter by 暁の流星 (@nomber1910)
on CodePen.
文字以外にもかかってしまう...
というのも、TextはSpriteが親であり、filter自体はDisplayObjectにかかっているため、このような表示になってしまうらしい。
glslで青のフィルターをかけてあげても
See the Pen
pixi text green by 暁の流星 (@nomber1910)
on CodePen.
背景が赤なので、青と赤が合わさってピンクになる。
対処法
背景は、glslで受け取るtexture2Dの中のalpha値は0なので、それを用いてフィルターをかける。
See the Pen
Untitled by 暁の流星 (@nomber1910)
on CodePen.
といっても、フィルターがかかる範囲は左右が文字ギリギリなので少し変に見える。
filterAreaをかけたらいい感じになるかもしれない。