デコシノニッキ

デコシノニッキ

ホロレンジャーの戦いの記録

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

前回
www.tattichan.work

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

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

円を描くシェーダ

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"
}

f:id:haikage1755:20180218131118p:plain:w250

円を描くノード

f:id:haikage1755:20180218131913p:plain:w350

Distanceノードで原点からの距離を求めます。
f:id:haikage1755:20180218131952p:plain:w150

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

f:id:haikage1755:20180218131808p:plain:w150

リングを描くシェーダ

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"
}

リングを描くノード

f:id:haikage1755:20180218140507p:plain:w350

2.2以下かつ2以上のノードです。ANDはMultiplyで作っています。
f:id:haikage1755:20180218140626p:plain:w150

elseはここからoneminusで反転すればokです。
f:id:haikage1755:20180218140829p:plain:w150

f:id:haikage1755:20180218140546p:plain:w150

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

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"
}

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

f:id:haikage1755:20180218153659p:plain:w350

距離を整数倍しています。数が大きいほど輪の数が多くなっていきます。
f:id:haikage1755:20180218153733p:plain:w150
この時点で既に波の部分はできています。
f:id:haikage1755:20180218153902p:plain:w150
Stepで条件分岐し、色の塗る範囲を決めます。
f:id:haikage1755:20180218154026p:plain:w150

f:id:haikage1755:20180218154119p:plain:w150

リングを動かすシェーダ

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"
}

f:id:haikage1755:20180218154657g:plain:w150

リングを動かすノード

f:id:haikage1755:20180218155045p:plain:w350

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

これで最初にお見せした表現の完成です。
f:id:haikage1755:20180218130517g:plain:w350

[デコシノニッキ]は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。」