Categories
General

Papervision “billboard” particles

Following on from yesterday’s interactive Line3D, I’ve now also implemented a few new features in Papervision’s particle capabilities.

We now have proper billboarding with a new particle material – MovieAssetParticleMaterial, and I’ve also implemented proper culling and interactivity for particles.

And these changes have been committed to both the Effects branch and Great White.

Here’s a quick demo to show how the graphical particles look. You can also see the interactivity – mouse over the particles to move them.

[kml_flashembed movie=”/wp-content/uploads/manual/2008/movieassetparticletestgw.swf” width=”480″ height=”360″ FVERSION=”9″ QUALITY=”high” /]

These are very much early versions of these so please let me know how you get along…

And here’s the source, note that you’ll need a library symbol with the linkage ID “Sphere” for it to work.


package
{

	import org.papervision3d.view.BasicView;

	import flash.events.Event;

	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.core.geom.Particles;
	import org.papervision3d.core.geom.renderables.Particle;
	import org.papervision3d.materials.special.MovieAssetParticleMaterial;

	/**
	 * @author Seb Lee-Delisle
	 */
	public class MovieAssetParticleTest extends BasicView
	{
		public var particleContainer:DisplayObject3D;
		private var particles : Array;

		public function MovieAssetParticleTest()
		{
			super(stage.stageWidth, stage.stageHeight, false, true);
			init();


		}

		private function init():void
		{

			particleContainer = new DisplayObject3D("Particle Container");
			particles = new Array();

			for(var i:int = 0; i<400; i++)
			{

				var spm:MovieAssetParticleMaterial = new MovieAssetParticleMaterial("Sphere",true);
				spm.interactive = true;
				spm.smooth = true;

				var particles3D:Particles = new Particles("ParticleContainer#"+i);
				var p:Particle = new Particle(spm,2,600,0,0);

				particles3D.addParticle(p);

				particles3D.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, particleOver);

				particles3D.rotationY = Math.random()*360;
				particles3D.rotationZ = Math.random()*180;


				particles3D.extra = {spin: 0};

				particleContainer.addChild(particles3D);
				particles.push(particles3D);

			}

			scene.addChild(particleContainer);

			singleRender();

			addEventListener(Event.ENTER_FRAME, frameLoop);
		}




		private function particleOver(e : InteractiveScene3DEvent) : void
		{
			e.displayObject3D.extra["spin"] = 10;

		}

		function frameLoop(e:Event): void
		{

			particleContainer.rotationY+=((stage.stageWidth/2)-mouseX)/200;
			particleContainer.rotationX+=((stage.stageHeight/2)-mouseY)/200;
			var drag:Number = 0.99;

			for(var i:int=0; i0.1)
				{
					p.extra["spin"]*=drag;
					p.rotationY+=spin;

				}
				else
				{
					p.extra["spin"] = 0;
				}


			}


			singleRender();


		}
	}
}

28 replies on “Papervision “billboard” particles”

thank you very much for this.

however i cant find the billboarding code itself. i guess it is in the singlerender() function, but where is that?
thanks a lot!

Hi Seb, good job old bean. You might have mentioned the animated:Boolean wasn’t working yet. 😀

Can’t wait for that to be up 🙂

This looks great! I’d written a simple (and quite lightweight) standalone AS3 3D Sprite engine (and particle system) and I just ported a demo to papervision using this billboard system and the performance is identical (even with 5000 particles) – which I guess can be interpreted as the papervision billboard system having little to no overheads. I’ll be dropping my 3D sprites and using papervision for that as well from now on! The comparison can be seen at //www.memo.tv/flies_p3d

But before I go I have a couple of questions 😛
1. From what I understand to have a billboard you need to create a Particle with material MovieAssetParticleMaterial, add it to a Particles object, and add that to the scene. If we want just one billboard in the scene, do we have to go through the particles->particle route, or is there (will there be) a way of adding it to the scene directly?

2. In your code there is a Particles object for every Particle, I guess this is for interactivity? Is there any (or minimal) overhead to doing this as opposed to having all particles in a single Particles object?

3. will there be rotation at any point (around the cameraZ ? 😉

4. (slightly off-topic) I’m finding it very hard to find documentation on papervision3d 2.0. The tutorials out there are usually quite basic covering the fundamentals (setting up viewports, scenes etc.) with a few other blogs offering code examples (such as yours) which go into more detail. Is there any where to find a full list of classes with brief description of what they do etc? The API docs on the official wiki seem quite out of date (not 2.0) and at the moment I’m having to go through all the folders reading the source to figure out what functionality there is!

cheers,

Hey memo, great work there! to answer your questions :

1. I currently have a Billboard object that I’m working on that simplifies this process. The billboard object will be a DisplayObject3D so you can just add them to the scene much more easily.

2. The main reason I’m adding one Particles object per Particle is because it’s much easier to do offset rotations that way! So it’s a bit of a hack really. I expect you’ll get marginally better performance with one Particles object for all the particles but there doesn’t seem to be too much of an overhead on the DO3D object.

3. Of course that’s a great idea and a fairly minimum requirement. It’s high on my list. I have some much more exciting improvements on my list too 🙂 But for now I was just keen to get something out there.

4. Yeah I’ve actually made this point to the PV3D team too, but without someone to actually take the time to make this documentation, I’m not sure it’s going to happen. I’ll bring it up with the team again and see if there are any plans.

cheers!

Seb

Hi Seb, thats great news! A standard DisplayObject3D Billboard would be perfect! I’ve got a bunch of classes which I am porting now all to papervision (they deal with particle systems, physical nodes, springs, attraction etc. – not very complex), but am a bit stuck at the whole billboard vs. geometry stage. I would like to setup my classes so they can use 3D geometry as particles OR billboards but at the moment it is a bit tricky to set them up to be that flexible (cos of different class hierarchy), but once the billboard is a simple DisplayObject3D it should be a piece of cake! Any ideas when you’ll have that ready? 😛

Regarding the last point, I remember vaguely reading somewhere of an app that scans folders of source files and creates a basic API documentation (with Class hierarchy, list of properties,methods etc.) – am I dreaming or does such a thing exist? I”ve had no luck finding one on Google…

Hey guys,

yeah just looking at this now… there’s been some other issues I’ve been looking at in PV3D so I’m a little behind on my list.

And I’ve also been talking to Carlos and Ralph about the best way to implement it.

In the meantime, I would extend Particles.as and send it a single MovieClip you can use for a texture.

And I’ll continue to work on a more optimised version here.

cheers!

Seb

Hi, this is REALLY cool stuff. I used the example to create my own cool blurry particle effect demo, the code is fast and smooth.

I cant find documentation, so I do have a few questions:

1. I want to use MovieAssetParticleMaterial to put my little orbs library items into orbit. However I am using Flex Builder so my code is not in a swf (and I don’t have a library) I am able to grab assets from a swf and embed them as a class (e.g. [Embed(source=”assets.swf”, symbol=”Orb”)].) I can probably get into the guts of MovieAssetParticleMaterial and create a function to load my embedded library class in lieu of an actual library asset with this code. Is there another way?

2. There was a bug in the BitmapFileMaterial class where you cannot load cross-domain content because no LoaderContext is provided. Looking into the class I can edit and fix the code so that if I get a Security error I can catch and try again after setting LoaderContext parameter. I cant just extend and override because the getNextBitmap function is private and the loader is instantiated as a local variable in the function. The following will fix the problem:
Replace
—
bitmapLoader.load( request );
—
with all of this
—
try
{
// Load bitmap
bitmapLoader.load( request );
}
catch (error:SecurityError)
{
bitmapLoader.load( request, new LoaderContext(true) );
}
—

Cool stuff, thanks

Is there a known issue with adding event listeners to (particles)’s with particle’s who use ParticleMaterial? I don’t seem to receive my InteractiveScene3DEvent’s.

Thankyou!

Hi Joe,

that’s what this example is using, so I’m pretty sure that this should work. Are you still having this problem?

Seb

I am curious about this because I’ve spent the past couple of days trying to load a 2d particle effect into a movieclip material and map it to a plane. Do any of the particle materials allow for me to do this? Or are the particles generated by PV3D? Or are my eyes decieving me?

@cyberfish – any 2d particle system will allow you to do that – then use the movieclip containing the particles as a movieclip material with animation set to true. Try the simple particle system from my sessions.

@Chris Anderson – hey chris, this isn’t actually that straightforward, you could maybe see if you could find a formula for making a geodesic sphere, otherwise you could try to make the particles repel each other, then they’ll space themselves out automatically. It’s not that easy though! good luck 🙂

hey seb, how would i pass information to each of the sphere objects when i create them. for example, in my sphere i’ve got a text field i want to populate based on an array. how can i access the movieclip texture for each object?

Hi Luke,

at the moment particles only work with Bitmaps. So when you’re sending the particle your MovieClip, it just gets converted to a Bitmap at that point.

For now, the workaround is to :

1) set the createUnique flag in the bitmap
2) create your MovieClip with the text field
3) populate the text in your MovieClip
4) manually draw the MovieClip back into your particle using code a bit like this :

var spriteRect:Rectangle = movie.getBounds(movie);
var m : Matrix = new Matrix();
m.tx = spriteRect.left;
m.ty = spriteRect.top;
particlemat.bitmap.draw(movieClip, m);

Sorry this is a little fiddly – I’ll be doing some more work on particles shortly to make this easier.

cheers!

Seb

OK will check that out. I’m pretty new to Papervision, so this might be a dumb question, but this MovieAssetParticleMaterial is the only flat/billboard type material that exists currently in Papervision, correct? Basically I’m looking for something like Blitz’s Display Object 2d, that always looks at the camera, but is implemented in Great White (theirs only works on version 1.7 I believe). Or am I going about this the wrong way?

Hi Luke, yes this is currently the only way to do this. Oh and you can use the BitmapParticleMaterial too. They all need a little tidying up, and I’ll be looking at that soon.

Seb

hi Seb, first I’d like to congrate you for your great work… Is there a way for this code to work without library, I mean I’d like to create a Movie with code and then push it in parameter but I don’t know how to write it ?? I try to make a new Movie with the name param: “sphere” but it doesnt work I saw in your MovieAssetParticleMaterial class that you use “getDefinitionByName” so maybe we can’t do it without library but I dont use flash IDE 🙂 how can I do ?

Comments are closed.