小鸟飞飞 无人机:1.3.5?渲染三角形drawTriangles[Ladeng6666]

来源：百度文库 编辑：偶看新闻 时间：2024/04/23 18:16:26

1.3.5 渲染三角形drawTriangles[Ladeng6666]

(2011-06-04 18:18:40)转载▼ 标签：

as3

imageeffects

flash

it

分类： 英文翻译教程 渲染三角形
最新版本的Flash提供了一个专门用来在ActionScript进行3D渲染的方法：drawTriangles()，该方法提供一些三角平面，并在这些三角平面内对任何类型的填充进行缩放和倾斜变形。当然没有drawTriangles()方法同样可以完成3D渲染，但是用了它3D渲染变的非常简单了！
也许在你的日常工作中几乎用不到drawTriangles()方法，除非你在用ActionScript进行3D引擎的开发。但是如果你需要对图片进行透视变形，而仅仅在三维坐标系中对图片做倾斜或旋转无法完成你的需求时，drawTriangles()就派上用场了。
drawTriangles方法详解
首先，我们来看一下drawTriangles()方法的参数：               drawTriangles(
                       vertices: Vectros.,
                       indices:Vectors. = null,
                       uvtData:Vectors. =null,
                       culling:String = "none"
               ):void为了能让你更好的理解，我会对每个参数举例介绍。
正如你看到的，drawTriangles()方法必需的参数只有第一个：vertices，它是一个vector数组，用来存储三角形的顶点坐标。每对数字代码三角形的一个端点。很显然要绘制一个三角形，至少需要三个顶点，下面的代码用drawTriangles()方法绘制一个最简单的三角形：package chapter1
{
       import flash.display.Sprite;
       
       public class DrawTrianglesVertice extends Sprite
       {
               private varvertices:Vector.;
               
               public function DrawTrianglesVertice()
               {
                       vertices = newVector.();
                       vertices.push(100, 100);
                       vertices.push(0, 300);
                       vertices.push(200, 300);
                       
                       graphics.lineStyle(2);
                       graphics.beginFill(0xf0ff00);
                       graphics.drawTriangles(vertices);
                       graphics.endFill();
               }
               
       }

}首先要创建一个vector对象用来存储顶点坐标，并将三对坐标值push到这个vector对象中。然后将其作为参数传递给drawTriangles()方法中，并填充为蓝色。代码运行结果如图1-20。

那么为什么不用几个简单lineTo()方法来绘制这个三角形呢？也许你会这么想。但是正如我所说的，drawTriangles真正的优势是在一个包含大量三角形的网孔多边形中渲染位图。真正要充分利用好这一点，我们还要继续学习这个方法的其他参数。
第二个参数只由正整数组成的一个vector数组，这些正整数每三个一组分别对应第一个参数中的顶点坐标，并用其组成一个三角形。像第一个例子一样，如果不指定顶点的顺序，每三个顶点将组成一个三角形。对于顶点都包含在一个三角形里的情况，这是可以的，但是大多数情况下，三角形之间会共用顶点，比如在网孔多边形中就会有大量相连的三角形，所以第二个参数indices对绘制三角形是很重要的。
第二个例子在第一个例子的基础上，在已有的三角形下面又创建了一个三角形，而且这两个三角形会公用两个顶点，也就是说两个三角形实际只需要定义四个顶点，我们需要用drawTriangles的indices参数来指定如何用这个四个顶点组成两个三角形。下面加粗部分的代码是第一个例子的不用之处(除了类名和构造函数名称)。package chapter1
{
       import flash.display.Sprite;
       
       public class DrawTriangleIndice extends Sprite
       {
               private varvertices:Vector.;
               
               public function DrawTriangleIndice()
               {
                       vertices = newVector.();
                       vertices.push(100, 50);
                       vertices.push(150, 100);
                       vertices.push(50, 100);
                       vertices.push(100, 150);
                       
                       var indices:Vector. = newVector.();
                       indices.push(0, 1, 2);
                       indices.push(1, 2, 3);
                       
                       graphics.lineStyle(2);
                       graphics.beginFill(0xf0ff00);
                       graphics.drawTriangles(vertices,indices);
                       graphics.endFill();
               }
               
       }

}正如你所看到的，我在vertices数组中只添加了一个顶点，然后创建了一个新的indices数组用来存储顶点的索引值，这些索引值每三个一组组成一个三角形。第一组顶点索引值是0、1、2，也就是说vertices数组中的前三个顶点组成第一个三角形。第二组顶点索引值是1、2、3，这些索引值对应vertices数组中的三个顶点组成第二个三角形。这样讲起来可以让你对网孔多边形有更深入的认识，比如顶点之间是如何组合的、是如何组成三角形的、组成后的三角形是如何渲染的等等。测试上面的代码，会出现两个三角形公用一个边，乍看起来像是一个四边形，如图1-21.
下载 (22.85 KB)
2011-5-22 19:10
drawTriangles()的第三个参数是另外一个vector数组，数组中的数字表示位图填充的UVT纹理坐标（U、V、T是表示纹理坐标的变量）。简单的来讲，UVT定义了三角形的顶点在填充位图上的位置，它对纹理映射非常有帮助。稍后我们会介绍更多复杂的关于位图的例子，届时再继续学习这个参数。
我们继续讨论第四个参数：culling，它是一个常量，只能取flash.display.TriangleCulling中的值。Culling是三角形的一种渲染方式，它决定了坐标系空间中的三角形填充是否被渲染。这个选项通常用来做3D渲染以节省CPU消耗，其中面向读者的一面是渲染的，另一个背对着读者的就没有渲染。保存代码，3D渲染结果如图1-22。
下载 (18.43 KB)
2011-5-22 19:11
图1-22.两个侧面相同的正方体。左边的正方体看到的是正面，而右边的正方体看到的是背面，因为朝向观察者的面被渲染成了透明，所以可以看到正方体的背面面。选择背向剔除时，背向观察者的侧面不会被渲染，如右图。
图示中，我们看到了正方体的背面，选择背向剔除的话，背面就不会渲染了。但是如果不选择背向剔除，正方体的背面就会显示在正面的下面(如左图所示)。如果侧面深度排序正确，唯一的不足就是FlashPlayer必须绘制根本无法看到的侧面。如果侧面深度排序错误，还有可能出现想右图正方体那样，背向侧面显示在正向侧面上面的错误。
所以究竟要怎么定义如何朝向和背离用户呢？因为三角形有三个顶点，这三个定义对于观察者来说要么顺时针，要么逆时针。在上一个例子中，第一个三角形的顶点顺序是0、1和2。FlashPlayer在渲染这个三角形时(因为没有做任何3D的变形)，顶点显示顺时针的顺序，如图1-23。
下载 (35.79 KB)
2011-5-22 19:12
图1-23前一个实例中的第一个三角形顶点显示顺时针顺序
另外，我也可以将顶点的顺序改为0、2、1.这样得到的三角形是逆时针的，如图1-24。本例中我特意将第二个三角形的顶点改成逆时针顺序。
下载 (40.09 KB)
2011-5-22 19:14
图1-24. 前一个实例中的第一个三角形顶点显示顺时针顺序
现在你应该知道了顶点的顺时针和逆时针顺序了，但是这个剔除渲染有什么联系呢？默认情况下是没有剔除渲染的，也就是说无论顶点是顺时针或逆时针对三角形都没有什么影响，三角形的填充都会正常渲染。如果将drawTriangles()的第四个参数设置为POSITIVE或NAGATIVE，那么三角形的填充是否被渲染就要看顶点是顺时针还是逆时针方向了。
POSITIVE和NEGATIVE实际上是指多边形方向单位向量，这个向量垂直于多边形的表面。顶点呈逆时针旋转的多边形的方向单位向量朝向观察者，即z轴的负方向。顶点呈顺时针的多边形的方向单位向量远离观察者，即z轴的正方向。这些3D概念除了对本书相关知识点的拓展，其他的有些超出了本书的范围，请参阅其他3D资料。

在最后这个例子中，我设置了渲染剔除来向你展示它是如何影响三角形渲染的。除了类和构造函数名称，其他的变更代码都以加粗标示。package chapter1
{
       import flash.display.Sprite;
       import flash.display.TriangleCulling;
       
       
       public class DrawTraiangleCulling extends Sprite
       {
               private varvertices:Vector.;
               
               public function DrawTraiangleCulling()
               {
                       vertices = newVector.();
                       vertices.push(100, 50);
                       vertices.push(150, 100);
                       vertices.push(50, 100);
                       vertices.push(100, 150);
                       
                       var indices:Vector. = newVector.();
                       indices.push(0, 1, 2);
                       indices.push(1, 2, 3);
                       
                       graphics.lineStyle(2);
                       graphics.beginFill(0xf0ff00);
                       //positive表示剔除顺时针的三角形,negative表示剔除逆时针的三角形
                       graphics.drawTriangles(vertices, indices, null,TriangleCulling.POSITIVE);
                       
                       graphics.endFill();
               }
               
       }

}将渲染剔除设置为POSITIVE,上面的三角形消失了。你可以这么理解，因为它的方向向量在z轴的正方向，或者更简单点，因为它的顶点是顺时针的，所以上面的三角形没有被渲染。如果将宣传剔除设置为NEGATIVE，上面的三角形渲染出来了，而下面的三角形不见了，原因反之。
AE6.5 渲染问题？？？ 数学解三角形5 我用premiere做了5分钟的视频，想渲染导出mpeg1格式只能渲染到3分钟，后面就不给渲染了，是怎么回事． VRAY渲染器5怎么进行步光？？ Adobe After Effects 6.5 为什么只能渲染5秒? 为什么用暴风5在线看动漫总是无法渲染 渲染错误 什么是渲染 lightscape渲染 什么是渲染 渲染牧场 渲染臣匠是？ photoshop渲染 渲染不成功 渲染大师 《渲染巨匠》 把一个等变三角形分成5个全等三角形 把一个正方形分成20各全等三角形 一个三角形的度数比是2：5：3，这个三角形三个内角的度数分别是？是什么三角形? 将1个三边相等的三角形分成5个全等三角形 ~跪求~急 用五根火柴怎么拼成5个小的三角形,三个大的三角形 一个三角形三个内角的度数比是5:3:2,这是一个什么三角形? 三角形三边长分别为4，5，6，则这个三角形是？ 8条像素渲染管线和4个顶点着色引擎与12条渲染管线,5组顶点着色单元差别有多大 怎样提高渲染巨匠的渲染速度