前面我们用tessellation细分三角形或者四边形，产生的细分点都是在三角形或四边形平面内。本教程我们学习一下PN triangles(point normal triangles)的方法，把一个三角形细分为一个曲面。PN triangles的详细介绍请参考：2001 paper by Vlachos et al ，下面我们简单介绍一下PN triangles：
大家都知道，通常我们用贝塞尔函数表示光滑的曲面，贝塞尔函数是多项式函数，它表示的曲面通常也称作贝塞尔曲面，贝塞尔曲面的详细介绍，可以到wiki上看看Bezier Surface。
PN triangle是一个特殊的贝塞尔曲面，它的表示形式为：
u,v, w是重心坐标，bxyz就是控制点，其中u+v+w=1,控制点的位置如下，看以看出来，b003, b030,b300就是三角形的三个顶点控制点，根据这三个控制点位置和法向，我们就可以计算出其它控制点的位置。
PN triangles的法向通过下面的方法计算得到：
下面我们在myTutorialD3D_54的基础上，增加PN triangle支持，用三角形生成曲面。首先修改MeshClass类，为三角形patch顶点结构增加normal属性，因为计算控制点时候需要它。
struct VertexType
{
D3DXVECTOR3 position;
D3DXVECTOR3 normal;
D3DXVECTOR4 color;
};
…
//创建顺时针方向的三角形，左手规则
// 设置顶点数据
vertices[0].position = D3DXVECTOR3(4.0f, 0.0f, -2.0f); // 左下
vertices[0].normal = D3DXVECTOR3(-1.0f, 1.0f, 0.0f);
vertices[0].color = D3DXVECTOR4(1.0f, 1.0f, 0.0f, 1.0f);
vertices[1].position = D3DXVECTOR3(6.0f, 0.0f, 4.0f); // 中上.
vertices[1].normal = D3DXVECTOR3(0.0f, 1.0f, 1.0f);
vertices[1].color = D3DXVECTOR4(0.0f, 1.0f, 0.0f, 1.0f);
vertices[2].position = D3DXVECTOR3(8.0f, 0.0f, -2.0f); // 底右
vertices[2].normal = D3DXVECTOR3(1.0f, 1.0f, 0.0f);
vertices[2].color = D3DXVECTOR4(0.0f, 1.0f, 1.0f, 1.0f);
接下来，修改TessShaderClass类，修改顶点布局，增加normal支持：
polygonLayout[1].SemanticName = "NORMAL";
polygonLayout[1].SemanticIndex = 0;
polygonLayout[1].Format = DXGI_FORMAT_R32G32B32_FLOAT;
polygonLayout[1].InputSlot = 0;
polygonLayout[1].AlignedByteOffset = 12;
polygonLayout[1].InputSlotClass = D3D11_INPUT_PER_VERTEX_DATA;
polygonLayout[1].InstanceDataStepRate = 0;
接着就是shader 文件的修改，这也是最关键的部分，下面看看各个shader文件，vs中基本就是pass through，把顶点属性传到hs，和以前比没有太多的变化，hs中增加了生成新控制点的代码：
ConstantOutputType ColorPatchConstantFunction(InputPatch<HullInputType, 3> inputPatch, uint patchId : SV_PrimitiveID)
{
ConstantOutputType output;
//设置三条边的细分因子.
output.edges[0] = tessellationAmount;
output.edges[1] = tessellationAmount;
output.edges[2] = tessellationAmount;
//设置三角形内的细分因子
output.inside = tessellationAmount;
// PN triangle三个控制顶点的位置，和三角形patch的原始控制点是一样的
float3 f3B003 = inputPatch[0].position;
float3 f3B030 = inputPatch[1].position;
float3 f3B300 = inputPatch[2].position;
// 法向
float3 f3N002 = inputPatch[0].normal;
float3 f3N020 = inputPatch[1].normal;
float3 f3N200 = inputPatch[2].normal;
// 根据公式计算边控制点和中心控制点
output.f3B210 = ( ( 2.0f * f3B003 ) + f3B030 - ( dot( ( f3B030 - f3B003 ), f3N002 ) * f3N002 ) ) / 3.0f;
output.f3B120 = ( ( 2.0f * f3B030 ) + f3B003 - ( dot( ( f3B003 - f3B030 ), f3N020 ) * f3N020 ) ) / 3.0f;
output.f3B021 = ( ( 2.0f * f3B030 ) + f3B300 - ( dot( ( f3B300 - f3B030 ), f3N020 ) * f3N020 ) ) / 3.0f;
output.f3B012 = ( ( 2.0f * f3B300 ) + f3B030 - ( dot( ( f3B030 - f3B300 ), f3N200 ) * f3N200 ) ) / 3.0f;
output.f3B102 = ( ( 2.0f * f3B300 ) + f3B003 - ( dot( ( f3B003 - f3B300 ), f3N200 ) * f3N200 ) ) / 3.0f;
output.f3B201 = ( ( 2.0f * f3B003 ) + f3B300 - ( dot( ( f3B300 - f3B003 ), f3N002 ) * f3N002 ) ) / 3.0f;
float3 f3E = ( output.f3B210 + output.f3B120 + output.f3B021 + output.f3B012 + output.f3B102 + output.f3B201 ) / 6.0f;
float3 f3V = ( f3B003 + f3B030 + f3B300 ) / 3.0f;
output.f3B111 = f3E + ( ( f3E - f3V ) / 2.0f );
// 计算法向控制点
float fV12 = 2.0f * dot( f3B030 - f3B003, f3N002 + f3N020 ) / dot( f3B030 - f3B003, f3B030 - f3B003 );
output.f3N110 = normalize( f3N002 + f3N020 - fV12 * ( f3B030 - f3B003 ) );
float fV23 = 2.0f * dot( f3B300 - f3B030, f3N020 + f3N200 ) / dot( f3B300 - f3B030, f3B300 - f3B030 );
output.f3N011 = normalize( f3N020 + f3N200 - fV23 * ( f3B300 - f3B030 ) );
float fV31 = 2.0f * dot( f3B003 - f3B300, f3N200 + f3N002 ) / dot( f3B003 - f3B300, f3B003 - f3B300 );
output.f3N101 = normalize( f3N200 + f3N002 - fV31 * ( f3B003 - f3B300 ) );
return output;
}
在ds中，我们根据PN triangle公式生成新的控制点：
//重心坐标
float fU = uvwCoord.x;
float fV = uvwCoord.y;
float fW = uvwCoord.z;
// 预计算一些需要的值
float fUU = fU * fU;
float fVV = fV * fV;
float fWW = fW * fW;
float fUU3 = fUU * 3.0f;
float fVV3 = fVV * 3.0f;
float fWW3 = fWW * 3.0f;
//根据公式和重心坐标计算细分后顶点的位置
float3 f3Position = patch[0].position * fWW * fW +
patch[1].position * fUU * fU +
patch[2].position * fVV * fV +
input.f3B210 * fWW3 * fU +
input.f3B120 * fW * fUU3 +
input.f3B201 * fWW3 * fV +
input.f3B021 * fUU3 * fV +
input.f3B102 * fW * fVV3 +
input.f3B012 * fU * fVV3 +
input.f3B111 * 6.0f * fW * fU * fV;
//计算新的顶点在世界坐标系中的位置
output.position = mul(float4(f3Position, 1.0f), worldMatrix);
output.position = mul(output.position, viewMatrix);
output.position = mul(output.position, projectionMatrix);
// 计算法向
float3 f3Normal = patch[0].normal * fWW +
patch[1].normal * fUU +
patch[2].normal * fVV +
input.f3N110 * fW * fU +
input.f3N011 * fU * fV +
input.f3N101 * fW * fV;
// 归一化
f3Normal = normalize( f3Normal );
output.normal = f3Normal;
//新生成顶点颜色也为各个控制点颜色组合
output.color = uvwCoord.x * patch[0].color + uvwCoord.y * patch[1].color + uvwCoord.z * patch[2].color;
程序执行后界面如下，其中tess factor 从1到6，可以看出来，随着细分因子的增大，三角形越接近曲面。
完整的代码请参考：
工程文件myTutorialD3D11_59
代码下载：
稍后提供