Particle Emitter render order

[Peter_Bowater]

Hello People!

First post in here, so be kind, please

I’ve been playing with BabylonJS for about 2 months on and off now, and really like it, the playground and docs make it WAY more accessible than other WebGL tools… so hats off to the makers!

I’ve been working on a scene which imports a GLB, I then attach particle emitters to some of the meshes, the scene is animated, and the emitters produce some lovely smoke trails.

Now, due to the nature of what I’m doing, I can’t post a direct link, however I have hacked about one of the playground examples to show the problem I am running up against:

https://www.babylonjs-playground.com/#XVI98R#4

Note the textures etc I am using are NOT what I use elsewhere, they look much better, this is just for debugging!

If you rotate the scene around, you will be able to see the linear emitter in the centre of the scene is passing through the drawn smoke ring in red. If you rotate around a bit, you can then also see that despite this, the red smoke is rendering over the top of the white smoke regardless of whether it is in front or behind the white smoke in space.

I have been through the docs and tried to find things in the playground, as well as google of course, but I am drawing a blank on this. I have tried playing with renderGroup (I think it was) with little improvement.

Interestingly, if I change the order I create the emitters in the code, then the priority also changes.

So, any ideas people?

Thanks very much,

Peter.

[bghgary]

Welcome to the forum!

I’m not super familiar with this, but I’m told that particle emitters don’t write depth and thus won’t do what you want. We do, however, have a solid particle system that should do what you want: Solid Particle System - Babylon.js Documentation

[Peter_Bowater]

Thanks very much @bghgary, I will have a look, looks promising!

Time to do some more reading…

Peter.

[Peter_Bowater]

OK, spent a LOAD of time playing with SPS, have been making some progress, so thanks for the pointers so far!

As above, I have a GLB, which has animation in it, and I am attempting to get some decent looking smoke trails working with SPS.

I’m on a 2012 MacBook Air (i7, 8GB), and I suspect that the machine specs may be making this appear worse than it is, but equally I am sure that once on the web, this will be viewed by people with even lesser machines.

As you can see, the smoke is appearing ‘dotty’, especially immediately after the moving point:

This is being produced in ‘billboard’ mode, using a Plane mesh.

I have also tried to create a cylinder rather than a plane, and switched off billboard mode, and then rotating it to match the movement of the point, but getting a bit too wrapped up in quaternions and the like, essentially making my head hurt, a lot, with no success whatsoever -the cylinder just doesn’t seem to rotate.

I tried making the Plane long and thin, but obviously this doesn’t then rotate when the point goes vertical, making the smoke very wide…

I have done a load of searching, and not really come across this as an example anywhere, so I am wondering if this has ever been done?

I have a couple of ideas, but feel that maybe I am missing something more fundamental, so thought I would check in with the experts to see what’s going on

First idea is perhaps having another SPS mesh, which I steal particles from in the updateParticles function, and position them so they fill up the gaps in the smoke stream. This feels like it would be expensive, but may be worth a shot.

Second idea is to play more with rotation of the particles, which means more brain pain, but will do it if needs be.

So, any further pointers from anyone?

I think I may be able to get a playground example up, but will take a little while as I need to strip out any IP in it, hopefully will post something soon.

Thanks very much,

Peter

[Peter_Bowater]

OK, now with a playground example:

https://playground.babylonjs.com/#FL4BQE#5

Credit for some of this code must go to Jerome, and this demo: BJS Demo Trailing Particles

Really helped me wrap my head around things

Scenes will in future have up to maybe six smoke trails, so need this to be performant.

Thanks!

Peter.

[bghgary]

Ping @Deltakosh

[jerome]

Is this better for you with the depthSort enabled ?
https://playground.babylonjs.com/#FL4BQE#6

[Peter_Bowater]

Thanks @jerome, it is a bit better -thanks again for your demos of SPS, they really helped me get where I am today with this.

I will be adding a random rotation to the smoke particles,with a hope to make the streaking in the trail less apparent, should help

I am still getting quite ‘dotty’ smoke, though it may be mostly my machine, and will be playing some more today, hopefully with some results, or maybe an implosion of my head

Thanks again,

Peter.

[Peter_Bowater]

OK, some more playing today, unfortunately not much progress if I am totally honest, I have managed to optimise things a little, and tweaked code here and there, but not got where I wanted to be.

I have come to the conclusion that using a Plane mesh for the particle along with billboard mode is just never going to work, so I have been experimenting more with 3 particles.

Now, the reason for going with SPS rather than the regular particles with emitters and the like, was to enable depth sorting, to avoid situations like this:

Note, I have used a flat-ish cylinder here, just for demo purposes.

The problem here, is that the white smoke is actually travelling through the centre of the two spirals of smoke. I have enableDepthSort set to true, so thought I wouldn’t be coming up against this issue…

Only thing I can think of is that I am using three separate SPSs, one white, one blue and one red, is this likely to be causing the problem?

Do I need to run just one SPS and then pick out the particles from that, assign their colours and positions etc?

Thanks everyone

Peter.

[Peter_Bowater]

So in short, after playing this morning with completely refactoring the code, again, yes, you need to run the different smoke trails in the same SPS in order for the depth sorting to work properly. This makes sense if you think about it, you can easily draw the conclusion that the depth sorting is done within the SPS mesh, and not in the world.

As you can see here, the blue smoke appears alternately behind and in from of the straight smoke trails going through the middle - I would call that a huge result. the red spiral is doing the same but harder to see red on red…

Now I just need to make it look more like smoke!

Getting there, not counting the hours I have in it

Peter

[Deltakosh]

Looks really cool!

[Peter_Bowater]

OK, and smokified:

I am using a Plane to do the smoke particles, this is certainly the most reliable way to do it at the moment. Overall I am very pleased with the result, looks good and quite performant on my old Mac, and smooth as butter on my tablet and phone.

However, I have come across some oddities, to do with rotation of the particles.

In initParticles() I set the particle rotation randomly using:

cur.rotation.z = Math.random()*Math.PI*2;

Then in updateParticles() I update the particle rotation, as I do with position and size, to the p.idx+1:

prevParticle = sps.particles[p.idx + 1];
p.position.copyFrom(prevParticle.position);
p.rotation.z = prevParticle.rotation.z;

Without the final line here I end up with the smoke particles appearing to rotate in the trail (in actual fact, they are moving down the trail, just not updating the rotation, so they just appear to be rotating). With the final line, the particle rotation works, up to a point…

I have logged the particle rotation to console and using the following (warning, doing this in updateParticles() is VERY expensive, so I am just doing it for one particle at this point):

if(p.idx ==100){ // only do this for particle #100
  console.log('before: ' + p.rotation.z)
  console.log('previous: ' + prevParticle.rotation.z)
}
p.rotation.z = prevParticle.rotation.z;
if(p.idx ==100){
  console.log('after: ' + p.rotation.z);
}

The output I get for the first few times around the block is as you would expect:

But after a while you can see a transition to a fixed value:

Clearly this will lead to ‘stripey’ smoke as the PNG shape lines through, it would be great if we can avoid it, I’m just not sure where the fixed value is coming from… almost feels like a bug, but appreciate I am very much the newbie round here, so won’t gesticulate in that direction just yet It may even just be me falling into a JavaScript trap that I don’t know about yet.

Any ideas?

Thanks very much!

Peter

[Peter_Bowater]

Thanks @Deltakosh! Yes, getting there for sure!

Need some medication after all this!

[Peter_Bowater]

P.s. when I am allowed to I will be very pleased to share the live link to this!

[Deltakosh]

Can’t wait to see it !!

[Peter_Bowater]

Aha, found the issue with rotation, in updateParticles(), for the first particle in the trail I wasn’t setting a rotation, so was being picked up from, I think, the next trail’s last particle, then would get passed down the trail until all were the same…

Now I set it, the smoke looks even better, and MUCH less stripey!

I’d still like to improve the smoke a little more, for lower performance devices, but that is likely to wait for a future iteration.

The improvement is most noticeable on the straight, not spiralling smoke, trail, before:

…and after:

Again, I am not running at 60fps here, just a creaky old Mac, so the dottiness is strong…

Peter.

[Peter_Bowater]

So here it is, went live this afternoon:

Displays | RAF Live

Some of you may have guessed what it was for from my PGs/screenshots!

Very pleased with the final outcome, runs smooth enough on my old mac with integrated graphics, any other device I have tried it on it runs brilliantly, with lovely continuous trails.

Final tweaks were to improve smoke a little more by using a rectangular Plane for the smoke, in effect creating an elliptical smoke particle. This, combined with the random particle rotation has created very, very nice smoke, with a good level of ‘bobbliness’ along its length.

Change through the manoeuvres using the arrows, ‘Tornado’ is my favourite one, for obvious reasons, but ‘Vixen Break’ has a good impact too. We hope to get the resources to do all of the manoeuvres, but that may take some time

Any questions do go ahead, equally if you spot anything where I am being stupid, also do go ahead

Very pleased to get this done, thanks to everyone on here that pointed me in the right direction, been a massive help, so too has the proper documentation and the availability of the playground, both great resources!

Cheers,

Peter.

[Deltakosh]

WOOOT! This is so cool!

I agree that Tornado is quite impressive!

We are proud to have been able to help you!