three.jsでディスプレイスメントマップフィルタ実装したデモ作ったら思った以上に使えそうなのでメモ&共有。
(自信ないけどディスプレイスメントマップフィルタってこうことやってると思う。たぶん、、)
まず、planeなmeshを敷き詰めたsceneをオフスクリーンレンダリングしたものを、フィルタ効果用のマスクテクスチャとして使用(デモのshowMaskをONにしたときの画面がその効果用テクスチャ)↓
そして、このテクスチャマスクをずらしたい絵↓にかぶせる(実際にかぶせるわけじゃなくてイメージ)
マスクテクスチャの赤(R)をx軸のずらす量、緑(G)をy軸のずらす量として使用してて、(GLSLでいうとtexture2D()の第２引数のオフセット値として使用してる)
動的に色を変えることでずらす量をアニメーションさせてる。showMaskフラグをぽちぽちするとイメージしやすいかも。
適応後はこんな感じ。
このフィルタってデモみたくぐにゃぐにゃさせたいときに使うもんだと思ってたけど、パラメータによってはソリッドな演出も実装できて幅が広そう。
マスクテクスチャ次第でもっとファンキーなのが期待できる。
ソースはこちら。よかったら参考にしてください。
github.com
