根据动态的两个轨迹点绘制面详解

狂风大尉

      大家应该知道3D世界中任何的面都是由三角形绘制完成的，因为任何无规则的集合图形都可以由三角形来组成。比如四边形，无论是正四边形还是无规则四边形都可以由两个三角形拼接而成。结合本文的标题大家仔细想想，如果需要绘制一个动态无规则面其实只需要得到动态的两个轨迹点即可，那么结合下面的图片大家仔细在想想。



        暂时我们先忽略Z轴（这样在平面中看得更清楚），假设Z轴坐标都为0。假设游戏中有两个轨迹点在动态的增加与改变，最后将这两个点改变的轨迹拼接起来就是它们生成的面。如上图所示，第一个点的轨迹是“ 3，4，5，6，7” 第二个点的轨迹是“2，1，10，9，8” 。这两个点的长度是可变的，前提是他们两个的数量必需完全一样。接着，如下图所示，我们将这些点两两相连起来，目前一共形成了8个三角形面（可根据两个动态点的数量而确定整个网格面三角形面的数量）。最后我们将这8个三角形填充上同样的颜色，就可以实现一个完整的立体网格面。


（点击图片，查看大图）
         原理很简单，就是这样的我相信大家看到这里大家都能明白，接着我们就学习如何使用代码来实现它。首先创建Unity工程，接着创建一个空的游戏对象，然后给该游戏对象绑定Mesh Filter组件 与 Mesh Renderer组件。
Mesh Filter组件：表示网格面，这个网格面是由我们使用代码将所有三角形拼接起来生成的面。
Mesh Renderer组件：表示表示网格的渲染，可设置一个渲染的材质，它包括贴图与颜色。
       如下图所示，我说说里面比较重要的属性。Mesh Renderer中，Materials下拉列表中可设置网格模型的材质，此时我们设置了一个红色的材质。 Mesh Filter:目前为None，也不用再编辑器中为它赋值，因为这个网格模型我们会在代码中生成并且赋值。在下面就是方刚我们设置红色的材质资源，Shader中设置了贴图的属性，目前是GUI/ TextShader。它表示这个材质的渲染级别在GUI上，就是优先级是最一层的。举个例子无论在这个网格模型的前面绘制多少模型，它永远都会在最前面显示。就这个例子而言它的存在并不是必需的，其实Shader的选项还有很多，可透明、不可透明、镜面、反射等等，后期我会向大家详细道来。



OK，现在资源文件都已经准备完毕，下面我们学习如何来绘制一个三角形，从简单的开始。。把下面的代码绑定在摄像机对象当中。



代码中有两个非常重要的概念，就是三角形顶点数组与坐标数组。先说说坐标数组，假设需要绘制一个四边形，此时三角形坐标数组的长度应当是4，它保存着四边形四个顶点的坐标。然后是顶点数组，四边形是由两个三角形组成，然而一个三角形是由3个顶点组成，两个三角形就应当是6个顶点组成，无论多少个三角形它们的结构都应当是以此类推。

注解1：这里是将模型的顶点数组与坐标数组赋值给网格模型，还记得刚刚在创建Mesh Filter时，当时没有在编辑器中给网格模型赋值，实际上代码走到这里就会重新为网格模型MeshFilter赋值，接着我们在代码中绘制的三角形就会显示在屏幕当中。
如图所示，三角形已经绘制在屏幕当中。 图中数组 0 1 2 表示该三角形的三个顶点的ID。这个ID对应代码中对应vertices数组索引顶点的坐标。



下面我们修改一下代码，让屏幕中一共绘制4个三角形。






已知模型的顶点数量，顶点数量减去2就是三角形的数量，三角形的数量在乘以3就是三角形顶点的数量。根据这个公式计算得知，上述代码中共绘制4个三角形，顶点坐标数组应当是6，顶点ID数组应当是12。多个三角形在顶点ID数组中排列方式比较特殊，大家需要仔细记录一下不然无法绘制出正确的三角形。如下图所示，由于我这边没有合适的3D坐标点，就用正三角形拼接出一个正四边形，这个四边形是由6个顶点4个小三角形组成 ，看到这里思路清晰的朋友应当明了无规则四边形的绘制原理和它完全一样。只需要传入适当的3D坐标点即可。





          根据上面的逻辑，我们修改一下算法。假设三角形的顶点坐标为任意数量，我们需要更根据顶点坐标数量来计算对应顶点ID的数组内容。在for循环中start =0 与end =3的含义是绘制从顶点坐标数组中索引为0的顶点开始绘制到数组索引为3的顶点，也就说是这里从0到3绘制了3个三角形。

如下图所示，根据上面的逻辑算法，共绘制了3个三角形，并且顶点坐标ID是由 0 到3 。 说到这里请大家仔细想想本文的标题内容，其实两个动态轨迹的点就是在维护triangles顶点坐标数组。triangles[0]、triangles[2]、triangles[4]……表示一个轨迹点的值，triangles[1]、triangles[3]、triangles[5]……就表示另一个轨迹点的值，最终将它们通过上面的算法将三角形面连接起来那么就是动态的两个点轨迹绘制面了。

hyui

Interesting, thanks!

libufan

不错的教程

HIDEOKOJIMA

Thanks for this!!!

wucnj

感谢分享！！！