2.5 样例应用程序：卡通渲染（上）
阅读此文表明您已同意文末的声明
作为第二个顶点着色器的例子，让我们编写两个顶点着色器，它们以卡通风格绘画的方式对网格着色（shade）和画轮廓（outline）。图17.2展示了这一点：
图 2.2：（a）使用卡通着色法着色的对象（注意着色间的尖锐过渡）。（b）增强卡通效果，轮廓边（silhouette edge）被勾出。（c）使用标准散射光照着色的对象
注意：卡通渲染是一种特定类型的非写实渲染（non-photorealistic rendering），有时被称作风格化渲染（stylistic rendering）。
虽然卡通渲染不适用于所有游戏，例如激烈的第一人称射击游戏，但是它仍然可以增强一些希望表现卡通感觉类型游戏的气氛。此外，卡通渲染相当易于实现，并让我们得以漂亮的演示顶点着色器。
我们将卡通渲染分割为两步：
1. 卡通绘图典型的很少有在两种着色间强烈过渡的着色强度（luminance）级别；我们称此为卡通着色（cartoon shading）。在图2.2（a）中，我们看到只用了三种着色强度（亮、中、暗）对网格进行着色，而且其间的过渡是不连贯的——不像图2.2（c），其明暗过渡是平滑的。
2. 卡通绘图也典型的有其轮廓边被勾出，如图2.2（b）所示。
这两个步骤都需要其各自的顶点着色器。
2.5.1 卡通着色
要实现卡通着色，我们采用Lander在2000年3月发表在Game Developer Magazine的文章“Shades of Disney: Opaquing a 3D World”中所描述的方法。它像这样工作：我们创建一个带强度级别的灰度纹理，它包含我们需要的不同的着色强度。图2.3显示了我们在样例程序中使用的这个纹理。
图 2.3：用来保存着色强度的着色纹理。注意观察不连续的着色间过渡和纹理着色强度必须从左到右增加。
然后在顶点着色器中，我们执行标准散射点积运算（standard diffuse calculation dot product）来确定顶点法线N和光线向量L之间角度的余弦，用以确定顶点接收到多少光线：
s=L·N
如果s＜0，就表示光线向量和顶点法线之间的角度大于90度，也就表示该表面接收不到光线。因此，如果s＜0，我们就让s＝0。所以s ∈ [0, 1]。
现在，在通常的散射光照模型中，我们使用s来标记颜色向量，这样顶点颜色就根据接收到的光照的量变暗：
diffuseColor = s(r, g, b, a)
但是，这将会导致从亮到暗之间着色的平滑过渡。这是与我们期望的卡通着色相反的。我们想要一个（对卡通渲染在两至四种着色间工作良好的）在一些不同着色间的不连续的过渡。
反其道而行之，不使用s来标记颜色向量，我们准备使用s作为早先提到的强度纹理的u纹理坐标——如图2.3。
注意：标量（scalar）s必定是一个有效的纹理坐标，因为s ∈ [0, 1]，这是通常纹理坐标的区间。
按这种方式，顶点不会被平滑着色，而是不连续的。例如，强度纹理可能被分成3种着色，如图2.4所示：
图 2.4：那么，s ∈ [0, 0.33]的值使用shader0着色，s ∈ [ 0.33，0.66]的值使用shader1着色，s ∈ [0.66,1]的值使用shader2着色。当然，从这些着色的一种到另一种的过渡是不连续的，这就赋予了我们期望的效果。
注意：我们还为卡通着色关闭了纹理过滤，因为这种过滤会试图使着色过渡变平滑。这对于我们要求的不连续过渡是多余的。
2.5.2 卡通着色的顶点着色器代码
我们现在呈现卡通着色的顶点着色器。这个着色器的主要任务只是根据s=L·N计算并设置纹理坐标。注意观察输出结构，我们已经增加了一个数据成员来存储已被计算过的纹理坐标。同时还需注意，我们仍然输出顶点颜色，虽然我们不修改它，不过当颜色被与强度纹理组合起来的时候，它呈现为被着色的。
// File: toon.txt
// Desc: Vertex shader that lights geometry so it appears to be
// drawn in a cartoon style.
//
// Globals
//
extern matrix WorldViewMatrix;
extern matrix WorldViewProjMatrix;
extern vector Color;
extern vector LightDirection;
static vector Black = {0.0f, 0.0f, 0.0f, 0.0f};
//
// Structures
//
struct VS_INPUT
{
vector position : POSITION;
vector normal : NORMAL;
};
struct VS_OUTPUT
{
vector position : POSITION;
float2 uvCoords : TEXCOORD;
vector diffuse : COLOR;
};
//
// Main
//
VS_OUTPUT Main(VS_INPUT input)
{
// zero out each member in output
VS_OUTPUT output = (VS_OUTPUT)0;
// transform vertex position to homogenous clip space
output.position = mul(input.position, WorldViewProjMatrix);
//
// Transform lights and normals to view space. Set w
// components to zero since we're transforming vectors.
// Assume there are no scalings in the world
// matrix as well.
//
LightDirection.w = 0.0f;
input.normal.w = 0.0f;
LightDirection = mul(LightDirection, WorldViewMatrix);
input.normal = mul(input.normal, WorldViewMatrix);
//
// Compute the 1D texture coordinate for toon rendering.
//
float u = dot(LightDirection, input.normal);
//
// Clamp to zero if u is negative because u
// negative implies the angle between the light
// and normal is greater than 90 degrees. And
// if that is true then the surface receives
// no light.
//
if(u < 0.0f)
u = 0.0f;
//
// Set other tex coord to middle.
//
float v = 0.5f;
output.uvCoords.x = u;
output.uvCoords.y = v;
// save color
output.diffuse = Color;
return output;
}
两点注解：
n 我们假设世界矩阵没有执行任何缩放。因为如果它执行，它就会弄乱乘以它的顶点的长度和方向。
n 我们总是设置v纹理坐标为纹理的中点。这意味着我们仅使用纹理中一条单一的线，那就是说我们可以使用1D强度纹理来代替2D的那个纹理。不管怎样，1D和2D纹理都能工作。本例中，我们使用了2D纹理而不是1D纹理，这是没有什么特别的原因的。
[声明]：本文译自Frank Luna的《Introduction to 3D Game Programming with DirectX 9.0》，限于译者水平，文中难免错漏之处，欢迎各位网友批评指正；本文仅用于学习交流与参考用途，不得用于任何形式的商业用途；如需转载需事先征得作者本人和译者的同意，保持文章的完整性，并注明作者、译者和出处，作者保留对译文的所有权利。对于违反以上条款造成的后果，译者对此不负任何责任。我的MSN是Raymond_King123@hotmail.com，欢迎热爱3D图形和游戏，并有一定图形编程经验的朋友与我进行交流。
