【vvvv Advvvvent Calendar 2014】めくるめくポストフェクト！Filterの使い方

これは「[VVVV Advent Calendar 2014](http://qiita.com/advent-calendar/2014/vvvv)」の4日目の記事です。ちなみにタイトルのAdvvvventは勝手につけました。

#Filterとは

h311o vvvv0r1d.
わたしはvvvvをつかうとき、たいていRenderer（EX9）をまず真っ先に呼びます。なんらかの描画を出すのが主な目的のツールだと個人的にはおもってます。
映像の世界ではレンダリングした画面にかけるエフェクトをポストエフェクトなんて言ったりします。vvvvにはそうした画面全体（*位置を指定できるものもある。後述）に効果を出すノードが用意されていて、ノードブラウザのカテゴリでいうところのEX9.Texture系がそれにあたります。中身がHLSLなのでシェーダを書ければ自作することもできます。大量にありますが、たいてい
![FXAA (EX9.Texture Filter) help.png](https://qiita-image-store.s3.amazonaws.com/0/60003/cb666ad3-24e9-dd62-7942-edd41f62a7a4.png)
という感じにヘルプパッチが用意されてないことが多いです。名前からじゃどう使うのかわからんものもたくさんあるので実地に使ってみるのがいちばんです。特にEX9.Texture Filter系ノードのポストエフェクトは手軽かつ大胆に描画の印象を変えてくれるし非常に便利なのでがんがん使っていこうぜ。

###使い方

EX9.Texture系はTextureを受け取って（[Needs:Texture]）処理したTextureを吐きます（[Supports:Texture]）。
Renderer（EX9)のEX9 OutアウトレットにDX9Texture(EX9.Texture)をつなぐと描画をTextureで吐けるのでそいつを利用し、処理した結果をFullscreenQuad(DX9)なんかのTextureインレットに接いで別のRendererに投げるとわかりやすいです。
![Capture_2014_11_27_23_40_37_482.png](https://qiita-image-store.s3.amazonaws.com/0/60003/67a48cd9-55da-5126-eae6-9b2dc672e312.png)


#Filterは重ね掛けできる

FilterはTextureを受けてTextureを吐きます。そのTextureをさらに別のFilterが受け取ってまた処理して吐く、ということもできるためでも重ね掛けできます。

![Capture_2014_11_28_21_53_23_586.png](https://qiita-image-store.s3.amazonaws.com/0/60003/4ea3deb7-f5e7-756f-dce0-08205ae0ba36.png)

上の画像は、左下のRendererがMedianだけをつなげたもの、右下がMedianに加えて更にStripesをつなげたものです。

![Capture_2014_11_28_22_34_46_289.png](https://qiita-image-store.s3.amazonaws.com/0/60003/27f6bc07-f6ff-20b5-75b6-0aee2d6d8887.png)

Invertノードを重ね掛けしてみました。これはカラースペースを指定して反転するノードらしいです。黒っぽいものは白っぽく、赤っぽいものは青っぽくなるっぽいです。それを二回かけているので元に戻ることになります。

#Filterには適用する順番がある

Transform系の回転（Rotate）と移動（Translate）に顕著ですが、ノードを適用する順番で処理が変わってきます。Filterにも同様に順番があります。
![Capture_2014_11_28_21_04_26_736.png](https://qiita-image-store.s3.amazonaws.com/0/60003/934f329b-ddf5-09bc-16be-9561298cbb56.png)

StripesとEdgeを順番を入れ替えて使ってみました。左下がStripesをかけたあとにEdgeをかけたもの、右下がEdgeをかけてからStripesをかけたものになります。よくよく見ると左下のやつはStripesで区切った縁にもEdgeの効果がかかっているのがわかります。
![Capture_2014_11_28_22_40_38_85.png](https://qiita-image-store.s3.amazonaws.com/0/60003/935b55a7-d69d-6846-d120-bee49c387514.png)

もちろん同じFilterも重ね掛けできます。パラメータが同じTunnelsをふたつつなげてみました。右下のRendererが二回Tunnelsを適用したものです。いつも使ってるFilterも重ね掛けすると思いがけない変化になるかもです。ならないかもです。

#ControlインレットのあるFilter

Piexelize、ShiftRGB、Frost、Distort、BlurなんかのFilterにはControlという名のインレットがついてます。これを使えば別のTextureを使ってエフェクトをかける部分を操作することが可能になります。

![Capture_2014_11_29_12_55_12_595.png](https://qiita-image-store.s3.amazonaws.com/0/60003/7dcb4181-6dee-af93-21a3-d856275ce0cb.png)

ControlにつなぐTextureは右上のRendererの描画にしてみました。縦長の白い
Quadのやつです。Quadの部分だけがFilterを通した描画に適用されています。左下にPixelizeノード、右下にShiftRGBノードを使ってます。
ControlにつなぐTextureの白い部分だけが適用されています。画像処理なんかでよく出てくるマスクみたいな感じだと思います。

![Capture_2014_11_29_13_17_38_645.png](https://qiita-image-store.s3.amazonaws.com/0/60003/178b2f88-bdca-80c7-82f6-48665065464b.png)

Pillowだとこんな感じ。白っぽい部分にだんだんと効果が適用されていってるのがわかります。Blurと合わせればミニチュア撮影風な雰囲気も出せそうです。


![Capture_2014_12_03_23_43_20_428.png](https://qiita-image-store.s3.amazonaws.com/0/60003/04fcad8f-1834-5f39-4ecd-2b0288d47793.png)

むろん上のイメージのようにControlに投げるのが [動画](http://www.nicovideo.jp/watch/sm8628149?ref=search_key_video) でも大丈夫です。

#がんがん使っていこうぜ

だいぶFilterを使いたくなってきたとおもいます。いいよね、Filter。だいたい45beta33.3で100個くらいあるうえ使い方がいまいちわからんものも多いんですが仲良くしていきましょう。
ここでわたしがよく使ってるテクニックを紹介します。

##On/Offの代わりにパラメータの数値を切り替える

すべてのFilterの一番右のEnabledインレットはOn/Offのスイッチです。パッチが大きくなったり描画が重すぎたりすると切り替えた瞬間にFilterはTextureを読み込み処理するので計算がおいつかなくて描画が止まることがあります。VJなど即時性連続性な表現が必要な場ではわりと冷や汗でしょう。やったことないのでわかりませんが。
そこで、Enabledではなくパラメータの数値をスイッチングする方法で切り替えます。未知のFilterをつなげてみたとき見た目では何も変化しないけれど適当にパラメータを上げ下げしたりすればなんとなく変化してやっとどんなエフェクトなのかわかることがよくありますが、パラメータによっては「効果がかかっているんだけど値が小さすぎて認識できない」が大方の原因です。なので見かけ上効果がかかっていないOffの状態にするには小さい値を与えてやれば疑似的にOffにできます。
![Capture_2014_11_29_13_47_40_346.png](https://qiita-image-store.s3.amazonaws.com/0/60003/d5bbd45d-add1-9390-f540-454dcae759e4.png)
効果はみえないけど内部的には処理しているぶんいちいち計算しなおしているEnabledのOn/Offよりはスイッチング時のラグが無いです。欠点としては常にエフェクトをかけていることになるためかなり負荷がかかることです。本末転倒。ですが描画が止まるのが気になる人はお試しあれ。

##同じTextureをControlインレットにつなげる

さきほど出たControl、べつに同じTextureをぶち込んでやってもいいわけです。ColorRampというFilterがわたし好みのいい感じに作用してくれるのでよく使ってます。

![](http://img.youtube.com/vi/uqBcgqV9gXA/0.jpg)

https://www.youtube.com/watch?v=uqBcgqV9gXA


ステキです。

##AsRaw(EX9.Texture)でglitchをかける

最後はFilterとは違いますがみんな大好きグリッチをかけてみます。迷ってるときや悩んでるときや疲れてるときはグリッチを見れば癒されますよね。ね。

![](http://img.youtube.com/vi/z8fanAXgLn8/0.jpg)

https://www.youtube.com/watch?v=z8fanAXgLn8


AsRawで読み込んで適当に値を変えてみるとこうなります。所謂WordPad Effectsというやつですね。ステキです。

#みんなvvvvって知ってるかい？って言えるようになろうぜ
今回は映像に特化したような紹介となりましたがまだまだコイツの可能性は未知数です。日本でユーザ少ないしいまのうちに触っておけば楽しいことになるかもしれない。わたしも今年の6月にいじりはじめてまだ多くの時間を充てていませんし。プログラムなんぞまったく書けませんし。でも頭の中に動かしたいイメージや作りたい映像がある。そんな方は是非この冬休みにでもこたつに入りながらやってみようぜ。