7
\$\begingroup\$

I'm looking for a way to reproduce the effect I've tried to sketch in the image below with OpenGL ES 2.0.

The idea is to let a drop of color fall over a cube which get filled with a kind of 'pixelated' effect.

Could you figure out any feasible solution to achieve it?

Thanks for any hint!

DAN

enter image description here

* EDIT WITH SOLUTION *

Achieving good looking results with a procedural texture generated in real-time is quite hard. Here's a few screenshots taken from an implementation based on Nathan's idea, where the mask has been created by hand. Cheers!

enter image description here

\$\endgroup\$
3
  • \$\begingroup\$ Does the droplet always fall in a consistent place, or does the splat have to happen dynamically depending on where the paintdrop lands? Can multiple drops affect the same cube, and if so are they always the same colour, or potentially different? \$\endgroup\$
    – DMGregory ♦
    Commented Apr 9, 2014 at 19:09
  • \$\begingroup\$ Following @DMGregory's questions, does the pattern progress slowly as a result of several fallen drops? Could the transition progress only part way, and then halt? \$\endgroup\$
    – Seth Battin
    Commented Apr 9, 2014 at 20:51
  • \$\begingroup\$ only one drop; in order to reduce the complexity the paintdrop can always land in the same position; no several fallen drops, only one at a time; once the transition has started it never halts \$\endgroup\$
    – DAN
    Commented Apr 10, 2014 at 12:53

1 Answer 1

Reset to default
7
\$\begingroup\$

It's easy to produce an effect like this in a pixel shader, using threshold animation. The idea is that you have a monochrome texture and apply a threshold value to it; wherever the texture is lower than the threshold, the material is colored, and where the texture is higher than the threshold the material is blank. You animate the threshold value from 0 to 1 (or some other stopping value) over time, which causes the colored area to grow.

The pattern in the texture controls what the growth looks like. You'd want a radial gradient that goes from black at the point where the drop hits, toward white in farther away areas. Then the color would grow out of the hit point in all directions. Add some noise to the texture and you can make the growth lumpy, so that it doesn't just form a perfect circle. If the texture is low-resolution and you use point sampling, you'll get the pixellated effect.

You can also generate the texture procedurally in real-time if desired, for instance by combining a radial gradient computed from the runtime drop hit point with a section of a pre-generated noise texture. That would allow you to have drops hit at different points without needing different textures.

\$\endgroup\$
2
  • 1
    \$\begingroup\$ This actually a ridiculously simple and clever solution and should probably be accepted as the answer. If there is something you don't understand about it, then you should ask because otherwise I would consider this the "best" answer. \$\endgroup\$
    – PatrickB
    Commented Apr 10, 2014 at 21:11
  • \$\begingroup\$ hi natahan, hi patrickB, yes that's a great solution and i've marked it as the answer. As I'm new to shaders and OpenGL in general, I'm trying to understand how to translate it into implementation and then come back with some code to discuss about, but the theory seems quite clear. Do you have any reference about the concept of threshold animation with a radial gradient? thx, dan \$\endgroup\$
    – DAN
    Commented Apr 11, 2014 at 8:19

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .