【Unity-Shader】#10 ノイズ画像を使って絵をぶるぶるブレさせる

今回記事は、ノイズ画像を使って絵を歪ませてこんなかんじにぶるぶる横にブレるような動きを作ってみました。

▼今回の記事は前回の記事の続きっぽいかも。前回の記事はこちらです。

www.snoopopo.com

用意する画像

【歪ませたい画像】

【歪み情報として使うノイズ画像】

ノイズ画像自体もプログラムで作成することができますが、今回はその工程はすっ飛ばして既存の画像をつかいます。
このような画像のノイズのことを「パーリンノイズ（PerlinNoise）」または「GradientNoise」というらしい。

↓画像引用元、およびノイズ画像の作り方が書いてあるUnityのリファレンス。
Mathf-PerlinNoise - Unity スクリプトリファレンス

shader全文

Shader "Custom/NoiseDistortion"
{
    Properties
    {
        _MainTex("MainTexture", 2D) = "white" {}
        _NoiseTex("NoiseTexture", 2D) = "white" {}
    }

    SubShader
    {
        Cull Off

        Tags
        {
            "Queue" = "AlphaTest"
            "RenderType" = "AlphaTest"
        }

        Pass
        {
            CGPROGRAM

            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD;
            };

            struct v2f
            {
                float4 vertex : SV_POSITION;
                float2 uv : TEXCOORD;
            };

            sampler2D _MainTex;
            sampler2D _NoiseTex;

            float _Border;
            float4 _Color;

            v2f vert(appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                fixed2 noiseUv = fixed2(i.uv.x + cos(_Time.y * 0.5), i.uv.y);
                fixed4 noiseColor = tex2D(_NoiseTex, noiseUv) * 0.05;

                i.uv.x += noiseColor.r;
                fixed4 color = tex2D(_MainTex, i.uv);

                if (color.a <= 0) {
                    discard;
                }

                return color;
            }

            ENDCG
        }
    }
}

今回も、フラグメントシェーダのみです。

前回の記事で、画像を歪ませるにはUV座標をずらせばよいことがわかりました。 今回は横ブレさせたいので、UV座標のX座標に手を加えることになりますが、これにノイズ画像を使います。

ノイズ画像は白黒の画像なので、色の範囲は（0,0,0)～(1,1,1)になっています。 この０～１の値をUV座標に加算することでUV座標をずらしこのような処理を実現しています。

解説

ノイズ画像をスクロールさせる

まずはじめにノイズ画像をUVスクロールさせます。
なんでかというと、さきほどノイズ画像の色０～１を使うと書いたが、この値は動かさないと変動しないからです。

fixed4 frag(v2f i) : SV_Target
{
    fixed2 noiseUv = fixed2(i.uv.x + cos(_Time.y * 0.5), i.uv.y);
    fixed4 noiseColor = tex2D(_NoiseTex, noiseUv);

    return noiseColor;
}

cosを使って移動速度を滑らかにしていますが、時間経過で変わるなら _Time だけでもOK。

---

ノイズ画像の色をUV座標に使う

ノイズ画像をUVスクロールさせているので、noiseColorの色はノイズ画像の０～１の間の変動値となっています。
それを歪ませたい画像のUV座標に使います。

今回は横ゆれだけさせたいので、
UV座標のX座標の値にノイズ画像から取得した値noiseColorの値を入れています。
（noiseColor.r を加算しているけどgでもbでもいい。なぜなら白黒画像なのでrgbの値はすべて同じのはずだから）

fixed4 frag(v2f i) : SV_Target
{
    fixed2 noiseUv = fixed2(i.uv.x + cos(_Time.y * 0.5), i.uv.y);
    fixed4 noiseColor = tex2D(_NoiseTex, noiseUv) * 0.05;

    i.uv.x += noiseColor.r;
    fixed4 color = tex2D(_MainTex, i.uv);

    if (color.a <= 0) {
        discard;
    }

    return color;
}

先程のノイズ画像をスクロールしたコードと違ってnoiseColorに* 0.05かけているのは、
0～１の値を単純に加算するとブレ幅が大きいから微調整しただけです。

参考にさせて頂きました☆

qiita.com

【Unity-Shader】#09 UV座標を使って絵を歪ませる

docs.google.com

今回の記事は上記の「歪み」部分を参考にさせて頂きました。

簡単な図形を歪ませる

絵を歪ませる前に、_Time を使って時間経過で円を歪ませてみます。

fixed4 frag(v2f i) : SV_Target
{
    i.uv.x += sin(i.uv.y * _Time.y * 10) * 0.05;　//歪み
    return step(0.3, distance(0.5, i.uv)); //円
}

UV座標をずらすことで歪ませることができる！

絵を歪ませる

円で使った歪みの式をそのまま使います。

fixed4 frag(v2f i) : SV_Target
{
    i.uv.x += sin(i.uv.y * _Time.y * 10) * 0.05;

    if (i.uv.x < 0 || 1 < i.uv.x) {
        discard;
    }

    fixed4 color = tex2D(_MainTex, i.uv);

    if (color.a <= 0) {
        discard;
    }
                
    return color;
}

tex2Dに歪んだUV座標を渡すことでいいかんじになりました。

---

   if (i.uv.x < 0 || 1 < i.uv.x) {
        discard;
    }

コード内の上の部分ですが、歪ませて右にはみ出た（みきれた）部分が左側に表示されて不自然だったので、discardしています。

▲このコードがないとこんな風になっちゃってた

【Unity-Shader】#08 直線に沿って消えたり出てきたりさせる

上から消えたり下からでてきたり

fixed4 frag(v2f i) : SV_Target
{
    fixed4 color = tex2D(_MainTex, i.uv);
    color *= step(_Border, 1-i.uv.y);
    if (color.a <= 0) {
        discard;
    }
    return color;
}

前回▼の記事でやったstep を使い、 閾値(_Border という名前の変数となっている部分) を動的に変えることで、上から消えたり下からでてきたりするアニメが作れそうです。

www.snoopopo.com

---

ただこれだけだと少し物足りないので今回は直線を表示してそれに沿って消えたり出てきたりさせたいと思います。

直線に沿って表示したり消えたり…

fixed4 frag(v2f i) : SV_Target
{
    fixed4 color = tex2D(_MainTex, i.uv);
    color *= 1-(step(_Border, i.uv.y));

    fixed borderSize = 0.05;
    fixed4 borderLine = (step(_Border, i.uv.y + borderSize) * step(i.uv.y + borderSize, _Border + borderSize)) *_Color;

    borderLine.a = color.a;             
    color += borderLine;

    if (color.a <= 0) {
        discard;
    }

    return color;
}

【Unity-Shader】#07 直線を描く

今回は、線をフラグメントシェーダで描画します。「スキャンライン」というらしい。

線を描く

fixed4 frag(v2f i) : SV_Target
{
    return step(0.3, i.uv.y) * step(i.uv.y, 0.4);
}

step

step(閾値, x)

xが閾値以上なら1, 閾値未満なら0 を返す。

---

上記の例は、UV座標のY座標が0.3～0.4　の位置にあるときに１を返すので、１＝白が表示されている。

sin波を使って複数線を描く

fixed4 frag(v2f i) : SV_Target
{
    return sin(i.uv.y * 50);
}

複数線を書くために 0→１→０→１→０・・・ となる値が必要なので、今回はsin波を使います。

sin でウェーブさせた値をそのまま色として出力すると、上記のようになり、0(黒)→１(白)→０(黒)→１(白)→０(黒)・・・　を繰り返していることがわかる。

sinでだした値はゆるやかに０から１をいききした値になっている　0→0.1→0.2→…→0.9→0.8…→１
のでぼやけた線みたいな表示になっている。

ここでstepを使い、閾値を元に０か１だけの値にしてはっきりした直線にする。

fixed4 frag(v2f i) : SV_Target
{
    return step(0.3, sin(i.uv.y * 50));
}

線を動かす

fixed4 frag(v2f i) : SV_Target
{
    return step(0.3, sin((i.uv.y - _Time.y * 0.2) * 50));
}

_Timeを使ってUV座標のyを下に時間経過で移動させて線が動いているようにみせる。

画像と組み合わせたり…

白と黒の線が引けたところで、画像の表示と組み合わせてみるとちょっとゲームで使えそうになってきました。

fixed4 frag(v2f i) : SV_Target
{
    fixed4 color = tex2D(_MainTex, i.uv);
    if (color.a <= 0) {
        discard;
    }

    return (1 - step(0.8, sin((i.uv.y - _Time.y * 0.2) * 50))) * color;
}

画像の色と乗算しているため、 黒（０）は黒いまま、白（１）はｘ１となるので画像の色がそのまま表示されます。

---

fixed4 frag(v2f i) : SV_Target
{
    fixed4 color = tex2D(_MainTex, i.uv);
    color *= (1 - step(0.8, sin((i.uv.y - _Time.y * 0.2) * 50)));
    if (color.a <= 0) {
        discard;
    }

    return color;
}

黒い線の部分は破棄 discard しちゃうのもよさげだ…

【Unity-Shader】#06 テクスチャの色を徐々に変える

テクスチャの色を徐々に変える

▼ 前回の記事 www.snoopopo.com

全文

Shader "Custom/GrayScaleColor"
{
    Properties
    {
        _MainTex("Texture", 2D) = "white" {}
        _Volume("Volume", Range(0,1)) = 0
        _Color("Color", Color) = (1, 1, 1)
    }

    SubShader
    {
        Cull Off
        AlphaToMask On

        Tags
        {
            "Queue" = "AlphaTest"
            "RenderType" = "AlphaTest"
        }

        Pass
        {
            CGPROGRAM

            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD;
            };

            struct v2f
            {
                float4 vertex : SV_POSITION;
                float2 uv : TEXCOORD;
            };

            sampler2D _MainTex;
            float _Volume;
            float4 _Color;

            v2f vert(appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                fixed4 color = tex2D(_MainTex, i.uv);

                fixed gray = dot(color.rgb, fixed3(0.299, 0.587, 0.114));
                fixed4 targetColor = _Color * gray;

                fixed4 viewColor = lerp(color, targetColor, _Volume);
                return fixed4(viewColor.r, viewColor.g, viewColor.b, tex2D(_MainTex, i.uv).a);
            }

            ENDCG
        }
    }
}

一度グレースケール化させてから色を塗る

               fixed gray = dot(color.rgb, fixed3(0.299, 0.587, 0.114));
                fixed4 targetColor = _Color * gray;

上記のソースの通り、一度グレースケール化してから色を乗算しています。

www.snoopopo.com

こうすることによって、もともとの画像についている色味が消えてちょっとメタリック？なかんじになります。

（左）グレースケール化せずに乗算　（右）グレースケール化後、乗算

lerp

               fixed4 viewColor = lerp(color, targetColor, _Volume);
                return fixed4(viewColor.r, viewColor.g, viewColor.b, tex2D(_MainTex, i.uv).a);

徐々に色を変えるには線形補完が使える。

【Unity-Shader】#05 グレースケール化

今回はフラグメントシェーダを使って画像をグレースケール化します。

▼ 前回の記事

www.snoopopo.com

全文

Shader "Custom/GrayScale"
{
    Properties
    {
        _MainTex("Texture", 2D) = "white" {}
    }

    SubShader
    {
        Cull Off
        AlphaToMask On

        Tags
        {
            "Queue" = "AlphaTest"
            "RenderType" = "AlphaTest"
        }

        Pass
        {
            CGPROGRAM

            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD;
            };

            struct v2f
            {
                float4 vertex : SV_POSITION;
                float2 uv : TEXCOORD;
            };

            sampler2D _MainTex;

            v2f vert(appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                //ここにグレースケール化するコードを書く。
            }

            ENDCG
        }
    }
}

グレースケール化する方法

RGB それぞれに0.333をかけて足した値にする

単純平均法ってやつ。1を3（RGB）で割ったものを元の色に掛けることでグレースケール化できる。

           fixed4 frag(v2f i) : SV_Target
            {
                fixed4 color = tex2D(_MainTex, i.uv);

                color *= 0.333;
                fixed gray = color.r + color.g + color.b;

                return fixed4(gray, gray, gray, tex2D(_MainTex, i.uv).a);
            }

NTSC 加重平均法

fixed3(0.299, 0.587, 0.114) の数字、どっから出てきた？！　って感じだが、
これは人間の目に合わせてRGBの値をこの数字の割合でみるとちょうどグレースケール化される値として割り出されているものらしい。。。

           fixed4 frag(v2f i) : SV_Target
            {
                fixed4 color = tex2D(_MainTex, i.uv);

                fixed gray = dot(color.rgb, fixed3(0.299, 0.587, 0.114));

                return fixed4(gray, gray, gray, tex2D(_MainTex, i.uv).a);
            }

【Unity-Shader】#04 部分的に透明なテクスチャを表示する

前回までは不透明なテクスチャを使っていたので、今回からは部分的に透明なテクスチャを表示します。

▼ 前回の記事

www.snoopopo.com

全文

Shader "Custom/Transparent"
{
    Properties
    {
        _MainTex("Texture", 2D) = "white" {}
    }

    SubShader
    {
        Tags
        {
            "Queue" = "AlphaTest"
            "RenderType" = "AlphaTest"
        }

        Pass
        {
            CGPROGRAM

            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD;
            };

            struct v2f
            {
                float4 vertex : SV_POSITION;
                float2 uv : TEXCOORD;
            };

            sampler2D _MainTex;

            v2f vert(appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                fixed4 color = tex2D(_MainTex, i.uv);

                if (color.a <= 0) {
                    discard;    //画素を塗りつぶさない。ZBufferの更新も行わない
                }

                return color;
            }

            ENDCG
        }
    }
}

フラグメントシェーダー

           fixed4 frag(v2f i) : SV_Target
            {
                fixed4 color = tex2D(_MainTex, i.uv);

                if (color.a <= 0) {
                    discard;    //画素を塗りつぶさない。ZBufferの更新も行わない
                }

                return color;
            }

画像の中で透明な画素は当然、tex2Dで取得した色のアルファ値が0になっているはずなので、 0だったら、何もしないようにする。

discard

画素を塗りつぶさない。ZBufferの更新も行われないので、奥に重なったオブジェクトがある場合は、
そのオブジェクトの色がそのまま描画される。

clip

if文をかかずにclipを使うこともできる。

           fixed4 frag(v2f i) : SV_Target
            {
                fixed4 color = tex2D(_MainTex, i.uv);
                clip(color.a - 0.1);
                return color;
            }

引数の値が0未満の場合に discard と同じように塗りつぶしを行わない。