卡通风格的渲染
要实现卡通渲染的有很多方法，其中之一就是使用基于色调的着色技术。
渲染轮廓线
共有5种类型
添加高光
实现
（1）首先声明各个属性：
_Ramp是用于控制漫反射色调的渐变纹理，
_Outline用于控制轮廓线宽度，
_OutlineColor对应了轮廓线颜色，
_Specular是高光反射颜色，
_SpecularScale用于控制高光反射时使用的阈值
（2）定义渲染轮廓线需要的Pass，这个Pass只渲染背面的三角面片，使用Cull指令剔除正面的三角面片，为其Pass定义名称
（3）定义顶点着色器和片元着色器：
在顶点着色器中首先把顶点和法线变换到视角空间下，随后设置法线的z分量，对其归一化后再将顶点沿其方向扩张，得到扩张后的顶点坐标，对法线的处理是为了尽可能避免扩张后的顶点挡住正面的面片，最后把顶点从视角空间变换到裁剪空间
片元着色器则只需要渲染轮廓线的颜色
（4）定义光照模型所在的Pass，渲染模型的正面
将LightMode设置为ForwardBase，并且使用#Pragma语句设置了编译指令，使得Shader中的光照变量可以被正确赋值
（5）定义了顶点着色器：
计算世界空间下的法线方向和顶点位置，并使用Unity内置宏SHADOW_COORDS和TRANSFER_SHADOW来计算阴影所需的各个变量
（6）片元着色器中计算光照模型：
归一化光照模型的各个方向矢量，计算材质反射率albedo和环境光照ambient。使用内置的UNITY_LIGHT_ATTENUATION宏计算当前世界坐标下的阴影值。随后计算版兰伯特反射系数，并和阴影值相乘得到最终的漫反射系数。使用这个漫反射系数对渐变纹理_Ramp进行采样。并将结果和材质的反射率，光照颜色相乘，作为最后的漫反射光照，高光反射使用fwidth对高光部分进行抗锯齿处理，并将高光反射系数和高光反射颜色相乘得到高光反射的光照部分。值得注意的是，在最后使用了step(0.0001，_SpecularScale)，这是为了在_SpecularScale为0时，可以完全消除高光反射的光照。最后返回光照叠加结果。
（7）设置合适的Fallback
Shader "Custom/Toon Shading" {
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) = (0, 0, 0, 1)
_Specular ("Specular", Color) = (1, 1, 1, 1)
_SpecularScale ("Specular Scale", Range(0, 0.1)) = 0.01
}
SubShader {
Tags { "RenderType"="Opaque" "Queue"="Geometry"}
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);
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
#pragma vertex vert
#pragma fragment frag
#pragma multi_compile_fwdbase
#include "UnityCG.cginc"
#include "Lighting.cginc"
#include "AutoLight.cginc"
#include "UnityShaderVariables.cginc"
fixed4 _Color;
sampler2D _MainTex;
float4 _MainTex_ST;
sampler2D _Ramp;
fixed4 _Specular;
fixed _SpecularScale;
struct a2v {
float4 vertex : POSITION;
float3 normal : NORMAL;
float4 texcoord : TEXCOORD0;
float4 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;
fixed3 diffuse = _LightColor0.rgb * albedo * tex2D(_Ramp, float2(diff, diff)).rgb;
fixed spec = dot(worldNormal, worldHalfDir);
fixed w = fwidth(spec) * 2.0;
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"
}
素描风格的渲染
不考虑多级渐远纹理的生成，而是直接使用6张素描纹理进行渲染，在渲染阶段，首先在顶点着色阶段计算逐顶点的光照，根据光照结果来决定6张纹理的混合权重，并传递给片元着色器，然后在片元着色器中根据这些权重来混合6张纹理的采样结果。
（1）首先声明渲染所需的各个属性：
_Color是用于控制模型颜色的属性，
_TileFactor是纹理的平铺系数，_TileFactor越大，模型上的素描线条越密，
_Hatch0至_Hatch5对应了渲染时使用的6张素描纹理，它们的线条密度依次增大
（2）直接使用上一小节中用到的渲染轮廓的Pass来在物体周围渲染轮廓线
（3）定义光照模型所在的Pass，设置相关的编译指令
（4）由于需要在顶点着色器中计算6张纹理的混合权重，首先在v2f结构体中添加相应的变量，把6个混合权重放在两个fixed3类型的变量中，为了添加阴影效果，还声明了worldPos变量，并使用SHADOW_COORDS宏声明了阴影纹理的采样坐标
（5）定义了关键的顶点着色器：
首先对顶点进行了基本的坐标变换，然后使用_TileFactor得到了纹理采样坐便盆。在计算6张纹理的混合权重之前，首先需要计算逐顶点光照。因此，使用世界空间下的光照方向和法线方向得到漫反射系数diff。之后把权重初始化为0，并把diff缩放到[0,7]范围，得到hatchFactor。把[0,7]的区间均匀划分为7个子区间，通过判断hatchFactor所处的子区间来计算对应的纹理混合权重。最后计算了顶点的世界坐标，并使用TRANSFER_SHADOW宏来计算阴影纹理的采样坐标。
（6）接下来定义片元着色器部分：
当得到了6张纹理的混合权重后，对每张纹理进行采样并和它们对应的权重值相乘得到每张纹理的采样颜色。还计算了纯白在渲染中的贡献度。这是通过1-所有6张纹理的权重得到的，这是因为素描中往往有留白的部分，因此希望在最后的渲染中光照最亮的部分是纯白色的。最后混合了各个颜色值，并和阴影值atten，模型颜色_Color相乘后返回最终的渲染结果。
（7）设置合适的FallBack
Shader "Custom/Hatching" {
Properties {
_Color ("Color Tint", Color) = (1, 1, 1, 1)
_TileFactor ("Tile Factor", Float) = 1
_Outline ("Outline", Range(0, 1)) = 0.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 "Unity Shaders Book/Chapter 14/Toon Shading/OUTLINE"
Pass {
Tags { "LightMode"="ForwardBase" }
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma multi_compile_fwdbase
#include "UnityCG.cginc"
#include "Lighting.cginc"
#include "AutoLight.cginc"
#include "UnityShaderVariables.cginc"
fixed4 _Color;
float _TileFactor;
sampler2D _Hatch0;
sampler2D _Hatch1;
sampler2D _Hatch2;
sampler2D _Hatch3;
sampler2D _Hatch4;
sampler2D _Hatch5;
struct a2v {
float4 vertex : POSITION;
float4 tangent : TANGENT;
float3 normal : NORMAL;
float2 texcoord : TEXCOORD0;
};
struct v2f {
float4 pos : SV_POSITION;
float2 uv : TEXCOORD0;
fixed3 hatchWeights0 : TEXCOORD1;
fixed3 hatchWeights1 : TEXCOORD2;
float3 worldPos : TEXCOORD3;
SHADOW_COORDS(4)
};
v2f vert(a2v v) {
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
o.uv = v.texcoord.xy * _TileFactor;
fixed3 worldLightDir = normalize(WorldSpaceLightDir(v.vertex));
fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);
fixed diff = max(0, dot(worldLightDir, worldNormal));
o.hatchWeights0 = fixed3(0, 0, 0);
o.hatchWeights1 = fixed3(0, 0, 0);
float hatchFactor = diff * 7.0;
if (hatchFactor > 6.0) {
// Pure white, do nothing
} else if (hatchFactor > 5.0) {
o.hatchWeights0.x = hatchFactor - 5.0;
} else if (hatchFactor > 4.0) {
o.hatchWeights0.x = hatchFactor - 4.0;
o.hatchWeights0.y = 1.0 - o.hatchWeights0.x;
} else if (hatchFactor > 3.0) {
o.hatchWeights0.y = hatchFactor - 3.0;
o.hatchWeights0.z = 1.0 - o.hatchWeights0.y;
} else if (hatchFactor > 2.0) {
o.hatchWeights0.z = hatchFactor - 2.0;
o.hatchWeights1.x = 1.0 - o.hatchWeights0.z;
} else if (hatchFactor > 1.0) {
o.hatchWeights1.x = hatchFactor - 1.0;
o.hatchWeights1.y = 1.0 - o.hatchWeights1.x;
} else {
o.hatchWeights1.y = hatchFactor;
o.hatchWeights1.z = 1.0 - o.hatchWeights1.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.hatchWeights0.x;
fixed4 hatchTex1 = tex2D(_Hatch1, i.uv) * i.hatchWeights0.y;
fixed4 hatchTex2 = tex2D(_Hatch2, i.uv) * i.hatchWeights0.z;
fixed4 hatchTex3 = tex2D(_Hatch3, i.uv) * i.hatchWeights1.x;
fixed4 hatchTex4 = tex2D(_Hatch4, i.uv) * i.hatchWeights1.y;
fixed4 hatchTex5 = tex2D(_Hatch5, i.uv) * i.hatchWeights1.z;
fixed4 whiteColor = fixed4(1, 1, 1, 1) * (1 - i.hatchWeights0.x - i.hatchWeights0.y - i.hatchWeights0.z -
i.hatchWeights1.x - i.hatchWeights1.y - i.hatchWeights1.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"
}
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
