DisplacementMapFilterの動作を理解する

as3 flash

DisplacementMapFilterの動作は理解しづらいので、パラメーターとエフェクトの関連を確認するためのツールを作ってみました。

DisplacementMapFilterとは何か？

DisplacementMapFilter クラスは、指定された BitmapData オブジェクト (置き換えマップイメージと言います) のピクセル値を使用して、オブジェクトの置き換え (変位) を実行します。このフィルタを使用して、MovieClip、SimpleButton、TextField、Video オブジェクトなどの DisplayObject クラスから継承したオブジェクト、および BitmapData オブジェクトにワープ効果や斑点効果を適用できます。

ActionScript 3.0 コンポーネントリファレンスガイドの DisplacementMapFilterクラスの説明から抜粋

このフィルタの特徴は、フィルタ適用による元画像の変形の度合いをBitmapData(マップイメージ)によって指定するところにあります。元画像の各ピクセルがどのぐらい移動するのかは、マップイメージの各ピクセルのチャンネルの値によって決定されます。したがって、緩やかなグラデーション画像をマップイメージにした場合、画像は緩やかに変化します。また、X方向とY方向で別々なチャンネルによって変位を指定することが可能です。例えばX方向の変位量の指定には青を使い、Y方向には赤を使うと言ったことが可能です。

具体的に、DisplacementMapFilterは次の９つのプロパティを持っています。

  • mapBitmap
  • mapPoint
  • componentX
  • componentY
  • scaleX
  • scaleY
  • mode
  • color
  • alpha

mapBitmapがマップイメージとなり、mapPointで指定されたマップイメージ上の点から変位量の計算が行われます。componentXとcomponentYはどの変位量を決定するチャンネルの指定です。

エフェクトに大きな影響を及ぼすのは、残りの５つのプロパティで特にscaleXとscaleYの値によって見た目が大きく変わります。scaleXとscaleYはそれぞれ、X方向とY方向の変位量の倍率になっています。そのため、この値を大きくすると大きく変形します。
例えばscaleXを大きくすると、X方向の変化が大きくなります。

残りのプロパティ、mode、color、alphaについては次に紹介するツールを実際に使って確認してみて下さい。

DisplacementMapFilterを実際に使ってみる

このフィルタを適用した結果画像を想像できるようになるには、慣れるしかないと思います。ということで、好きにパラメーターを変更して動作確認をするためのツールを作ってみました。

このツールでは、前回作ったPerlinNoiseを使ってマップイメージを生成しています。アニメーション表示には、HundredthMonkeyさんの手法を参考にさせてもらいました。

例１：波打つエフェクト

PerlinNoise( baseX=100, baseY=100, octaves=5) Filter( scaleX=10 scaleY=10)

例２：輪郭戦をぼかすエフェクト

PerlinNoise( baseX=5, baseY=5, octaves=2) Filter( scaleX=5 scaleY=5)

追記：「アニメーションさせる」チェックボックスのデフォルト値をオフにしました。アニメーションさせるとかなり重いです。


ソースコード

ここからダウンロードできます。

参考にしたサイト

今後の予定

  • エフェクトのコア部分をモジュール化する
  • ツールでパラメーターを設定するとコードスニペットが生成されるようにする（Reflectクラスみたいな感じ）