一种简易的卡通渲染方法（上）

《Introduction to 3D Game Programming with DirectX 9.0》的2.5节介绍了一种简易的卡通渲染方法：


卡通渲染是一种特定类型的非写实渲染（non-photorealistic rendering），有时被称作风格化渲染（stylistic rendering）。

卡通渲染主要有两个特征：
1.明暗间过渡是不连贯，非平滑过渡。
2.轮廓边一般会被勾出。

要实现卡通着色，我们采用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种着色。

注意：我们还为卡通着色关闭了纹理过滤，因为这种过滤会试图使着色过渡变平滑。这对于我们要求的不连续过渡是多余的。


下面是HLSL相关代码

// 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;
}

两点注解：
1 我们假设世界矩阵没有执行任何缩放。因为如果它执行，它就会弄乱乘以它的顶点的长度和方向。
2 我们总是设置v纹理坐标为纹理的中点。这意味着我们仅使用纹理中一条单一的线，那就是说我们可以使用1D强度纹理来代替2D的那个纹理。不管怎样，1D和2D纹理都能工作。本例中，我们使用了2D纹理而不是1D纹理，这是没有什么特别的原因的。