太郎Work

Unityとかで困ったこと等を残しておきます

ノイズエフェクト作ってみた

とある理由で思い立ったので勉強も兼ねてモニターノイズ風エフェクトを実装してみました

f:id:tarowork:20140428011714p:plain
https://googledrive.com/host/0BzRQHdfTLNehbVRHaF9DVElDYzA/NoiseWeb.html

手順
RenderTextureなのでPro必須

まずはユニティちゃんに登場してもらいます
f:id:tarowork:20140426231718p:plain

  • OnRenderImageでEdgeDetectを処理

Unityの用意しているEdgeDetectShaderに実装されているものから3D空間向けに
TriangleDepthNormals、画像系向けにTriangleLuminanceのfragmentシェーダをベースにして背景と線画の色を切り替えられるシェーダを実装

f:id:tarowork:20140426235633p:plain
この後更にエフェクトをかけるので黒に白線画で描画

  • Mathf.PerlinNoiseで生成した画像を用いて一部水平領域を除去

f:id:tarowork:20140427023158p:plain

  • Blurエフェクトをカスタマイズしたシェーダを実行する

f:id:tarowork:20140427023519p:plain
これにより横にこすった感じになる

  • 出来上がったピクセル移動量を定義したテクスチャを用いて元画像に適用

f:id:tarowork:20140427023745p:plain

  • 上部を横にスライドさせるシェーダ適用、ついでにUnityのノイズエフェクト

f:id:tarowork:20140428001424p:plain

特に調べたりせずにイメージでノイズっぽいものを作ってみましたが案外それっぽく見える?
何か動画を参考にしながら作ればもっといい感じになったかも

作ってて思ったけど線画抽出はあまり意味がなかった。
Texture全体に処理をかけているのでPostProcess負荷は結構あがってしまいました。モバイルでは無理かな?

作っている間にいろいろとシェーダの勉強ができたのでやってよかったと思う。
シェーダ面白い