Toon Shaders Remaking in ASE or SF for learning

[Fenixake]

Hello!~ I want to remake some toon shaders from some games and assets using ASE or SF and I do not know much about shaders and it might be a good way to learn how to via the Visual Shader editors.

If there is someone who knows how to make the shaders and explain how is done, feal free to share the knowledge with me and the forum ofc :3 .

Here are some examples of some nice shaders from SAO-FB and UnityChan's free asset .

http://www.rpgfan.com/pics/Sword_Art_Online_Fatal_Bullet/ss-029.jpg

https://steemit-production-imageproxy-thumbnail.s3.amazonaws.com/DQmXbZF4Kg8u9avTzkgXJJWwJCnZr3nV1hKMPLfAVWdxipK_1680x8400

http://i.imgur.com/ERIrQRs.png

http://wordpress.notargs.com/blog/wp-content/uploads/2015/09/%E7%84%A1%E9%A1%8C1.png

[Fenixake]

No one?

[FlounderBox]

https://www.youtube.com/watch?v=yhGjCzxJV3E

This is a great talk about the subject. Their approach is allot more involved of course, but their actual cel shading implementation seems pretty straightforward.

[Fenixake]

Indeed, this is something that I did watch myself too but I am looking for a simpler shader like in the image I posted since GGXrd shaders and light system are custom made and alot to advance for me to understand as a beginner. But is a good start in understanding some stuff .

[FlounderBox]

If you spent some time trying to better understand the GDC talk I posted, you'd find this slide.

https://files.facepunch.com/forum/upload/107155/26a6066e-2e3a-4a26-842c-c7dc9379f6a8/dank2.png

You lucked out today, because my own game happened to need a very simple cel shading solution. There's plenty of room for improvement here, so do what you will with it.

https://files.facepunch.com/forum/upload/107155/b8e3c487-6c4c-4d5a-8f70-b0c892ab264c/dank.png

[Fenixake]

I did look into it and is a nice effect to have but I need better shadows too for this tipe of shading. This is how mine looks :

https://i.imgur.com/2qr4lRE.png

https://i.imgur.com/lmxu14x.png

[Fenixake]

Soo I have this code :

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'

// Upgrade NOTE: replaced '_Object2World' with 'unity_ObjectToWorld'

// Character skin shader
// Includes falloff shadow

#define ENABLE_CAST_SHADOWS

// Material parameters
float4 _Color;
float4 _ShadowColor;
float4 _LightColor0;
float4 _MainTex_ST;

// Textures
sampler2D _MainTex;
sampler2D _FalloffSampler;
sampler2D _RimLightSampler;

// Constants
#define FALLOFF_POWER 1.0

#ifdef ENABLE_CAST_SHADOWS

// Structure from vertex shader to fragment shader
struct v2f
{
float4 pos    : SV_POSITION;
LIGHTING_COORDS( 0, 1 )
float3 normal : TEXCOORD2;
float2 uv     : TEXCOORD3;
float3 eyeDir : TEXCOORD4;
float3 lightDir : TEXCOORD5;
};

#else

// Structure from vertex shader to fragment shader
struct v2f
{
float4 pos    : SV_POSITION;
float3 normal : TEXCOORD0;
float2 uv     : TEXCOORD1;
float3 eyeDir : TEXCOORD2;
float3 lightDir : TEXCOORD3;
};

#endif

// Float types
#define float_t  half
#define float2_t half2
#define float3_t half3
#define float4_t half4

// Vertex shader
v2f vert( appdata_base v )
{
v2f o;
o.pos = UnityObjectToClipPos( v.vertex );
o.uv = TRANSFORM_TEX( v.texcoord.xy, _MainTex );
o.normal = normalize( mul( unity_ObjectToWorld, float4_t( v.normal, 0 ) ).xyz );

// Eye direction vector
float4_t worldPos =  mul( unity_ObjectToWorld, v.vertex );
o.eyeDir = normalize( _WorldSpaceCameraPos - worldPos );

o.lightDir = WorldSpaceLightDir( v.vertex );

#ifdef ENABLE_CAST_SHADOWS
TRANSFER_VERTEX_TO_FRAGMENT( o );
#endif

return o;
}

// Fragment shader
float4 frag( v2f i ) : COLOR
{
float4_t diffSamplerColor = tex2D( _MainTex, i.uv );

// Falloff. Convert the angle between the normal and the camera direction into a lookup for the gradient
float_t normalDotEye = dot( i.normal, i.eyeDir );
float_t falloffU = clamp( 1 - abs( normalDotEye ), 0.02, 0.98 );
float4_t falloffSamplerColor = FALLOFF_POWER * tex2D( _FalloffSampler, float2( falloffU, 0.25f ) );
float3_t combinedColor = lerp( diffSamplerColor.rgb, falloffSamplerColor.rgb * diffSamplerColor.rgb, falloffSamplerColor.a );

// Rimlight
float_t rimlightDot = saturate( 0.5 * ( dot( i.normal, i.lightDir ) + 1.0 ) );
falloffU = saturate( rimlightDot * falloffU );
//falloffU = saturate( ( rimlightDot * falloffU - 0.5 ) * 32.0 );
falloffU = tex2D( _RimLightSampler, float2( falloffU, 0.25f ) ).r;
float3_t lightColor = diffSamplerColor.rgb * 0.5; // * 2.0;
combinedColor += falloffU * lightColor;

#ifdef ENABLE_CAST_SHADOWS
// Cast shadows
float3_t shadowColor = _ShadowColor.rgb * combinedColor;
float_t attenuation = saturate( 2.0 * LIGHT_ATTENUATION( i ) - 1.0 );
combinedColor = lerp( shadowColor, combinedColor, attenuation );
#endif

return float4_t( combinedColor, diffSamplerColor.a ) * _Color * _LightColor0;
}

How can I make this into SF or ASE? for ex the " float_t falloffU = clamp( 1 - abs( normalDotEye ), 0.02, 0.98 ); I cannot understand how is made or what it does "

[Fenixake]

Yeah 3 days doing nothing but trying and trying This is the result! ;) GJ ME! \m/

https://i.imgur.com/V6liIqj.png

https://i.imgur.com/tp6G9OJ.png