一、卡通风格的渲染（渐变纹理漫反射+分块的高光反射处理）
Shader "MilkShader/14/ToonShading"
{
Properties
{
_Color("Color Tint", Color) = (1,1,1,1)
_MainTex ("Main Tex", 2D) = "white"{}
_Ramp("Ramp Texture", 2D) = "white"{} //漫反射渐变纹理
_Outline("Outline", Range(0,1)) = 0.1 //轮廓线宽度
_OutlineColor("Outline Color", Color) = (1,1,1,1)
_Specular ("Specular", Color) = (1,1,1,1) //高光反射颜色
_SpecularScale ("Specular Scale", Range(0, 0.1)) = 0.01 //阈值
}
SubShader
{
Tags { "RenderType"="Opaque" "Queue"="Geometry"}
LOD 100
Pass
{
//第一个PASS是用法线进行向外扩展，然后只渲染背面，颜色输出是边缘颜色
NAME "OUTLINE"
Cull Front
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
float _Outline;
fixed4 _OutlineColor;
struct a2v {
float4 vertex : POSITION;
float3 normal : NORMAL;
};
struct v2f {
float4 pos : SV_POSITION;
};
v2f vert(a2v v){
v2f o;
//将顶点和法线转到视角空间下
float4 pos = mul(UNITY_MATRIX_MV, v.vertex);
float3 normal = mul((float3x3)UNITY_MATRIX_IT_MV, v.normal);
//设置法线的z分量，对其归一化后在将顶点沿其方向扩张
//设置法线z的处理是为了尽可能避免背面扩张（现在我们渲染的是背面）后的顶点挡住正面的面片.
normal.z = -0.5;
//在视角空间下进行的一个顶点位置偏移(向法线方向)
pos = pos + float4(normalize(normal), 0) * _Outline;
//再转为裁剪空间
o.pos = mul(UNITY_MATRIX_P, pos);
return o;
}
float4 frag(v2f i) : SV_Target{
//直接输出边缘颜色
return float4(_OutlineColor.rgb, 1);
}
ENDCG
}
Pass{
//前向渲染
Tags{"LightMode"="ForwardBase"}
Cull Back
CGPROGRAM
#include "UnityCG.cginc"
#include "Lighting.cginc"//漫反射、高光反射需要的
#include "AutoLight.cginc"//这是阴影三剑客需要的头文件
#include "UnityShaderVariables.cginc"
#pragma vertex vert
#pragma fragment frag
#pragma multi_compile_fwdbase
sampler2D _MainTex;
float4 _MainTex_ST;
fixed4 _Color;
sampler2D _Ramp;
fixed4 _Specular;
fixed _SpecularScale;
struct a2v {
float4 vertex : POSITION;
float3 normal : NORMAL;
float4 texcoord : TEXCOORD0;
//float4 tangent : TANGENT; 为啥例子会有tangent
};
struct v2f {
float4 pos : POSITION;
float2 uv : TEXCOORD0;
float3 worldNormal : TEXCOORD1;
float3 worldPos : TEXCOORD2;
SHADOW_COORDS(3)
};
v2f vert (a2v v) {
v2f o;
o.pos = UnityObjectToClipPos( v.vertex);
o.uv = TRANSFORM_TEX (v.texcoord, _MainTex);
o.worldNormal = UnityObjectToWorldNormal(v.normal);
o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
TRANSFER_SHADOW(o);
return o;
}
float4 frag(v2f i) :SV_Target{
fixed3 worldNormal = normalize(i.worldNormal);
fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));
fixed3 worldViewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));
fixed3 worldHalfDir = normalize(worldLightDir + worldViewDir);
fixed4 c = tex2D (_MainTex, i.uv);
fixed3 albedo = c.rgb * _Color.rgb;
fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;
UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);
fixed diff = dot(worldNormal, worldLightDir);
diff = (diff * 0.5 + 0.5) * atten; //先进行转为(0,1)范围，再乘以衰减值*阴影
//这里的漫反射是用渐变纹理方式，diff作为纹理坐标进行采样,通过这种方式采样出的漫反射颜色是卡通化的
fixed3 diffuse = _LightColor0.rgb * albedo * tex2D(_Ramp, float2(diff, diff)).rgb;
fixed spec = dot(worldNormal, worldHalfDir);
fixed w = fwidth(spec) * 2.0;//抗锯齿处理? 这种获取w阈值绝对值的方式很懵逼
//下面lerp(...)是比较复杂的，先假设_SpecularScale为0.5, spec是(0,1)的一个动态数值根据halfDir和normal而变化
// spec + _SpecularScale - 1 是将 spec从(0,1)转为(-(1-_SpecularScale), _SpecularScale),现在是(-0.5, 0.5)
// w实际上可以直接理解为是一个动态的阈值范围, 实际上可以直接看成固定的比如：[-0.3, 0.3]
// 此时当spec + _SpecularScale - 1 小于 -0.3(-w)时就会返回0， 在-w,w之间时就会返回0~1, 大于w时会返回1
// 这样这个高光反射系数就不会产生突变而是渐变效果
// 书上直接说_SpecularScale是一个阈值，而我的理解是如上，不然太难理解了..
// 这样我们得到的高光反射颜色是一个个块状的，而不是之前那样子的 之前是pow(dot(normal, half), x)
// 这种lerp(...) 处理 如果觉得难以理解的话 简单的做法是 直接 step(阈值, dot(...)) 当点积大于阈值时会返回1，小于阈值时会返回0
// 但是这种做法就是导致了突变，高光部分会产生锯齿，可以想象假设 阈值时 0.5, 那么当 (0.5, 1)时直接返回1，(0,0.5)时候返回0
// 在0.49 时候还是0， 逐渐变为0.51时突变为1， 反过来也是一样，高光颜色会直接从0，突变为有色状态，锯齿就是由于突变导致的。
// 上面那个阈值0.5，可看成一个分界线， 当dot()在0.5(左边)时就会返回0，在0.5的右边时返回1
// 此时下面的做法就是 将这个分界线，变成了2个！ 即 -w 和 w, 虽然这2个值得获取很难理解，但是就可以直接理解为就是一个很小的常数
// 当dot() < -w 时，返回的是0， > w时候 返回的是1， 在(-w,w)中间时返回的是0~1的数值，所以效果就是渐变，解决了抗锯齿问题
fixed3 specular = _Specular.rgb * lerp(0,1, smoothstep(-w,w,spec + _SpecularScale - 1)) * step(0.0001, _SpecularScale);
return fixed4(ambient + diffuse + specular, 1.0);
}
ENDCG
}
}
Fallback "Diffuse"
}
二、素描风格的渲染
Shader "MilkShader/14/Hatching"
{
Properties
{
_Color ("Color Tint", Color) = (1,1,1,1) //控制颜色
_TileFactor ("Tile Factor", Float) = 1 //平铺系数(对纹理坐标的缩放系数<x,y都有影响>)
//描边使用的参数
_Outline("Outline", Range(0,1)) = 0.1
_OutlineColor("Outline Color", Color) = (1,1,1,1)
//六张素描纹理（逐渐增多横向线条的纹理）
_Hatch0 ("Hatch 0", 2D) = "white"{}
_Hatch1 ("Hatch 1", 2D) = "white"{}
_Hatch2 ("Hatch 2", 2D) = "white"{}
_Hatch3 ("Hatch 3", 2D) = "white"{}
_Hatch4 ("Hatch 4", 2D) = "white"{}
_Hatch5 ("Hatch 5", 2D) = "white"{}
}
SubShader
{
Tags { "RenderType"="Opaque" "Queue"="Geometry"}
UsePass "MilkShader/14/ToonShading/OUTLINE"//使用了之前的描边PASS
Pass
{
Tags{ "LightMode" = "ForwardBase"}
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
// make fog work
#pragma multi_compile_fwdbase
#include "UnityCG.cginc"
#include "Lighting.cginc"
#include "AutoLight.cginc"
#include "UnityShaderVariables.cginc"
fixed4 _Color;
fixed _TileFactor;
fixed _Outline;
fixed4 _OutlineColor;
sampler2D _Hatch0;
sampler2D _Hatch1;
sampler2D _Hatch2;
sampler2D _Hatch3;
sampler2D _Hatch4;
sampler2D _Hatch5;
struct appdata
{
float4 vertex : POSITION;
float4 tangent : TANGENT;
float2 texcoord : TEXCOORD0;
float3 normal : NORMAL;
};
struct v2f
{
float4 pos : SV_POSITION;
float2 uv : TEXCOORD0;
fixed3 hatchWeight0 : TEXCOORD1;
fixed3 hatchWeight1 : TEXCOORD2;
float3 worldPos : TEXCOORD3;
SHADOW_COORDS(4)
};
v2f vert (appdata v)
{
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
o.uv = v.texcoord.xy * _TileFactor;
fixed3 worldNormal = normalize(UnityObjectToWorldNormal(v.normal));
fixed3 worldLightDir = normalize(WorldSpaceLightDir(v.vertex));
//法线和光源的点积
fixed diff = max(0, dot(worldNormal, worldLightDir));
//将diff转到[0,7]范围
float hatchFactor = diff * 7.0;
o.hatchWeight0 = fixed3(0,0,0);
o.hatchWeight1 = fixed3(0,0,0);
//分别判断每一个区间[0,1] [1,2] [2,3] [3,4] [4,5] [5,6] [6,7]再计算对应区间的素描纹理权重值
//这个是固定的算法，记住是这样写就好了，如果想研究的话可以参考冯乐乐的第十四章
//实际上就是不同的区间时会对其中1个或2个素描纹理权重进行赋值，以此在片元着色器进行使用它们来进行与相应素描颜色进行相乘
//也就是决定在什么情况下，哪几个素描纹理产生多少影响
// hatchWeight0.x 是 第一个素描纹理的权重, 以此类推 hatchWeight1.z 是最后一个素描纹理的权重
// 初始化全为0是表示素描纹理完全没有任何作用
if(hatchFactor > 6.0){
}else if(hatchFactor > 5.0){
o.hatchWeight0.x = hatchFactor - 5.0;
}else if(hatchFactor > 4.0){
o.hatchWeight0.x = hatchFactor - 4.0;
o.hatchWeight0.y = 1 - o.hatchWeight0.x;
}else if(hatchFactor > 3.0){
o.hatchWeight0.y = hatchFactor - 3.0;
o.hatchWeight0.z = 1 - o.hatchWeight0.y;
}else if(hatchFactor > 2.0){
o.hatchWeight0.z = hatchFactor - 2.0;
o.hatchWeight1.x = 1 - o.hatchWeight0.z;
}else if(hatchFactor > 1.0){
o.hatchWeight1.x = hatchFactor - 1.0;
o.hatchWeight1.y = 1 - o.hatchWeight1.x;
}else{
o.hatchWeight1.y = hatchFactor;
o.hatchWeight1.z = 1 - o.hatchWeight1.y;
}
o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
TRANSFER_SHADOW(o);
return o;
}
fixed4 frag (v2f i) : SV_Target
{
//从不同的素描纹理采样后乘以相应的素描纹理权重值（在顶点着色器我们就已经对它们进行了一个赋值）
fixed4 hatchTex0 = tex2D(_Hatch0, i.uv) * i.hatchWeight0.x;
fixed4 hatchTex1 = tex2D(_Hatch1, i.uv) * i.hatchWeight0.y;
fixed4 hatchTex2 = tex2D(_Hatch2, i.uv) * i.hatchWeight0.z;
fixed4 hatchTex3 = tex2D(_Hatch3, i.uv) * i.hatchWeight1.x;
fixed4 hatchTex4 = tex2D(_Hatch4, i.uv) * i.hatchWeight1.y;
fixed4 hatchTex5 = tex2D(_Hatch5, i.uv) * i.hatchWeight1.z;
//非素描部分的颜色是白色（如果素描的纹理权重总和越大，非素描部分越黑，否则越白）
fixed4 whiteColor = fixed4(1,1,1,1) * (1 - i.hatchWeight0.x - i.hatchWeight0.y - i.hatchWeight0.z - i.hatchWeight1.x
- i.hatchWeight1.y - i.hatchWeight1.z);
fixed4 hatchColor = hatchTex0 + hatchTex1 + hatchTex2 + hatchTex3 + hatchTex4 + hatchTex5 + whiteColor;
UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);
return fixed4(hatchColor.rgb * _Color.rgb * atten, 1.0);
}
ENDCG
}
}
Fallback "Diffuse"
}
平铺系数越大素描的线越密集，否则反之。
中秋节快乐！
1386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
