Does anyone know how the particles behave in the following picture?

enter image description here

Let me explain,before the particles join they seem to be just simple textures of blood drops with a black border around them ,when they start to overlap the border disappears giving the illusion that its all one single blood drop.Is this some kind of shader?


This effect can be achieved by drawing the blood in two layers. The bottom layer is the black border and the top layer is the red blood. Note that actual "layers" are not required, as long as the drops can draw in two phases, all black, followed by all red.

Each droplet draws its shape as a black sprite. Then after all black shapes are drawn, they each draw a red shape which is smaller around the edges by 1-2 pixels. If the shapes are circles, then this means scaling by 1-2 pixels in width and height. For non-circular shapes, you can just have two sprites, one smaller than the other. This can be achieved via the "Inset" command in GIMP or Photoshop.

This achieves the desired effect because every part of the black shape is covered up by the red shapes, except around the edges where the red shapes aren't quite big enough. In interior regions where there are many blood particles, the black is hidden entirely.

No shaders are necessary, although they would be if you want it to be lit properly as if the blood was 3 dimensional.

  • \$\begingroup\$ This sounds easy to do and have much better performance than using shaders with edge detection as wondra suggested. \$\endgroup\$ – SteveL Jul 21 '14 at 21:29
  • \$\begingroup\$ The problem with this technique is it requires drawing 2x as many sprites, which can lead to problems with overdraw if you have a very large number of particles. For a smaller numbers of particles, it is faster than adding another render pass, and it is certainly easier to code. \$\endgroup\$ – user41442 Jul 21 '14 at 21:39
  • \$\begingroup\$ for something like 100-200 particles on a mobile device ,this is way way more faster than rendering to texture , applying a relative complex shader(for a mobile gpu) on it and then rendering the texture back to screen. \$\endgroup\$ – SteveL Jul 21 '14 at 21:43

If you look closer - it is not border of(each) blood drops - it is a border of all blood-red area. And I think the border was added actually after rendering blood to look cartoonish. This could be post processing effect just as well as shader. It should not be difficult to implement edge-detection algorithm (plus you know the color you are looking for).


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.