Detect particle collision with ground


I just built a rain effect for my game world like this, based on code I found on html5gamedevs (thanks @Wingnut):

Babylon.js Playground (please ignore the particle texture, I have a proper rain texture in my own project).

I like the rain as it is, but it would be cool to have an effect for when the rain particles hit the ground, instead of them just falling through. Is there a way to check for collision with the ground and to switch out the particle texture to a “splash”? I am looking for something like this: YouTube

My ground is a complex mesh and I have not implemented any client-side collision checking yet (on purpose). Any ideas on how to go about this?

Thanks in advance!

Hiya E! Hey, your rain looks real good! It has a nice feel.

I once tried some ground impacts… using a particle effects demo that Deltakosh once created. (linesMesh rain, particles-based splash-rings)

I think the splash rings particle system… needs a customStartPosition and/or customUpdate functions (both easily installed)… to make the ring particles lay flat on the ground. Right now they are “billboarding”… attempting to face the camera all the time.

Jerome built something here: … another rain demo… with enough code to crush a pack mule.

And we got a new “particleHelper” thing. There is a pre-made-but-customizable rain effect… built in. Let’s look at it.

Not much code, eh?

Real impacts/collision-testing… it will be performance-heavy during heavy rainfalls. I know the SolidParticleSystem has basic collision-testing available, and it shows pretty good performance numbers.

I don’t think standard particleSystems do real collision testing, yet, or ever. Particles are not real mesh… they are a… well hell, I don’t know what they are. :slight_smile: (a single standard particleSystem is like a single highly-subdivided ground-grid, where each grid-cell (particle) uses its own position/orientation. A grid, exploded-into sub-quads. quad = 2 triangular faces. How’s that?) :slight_smile:

Ok, I just thought I’d show you what I have in my pocket. :slight_smile: I hope I’ve been helpful. If ya need help getting the ground rings to lay flatter, just holler (quietly). Might be easy, might be miserable. :slight_smile:

And, stay tuned for more/wiser comments/ideas.

Thanks for the suggestions so far. I like the first example especially, but unfortunately it has no collision checking (I tried applying it to a heightmap-based ground). Unfortunately I really need the collision checking because I have a complex terrain.

I did my own experiment with raycasting and sprites, but it’s kind of buggy (sprites are not deleted somehow?) and low performance (it runs OK with just the plane, but drops to 1fps with a heightmap):

I also have an idea which I can’t try right now becaus I gotta run, but maybe you could use decals for this? Just put them in random places on the ground. Is there a way to animate them maybe? I’ll try to put together a proof of concept.

if your terrain is an instance of a GroundMesh class (like the grounds created from height maps), then use the method .getHeightAtCoordinates(x, z) instead of sending a ray per drop (too much CPU intensive).

Unfortunately it isn’t. I’m just using the heightmap as a placeholder. Like I said, it’s a complex mesh, and I need it to be one because I have a terrain with cliffs, overhangs etc. etc.

OK, this is my feeble attempt at a decal-based solution:

But like my previous attempts, it’s really slow.

Is there a way to just take coordinates and normals of random faces that are near the the camera (it doesn’t have to be in an exact cylinder, just roughly)? Then you could put a decal or sprite there.

I thought about caching the positions and normals for the decals (maybe 10 or 20) and then reusing them, but that is also no good because in my game you can walk around and that the camera follows the player, meaning that as soon as the player/camera position changes, everything has to be recalculated, resulting in a framerate drop.

If there is no easy and performant solution in babylon itself, I think I’m just going to preprocess my ground mesh with a blender script and extract random faces with their normals which the client can then download as a JSON.

to get the normals of any mesh, just use facetData : Use Facet Data - Babylon.js Documentation

This is exactly what I need (especially mesh partitioning)! How did I miss this? This solves a lot my pending issues at the same time. Not just rain splashes, but also vegetation (and LODing thereof) etc.

I’ll go a little bit crazy with this and then report back.

1 Like