読者です 読者をやめる 読者になる 読者になる

テクスチャ使ったディスプレイスメントマップフィルタ

three.jsでディスプレイスメントマップフィルタ実装したデモ作ったら思った以上に使えそうなのでメモ&共有。
(自信ないけどディスプレイスメントマップフィルタってこうことやってると思う。たぶん、、)

ikeryou.github.io

まず、planeなmeshを敷き詰めたsceneをオフスクリーンレンダリングしたものを、フィルタ効果用のマスクテクスチャとして使用(デモのshowMaskをONにしたときの画面がその効果用テクスチャ)↓
f:id:ikeryou:20170519171049j:plain

そして、このテクスチャマスクをずらしたい絵↓にかぶせる(実際にかぶせるわけじゃなくてイメージ)
f:id:ikeryou:20170519171054j:plain

マスクテクスチャの赤(R)をx軸のずらす量、緑(G)をy軸のずらす量として使用してて、(GLSLでいうとtexture2D()の第2引数のオフセット値として使用してる)
動的に色を変えることでずらす量をアニメーションさせてる。showMaskフラグをぽちぽちするとイメージしやすいかも。
適応後はこんな感じ。
f:id:ikeryou:20170519172847j:plain

このフィルタってデモみたくぐにゃぐにゃさせたいときに使うもんだと思ってたけど、パラメータによってはソリッドな演出も実装できて幅が広そう。
マスクテクスチャ次第でもっとファンキーなのが期待できる。

ソースはこちら。よかったら参考にしてください。
github.com