In games, particle effects like smoke or fire are drawn as image squares that always face torwards the camera. This looks fine in most cases, but the illusion is destroyed when these particles intersect with the environment and reveal a flat intersection line. Below you can see the flat intersection of a 'hard' smoke particle on the left, and the smooth intersection of a 'soft' smoke particle on the right.
To make it easier to see what's going on, here are the same particles without the smoke image:
To achieve this effect, I had to use the depth buffer, which we already store for use with post-processing (as explained in the post-processing video). Here is the depth buffer for this scene:
Now to soften the intersection line, we can adjust the opacity of the square based on how close it is to the surface behind it. To do this, we can subtract the particle's depth from the environment's depth. Below you can see the environment depth on the left, the particle depth in the middle, and the difference on the right.
Now that we have the difference between the particle depth and the background depth for each pixel, we can decide how transparent the pixel should be. I decided to make the opacity fall off linearly, as if the particle were a volumetric cube. I also offset the center of the particle so that the midpoint of the falloff lined up with the midpoint of the original hard particle.
Here is another example of a soft smoke particle intersecting a complex scene:
You might be wondering, "Why go to all this effort for particles in Overgrowth? It's not a war game full of explosions or an RPG full of magic spells!" That's true, but particles are still important for many natural effects. For example, drifting fog, sandstorm clouds, falling rain, impact dust, blood spray, and breath mist in cold weather.
Do you have any questions about how these soft particles work, or ideas about how we could improve them? Please let me know in the comments!
Track us on ModDB (visit our page)
Please join us here too:
Great news as always guys, and particles rock in everything.
Really appreciate the informative tech posts. I never knew exactly how this was done in games, but now I do. One problem that I see in games (even current ones such as MW2) is the problem with screen overdraw when you have several large sprites overlap each other. For example, when someone throws a smoke grenade in MW2, the FPS will drop considerably as the player gets closer to the smoke clouds.
Source engine games alleviate this by actually putting a grey overlay on the screen and not rendering any smoke sprites that are too close/too large on the screen. It's kind of a hacky method but it works decently enough.
Do you guys have a system to combat overdraw of alpha sprites when too many of them overlap and fill up the screen?
It's funny how video cards have advanced so much over the past decade allowing us to spit out more and more fancy polygons, but the problem with rendering overlapping alpha sprites is still a big bottleneck for video cards.
Agree 100%. It also stops really complex scenes involving both fog and smoke from looking good.
This is especially true when dealing with fire, for example being inside a building that is on fire, with hanging smoke, and billowing/pluming smoke from the source of the flames.
Also usually the transition between the rendering methods is readily apparent and greatly hurts the scene overall. The Mass Effect 2 intro sequence is probably one of the best I've seen, but to the keen eye it has problems.
Anyway, about overgrowth, what happens when the Sun or other dynamic light sources try to permeate either smoke or fog, is the effect as realistic and nice as what you did with the plants leaves, for example?
A real life example would be a scene at dusk of a village that has been "raised".
ooh breath mist and blood spray
Gettin' fancy
As said, very glad you wrote this. This was definitely an 'Ahhh' moment, for some reason I'd never even thought about how it was done! Thank you very much. :)
flat particles for the lulz?
That really does look way better, nice work!
О_о
I always love évery single post made by Overgrowth. I always learn something new. :)
I lôvé évèry pôst màdé by Ovèrgrôwth tèàm / Jèffr, tôô. ;-)
Very nice work. Can't wait to play a foggy level. This game is looking better and better every update :).
Great stuff. I do wander how heavy the engine will become when it's finished.
I noticed when you look on the steps with the smoke, it reaches to the edge of the "inner" parts of the steps, but only closer to the rabbit on the "outer" parts. I can see this is because of the fact that its a 2d sprite that faces the camera.
Do you have any plans to change this to create a more 'natural' feel? or are trying to keep requirements as low as possible?
no it's not optical illusion. because the face is not straight angled with the stairs, the smoke in the inner part of the stairs are relatively closer. that is because of the billboard effect. for getting better effects you should make multiple faces that are directed in different directions, and they would give a better effect of volumetric smoke.
Wow, i didn't how the soft particles actually worked, thanks for the simple explanation. I never thought the technique for rendering them would be that simple. I love how it exploits the fact that particles and the depth buffer are always parallel to each other.
@revengous: I think this is actually just an optical illusion, here's a great example of it: Michaelbach.de
So I get it right you offset the billboard towards the camera? Can get you into clipping troubles with certain situations but I think from the type of maps it should be working. Otherwise a spherical solution would remove these clipping problems. Similar to deferred rendering light volumes just for billboards.
holy **** now this is awesome
Sexy!
Particles are a must no matter what game you're making. Really good job on yours, me likey. :)
badass! keep on rocking guys!
You forgot particles are very important for the atmosphere of a game.
it makes the space "tighter" so it makes you feel the enviorment is real, in case of moving particles you're always sourounded by