Posted by: pixelero | March 4, 2008

Metaballs, actionscript 3.0

My simple and fast versio of metaballs, based more on graphics and image manipulation than 3D-maths:

We use precounted bitmap-images such as this:

Here are the channels separated,
in RGB channels we have a rendered image of a sphere,
Alpha channel is generated by the distance to image’s center

We draw some of these using bitmapData.draw:

That looks very sci-fi already,
but the final touch is to still make some more adjusting on the alpha-channel,
now looking like a X-ray shot:

We add contrast (16x)  to alpha and come up with this:

… and … that’s all, there we have it, the metaball -image – click for demo* :


… and this is just the principle. It would be easy to add shadows, Z-dimension, more advanced interactivity, maybe visual effects such as glows, some kinna reflections, displacementMapFilter etc. to it…

(* fix: try Firefox, if demo looks like a thumbnail/peephole in MS-Explorer, I’ll fix that later …

Edit 12.12 2008: Check out also the pb-version of blobs for Flash Player 10.


  1. Interesting implementation 🙂 This shadow effect looks especial cool 🙂

  2. Hi is that actually real code with AS, or just an animation?

  3. very interesting approach. have u ever worked with 3d imp surfaces? i was wondering, cos if u have i would very much liked to have a comment from you about my crazy thoughtts regarding meatballs..

  4. Wonderwhy-er: Thanks

    Saddist: it’s the code for the whole demo, metaballs as objects in it, written with FlashDevelop.

    Maantas: This is an easy solution for 2D. I’ve done like for instance some testing with metaballs by implicit surfaces with an early release of pixel bender, couldn’t get it working properly then – in full 3D – maybe some day I’ll give it a second thought.
    I’ll take a look at your blog if I come up with something …

  5. hey thanks. i like the idea behind your solution “cheating” 🙂 just exactly what cg is all about 🙂
    je if u ever look in to marching cubes algorithms, have a look at my blog to 🙂

  6. […] […]

  7. […] […]

  8. This works, as one can see, although, the metaballs edges aren’t… continous. This is because you use a function that isn’t continous in it’s derivative form. f(x,y) = 1 – (x*x + y*y). f'(x,y) = – 2x – 2y.

    A good tip is to instead use a function which is continous in it’s derivative form. For example: f(x,y) = (1 – (x*x + y*y) / R*R) ^ 3 – c where R is the isosurface’ interaction limit and c is the shrinkwrap amount. Further one should use a constant offset value of 1/2 in order to shrinkwrap the isosurface optimally around the objects. This way your metaballs will look much smoother.

    Other than that, I think this example is a very straightforward way to emulate isosurfaces!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: