Cg 编程/Unity/卡通着色
本教程介绍了卡通着色（也称为卡通渲染）作为非真实感渲染技术的示例。
它是关于光照的几个教程之一，它超越了 Phong 反射模型。但是，它基于像素级光照，使用 Phong 反射模型，如 “平滑镜面高光”部分 中所述。如果您还没有阅读该教程，请先阅读它。
非真实感渲染是计算机图形学中一个非常宽泛的术语，它涵盖所有渲染技术和视觉风格，这些技术和风格明显且有意地不同于对物理物体的照片的外观。示例包括阴影线、轮廓、线性透视的扭曲、粗略抖动、粗略颜色量化等。
卡通着色（或卡通渲染）是非真实感渲染技术的任何子集，用于实现三维模型的卡通或手绘外观。
皮克斯的 John Lasseter 曾经在一次采访中说过：“艺术挑战技术，技术激励艺术。” 许多传统上用于描绘三维物体的视觉风格和绘制技术实际上很难在着色器中实现。但是，从根本上说没有理由不去尝试。
在为任何特定视觉风格实现一个或多个着色器时，应首先确定该风格的哪些特征必须实现。这主要是对视觉风格示例进行精确分析的任务。如果没有这样的例子，通常很难确定风格的特征。即使是掌握某种风格的艺术家也往往无法恰当地描述这些特征；例如，因为他们不再意识到某些特征，或者可能认为某些特征是不必要的缺陷，不值得一提。
对于每个特征，应确定是否以及如何准确地实现它们。一些特征相当容易实现，另一些特征对于程序员来说非常难以实现，或者对于 GPU 来说非常难以计算。因此，在 John Lasseter 上述引言的精神下，着色器程序员和（技术）艺术家之间的讨论通常非常有意义，以决定要包含哪些特征以及如何准确地再现它们。
与 “平滑镜面高光”部分 中实现的 Phong 反射模型相比，本节图片中的镜面高光只是纯白色，没有任何其他颜色的添加。此外，它们具有非常清晰的边界。
我们可以通过计算 Phong 着色模型的镜面反射项，并在镜面反射项大于某个阈值（例如，最大强度的二分之一）时，将片段颜色设置为镜面反射颜色乘以（未衰减的）光源颜色来实现这种风格化镜面高光。
但是，如果不应该有任何高光怎么办？通常，用户会为此情况指定黑色镜面反射颜色；但是，使用我们的方法会导致黑色高光。解决此问题的一种方法是考虑镜面反射颜色的不透明度，并通过基于镜面颜色的不透明度进行合成，将高光颜色“混合”到其他颜色上。作为 逐片段操作 的 Alpha 混合在 “透明度”部分 中进行了描述。但是，如果在片段着色器中知道所有颜色，也可以在片段着色器中计算它们。
在下面的代码片段中，假设 fragmentColor 已经分配了一个颜色，例如，基于漫射照明。然后根据镜面颜色的不透明度 _SpecColor.a，将镜面颜色 _SpecColor 乘以光源颜色 _LightColor0 混合到 fragmentColor 上。
if (dot(normalDirection, lightDirection) > 0.0
// light source on the right side?
&& attenuation * pow(max(0.0, dot(
reflect(-lightDirection, normalDirection),
viewDirection)), _Shininess) > 0.5)
// more than half highlight intensity?
{
fragmentColor = _SpecColor.a
* _LightColor0.rgb * _SpecColor.rgb
+ (1.0 - _SpecColor.a) * fragmentColor;
}
这足够了吗？如果您仔细观察左侧公牛的眼睛，您会看到两对镜面高光，即存在多个导致镜面高光的灯光。在大多数教程中，我们通过第二个带有叠加混合的渲染通道来考虑额外的光源。但是，如果镜面高光的颜色不应添加到其他颜色，则不应使用叠加混合。相反，使用（通常）不透明颜色进行 Alpha 混合以获得镜面高光，以及使用透明片段以获得其他片段将是一个可行的解决方案。（有关 Alpha 混合的描述，请参阅 “透明度”部分。）
左侧公牛图片中的漫射照明只包含两种颜色：浅棕色用于照亮的皮毛，深棕色用于未照亮的皮毛。公牛其他部位的颜色与照明无关。
实现此方法的一种方法是，当 Phong 反射模型的漫射反射项达到某个阈值（例如，大于 0）时，使用完整的漫射反射颜色，否则使用第二种颜色。对于公牛的皮毛，这两种颜色将不同；对于其他部位，它们将相同，因此在照亮区域和未照亮区域之间没有视觉差异。对于阈值 _DiffuseThreshold 来切换从较暗的颜色 _UnlitColor 到较亮的颜色 _Color（乘以光源颜色 _LightColor0）的实现可能如下所示
float3 fragmentColor = _UnlitColor.rgb;
if (attenuation
* max(0.0, dot(normalDirection, lightDirection))
>= _DiffuseThreshold)
{
fragmentColor = _LightColor0.rgb * _Color.rgb;
}
这就是关于左侧图片中风格化漫射照明的全部吗？仔细观察就会发现，深棕色和浅棕色之间有一条浅色、不规则的线条。实际上，情况甚至更加复杂，深棕色有时不会覆盖由上面描述的技术覆盖的所有区域，有时它覆盖的范围更大，甚至超出了黑色轮廓。这为视觉风格增添了丰富的细节，营造出手绘的外观。另一方面，在着色器中令人信服地再现这一点非常困难。
许多卡通着色器的特征之一是在模型的轮廓线（通常为黑色，但也可能是其他颜色，例如上面的牛）上使用特定颜色的轮廓线。
在着色器中实现这种效果有多种技术。Unity 3.3 附带了标准资源中的一个卡通着色器，该着色器通过渲染放大模型的背面（通过沿表面法向量方向移动顶点位置来放大）来渲染这些轮廓线，然后在其上渲染正面。在这里，我们使用另一种基于 “轮廓增强”部分 的技术：如果确定片段足够靠近轮廓线，则将其设置为轮廓线的颜色。这仅适用于光滑表面，并且会生成不同厚度的轮廓线（这取决于视觉风格是优点还是缺点）。但是，至少轮廓线的整体厚度应该可以通过着色器属性进行控制。
我们完成了吗？如果你仔细观察驴子，你会发现它肚子和耳朵的轮廓比其他轮廓明显更厚。这传达了未照亮区域；然而，厚度的变化是连续的。模拟这种效果的一种方法是让用户指定两种整体轮廓厚度：一种用于完全照亮区域，另一种用于未照亮区域（根据 Phong 反射模型的漫反射项）。在这两种极端情况之间，厚度参数可以插值（同样根据漫反射项）。然而，这使得轮廓依赖于特定光源；因此，以下着色器仅对第一个光源渲染轮廓和漫反射照明，该光源通常应该是最重要的一个。所有其他光源只渲染镜面高光。
以下实现必须在 _UnlitOutlineThickness（如果漫反射项的点积小于或等于 0）和 _LitOutlineThickness（如果点积为 1）之间插值。对于从值 a 到另一个值 b 的线性插值，参数 x 在 0 到 1 之间，Cg 提供了内置函数 lerp(a, b, x)。然后使用插值后的值作为阈值来确定点是否足够接近轮廓。如果是，则将片段颜色设置为轮廓颜色 _OutlineColor
if (dot(viewDirection, normalDirection)
< lerp(_UnlitOutlineThickness, _LitOutlineThickness,
max(0.0, dot(normalDirection, lightDirection))))
{
fragmentColor = _LightColor0.rgb * _OutlineColor.rgb;
}
现在应该很清楚，即使上面的几张图片也对忠实实现提出了非常困难的挑战。因此，以下着色器只实现了上面描述的一些特征，而忽略了许多其他特征。请注意，不同的颜色贡献（漫反射照明、轮廓、高光）根据哪些应该遮挡哪些而被赋予不同的优先级。你也可以将这些优先级视为彼此叠加的不同层。
Shader "Cg shader for toon shading" {
Properties {
_Color ("Diffuse Color", Color) = (1,1,1,1)
_UnlitColor ("Unlit Diffuse Color", Color) = (0.5,0.5,0.5,1)
_DiffuseThreshold ("Threshold for Diffuse Colors", Range(0,1))
= 0.1
_OutlineColor ("Outline Color", Color) = (0,0,0,1)
_LitOutlineThickness ("Lit Outline Thickness", Range(0,1)) = 0.1
_UnlitOutlineThickness ("Unlit Outline Thickness", Range(0,1))
= 0.4
_SpecColor ("Specular Color", Color) = (1,1,1,1)
_Shininess ("Shininess", Float) = 10
}
SubShader {
Pass {
Tags { "LightMode" = "ForwardBase" }
// pass for ambient light and first light source
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
uniform float4 _LightColor0;
// color of light source (from "Lighting.cginc")
// User-specified properties
uniform float4 _Color;
uniform float4 _UnlitColor;
uniform float _DiffuseThreshold;
uniform float4 _OutlineColor;
uniform float _LitOutlineThickness;
uniform float _UnlitOutlineThickness;
uniform float4 _SpecColor;
uniform float _Shininess;
struct vertexInput {
float4 vertex : POSITION;
float3 normal : NORMAL;
};
struct vertexOutput {
float4 pos : SV_POSITION;
float4 posWorld : TEXCOORD0;
float3 normalDir : TEXCOORD1;
};
vertexOutput vert(vertexInput input)
{
vertexOutput output;
float4x4 modelMatrix = unity_ObjectToWorld;
float4x4 modelMatrixInverse = unity_WorldToObject;
output.posWorld = mul(modelMatrix, input.vertex);
output.normalDir = normalize(
mul(float4(input.normal, 0.0), modelMatrixInverse).xyz);
output.pos = mul(UNITY_MATRIX_MVP, input.vertex);
return output;
}
float4 frag(vertexOutput input) : COLOR
{
float3 normalDirection = normalize(input.normalDir);
float3 viewDirection = normalize(
_WorldSpaceCameraPos - input.posWorld.xyz);
float3 lightDirection;
float attenuation;
if (0.0 == _WorldSpaceLightPos0.w) // directional light?
{
attenuation = 1.0; // no attenuation
lightDirection = normalize(_WorldSpaceLightPos0.xyz);
}
else // point or spot light
{
float3 vertexToLightSource =
_WorldSpaceLightPos0.xyz - input.posWorld.xyz;
float distance = length(vertexToLightSource);
attenuation = 1.0 / distance; // linear attenuation
lightDirection = normalize(vertexToLightSource);
}
// default: unlit
float3 fragmentColor = _UnlitColor.rgb;
// low priority: diffuse illumination
if (attenuation
* max(0.0, dot(normalDirection, lightDirection))
>= _DiffuseThreshold)
{
fragmentColor = _LightColor0.rgb * _Color.rgb;
}
// higher priority: outline
if (dot(viewDirection, normalDirection)
< lerp(_UnlitOutlineThickness, _LitOutlineThickness,
max(0.0, dot(normalDirection, lightDirection))))
{
fragmentColor = _LightColor0.rgb * _OutlineColor.rgb;
}
// highest priority: highlights
if (dot(normalDirection, lightDirection) > 0.0
// light source on the right side?
&& attenuation * pow(max(0.0, dot(
reflect(-lightDirection, normalDirection),
viewDirection)), _Shininess) > 0.5)
// more than half highlight intensity?
{
fragmentColor = _SpecColor.a
* _LightColor0.rgb * _SpecColor.rgb
+ (1.0 - _SpecColor.a) * fragmentColor;
}
return float4(fragmentColor, 1.0);
}
ENDCG
}
Pass {
Tags { "LightMode" = "ForwardAdd" }
// pass for additional light sources
Blend SrcAlpha OneMinusSrcAlpha
// blend specular highlights over framebuffer
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
uniform float4 _LightColor0;
// color of light source (from "Lighting.cginc")
// User-specified properties
uniform float4 _Color;
uniform float4 _UnlitColor;
uniform float _DiffuseThreshold;
uniform float4 _OutlineColor;
uniform float _LitOutlineThickness;
uniform float _UnlitOutlineThickness;
uniform float4 _SpecColor;
uniform float _Shininess;
struct vertexInput {
float4 vertex : POSITION;
float3 normal : NORMAL;
};
struct vertexOutput {
float4 pos : SV_POSITION;
float4 posWorld : TEXCOORD0;
float3 normalDir : TEXCOORD1;
};
vertexOutput vert(vertexInput input)
{
vertexOutput output;
float4x4 modelMatrix = unity_ObjectToWorld;
float4x4 modelMatrixInverse = unity_WorldToObject;
output.posWorld = mul(modelMatrix, input.vertex);
output.normalDir = normalize(
mul(float4(input.normal, 0.0), modelMatrixInverse).rgb);
output.pos = mul(UNITY_MATRIX_MVP, input.vertex);
return output;
}
float4 frag(vertexOutput input) : COLOR
{
float3 normalDirection = normalize(input.normalDir);
float3 viewDirection = normalize(
_WorldSpaceCameraPos - input.posWorld.rgb);
float3 lightDirection;
float attenuation;
if (0.0 == _WorldSpaceLightPos0.w) // directional light?
{
attenuation = 1.0; // no attenuation
lightDirection = normalize(_WorldSpaceLightPos0.xyz);
}
else // point or spot light
{
float3 vertexToLightSource =
_WorldSpaceLightPos0.xyz - input.posWorld.xyz;
float distance = length(vertexToLightSource);
attenuation = 1.0 / distance; // linear attenuation
lightDirection = normalize(vertexToLightSource);
}
float4 fragmentColor = float4(0.0, 0.0, 0.0, 0.0);
if (dot(normalDirection, lightDirection) > 0.0
// light source on the right side?
&& attenuation * pow(max(0.0, dot(
reflect(-lightDirection, normalDirection),
viewDirection)), _Shininess) > 0.5)
// more than half highlight intensity?
{
fragmentColor =
float4(_LightColor0.rgb, 1.0) * _SpecColor;
}
return fragmentColor;
}
ENDCG
}
}
Fallback "Specular"
}
这种着色器的一个问题是颜色之间的硬边，这通常会导致明显的走样，特别是在轮廓处。这可以通过使用 smoothstep 函数来提供更平滑的过渡来缓解。
恭喜，你已经完成了本教程。我们看到了
- 什么是卡通着色、漫画着色和非真实感渲染。
- 一些非真实感渲染技术如何在卡通着色中使用。
- 如何在着色器中实现这些技术。
如果你还想了解更多
- 关于 Phong 反射模型和逐像素照明，你应该阅读 “平滑镜面高光”部分。
- 关于轮廓的计算，你应该阅读 “轮廓增强”部分。
- 关于混合，你应该阅读 “透明度”部分。
- 关于非真实感渲染技术，你可以阅读 Randi Rost 等人于 2009 年由 Addison-Wesley 出版发行的《OpenGL 着色语言》（第 3 版）的第 18 章。