Jump to content
Site Stability Read more... ×
  • Advertisement
Sign in to follow this  

Fast 2D Metaball effect (like in fluid simulations)

This topic is 2861 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I'm looking for a fast way to render 2D metaballs in my test app.
I'm using Java/OpenGL/LWJGL/Slick2D and I know the basics of game programming, and want to learn more so I'm able to create this 'lava lamp' -effect.

I've found numerous techdemos on YouTube showing fluid simulations that are able to render thousands of metaballs with a decent frame rate. I don't know if the effect is called 'metaball' in fluid sims, but that's the effect I want - lots of blobby particles.

I'm not interested in learning how to make the water physics, but rather the rendering it. I've read that the effect might need things like shaders (btw, I have no idea what they are or how to create and use them), a render-to-Texture technique (RTT), Frame Buffer Object (FBO) etc.
Those are just terms I've heard but I have no idea how to create or use them.

Anyway, I'd like to be able to do something like this:
Liquid Demo

In that demo the fluid seems to be blurred with some post-processing effect, and after that certain colors are cut out to make the edge of the fluid sharp. Now, I'd like to do that in Java/OpenGL, but how?

I have read the tutorial found on Gamedev.net ( This ), but the algorithm used there is too slow for fluid simulations (and Alike). So I think shaders are the only way.

Here's an image to visualize my goals:

Any help is appreciated. I hope someone can guide me to right path.
A clear tutorial or an example source-code would help the most.

Share this post

Link to post
Share on other sites
Metaballs work in such a way as you have "some function" which defines some values in space (or in this case, in the plane). In the simplest case, this "function" is what looks like a blurred texture. One can interprete these values for example as distances to a center point (or a potential field, whatever).

Normally, it is assumed that there is a boundary surface where the "function" is zero, but that is only a convention, you can really take any arbitrary value. So, you could for example decide that the blob's boundary is where blue (since your texture is incidentially blue) has a value of 204 (which is 0.8 on a 8 bit texture).

The easiest solution to get something like what you want would thus be to first draw several quads with that "blurry texture" into some texture, using additive blending.

Then render a fullsreen quad using that texture as input with a shader that would contain something like:
[font="Courier New"]output_color.a = (sampled_texture.b >= 0.8) ? 1.0 : 0.0; [/font]

You can of course use an uniform instead of 0.8 to make it more tunable, and the code can be arbitrarily complex for the coloring and for antialiasing and whatnot, but the basic thing you do is compare the sampled value against some constant value. This constant value is your "distance" or "thickness".

Another way would be to create triangles with marching triangles (i.e. marching cubes in 2D) but why would one do that if it's not necessary.

The outline effect you want is similarly achieved, just compare against two known values, or against one value and a multiple of it, for a slightly different effect. Either set alpha to 1.0 or 0.0, depending on whether you're "in" or "out" altogether, and set one or the other color depending on whether you're "in" or "out" of the border.

Share this post

Link to post
Share on other sites
Thanks for a fast reply!
I understand the basic idea you're saying, but frankly I lack the basic knowledge of OpenGL language - How to create quads (quad polygons I suppose), and how to draw them into a texture (with some blending mode)? Does LWJGL give any classes for making this easier?
How to setup shaders, how to create and use them?

I assume that these are not difficult tasks for an experienced OpenGL programmer, but if I start to search the web and learn those things one by one, it might be time consuming. So I'm asking if someone could give me a sample source-code or a link to a very noob-friendly tutorial explaining these things.

Also, I was wondering if this stuff needs some kind of sub-rendering or off-screen rendering, I'm not sure about the correct term, but I don't want the shader to affect rest of the scene, just the blobs.
In Slick2D (which is based on LWJGL) the rendering of an image is so easy, and I don't know how complex it turns out to be once I do it in OpenGL.

I managed to get something working. I used the functions that Slick 2D has to offer:

It's far from perfect, and there are some major bugs in Slick's way of handling shaders. I'd like to know how this is done in OpenGL or with LWJGL.
Also, I wasn't able to switch blending mode to Additive, so the actual metaball effect is quite minimal.

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!