42
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

【Unity】テクスチャをシンプルに歪ませるshaderの作成方法

備忘録もかねて、shaderでテクスチャを歪ませる方法を2つまとめました。

方法は2つになります!

ビックリするくらいシンプルです笑

  • メインテクスチャをスクロールして歪ませる方法
  • ノイズテクスチャをスクロールして歪ませる方法

環境

Unity 2018.3.8

使用するテクスチャ

水面テクスチャ

CausticsTex.png

パーリンノイズ

perlinNoise.png

メインテクスチャをスクロールして歪ませる方法

完成図はこちら
distort1.gif

先にソースは添付します。

DistortMainScrollShader.shader
Shader "Custom/DistortMainScrollShader"
{
    Properties
    {

        _MainTex("Main", 2D) = "white" {}
        _NoiseTex("Noise", 2D) = "white" {}
        _Speed("Speed", Range(0, 1)) = 0.7
        _NoiseAmount("NoiseAmount", Range(0, 0.05)) = 0.025
        _Brightness("Brightness", Range(1, 10)) = 5
        _Color ("Color", Color) = (1, 1, 1, 1)
    }
    SubShader
    {
        Tags { "RenderType"="Opaque"}
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

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

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

            fixed4 _Color;
            float _Speed;
            sampler2D _MainTex;
            float4 _MainTex_ST;
            sampler2D _NoiseTex;
            float _NoiseAmount;
            float _Brightness;

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

            fixed4 frag (v2f i) : SV_Target
            {
                float4 uvNoise= 2 * tex2D(_NoiseTex, i.uv) - 1;//0 - 1座標を-1 - 1に変換
                //i.uv.x += uvNoise.x * _NoiseAmount;//u座標も歪ませることも可能
                i.uv.y += _Time.x * _Speed + uvNoise.y * _NoiseAmount;
                fixed4 col = tex2D(_MainTex,i.uv) * _Color *  _Brightness;;
                return col;
            }
            ENDCG
        }
    }
}

イメージとしては、メインテクスチャがUVスクロール、ノイズテクスチャが固定された仕組みになります。

フェッチしたノイズテクスチャの情報を基に、メインテクスチャが歪むので、メインテクスチャを歪ませながら動かしたときに役立ちます!

ノイズテクスチャをスクロールして歪ませる方法

一方で、こちらはノイズテクスチャをUVスクロール、そしてメインテクスチャを固定しています。

完成図はこちら
distort2.gif

ソースは以下の通りです。

DistortNoiseScrollShader.shader
Shader "Custom/DistortNoiseScrollShader"
{
    Properties
    {

        _MainTex("Main", 2D) = "white" {}
        _NoiseTex("Noise", 2D) = "white" {}
        _Speed("Speed", Range(0, 1)) = 0.7
        _NoiseAmount("NoiseAmount", Range(0, 0.05)) = 0.025
        _Brightness("Brightness", Range(1, 10)) = 5
        _Color ("Color", Color) = (1, 1, 1, 1)
    }
    SubShader
    {
        Tags { "RenderType"="Opaque"}
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

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

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

            fixed4 _Color;
            float _Speed;
            sampler2D _MainTex;
            float4 _MainTex_ST;
            sampler2D _NoiseTex;
            float _NoiseAmount;
            float _Brightness;

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

            fixed4 frag (v2f i) : SV_Target
            {
                float2 nUv = i.uv;
                nUv.y += _Time.x * _Speed;
                float4 uvNoise= 2 * tex2D(_NoiseTex, nUv) -1 ;//0 - 1座標を-1 - 1に変換
                i.uv += uvNoise.xy * _NoiseAmount;
                fixed4 col = tex2D(_MainTex,i.uv);
                return col * _Color * _Brightness;
            }
            ENDCG
        }
    }
}

こちらは固定されたUV座標にて、スクロールするノイズテクスチャをフェッチ。その情報で、メインテクスチャを歪ませています。

このやり方はノーマルマップを基に、テクスチャを歪ますなど、様々なテクニックに応用できます!

例えば、こんな感じのことができます(ノーマルマップでの歪み)

wave3.gif

最後に

いかがだったでしょうか。

ご覧になった方々のお役に立てたら嬉しいです!

一読して下さり、ありがとうございましたm(_ _)m

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
42
Help us understand the problem. What are the problem?