The Secret Pie: Creating insect death animations

RSS Feed

Twitter

Creating insect death animations

wtorek, 17 czerwca 2014 10:41 Autor: Thotep

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:

12345678

//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à!

Linki do tego posta

4 Response to "Creating insect death animations"

Javier Eduardo Ortiz says:

17 czerwca 2014 11:38
Ten komentarz został usunięty przez autora.

Javis says:

17 czerwca 2014 11:43

Very smart! And a beautiful result!!

Seth Frolich says:

18 czerwca 2014 18:08

Tell me; Why didn't you just calculate the final offset and then lerp to that final value over time?

Thotep says:

20 czerwca 2014 00:08

Seth Frolich --> well, I'd have to create separate meshes for every stain. Using a shader I can reuse the same triangle fan for hundreds of stains.