着色器和效果——2.5 样例应用程序：卡通渲染

鼯鼠

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图形和游戏，并有一定图形编程经验的朋友与我进行交流。

鼯鼠

选择自 RaymondKing 的 Blog 关键字 Vertex Shader HLSL DirectX 出处 http://Introduction ;to 3D Game Programming with DirectX 9.0 2.5 样例应用程序：卡通渲染（下） 2.5.3 轮廓勾勒 要完成卡通效果，我们还需要勾勒（outline）轮廓边（silhouette edge）。这比卡通着色复杂一点。 2.5.3.1 边的表示法 我们将一个网格的一条边表示为一个四元组（从两个三角形构建）——参见图2.5。 图 2.5：表示边的四元组 我们选择四元组有两个原因：我们可以通过调整四元组的维容易的改变边的厚度，并且我们可以渲染退化的四元组来隐藏某些边，也即非轮廓边。在Direct3D中，我们从两个三角形来构建一个四元组。退化四元组（degenerate quad）是从两个退化三角形构建而来的四元组。退化三角形（degenerate triangle）是一个面积为零的三角形，或者换句话说，是一个三点位于一线上的三角形。如果我们传入一个退化三角形到渲染管线，则该三角形显示为空。这是很有用的，因为如果我们希望隐藏特定三角形，我们可以简单的退化它而不需要实际的从三角形列表（顶点缓冲）移除它。回想一下，我们只需要显示轮廓边——而不是网格的每一条边。 当我们首先创建一条边的时候，我们指定其四个顶点，并使其退化，这意味着边将会被隐藏（渲染时不显示）。 图 2.6：由两个三角形共用边描述的退化四元组 注意图2.6中的两个顶点v0和v1，我们设置其顶点法线向量为零向量。然后当我们将边的顶点送入顶点着色器的时候，顶点着色器将会检测顶点是否位于轮廓边上；如果是，则顶点着色器将按顶点法线的方向偏移顶点位置的标量。观察法线向量为零的顶点，它不会被偏移。 因此，我们最终以一个非退化四元组（non-degenerate quad）来表示轮廓边，如图2.7所示。 图 2.7：位于轮廓边上的顶点v2和v3被按照其各自的顶点法线n2和n3进行偏移。观察顶点v0和v1仍然保持在其固定位置，因为其顶点法线等于零向量，因此对于它们来说没有偏移发生。按这种方式，四元组成功的重新生成来表示轮廓边。 备注：如果我们没有设置顶点v0和v1的顶点法线为零向量，那么那些顶点就同样会被偏移。但是如果偏移描述轮廓边的所有四个顶点，那么我们仅是平移了该退化四元组。通过保持顶点v0和v1固定并仅仅偏移顶点v2和v3，我们重新生成了四元组。 2.5.3.2 轮廓边测试 若两个表面face0和face1以与视图方向相异的方向共享边所在表面，则该边为轮廓边。也就是说，如果一个表面是前面（front facing）而另一个表面是后面（back facing），那么这条边就是一条轮廓边。图2.8给出了一个轮廓边和一个非轮廓边的例子。 图 2.8：在（a）中，由v0 和v1定义的共享边的一个表面是前面，而共享边另一个表面是后面，因此该边是轮廓边。在（b）中，由v0 和v1定义的这两个共享边的表面都是正面，因此该边不是轮廓边。 接下来，为了检测一个顶点是否在轮廓边上，我们必须以每个顶点为基础了解face0 和 face1的法线向量。我们的边的顶点数据结构反映如下： struct VS_INPUT { vector position : POSITION; vector normal : NORMAL0; vector faceNormal1 : NORMAL1; vector faceNormal2 : NORMAL2; }; 前两个分量很直接，但让我们看看两个额外的法线向量，它们是faceNormal1和faceNormal2。这些向量描述了两个表面的表面法线，共享边的顶点位于这两个表面的共享边上，这两个表面是face0和face1。 实际检测顶点是否在共享边上的数学如下。假设我们在视图空间中，令v为一原点指向检测顶点的向量——图2.8，令n0为face0的表面法线且n1为face0的表面法线，若下面的不等式为真，则顶点位于轮廓边上： （1）（v·n0）（v·n1）＜0 若两点积符号相异，则不等式为真，使得不等式左边为负。回想一下点积的性质，两个点积的符号相异意味着一个表面是前面而另一个是后面。 现在，考虑一条边只有一个三角形共享它的情况，如图2.9，其法线将会被存储在faceNormal1中。 图 2.9：顶点v0和v1定义的边只有一个表面共享它 我们定义这种边总为轮廓边。要确保顶点着色器将这种边作为轮廓边处理，我们要让faceNormal2 = -faceNormal1。因此，反向的表面法线和不等式（1）为真，表示该边为一轮廓边。 2.5.3.3 边的生成 生成网格的边是微不足道的；我们简单的遍历网格的每个表面并为表面上每条边计算一个四元组（退化的，如图2.6所示）。 注意：每个表面有三条边，因为每个三角形有三条边。 对于每条边的迭代，我们也许要知道共享边的两个表面。表面之一是边所在的三角形。例如，如果要计算第1个表面的一条边，那么第1个表面共享该边。共享该边的另一个表面可以使用网格的邻接信息找到。 2.5.4 轮廓边顶点着色器代码 我们现在呈现渲染轮廓边的顶点着色器代码。这个着色器的主要任务就是确定传入的顶点是否在轮廓边上。如果是，顶点着色器就按顶点法线的方向偏移顶点一定量的数值。 // File: outline.txt // Desc: Vertex shader renders silhouette edges. // // Globals // extern matrix WorldViewMatrix; extern matrix ProjMatrix; static vector Black = {0.0f, 0.0f, 0.0f, 0.0f}; // // Structures // struct VS_INPUT { vector position : POSITION; vector normal : NORMAL0; vector faceNormal1 : NORMAL1; vector faceNormal2 : NORMAL2; }; struct VS_OUTPUT { vector position : POSITION; vector diffuse : COLOR; }; // // Main // VS_OUTPUT Main(VS_INPUT input) { // zero out each member in output VS_OUTPUT output = (VS_OUTPUT)0; // transform position to view space input.position = mul(input.position, WorldViewMatrix); // Compute a vector in the direction of the vertex // from the eye. Recall the eye is at the origin // in view space - eye is just camera position. vector eyeToVertex = input.position; // transform 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. input.normal.w = 0.0f; input.faceNormal1.w = 0.0f; input.faceNormal2.w = 0.0f; input.normal = mul(input.normal, WorldViewMatrix); input.faceNormal1 = mul(input.faceNormal1, WorldViewMatrix); input.faceNormal2 = mul(input.faceNormal2, WorldViewMatrix); // compute the cosine of the angles between // the eyeToVertex vector and the face normals. float dot0 = dot(eyeToVertex, input.faceNormal1); float dot1 = dot(eyeToVertex, input.faceNormal2); // if cosines are different signs (positive/negative) // then we are on a silhouette edge. Do the signs // differ? if( (dot0 * dot1) < 0.0f ) { // yes, then this vertex is on a silhouette edge, // offset the vertex position by some scalar in the // direction of the vertex normal. input.position += 0.1f * input.normal; } // transform to homogeneous clip space output.position = mul(input.position, ProjMatrix); // set outline color output.diffuse = Black; return output; } [声明]：本文译自Frank Luna的《Introduction to 3D Game Programming with DirectX 9.0》，限于译者水平，文中难免错漏之处，欢迎各位网友批评指正；本文仅用于学习交流与参考用途，不得用于任何形式的商业用途；如需转载需事先征得作者本人和译者的同意，保持文章的完整性，并注明作者、译者和出处，作者保留对译文的所有权利。对于违反以上条款造成的后果，译者对此不负任何责任。我的MSN是Raymond_King123@hotmail.com，欢迎热爱3D图形和游戏，并有一定图形编程经验的朋友与我进行交流。