如下是最新公布的一段“CryEngine 3”引擎制作FPS游戏地图视频，从制作到演示仅长8分钟，看了让人瞠目结舌，唏嘘不已。

// Cel Shading Section

// -------------------------------

vertex_program Ogre/CelShadingVP cg

{

    source Example_CelShading.cg

    entry_point main_vp

    profiles vs_1_1 arbvp1

    default_params

    {

        param_named_auto lightPosition light_position_object_space 0        param_named_auto eyePosition camera_position_object_space

        param_named_auto worldViewProj worldviewproj_matrix

        param_named shininess float 10

    }

}

fragment_program Ogre/CelShadingFP cg

{

    source Example_CelShading.cg

    entry_point main_fp

    profiles ps_1_1 arbfp1 fp20

}

material Examples/CelShading

{

    technique

    {

        pass

        {

            vertex_program_ref Ogre/CelShadingVP

            {

                // map shininess from custom renderable param 1

                param_named_auto shininess custom 1

// 终于知道param_named_auto第三个参数的作用了，用于给程序中赋值的索引

sub->setCustomParameter(CUSTOM_SHININESS, Vector4(10.0f, 0.0f, 0.0f, 0.0f)); CUSTOM_SHININESS == 1

            }

            fragment_program_ref Ogre/CelShadingFP

            {

                // map diffuse from custom renderable param 2

                param_named_auto diffuse custom 2

                // map specular from custom renderable param 2

                param_named_auto specular custom 3

            }

            texture_unit

            {

                texture cel_shading_diffuse.png 1d

                tex_address_mode clamp

                filtering none

            }

            texture_unit

            {

                texture cel_shading_specular.png 1d

                tex_address_mode clamp

                filtering none

            }

            texture_unit

            {

                texture cel_shading_edge.png 1d

                tex_address_mode clamp

                filtering none

            }

        }

    }

}

////////////////////////////////////////////////////////////////////////////////////下面是cg文件

////////////////////////////////////////////////////////////////////////////////

/* Cel shading vertex program for single-pass rendering

   In this program, we want to calculate the diffuse and specular

   ramp components, and the edge factor (for doing simple outlining)

   For the outlining to look good, we need a pretty well curved model.

*/

void main_vp(float4 position    : POSITION,

             float3 normal      : NORMAL,[U1] 

             // outputs

             out float4 oPosition    : POSITION,

             out float diffuse     : TEXCOORD0,

             out float specular    : TEXCOORD1,

             out float edge        : TEXCOORD2,[U2] 

             // parameters

             uniform float3 lightPosition, // object space：世界坐标系

             uniform float3 eyePosition,   // object space

             uniform float4 shininess,

             uniform float4x4 worldViewProj)

{

    // calculate output position

    oPosition = mul(worldViewProj, position);

    // calculate light vector

    float3 N = normalize(normal);

    float3 L = normalize(lightPosition - position.xyz);

    // Calculate diffuse component

    diffuse = max(dot(N, L) , 0);

    // Calculate specular component

    float3 E = normalize(eyePosition - position.xyz);

    float3 H = normalize(L + E);

    specular = pow(max(dot(N, H), 0), shininess[U3] );

    // Mask off specular if diffuse is 0

    if (diffuse == 0) specular = 0;

    // Edge detection, dot eye and normal vectors

    edge = max(dot(N, E), 0); // 法线与视线平行的点认为是标远，给予黑色沟边

}

void main_fp(float diffuseIn    : TEXCOORD0,

             float specularIn   : TEXCOORD1,

             float edge         : TEXCOORD2,

[U4]            

             out float4 colour : COLOR,

             uniform float4 diffuse,

             uniform float4 specular,

             uniform sampler1D diffuseRamp,

             uniform sampler1D specularRamp,

             uniform sampler1D edgeRamp[U5] )

{

    // Step functions from textures

    diffuseIn = tex1D(diffuseRamp, diffuseIn).x;

    specularIn = tex1D(specularRamp, specularIn).x;

    edge = tex1D(edgeRamp, edge).x;

    colour = edge * ((diffuse * diffuseIn) +

                    (specular * specularIn));

}

1，固定着色(constant shading)

    固定着色根本不考虑光照模型，只是根据多边形颜色的索引或RGB值绘制它。

PS:基本已经被游戏淘汰，太简单的着色模型

2，恒定着色（flat shding）

    对于每个多边形只需要根据一个顶点执行光照计算，然后根据计算结果对整个多边形进行着色，这就是恒定着色，也称为面片着色(faceted shading)，对于由平面组成的多边形这种方法是可行的（立方体），但对于由曲面组成的多边形这种着色方式会出现非你想要的结果.

3，Gougraud着色

　　对于顶点之间的像素值采用两个顶点之间的插值计算来确定，顶点之间的颜色过渡自然，渲染效果也比较平滑,没有恒定着色那样突兀。

4，Phong着色

　　与Gougraud着色类似，不过优点在于还对每个像素进行了法线的插值，对于镜面反射效果比较好。

凹凸映射Bump Mapping

　　凹凸映射和纹理映射非常相似。然而，纹理映射是把颜色加到多边形上，而凹凸映射是把粗糙信息加到多边形上。这在多边形的视觉上会产生很吸引人的效果。我们只需要添加一点信息到本来需要使用大量多边形的物体上。需要注意的是这个物体是平的，但是它看起来却是粗糙不平的。让我们来看看左边的那个立方体。如果你很近地观察它时，你会发现它上面的很多细节。它看起来好像是由成千上万个多边形构成的，其实它只是由6个矩形构成。你或许会问：“这和纹理映射有什么不同？”它们的不同之处在于——凹凸映射是一种负责光方向的纹理映射。

（1）凹凸映射背后的原理

　　让我们来看看一个粗糙的表面。
　　　　

　　从远处看，你判断这个物体是粗糙的的唯一证据是在它表面上下的亮度有改变。你的大脑能够获得这些亮暗不一的图案信息，然后判断出它们是表面中有凹凸的部位。

　　那么你也许会问：我是怎么知道哪些点要亮，哪些点要暗呢？这不难。绝大多数人生活在这样一种环境下——这个环境的大多数光源来自上方（译者注：比如白天主要的光来自太阳，夜晚主要的光来自天花板上的日光灯）。所以向上倾的地方就会更亮，而向下倾的地方就会更暗。所以这种现象使你的眼睛看到一个物体上亮暗区域时，可以判断出它的凹凸情况。相对亮的块被判断是面向上的，相对暗的块被判断是面向下的。所以我只需要给物体上的线条简单得上色。

　　如果你想要更多的证据，这里还有一幅几乎相同的图，不同于前的是它旋转了180度。所以它是前一幅图倒转的图像。那些先前看起来是凹进去的区域，现在看起来是凸出来的了。
　　　　

　　这个时候你的大脑并没有被完全欺骗，你脑中存留的视觉印象使你仍然有能力判断出这是前一幅图，只是它的光源变了，是从小往上照的你的大脑可能强迫性地判断出它是第一幅图。事实上，你只要始终盯着它，并且努力地想像着光是从右下方向照射的，你就会理解它是凹的（译者注：因为日常生活的习惯，你会很容易把这些图形判断成凸出的图形，但是因为有了上一幅对照图的印象，你可能才会特别注意到这些图块其实还是凹入的，只是判断方法不符合我们日常生活习惯，因为这时大多数光不是从上方照射，而是从下往上照射）。

（2）什么是凹凸图（Bump Map）

　　凹凸图和纹理图很相似。但是不同的是，凹凸图包含的不是颜色信息，而是凹凸信息。最通常的方法是通过存储高度值实现。我们要用到一个灰色的纹理图，灰色的亮度体现出每个点分别凸出多少（见右图）。这就是一个非常方便的保存凹凸图的方法，而且这种图很容易制作。这副图具体又是怎样被渲染器使用的呢？你接着往下看就会明白了。

　　当然，你并不一定要把自己局限于这些简单的图形，你可以扩展，用它来做木材，做石头，做脱了漆的墙面，做任何你想做的物体。
　　　　

（3）那么它是怎么工作的

　　凹凸映射是补色渲染技术（Phong Shading Technique）的一项扩展，只是在补色渲染里，多边形表面上的法线将被改变，这个向量用来计算该点的亮度。当你加入了凹凸映射，法线向量会略微地改变，怎么改变则基于凹凸图。改变法线向量就会改变多边形的点的颜色值。就这么简单。

　　现在，有几种方法来达到这个目的（译者注：这个目的指改变法线向量）。我并没有实际编写补色渲染和凹凸映射的程序，但是我在这里将介绍一种我喜欢的方法来实现！

　　现在我们需要将凹凸图中的高度信息转换成补色渲染用到的法线的调节信息。这个做起来不难，但是解释起来比较费劲。

　　　　
　　好的，我们现在将凹凸位图的信息转换成一些小向量——一个向量对应于一个点。请看左边一副放大的凹凸图。相对亮的点比相对暗的点更为凸出。看清楚了吗？现在计算每个点的向量，这些向量表征了每个点的倾斜情况，请看下图的描绘。图中红色小圆点表示向量是向下的：
　　　　

　　有很多计算向量的方法，不同的方法精确度不同，但是选择什么方法要取决于你所要求的精确度是个什么层次。最通常的方法是分别计算每个点上X和Y的倾斜度：

　　x_gradient = pixel(x-1, y) - pixel(x+1, y)
　　y_gradient = pixel(x, y-1) - pixel(x, y+1)

在得出了这两个倾斜度后，你就可以计算多边形点的法线了。

　　　　

　　这里有一个多边形，图上绘出了它的一条法线向量——n。除此，还有两条向量，它们将用来调节该点法线向量。这两条向量必须与当前被渲染的多边形的凹凸图对齐，换句话说，它们要与凹凸图使用同一种坐标轴。下边的图分别是凹凸图和多边形，两副图都显示了U、V两条向量（译者注：也就是平面2D坐标的两条轴）：

　　　　

　　现在你可以看到被调节后的新法线向量了。这个调节公式很简单：

　　New_Normal = Normal + (U * x_gradient) + (V * y_gradient)

有了新法线向量后，你就可以通过补色渲染技术计算出多边形每个点的亮度了

　　现在根接点存储了世界中的全部顶点。这是，他还是不能给我们任何好处，因为他还会画所有的东西。我们想把这个接点分成8个部分。一次，我们划分时，有8个立方体包含那最初的根接点的立方体。那意味着有4个立方体在上面，4个立方体在下面。请看下图：

　　记住图中黄色轮廓线没有。
　　我们刚刚把这个世界分成8个部分。想象一下如果我们有2，3，4个部分，我们的世界将是怎样？我们的摄象机在世界的中间，向着后面靠右的角落。如果你看这些线，你将注意到在OCTREE中8个结点中的第4个。这些结点包含2个后面的顶和底结点。这意味着我们只用画存储在这些结点中的顶点。

　　我们如何检测出我们要画的结点？如果你学过破片拣选（frustum culling),这将是很简单的。你能得到这些破片的大小并检测每个结点，看他是否被截断或在你的视觉破片中。有一个关于破片拣选的教程在http://www.gametutorials.com. 如果一个立方体截断破片，我们就将画这些结点。在这个例子中，我们切的数量是我们需要画的50%。记住，这只是我们世界中的一个部分。部分越多，我们就将越精确。当然，我们不会需要太多的点。下面，我们来看一下下面的图：

　　在上面这幅图中，你将发现许多的不同。这个例子中，不是在原始的8个立方体的每一个结点中建立8个新的立方体。原始的8个结点的顶和底面没有细分。你总是把一个结点分成8个或更多的结点，但是，如果在这个面没有三角形可以存储，我们将忽视这个结点并不给他分配内存。如果我们进一步的细分，更多的结点将形成原始的世界。如果我们变换到另一个部分，那立方体将相似的变换。为了说明这一点，请看图：

　　在图中，有两个球，但是方向相反。注意左边的部分，他将那世界分成2个结点，不是8个。这是因为球只要2个结点。请看右边的球是不是和左边的很相似。这幅图告诉我们：只显示需要的部分结点。如果没有三角形占用空间，结点将不会建立。


何时停止细分

　　现在，我们明白了如何细分，但是我们也需要知道怎样停止细分。有许多的方法：
　　1。如果当时的三角形数量少于我们定义的最大的三角形数量，我们可以停止细分当前的结点。举个例子，我们定义三角形的最大数量为100。这意味着我们在细分结点之前，要检测一下当前三角形的总数量是否小于或等于我们定义的最大数量，然后再做决定。如果数量少于或等于，我们将停止细分并指定这些三角形到那个结点。请注意我们从不指定任何三角形到任何结点，除非他是末结点。如果我们划分一个结点，我们不能存储三角形到那个结点，但是可以存储在他的子结点或他们的子结点中，甚至到他们的子中，等等。当我们复习了怎样画0C树后，将会有更多的了解。

　　2。另一个方法是在停止细分时，看我们是否细分的数目是否超过了细分的标准。例如，我们可以先建立细分的标准为10，如果细分的数量大于这个标准，我们将停止并指定这些在立方体中这个面的顶点到那个结点。当我们说“大于这个标准”就意味着细分的数量有11个。

　　3。最后的方法是看结点数是否超过结点变量定义时的值。例如，我们设置结点变量的值为500。每次，我们建立一个结点，相应的结点数增加1。然后在我们每次建立另一个结点时，检测一下我们当前的结点数是否超过结点变量。如果结点数为501，我们将不会细分这个结点，但是指定他的当前顶点给他。我自己用 1和3的方法，但是1和2也很好，因为你可以测试不同的细分的标准。

　
怎样画OCTREE

　　OCTREE建立后，我们就可以画我们需要的结点。那些立方体不是全部包含在我们的视觉中的，只有一部分。这就是我们为什么要计算每个结点的三角形的数量，如果我们只需要一个结点中的一部分，这样我们就不需要画成千上万个三角形。我们从根目录开始画OCTREE。对于每个结点都存储着一个中心点。这是非常好的，比如在下面这个函数中：

　　//这个函数取走立方体（X，Y，Z）的中心点和他的大小（width/2)
　　bool CubeInFrustum(float x,float y,float z,float size);

　　这个函数返回true or false,是由立方体是否在破片中决定的。如果立方体在破片中，我们将检测所有他的结点，看他们是否在破片中，否则我们将忽约树中的整个分枝。当我们得到了破片中的结点，但是没有任何结点在他下面。我们想画的顶点存储在末结点中。记住，只有末结点有顶点存储。看下面的图：

　　有阴影的立方体是在破片中。白色的立方体不是在破片中。这里显示了细分的2层。


OCTREE 中的冲突

　　OCTREE 不是用于渲染，但是用于冲突检测很好。随着游戏的发展，冲突检测也在改变，你将不得不在游戏世界中运用自己的算式检测你的角色或目标是否冲突。下面是一些冲突检测的例子：
　　1。你将建立一个函数允许你转递3D空间中的点到你的OCTREE并返回在这个点周围的顶点。你将转递的那个点是你的角色和目标的中心点。这虽然可以工作一端时间，但如果这个点靠近一个立方体的边时呢？你的角色或目标可能和另一个立方体的顶点相冲突。为了解决这个问题，你将做一些事情。你可以转递角色/目标的半径或一定的空间，然后检测半径或一定的空间是否和周围的结点相冲突。这由你的角色/目标的形状决定。下面是一些典型的函数：

　　//这个函数取走角色/目标（X，Y，Z）的中心点并返回靠近他的顶点
　　CVector3 *GetVerticesFromPoint(float x,float y,float z);

　　//这个函数取走角色/目标（X，Y，Z）的中心点和半径，然后返回和他冲突的结点中的顶点
　　CVector3 *GetVerticesFromPointAndRadius(float x,float y,float z,float radius);

　　//这个函数取走角色/目标（X，Y，Z）的中心点和立方体的大小，然后返回和他冲突的结点中的顶点
　　CVector3 *GetVerticesFromPointAndCube(float x,float y,float z,float size);

　　我相信你有更好的方法快速的检测，在这里只是给你一点基础。


总结

　　这篇教程只是给你讲截如何建立自己的OCTREE。关于这篇文章中的代码在www.gametutorials.com，我希望这篇文章对你有用。


中文译者：antking
http://akinggame.gameres.com
这篇文章的英文版在http://www.gametutorials.com/Tutorials/OpenGL/Octree.htm

Ben Humphrey (DigiBen)
Game Programmer
DigiBen@GameTutorials.com
Co-Web Host of www.GameTutorials.com