備忘録もかねて、shaderでテクスチャを歪ませる方法を２つまとめました。
方法は２つになります！
ビックリするくらいシンプルです笑
- メインテクスチャをスクロールして歪ませる方法
- ノイズテクスチャをスクロールして歪ませる方法
環境
Unity 2018.3.8
使用するテクスチャ
水面テクスチャ
パーリンノイズ
メインテクスチャをスクロールして歪ませる方法
完成図はこちら
先にソースは添付します。
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スクロール、そしてメインテクスチャを固定しています。
完成図はこちら
ソースは以下の通りです。
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座標にて、スクロールするノイズテクスチャをフェッチ。その情報で、メインテクスチャを歪ませています。
このやり方はノーマルマップを基に、テクスチャを歪ますなど、様々なテクニックに応用できます！
例えば、こんな感じのことができます(ノーマルマップでの歪み)
最後に
いかがだったでしょうか。
ご覧になった方々のお役に立てたら嬉しいです！
一読して下さり、ありがとうございましたm(_ _)m