As a part of ongoing polish work I wanted to animate bugs' death somehow. Here's how it looked like recently:
It just disappears. Not very cool! I just got an idea how I want it to look like and I implemented it this weekend.
The effect actually consists of 4 parts:
1. A dying insect breaks down into a few parts.
2. There's a simple particle effect on top.
3. A stain is created underneath. It is animated, so it "spills" from the insect.
4. The dead parts attract other small insects, which feed on such carcasses.
The 4th part needs a little bit more work, but I'm quite satisfied how it all turned out.
Stains
The stain below a dying insect is barely visible, but I had a lot of fun putting it together.
Here's a breakdown of the stain effect:
1. A stain is actually a triangle fan. I start with a fan of 30 triangles and radius=1. The positioning and scaling are done in the vertex shader. Scale is animated, so the fan appears small and then grows a little (I colored triangles with different shades of grey, hope they're noticeable).
2. I needed to deform it somehow. So I made a simple, tileable 256x256 noise texture in GIMP (there's a checkbox in the noise rendering filter to make it tileable):
Then, every stain picks randomly one row of pixels from this image. I read the pixel's color value in the vertex shader (before applying scale) and deform the vertex' position using this value. It was pretty good, but I wanted the circle to deform gradually - so I multiply the noise color value by a displacement factor (which is animated from 0 to 1). So:
+
=
Note that there is no jagged edge between the first and last triangle (black and white ones). That's why I generated a tileable noise texture.
Shader code:
| //read pixel from noise texture. u_displacement_row is the row chosen for stain (random 0 -> 1) vec4 displacement = texture2D(u_noise, vec2(v_texCoords.x, u_displacement_row));
//color values are between 0 and 1, I want it to be between -1 and 1
float displ = (displacement.x - 0.5) * 2.0;
//deform the mesh. u_displacement_factor means how much I want to deform, 0 gives a regular circle
v_position.xy += (v_position.xy * (displ * u_displacement_factor));
|
3. Then I just added a texture in the fragment shader and voilà!