独習ShaderGraph その12 波紋風にリングを動かす

前回
www.tattichan.work

ShaderGraphでカッコいいエフェクトを作ってみます
nn-hokuson.hatenablog.com

元の講座がステップバイステップなので、同じようにやっていきます。
最終的には次のようになります。

円を描くシェーダ

Shader "Custom/sample" {
	SubShader{
		Tags{ "RenderType" = "Opaque" }
		LOD 200

		CGPROGRAM
#pragma surface surf Standard 
#pragma target 3.0

		struct Input {
		//World座標を取得するために宣言
		float3 worldPos;
	};

	void surf(Input IN, inout SurfaceOutputStandard o) {
		//Worldの原点座標からの距離
		float dist = distance(fixed3(0,0,0), IN.worldPos);
		//半径
		float radius = 2;
		//半径以上なら紫に、そうでなければ白色にする
		if (radius < dist) {
			o.Albedo = fixed4(110 / 255.0, 87 / 255.0, 139 / 255.0, 1);
		}
		else {
			o.Albedo = fixed4(1,1,1,1);
		}
	}
	ENDCG
	}
		FallBack "Diffuse"
}

円を描くノード

Distanceノードで原点からの距離を求めます。

条件分岐にはStepを使っています。2以上であれば、1、そうでなければ0が返ってきます。
2以上(円の外)の部分に対しては紫色、2以下の部分はそのまま色を掛け合わせると0になってしまうのでOne Minusで反転して0を掛けています。
最後にそれぞれの色をAddで足し合わせます。

リングを描くシェーダ

Shader "Custom/sample" {
	SubShader{
		Tags{ "RenderType" = "Opaque" }
		LOD 200

		CGPROGRAM
#pragma surface surf Standard 
#pragma target 3.0

		struct Input {
		float3 worldPos;
	};

	void surf(Input IN, inout SurfaceOutputStandard o) {
		//原点からの距離
		float dist = distance(fixed3(0,0,0), IN.worldPos);
		//半径
		float radius = 2;
		//0.2: リングの幅
		if (radius < dist && dist < radius + 0.2) {
			o.Albedo = fixed4(1,1,1,1);
		}
		else {
			o.Albedo = fixed4(110 / 255.0, 87 / 255.0, 139 / 255.0, 1);
		}
	}
	ENDCG
	}
		FallBack "Diffuse"
}

リングを描くノード

2.2以下かつ2以上のノードです。ANDはMultiplyで作っています。

elseはここからoneminusで反転すればokです。

リングをいっぱい描くシェーダ

Shader "Custom/sample" {
	SubShader{
		Tags{ "RenderType" = "Opaque" }
		LOD 200

		CGPROGRAM
#pragma surface surf Standard 
#pragma target 3.0

		struct Input {
		float3 worldPos;
	};

	void surf(Input IN, inout SurfaceOutputStandard o) {
		//原点からの距離
		float dist = distance(fixed3(0,0,0), IN.worldPos);
		//sin波をつくる
		//absで反転して波を増やしている
		float val = abs(sin(dist*3.0));
		//sin波の山の閾値を超えた部分のみ白く塗る
		if (val > 0.98) {
			o.Albedo = fixed4(1, 1, 1, 1);
		}
		else {
			o.Albedo = fixed4(110 / 255.0, 87 / 255.0, 139 / 255.0, 1);
		}
	}
	ENDCG
	}
		FallBack "Diffuse"
}

リングをいっぱい描くノード

距離を整数倍しています。数が大きいほど輪の数が多くなっていきます。

この時点で既に波の部分はできています。

Stepで条件分岐し、色の塗る範囲を決めます。

リングを動かすシェーダ

Shader "Custom/sample" {
	SubShader{
		Tags{ "RenderType" = "Opaque" }
		LOD 200

		CGPROGRAM
#pragma surface surf Standard 
#pragma target 3.0

		struct Input {
		float3 worldPos;
	};

	void surf(Input IN, inout SurfaceOutputStandard o) {
		//原点からの距離
		float dist = distance(fixed3(0,0,0), IN.worldPos);
		//sin波をつくる
		//absで反転して波を増やしているものをTimeでずらす
		float val = abs(sin(dist*3.0 - _Time * 100));
		//sin波の山の閾値を超えた部分のみ白く塗る
		if (val > 0.98) {
			o.Albedo = fixed4(1, 1, 1, 1);
		}
		else {
			o.Albedo = fixed4(110 / 255.0, 87 / 255.0, 139 / 255.0, 1);
		}
	}
	ENDCG
	}
		FallBack "Diffuse"
}

リングを動かすノード

ベースは先の輪っかをいっぱい描くShaderです。変更点は、Time*100でずらしていくところです。引算はSubtractノードで計算できます。

これで最初にお見せした表現の完成です。