Pv3D10粒子.docx

1、Pv3D10粒子10 粒子 粒子是2D图形，它们相对于3D坐标系定位，但不使用透视投影。换句话说，粒子始终面对摄像机。另一个粒子的特点是，它们是轻量级的物体。由于你的3D应用程序性能受三角形数很大影响，因此粒子的轻量使得它们能成为很好的工作伙伴。在这一章中，我们将讨论为什么使用粒子，然后通过一些例子，一步一步演示如何创建它们。 本章包括以下内容： 什么是粒子，以及为什么使用它们 如何创建粒子和应用粒子材质（materials） 给粒子添加交互性 如何创建粒子域 使用Flint粒子系统 在我们研究如何创建粒子前，让我们看看它们是什么以及我们如何使用它们。 什么是粒子以及为什么使用它们 如果你有玩

2、过3D游戏，你肯定看到过粒子起作用。许多3D游戏使用的粒子模拟各种现象（多半是自然现象）如爆炸，落叶，和血液飞溅。 在Papervision3D，一个粒子可以被描述为一个二维图形，可以相对于一个3D点缩放和定位。可以设想为一个轻量级的平面，始终面对着摄像头。本章主要讨论了以下两方面的粒子使用： 告示牌（Billboarding），用于削减你的场景中三角形数量的技术 创建自然现象，通常是在粒子系统的帮助下完成 这两个方面并不互相排斥。但是，当讨论Papervision3D里的粒子时，这种分类是一个很好的起点。 告示牌 假设你想要在你的场景中有一些树。要创建树木，你可能需要许多多边形。但是，渲染树

3、木对用户的计算机来说可能会相当困难，具体随场景中的其它对象而异。或者假设你想加上1000个反光球。创建1000个有渲染的球体也将非常消耗CPU。一种处理这种情况的技术就是使用粒子。 现在，假设我们有一个反光球的2D图形。通过相对于3D坐标系定位和缩放2D维图形，你可以得到这是一个3D物体的错觉。这样，你将极大地削减多边形。这种用面对摄像机的2D图形代替3D物体的技术就叫告示牌。 看看以下图片，这是一个Papervision3D场景的截图。它展示了三个反光球，似乎是3D空间中的3D物体。但是它们不是创建于Papervision3D或建模程序中的球体。它们是简单的2D图形，创建于图形编辑程序。 告

4、示牌有利有弊。使用2D图形代替有很多三角形的3D物体给了渲染器一个轻得多的工作负荷。但是，告示牌粒子可能看起来比3D物体真实感更少，有两个原因。首先，你不能绕着一个粒子移动摄像机，以得到一个不同角度的视图，而3D物体可以。其次，虽然先前截图里的粒子看起来像反光的球，但是不管摄像机在哪里，反光看起来总会是一样的，这会导致真实感比实时渲染的球体更少。 谈到真实感，粒子不需要成为烘培渲染（baked shading）的图形。在这章里，我们将看到仅有圆形或方形组成的粒子。但是，在你的场景中产生，定位及缩放很多这些粒子仍然能创建漂亮强烈的3D体验，比如，用来暗示一片星域。以下截图也是从Papervisi

5、on3D场景中获得的。 就像我们将在例子里看到的，创建像前面截图里展示的粒子星域在Papervision3D里相当简单。但是创建现象，如爆炸，落雪，或喷泉要更复杂，需要相当高级的编码，这是粒子系统起作用的地方。 粒子系统 有很多途径来定义什么是粒子系统。让我们总结下所有定义共有的东西： 粒子系统模拟有机现象（organic phenomena），如烟火和落叶。 粒子系统产生和移动一批小物体（粒子）。 粒子有属性，如速度和加速度。 有一内置随机元素在一定的限制下操作粒子属性，这些限制通常由程序设置。 粒子有生命周期它们被创建，根据特性移动，然后销毁。 通常，由发射器（emitter）产生粒子，并

6、初始化每个粒子的属性。以下截图展示了一个在粒子系统帮助下创建的喷泉： Papervision3D不包括粒子系统，但是在这章结尾，我们将看一看一个外部开源类库Flint，它能很好的和Papervision3D一起使用。 我们已经讨论了什么是粒子，以及用它们来做什么。该是融合这些想法到一些实际例子并看看怎样在Papervision3D里创建粒子的时候了。 创建粒子 创建和显示粒子的过程看起来如下： 1. 创建粒子材质 2. 创建Particles实例，这会被用来包含和渲染粒子。 3. 使用Particle类实例化一个粒子（或者大约，一整群），传递材质，尺寸，以及位置作为其参数。 4. 使用addP

7、article()方法添加粒子到Particles对象。 前两步的顺序可以交换，因为粒子材质和Particles实例不需要彼此。 使用Particles类，还有Particle类，可能听起来令人混淆。Particles实例是单独用来容纳和渲染Particle实例，且实际上是一个do3D。但是Particle实例是实际的粒子且被应用的材质定义其显示方式。 要在Papervision3D里创建粒子，我们需要材质定义其表现。你可以应用三类材质在一个粒子上： ParticleMaterial：最基本的材质，允许你用圆形或矩形创建粒子。 BitmapParticleMaterial：使用位图作为源的材质

8、。位图能被动态绘制或者从外部加载。 MovieAssetParticleMaterial：使用影片剪辑资料作为源的材质。这是唯一能被交互的材质。 在我们通览三类材质及应用它们到粒子前，我们首先创建一个模板类，以让你容易跟随这些例子。 一个用于所有例子的模板类 因为这些例子有很多共同之处，我们将首先创建一个模板类（基于BookTemplateExample），它能作为每个例子的开始点重用。 用于这章的模板类看起来像这样： package import flash.events.Event; import org.papervision3d.view.BasicView; import org.p

9、apervision3d.core.geom.Particles; import org.papervision3d.core.geom.renderables.Particle; public class ParticleTemplate extends BasicView private var numberOfParticles:uint; private var easeOut:Number = 0.3 private var reachX:Number = 0.1 private var reachY:Number = 0.1 private var reachZ:Number =

10、0.5; public function ParticleTemplate() super(stage.stageWidth,stage.stageHeight); stage.frameRate = 40; init(); startRendering(); private function init():void /code to be added numberOfParticles = 1000; for(var i:uint = 0; i numberOfParticles; i+) /code to be added private function randPos():Number

11、 returnMath.random() * 4000 -2000; override protected function onRenderTick(e:Event=null):void var xDist:Number = mouseX - stage.stageWidth * 0.5; var yDist:Number = mouseY - stage.stageHeight * 0.5; camera.x += (xDist - camera.x * reachX) * easeOut; camera.y += (yDist - camera.y * reachY) * easeOut

12、; camera.z += (-mouseY * 2 - camera.z ) * reachZ; super.onRenderTick(); 基本上，我拿来BookExampleTemplate类并加上以下少数东西： 我们导入Particle类，还有Particles类，你需要两者来创建粒子。 在init()方法里，我们定义想创建的粒子数在我们的例子里是1000。在有些例子里，我们需要在init()方法外访问numberOfParticles的值，因此我们使它成为类属性。 还是在init()方法里，我们创建一个for循环，它还是空的。然而，它将被用来实例化粒子，给它们材质，及添加它们到Par

13、ticles实例。 我们添加randPos()方法，它返回2000到-2000的随机位置。 在onRenderTick()方法内，我们添加一些使摄像机位置响应鼠标位置的代码。为了让其工作，我还添加一些类属性。 让我们置这个模板于实际，开始第一个粒子材质类ParticleMaterial。 当你使用Flex Builder或Flash Builder，你可能要改变项目的背景色为黑色，以便更清楚的观看粒子。 ParticleMaterial 在名为ParticleMaterialExample的例子里，我将应用最基本的粒子材质类型。拿我们刚创建的模板作为开始点，然后改变类定义和构造器名。要使用Pa

14、rticleMaterial，我们首先需要导入它。 import org.papervision3d.materials.special.ParticleMaterial; 现在添加这些代码到init()方法的顶部。 var particles:Particles = new Particles(); scene.addChild(particles); 你刚实例化Particles类，添加到场景。这个实例将显示我们将要在for循环里创建的粒子。 在循环里，添加以下： var particleMaterial:ParticleMaterial = new ParticleMaterial(Ma

15、th. random()*0xFFFFFF,1,ParticleMaterial.SHAPE_CIRCLE); 我们在for循环里定义材质，而不是在循环开始前，因为我们要应用不同的材质到每个粒子。在这个例子里，我们给每个粒子它自己的颜色。当实例化材质时，我们传递两个必需的参数到ParticleMaterial构造器。让我们总结所有可用参数： 参数 数据类型 默认值 描述 1 color Number 定义颜色。 2 alpha Number 设置粒子透明度。 3 shape int 0 你能选择两种形状，方形或圆形，通过传递ParticleMaterial.SHAPE_SQUARE 或Part

16、icleMaterial.SHAPE_CIRCLE。 默认值为0，等于方形形状。 4 scale Number 1 缩放材质，接着就是粒子。 在我们的例子里，我们传递一个随机的十六进制颜色，保留透明度为默认值，选择圆形。在材质实例化后而仍在循环内时，我们在每个迭代创建一个粒子，并使用addParticle()方法添加到Particles（原书Particle有误）实例。 var particle:Particle = new Particle(particleMaterial,5, randPos(),randPos(),randPos(); particles.addParticle(par

17、ticle); Particle构造器接受一个必需的和四个可选的参数： 参数 数据类型 默认值 描述 1 material ParticleMaterial 应用到粒子的材质。 2 size Number 1 定义粒子的尺寸。 3 x Number 0 粒子的x坐标。 4 y Number 0 粒子的y坐标。 5 z Number 0 粒子的z坐标。 在我们的例子里，我们通过调用randPos()方法给每个粒子一个随机位置。 显然，我们有两种途径影响粒子大小ParticleMaterial的scale参数和Particle的size参数。在我们的例子里，我们只用第二个，将其设置为5。 发布的文

18、件应该展示我们要求的不同颜色的1000个圆形粒子。以下截图展示视图窗口（viewport）的一部分。 例子：ParticleMaterialExample BitmapParticleMaterial BitmapParticleMaterial类让你用位图作为粒子材质。位图能通过两种途径被创建： 动态绘制的位图 加载的位图 接下来的两节将展示每种途径的例子，让我们从绘制的位图开始。 使用动态绘制的位图作为BitmapParticleMaterial 我们将再用ParticleTemplate类作为开始点。在名为BitmapParticleMaterialShapeExample的例子里，我们

19、需要导入BitmapParticleMaterial类。 import org.papervision3d.materials.special.BitmapParticleMaterial; 添加以下代码到init()方法顶部，来实例化Particles类并添加它到场景。 var particles:Particles = new Particles(); scene.addChild(particles); 添加以下代码到for循环里。 var triangle:Shape = new Shape(); triangle.graphics.beginFill(Math.random() *

20、0xFFFFFF); triangle.graphics.moveTo(0,0); triangle.graphics.lineTo(20,20); triangle.graphics.lineTo(40,0); var bitmapData:BitmapData = new BitmapData(40,20); bitmapData.draw(triangle); var material:BitmapParticleMaterial = new BitmapParticleMaterial (bitmapData); material.smooth = true; var particle

21、:Particle = new Particle(material,1,randPos(), randPos(),randPos(); particles.addParticle(particle); 循环里的代码看起来很像我们前一节用过的代码，在那里我们应用ParticleMaterial且必须在圆形和方形中选择。然而，这次你能选择任何动态绘制的形状。我们用Flash绘制API在一个Shape实例里绘制一个随机颜色三角形。这个三角形宽40，高20。 我们实例化一个BitmapData对象，传递三角形的宽和高，第三个参数定义对象背景是否透明。然而，我们不触及它，因为它默认就被设置为true。之

22、后我们绘制三角形到位图上。 接下来，我们实例化材质，传递必需参数BitmapData对象。BitmapParticleMaterial构造器有四个可用参数，展示如下： 参数 数据类型 默认值 描述 1 bitmap * 制作材质的BitmapData或ParticlesBitmap对象。 2 scale Number 1 对象的缩放。 3 offsetx Number 0 相对于粒子注册点的x位置。 4 offsety Number 0 相对于粒子注册点的y位置。 注意，第一个参数也可以用ParticleBitmap类型。我们将稍微看下它是如何工作的。 offsetx和offsety都是数字，

23、默认为0。注册点在左上，如果你要放置bitmapData对象到中心，传递bitmap.bitmapData.width * -0.5和bitmap.bitmapData.height * -0.5分别作为第三个和第四个参数。 在我们设置材质为平滑后，我们实例化粒子，要传递材质，缩放，坐标，类似于ParticleMaterial例子里做的。 发布文件，再一次展示了1000个随机定位和上色的粒子，但是这次它们的形状是三角形。 例子：BitmapParticleMaterialShapeExample 传递一个ParticleBitmap实例给BitmapParticleMaterial构造器 虽然

24、Papervision3D文档说BitmapParticleMaterial构造器的第一个参数应该是BitmapData类型，你也能传递一个ParticleBitmap实例。使用这个Papervision3D类，能允许从显示对象自动创建位图，意味着我们能简单地传递三角形shape给ParticleBitmap构造器。 var particleBitmap:ParticleBitmap = new ParticleBitmap(triangle); 现在我们能实例化材质，传递ParticleBitmap实例。 var material:BitmapParticleMaterial = new B

25、itmapParticleMaterial (particleBitmap); 使用ParticleBitmap移除了创建BitmapData对象及绘制形状于其上的需要，这是出于简化的考虑。前面两行代码能被以下这行代替： var material:BitmapParticleMaterial = new BitmapParticleMaterial (new ParticleBitmap(triangle); 例子：BitmapParticleMaterialShapeExample 使用加载的位图作为BitmapParticleMaterial 另一种动态绘制位图的选择是去加载一个。让我们在

26、BitmapParticleMaterialImageExample例子里看看这是怎样弄的。 我们能为这个例子使用粒子模板类，但是我们需要改变一点。加载图片会在init()方法里完成，我们将在和加载完毕事件侦听器关联的事件处理器里创建粒子及其材质。 在init()方法里，我们将使用Loader类来加载图片，因此不要忘了必要的导入（imports）。代码假设位图在src文件夹里的assets文件夹里。你能在下载的类似名字的例子里找到位图。init()方法应该看起来像这样： private function init():void var imgLoader:Loader = new Loader

27、(); imgLoader.contentLoaderInfo.addEventListener(Event. COMPLETE,loadComplete); imgLoader.load(new URLRequest(assets/glassBall.png); 我们移动for循环到事件处理器，看起来像以下这样： private function loadComplete(e:Event):void var bitmap:Bitmap = e.target.content as Bitmap; var material:BitmapParticleMaterial = new BitmapP

28、articleMaterial (bitmap.bitmapData); material.smooth = true; numberOfParticles = 1000; var particles:Particles = new Particles(); scene.addChild(particles); for(var i:uint = 0; i numberOfParticles; i+) var particle:Particle = new Particle(material,1,randPos(), randPos(),randPos(); particles.addParti

29、cle(particle); 当位图被加载了，我们将其赋给一个本地变量bitmap。然后实例化材质并传递位图数据给它。注意，这次你能在for循环之前而不是里面做这事，因为每个粒子使用相同的位图数据。我们也在循环前实例化Particles类，像前两个例子那样。在循环里，我们实例化粒子，添加它们到Particles实例。 当你发布文件，你应该看到1000个粒子，都有位图作为材质。注意位图是透明的，你能透过一个粒子看到后面的粒子。位图是24-bit PNG，球已经在图形编辑程序里被做成部分透明的。以下截图展示这个例子的视图窗口（viewport）的一部分： 例子：BitmapParticleMaterialImageExample MovieAssetParticleMaterial 第三个也是最后一个Papervision3D内置的粒子材质是MovieAssetParticleMaterial。这名字有点误导性，因为它暗示着这个材质只以影片剪辑资料（movie clip assets）作为源。然而，在Flex Builder和Flash