水中の屈折(shader)

2018.12.08
Unity
shader

1. テクスチャの取得
- 1.1. シェーダ
- 1.2. 実行結果
2. 歪みシェーダ
- 2.1. 実行結果
3. 深度差シェーダ
- 3.1. シェーダ
- 3.2. 実行結果
4. 屈折シェーダ
- 4.1. シェーダ
- 4.2. 実行結果
5. 解決方法
6. 参考サイト

テクスチャの取得

　描画されている画面をテクスチャで取得し、そのテクスチャを歪ませたのちに水面へ描画することで水中の屈折を表現します。そのためにシェーダ内で画面をテクスチャにしたものを取得する必要があります。以下のコードをサブシェーダ内に追加するだけでテクスチャを取得できます。

GrabPass{ "_GrabTex" }

1	GrabPass{ "_GrabTex" }

次に、このテクスチャを表示するための座標を以下のコードにより取得します。

o.grabPos = ComputeGrabScreenPos(o.vertex);

1	o.grabPos = ComputeGrabScreenPos(o.vertex);

あとは、取得したテクスチャと座標を用いてフラグメントシェーダ内に以下のコードを追加すると平面に画面をそのまま表示することができます。

fixed4 col = tex2D(_GrabTex, i.grabPos.xy / i.grabPos.w);
return col;

1 2	fixed4 col = tex2D(_GrabTex, i.grabPos.xy / i.grabPos.w); return col;

シェーダ

　描画されている画面をオブジェクトへ描画するシェーダです。Shiftを調整することでテクスチャをずらすことができます。

Shader "Unlit/GrabTest"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
		_Shift  ("Shift", range (0,2)) = 0.1
		_Color ("Color", Color) = (1, 1, 1, 1) 
	}
	SubShader
	{
		Tags { "RenderType"="Transparent" "Queue"="Transparent"}

		GrabPass{ "_GrabTex" }

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

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

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

			sampler2D _MainTex;
			float4 _MainTex_ST;
			sampler2D _GrabTex;
			float4 _GrabTex_ST;
			float4 _Color;
			float _Shift;
			
			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				o.grabPos = ComputeGrabScreenPos(o.vertex);
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				fixed4 col = tex2D(_GrabTex, i.grabPos.xy / i.grabPos.w * _Shift);
				col *= _Color;
				return col;
			}
			ENDCG
		}
	}
}

Shader "Unlit/GrabTest"

{

Properties

{

_MainTex ("Texture", 2D) = "white" {}

_Shift ("Shift", range (0,2)) = 0.1

_Color ("Color", Color) = (1, 1, 1, 1)

}

SubShader

{

Tags { "RenderType"="Transparent" "Queue"="Transparent"}

GrabPass{ "_GrabTex" }

Pass

{

CGPROGRAM

#pragma vertex vert

#pragma fragment frag

#include "UnityCG.cginc"

struct appdata

{

float4 vertex : POSITION;

float2 uv : TEXCOORD0;

};

struct v2f

{

float2 uv : TEXCOORD0;

float4 vertex : SV_POSITION;

float4 grabPos : TEXCOORD1;

};

sampler2D _MainTex;

float4 _MainTex_ST;

sampler2D _GrabTex;

float4 _GrabTex_ST;

float4 _Color;

float _Shift;

v2f vert (appdata v)

{

v2f o;

o.vertex = UnityObjectToClipPos(v.vertex);

o.uv = TRANSFORM_TEX(v.uv, _MainTex);

o.grabPos = ComputeGrabScreenPos(o.vertex);

return o;

}

fixed4 frag (v2f i) : SV_Target

{

fixed4 col = tex2D(_GrabTex, i.grabPos.xy / i.grabPos.w * _Shift);

col *= _Color;

return col;

}

ENDCG

}

実行結果

　青くなっている場所が上記シェーダを適用した平面です。描画された画面がそのまま表示されているため、平面が半透明な色をしているように見えます。

テクスチャをずらすと以下の画像のようになります。平面が半透明ではなく、描画された画面をそのまま表示していることがわかります。

歪みシェーダ

　ノーマルマップをもとに先ほど得られたテクスチャを歪ませます。フラグメントシェーダを以下のように書き換えます。

fixed4 frag (v2f i) : SV_Target
{
	float3 bump = UnpackNormal(tex2D(_BumpTex, i.uv));
	float4 grabUV = i.grabPos;
	grabUV.xy = (i.grabPos.xy * _Shift + (bump.xy * _Distortion)) / i.grabPos.w;

	fixed4 col = tex2D(_GrabTex, grabUV.xy);
	col *= _Color;
	return col;
}

fixed4 frag (v2f i) : SV_Target

{

float3 bump = UnpackNormal(tex2D(_BumpTex, i.uv));

float4 grabUV = i.grabPos;

grabUV.xy = (i.grabPos.xy * _Shift + (bump.xy * _Distortion)) / i.grabPos.w;

fixed4 col = tex2D(_GrabTex, grabUV.xy);

col *= _Color;

return col;

}

実行結果

　ノーマルマップによって、テクスチャを歪ませることができました。しかし、オブジェクトが水面から出ている部分まで歪みます。そのため、オブジェクトの後ろからはみ出る部分が生じてしまいます。

深度差シェーダ

　GrabPassによって取得したテクスチャにおいて、オブジェクトが水面より上に出ている部分を歪ませないように処理する必要があります。そのために、カメラの深度テクスチャと平面の深度の差とり、その結果から水面より下か上かを判定します。カメラの深度テクスチャはシェーダ内で_CameraDepthTextureを宣言することで取得できます。

sampler2D _CameraDepthTexture;

1	sampler2D _CameraDepthTexture;

次に平面の深度を取得します。バーテックスシェーダ内で

o.scrPos = ComputeScreenPos (o.vertex);

1	o.scrPos = ComputeScreenPos (o.vertex);

上記コードより得られた座標をフラグメントシェーダー内で

float surfDepth = UNITY_Z_0_FAR_FROM_CLIPSPACE(i.scrPos.z);

1	float surfDepth = UNITY_Z_0_FAR_FROM_CLIPSPACE(i.scrPos.z);

と処理することで、平面の深度を取得しています。

シェーダ

　平面とその他オブジェクトの深度差を表示するシェーダです。ノーマルマップによってカメラの深度テクスチャを歪ませています。

Shader "Unlit/Depth"
{
	Properties
	{
		_BumpTex ("BumpTexture", 2D) = "white" {}
		_Distortion ("Distortion", Range(-0.5, 0.5)) = 0
		_Shift  ("Shift", range (0,2)) = 0.1
	}
	SubShader
	{
		Tags { "RenderType"="Opaque" }

		GrabPass{ "_GrabTex" }

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

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

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

			sampler2D _BumpTex;
			float4 _BumpTex_ST;
			sampler2D _CameraDepthTexture;
			float4 _CameraDepthTexture_ST;
			float _Distortion;
			float _Shift;
			
			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _BumpTex);
				o.scrPos = ComputeScreenPos (o.vertex);
				//COMPUTE_EYEDEPTH(o.scrPos.z);
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				float3 bump = UnpackNormal(tex2D(_BumpTex, i.uv));
				float4 depthUV = i.scrPos;
				depthUV.xy = i.scrPos.xy * _Shift + bump.xy * _Distortion;

				float depth = LinearEyeDepth(SAMPLE_DEPTH_TEXTURE_PROJ(_CameraDepthTexture, UNITY_PROJ_COORD(depthUV)));
 				float surfDepth = UNITY_Z_0_FAR_FROM_CLIPSPACE(i.scrPos.z);
				float depthDiff = saturate (depth - surfDepth);

				fixed4 col = float4(depthDiff, depthDiff, depthDiff, 1);
				return col;
			}
			ENDCG
		}
	}
}

Shader "Unlit/Depth"

{

Properties

{

_BumpTex ("BumpTexture", 2D) = "white" {}

_Distortion ("Distortion", Range(-0.5, 0.5)) = 0

_Shift ("Shift", range (0,2)) = 0.1

}

SubShader

{

Tags { "RenderType"="Opaque" }

GrabPass{ "_GrabTex" }

Pass

{

CGPROGRAM

#pragma vertex vert

#pragma fragment frag

#include "UnityCG.cginc"

struct appdata

{

float4 vertex : POSITION;

float2 uv : TEXCOORD0;

};

struct v2f

{

float2 uv : TEXCOORD0;

float4 vertex : SV_POSITION;

float4 scrPos : TEXCOORD1;

};

sampler2D _BumpTex;

float4 _BumpTex_ST;

sampler2D _CameraDepthTexture;

float4 _CameraDepthTexture_ST;

float _Distortion;

float _Shift;

v2f vert (appdata v)

{

v2f o;

o.vertex = UnityObjectToClipPos(v.vertex);

o.uv = TRANSFORM_TEX(v.uv, _BumpTex);

o.scrPos = ComputeScreenPos (o.vertex);

//COMPUTE_EYEDEPTH(o.scrPos.z);

return o;

}

fixed4 frag (v2f i) : SV_Target

{

float3 bump = UnpackNormal(tex2D(_BumpTex, i.uv));

float4 depthUV = i.scrPos;

depthUV.xy = i.scrPos.xy * _Shift + bump.xy * _Distortion;

float depth = LinearEyeDepth(SAMPLE_DEPTH_TEXTURE_PROJ(_CameraDepthTexture, UNITY_PROJ_COORD(depthUV)));

float surfDepth = UNITY_Z_0_FAR_FROM_CLIPSPACE(i.scrPos.z);

float depthDiff = saturate (depth - surfDepth);

fixed4 col = float4(depthDiff, depthDiff, depthDiff, 1);

return col;

}

ENDCG

}

実行結果

　上記シェーダの実行結果は以下の通りです。

あまり変化がないように見えますが、テクスチャをずらしてみると

となります。これより、オブジェクトが水面より出ている部分が黒くなっていることがわかります。また、ノーマルマップによって歪ませると

深度差が歪んだ状態で求まっていることがわかります。

屈折シェーダ

　深度差を用いて水中部分のみ歪ませるようなシェーダを作成します。深度差が0となっている場所では、ノーマルマップによってuv座標を変えないように処理をすれば良いので

float2 uvoffset = bump.xy * _Distortion;
float2 grabUV;
grabUV = (i.grabPos.xy + uvoffset * depthDiff) / i.grabPos.w;

float2 uvoffset = bump.xy * _Distortion;

float2 grabUV;

grabUV = (i.grabPos.xy + uvoffset * depthDiff) / i.grabPos.w;

とすれば、水面に出ている部分は歪まなくなります。

シェーダ

　歪みシェーダに深度差を求める処理と上記コードを追加しました。

Shader "Unlit/Refraction"
{
	Properties
	{
		_Color ("Color", Color) = (1, 1, 1, 1)
		_BumpTex ("BumpTexture", 2D) = "white" {}
		_Distortion ("Distortion", Range(-0.3, 0.3)) = 0
	}
	SubShader
	{
		Tags { "RenderType"="Transparent" "Queue"="Transparent"}

		GrabPass{ "_GrabTex" }

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

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

			struct v2f
			{
				float2 uv : TEXCOORD0;
				float4 vertex : SV_POSITION;
				float4 grabPos : TEXCOORD1;
				float4 scrPos : TEXCOORD2;
			};
			sampler2D _BumpTex;
			float4 _BumpTex_ST;

			sampler2D _GrabTex;
			float4 _GrabTex_ST;
			float4 _GrabTex_TexelSize;

			sampler2D _CameraDepthTexture;
			float2 _CameraDepthTexture_ST;
			float4 _CameraDepthTexture_TexelSize;

			float4 _Color;
			float _Distortion;

			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _BumpTex);
				o.grabPos = ComputeGrabScreenPos(o.vertex);
				o.scrPos = ComputeScreenPos(o.vertex);
				return o;
			}

			fixed4 frag (v2f i) : SV_Target
			{
				float3 bump = UnpackNormal(tex2D(_BumpTex, i.uv));
				float4 depthUV = i.grabPos;
				depthUV.xy = i.grabPos.xy + (bump.xy * _Distortion);
				
				float surfDepth = UNITY_Z_0_FAR_FROM_CLIPSPACE(i.scrPos.z);
				float refFix = LinearEyeDepth(UNITY_SAMPLE_DEPTH(tex2Dproj(_CameraDepthTexture, UNITY_PROJ_COORD(depthUV))));
				float depthDiff = saturate(refFix - surfDepth);

				float2 uvoffset = bump.xy * _Distortion;
				float2 grabUV;
				grabUV = (i.grabPos.xy + uvoffset * depthDiff) / i.grabPos.w;

				float4 col = tex2D(_GrabTex, grabUV) * _Color;
				return col;
			}
			ENDCG
		}
	}
}

Shader "Unlit/Refraction"

{

Properties

{

_Color ("Color", Color) = (1, 1, 1, 1)

_BumpTex ("BumpTexture", 2D) = "white" {}

_Distortion ("Distortion", Range(-0.3, 0.3)) = 0

}

SubShader

{

Tags { "RenderType"="Transparent" "Queue"="Transparent"}

GrabPass{ "_GrabTex" }

Pass

{

//ZTest Always

CGPROGRAM

#pragma vertex vert

#pragma fragment frag

#include "UnityCG.cginc"

struct appdata

{

float4 vertex : POSITION;

float2 uv : TEXCOORD0;

};

struct v2f

{

float2 uv : TEXCOORD0;

float4 vertex : SV_POSITION;

float4 grabPos : TEXCOORD1;

float4 scrPos : TEXCOORD2;

};

sampler2D _BumpTex;

float4 _BumpTex_ST;

sampler2D _GrabTex;

float4 _GrabTex_ST;

float4 _GrabTex_TexelSize;

sampler2D _CameraDepthTexture;

float2 _CameraDepthTexture_ST;

float4 _CameraDepthTexture_TexelSize;

float4 _Color;

float _Distortion;

v2f vert (appdata v)

{

v2f o;

o.vertex = UnityObjectToClipPos(v.vertex);

o.uv = TRANSFORM_TEX(v.uv, _BumpTex);

o.grabPos = ComputeGrabScreenPos(o.vertex);

o.scrPos = ComputeScreenPos(o.vertex);

return o;

}

fixed4 frag (v2f i) : SV_Target

{

float3 bump = UnpackNormal(tex2D(_BumpTex, i.uv));

float4 depthUV = i.grabPos;

depthUV.xy = i.grabPos.xy + (bump.xy * _Distortion);

float surfDepth = UNITY_Z_0_FAR_FROM_CLIPSPACE(i.scrPos.z);

float refFix = LinearEyeDepth(UNITY_SAMPLE_DEPTH(tex2Dproj(_CameraDepthTexture, UNITY_PROJ_COORD(depthUV))));

float depthDiff = saturate(refFix - surfDepth);

float2 uvoffset = bump.xy * _Distortion;

float2 grabUV;

grabUV = (i.grabPos.xy + uvoffset * depthDiff) / i.grabPos.w;

float4 col = tex2D(_GrabTex, grabUV) * _Color;

return col;

}

ENDCG

}

実行結果

　歪みシェーダではみ出していた部分が消えていることがわかります。

しかし、拡大してみると

このように、オブジェクトの周りに何やら発生しています。

解決方法

原因

　GrabPassによって得られるテクスチャは色が補間されていますが、深度テクスチャは補間されません。そのため、GrabPassによって得られたテクスチャが補間されたことによって、深度テクスチャよりも大きくなる部分ができます。その結果、補間によってはみ出した場所がそのまま出力され、上記のような結果となっているようです。ためしに、歪みシェーダの結果に深度差を乗算した結果を出力したところ

このような結果が得られました。これにより、色の補間によってはみ出でてしまっていることがわかります。

解決方法

　GrabPassによって得られるテクスチャの色の補間をなくす処理(ポイントフィルタ)を追加します。下記に示すAlignWithGrabTexelという関数を作成し、その関数でuv座標を処理することでフィルタリングを行います。

float2 AlignWithGrabTexel (float2 uv)
{
	return (floor(uv * _CameraDepthTexture_TexelSize.zw) + 0.5) * abs(_CameraDepthTexture_TexelSize.xy);
}
.....
grabUV = AlignWithGrabTexel((i.grabPos.xy + uvoffset * depthDiff) / i.grabPos.w);

float2 AlignWithGrabTexel (float2 uv)

{

return (floor(uv * _CameraDepthTexture_TexelSize.zw) + 0.5) * abs(_CameraDepthTexture_TexelSize.xy);

}

.....

grabUV = AlignWithGrabTexel((i.grabPos.xy + uvoffset * depthDiff) / i.grabPos.w);

シェーダ

　ポイントフィルターによる処理を追加したシェーダです。

Shader "Unlit/Refraction"
{
	Properties
	{
		_Color ("Color", Color) = (1, 1, 1, 1)
		_BumpTex ("BumpTexture", 2D) = "white" {}
		_Distortion ("Distortion", Range(-0.3, 0.3)) = 0
	}
	SubShader
	{
		Tags { "RenderType"="Transparent" "Queue"="Transparent"}

		GrabPass{ "_GrabTex" }

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

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

			struct v2f
			{
				float2 uv : TEXCOORD0;
				float4 vertex : SV_POSITION;
				float4 grabPos : TEXCOORD1;
				float4 scrPos : TEXCOORD2;
			};
			sampler2D _BumpTex;
			float4 _BumpTex_ST;

			sampler2D _GrabTex;
			float4 _GrabTex_ST;
			float4 _GrabTex_TexelSize;

			sampler2D _CameraDepthTexture;
			float2 _CameraDepthTexture_ST;
			float4 _CameraDepthTexture_TexelSize;

			float4 _Color;
			float _Distortion;

			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _BumpTex);
				o.grabPos = ComputeGrabScreenPos(o.vertex);
				o.scrPos = ComputeScreenPos(o.vertex);
				return o;
			}

			float2 AlignWithGrabTexel (float2 uv)
			{
				return (floor(uv * _CameraDepthTexture_TexelSize.zw) + 0.5) * abs(_CameraDepthTexture_TexelSize.xy);
			}

			fixed4 frag (v2f i) : SV_Target
			{
				float3 bump = UnpackNormal(tex2D(_BumpTex, i.uv));
				float4 depthUV = i.grabPos;
				depthUV.xy = i.grabPos.xy + (bump.xy * _Distortion);
				
				float surfDepth = UNITY_Z_0_FAR_FROM_CLIPSPACE(i.scrPos.z);
				float refFix = LinearEyeDepth(UNITY_SAMPLE_DEPTH(tex2Dproj(_CameraDepthTexture, UNITY_PROJ_COORD(depthUV))));
				float depthDiff = saturate(refFix - surfDepth);

				float2 uvoffset = bump.xy * _Distortion;
				float2 grabUV;
				grabUV = AlignWithGrabTexel((i.grabPos.xy + uvoffset * depthDiff) / i.grabPos.w);

				float4 col = tex2D(_GrabTex, grabUV) * _Color;
				//col = tex2D(_GrabTex, grabUV) * depthDiff * _Color;
				return col;
			}
			ENDCG
		}
	}
}

Shader "Unlit/Refraction"

{

Properties

{

_Color ("Color", Color) = (1, 1, 1, 1)

_BumpTex ("BumpTexture", 2D) = "white" {}

_Distortion ("Distortion", Range(-0.3, 0.3)) = 0

}

SubShader

{

Tags { "RenderType"="Transparent" "Queue"="Transparent"}

GrabPass{ "_GrabTex" }

Pass

{

CGPROGRAM

#pragma vertex vert

#pragma fragment frag

#include "UnityCG.cginc"

struct appdata

{

float4 vertex : POSITION;

float2 uv : TEXCOORD0;

};

struct v2f

{

float2 uv : TEXCOORD0;

float4 vertex : SV_POSITION;

float4 grabPos : TEXCOORD1;

float4 scrPos : TEXCOORD2;

};

sampler2D _BumpTex;

float4 _BumpTex_ST;

sampler2D _GrabTex;

float4 _GrabTex_ST;

float4 _GrabTex_TexelSize;

sampler2D _CameraDepthTexture;

float2 _CameraDepthTexture_ST;

float4 _CameraDepthTexture_TexelSize;

float4 _Color;

float _Distortion;

v2f vert (appdata v)

{

v2f o;

o.vertex = UnityObjectToClipPos(v.vertex);

o.uv = TRANSFORM_TEX(v.uv, _BumpTex);

o.grabPos = ComputeGrabScreenPos(o.vertex);

o.scrPos = ComputeScreenPos(o.vertex);

return o;

}

float2 AlignWithGrabTexel (float2 uv)

{

return (floor(uv * _CameraDepthTexture_TexelSize.zw) + 0.5) * abs(_CameraDepthTexture_TexelSize.xy);

}

fixed4 frag (v2f i) : SV_Target

{

float3 bump = UnpackNormal(tex2D(_BumpTex, i.uv));

float4 depthUV = i.grabPos;

depthUV.xy = i.grabPos.xy + (bump.xy * _Distortion);

float surfDepth = UNITY_Z_0_FAR_FROM_CLIPSPACE(i.scrPos.z);

float refFix = LinearEyeDepth(UNITY_SAMPLE_DEPTH(tex2Dproj(_CameraDepthTexture, UNITY_PROJ_COORD(depthUV))));

float depthDiff = saturate(refFix - surfDepth);

float2 uvoffset = bump.xy * _Distortion;

float2 grabUV;

grabUV = AlignWithGrabTexel((i.grabPos.xy + uvoffset * depthDiff) / i.grabPos.w);

float4 col = tex2D(_GrabTex, grabUV) * _Color;

//col = tex2D(_GrabTex, grabUV) * depthDiff * _Color;

return col;

}

ENDCG

}

実行結果

　オブジェクトの周りに発生していたドットを消すことができました。

参考サイト

Catlike Coding：Looking Through Water

前の記事

グリッドシェーダ 2018.11.18
次の記事

シェーダでテクスチャフィルタリング 2018.12.15

水中の屈折(shader)

テクスチャの取得

シェーダ

実行結果

歪みシェーダ

実行結果

深度差シェーダ

シェーダ

実行結果

屈折シェーダ

シェーダ

実行結果

解決方法

原因

解決方法

シェーダ

実行結果

参考サイト

グリッドシェーダ 2018.11.18

シェーダでテクスチャフィルタリング 2018.12.15