Show HN: Metaballs

[slavik81]

From the grandparent article:

> Well, for 40 bouncing circles, on a 700x500 grid, that would be on the order of 14 million operations. If we want to have a nice smooth 60fps animation, that would be 840 million operations per second. JavaScript engines may be fast nowadays, but not that fast.

The math is super-cool, and efficiency is important for finding isosurfaces in higher dimensions, but those aren't really scary numbers for normal programs. Just tinting the screen at 2880x1800 is ~2 million operations per frame. GPUs can handle it.

A simple way to render is to draw a quad for the metaball, using the metaball kernel function in the fragment shader. Use additive blending while rendering to a texture for the first pass, then render the texture to screen with thresholding for the second pass. The end result is per-pixel sampling of the isosurface.

Admittedly, it's kind of a brute-force solution, but even the integrated GPU on my laptop can render thousands of metaballs like that at HiDPI resolutions.

(Specifically, I use a Gaussian kernel for my metaballs. It requires exp, which is more expensive computationally than a few multiplies. I render 1500 of them at 2880x1671 at 5ms per frame on an Intel Iris Pro [Haswell].)

Though, the work scales with fragment count, so a few large metaballs may be as costly many smaller ones. For large numbers of metaballs, you probably also want to use instancing so you'd need OpenGL ES 3.0 / WebGL 2.0 which are fairly recent.

But 40 metaballs with a simple kernel at 700x500? That's easy for a GPU.

[skeoh]

I believe 2D canvas rendering is performed on the CPU rather than the GPU.

[mar77i]

I remember what I did to optimize my own metaballs: after rendering all different sizes that were used on their own screen at (0, 0), I would only add the values at relative positions (signs removed) of their respective preset map.

It does take some memory, but n operations per pixel for each frame for n balls plus the overhead of transforming into actual color was still pretty great. Instead of saying "GPU can do this", I'd rather ask, hey, can we do even better than that?

[femto113]

Feels more organic to me if the original metaball gets smaller as the other one moves out (like its stealing material). Haven't worked out the correct math but a quick PoC is here:

https://codepen.io/femto113/pen/MEZava

[fergyfresh]

That is weirdly satisfying to watch...

[XaspR8d]

Keeping 100% accurate constant area would require a pretty insane closed form equation. Even ignoring the amount of area added by the stretched portions.

[winkerVSbecks]

That is awesome!

[mikewhy]

Reminds me of this demo from years ago: https://tympanus.net/Development/CreativeGooeyEffects/menu.h...

Article for more detail: https://tympanus.net/codrops/2015/03/10/creative-gooey-effec...

[andai]

Oh wow, it's a gaussian blur and basically a threshold function (boosting the contrast) using SVG filters! I didn't know this was possible. Very clever!

[NKCSS]

The select example looks amazing.

[dmschaab]

Interesting approach! Coincidentally, I published an article [0] on this very topic last month. It uses sampling, so it's close to the approach mentioned in the Jamie Wong article you (and I) linked to, but with a path-tracing step capable of producing an SVG path definition. I'd be interested to see how the performance of these two methods stack up to each other for a given quality level.

[0] https://eightsquaredsoftware.com/articles/metaball.html

[robocat]

References https://codepen.io/keithclark/pen/sEbFz which does metaballs using pure CSS (using a combination of a contrast filter with a blur filter).

Beautiful article.

[winkerVSbecks]

this is so well done! I'm going to have to try out real metaballs now.

[pault]

FYI the demos are impossible to use on an iOS device since trying to drag the time slider causes the browser back animation to start.

[rosstex]

Whoa, this is amazing too!

[panic]

In https://codepen.io/winkerVSbecks/pen/NazWxg, there's a "hitch" as the discs touch due to a first-derivative discontinuity. Here's a version which extrapolates the u1 and u2 variables, making the transition much smoother: https://codepen.io/panic_/pen/BwvjmK.

[zaroth]

This is just calling out for a propagation wave effect through the parent ball at the moment of separation.

[ehsankia]

Much better. There's definitely many improvements that could be done, but that was the main one. The other big one is how the bigger disc doesn't change size.

The approximation OP does is a good start but still far from being real metaballs.

[bpicolo]

That bubble slider is super cute. https://codepen.io/chrisgannon/pen/GZNgLw

[thoughtpalette]

I'm extremely impressed with the implementation. I'm not sure what I would say if presented with a design like this slider for web. Wouldn't have imagined it would work this beautifully as well.

Amazing showcase.

[microcolonel]

Good to see you on the front page, Varun. :- )

It's possible to do this somewhat efficiently beyond two balls with GLSL and lots of uniforms (or a UBO), since metaballs from the graphics perspective are really just distance fields.

If you want more than a few balls, you can do it in two passes: one to produce the distance field, and one to threshold it.

As an added benefit, it's straightforward to generalize these approaches to any two-dimensional continuous function.

[woodrowbarlow]

the same effect (albeit with less crisp edges) can also be achieved by abusing the blur filter in CSS -- with no need for JavaScript or SVG at all.

https://codepen.io/keithclark/pen/sEbFz

[yoklov]

I did something fairly similar to this here: https://codepen.io/thomcc/pen/vLzyPY (I need to look into why this isn't running at 60fps anymore on my laptop, it certainly used to...)

The big difference is that it prerenders a gradient for each ball (it uses html5 canvas for that, but doing it with webgl is completely doable, although a bit more work), which is used as a distance field.

[garaetjjte]

In WebGL: https://bkaradzic.github.io/bgfx/examples.html#metaballs

[winkerVSbecks]

Absolutely. This is by far worst way to render metaballs But, I love that you can do this as just paths.

[winkerVSbecks]

For everyone complaining about the lack of meatballs… here are some: https://codepen.io/winkerVSbecks/full/oGJLwo/

[Const-me]

The math can be optimized by at least an order of magnitude.

Trigonometry functions are expensive, especially the reverse ones.

If v=0.5, see [1] for how to find out sine/cosine of a maxSpread * v. For angleBetweenCenters + maxSpread * v, see [2] for how to find sine + cosine of a sum of angles.

If you’ll do all that math in the symbolic form (you can use Maple or Mathematica or something similar), you’ll get the equivalent formulae for p1-p4 that won’t use any trigonometry, only simple math and probably a square root.

[1] https://en.wikipedia.org/wiki/List_of_trigonometric_identiti... [2] https://en.wikipedia.org/wiki/List_of_trigonometric_identiti...

[Const-me]

Implemented a 2D angle class for cases like that, where you would otherwise use these slow trigonometry functions. It’s C++ but should be easy to convert to JavaScript or any other OO language.

https://gist.github.com/Const-me/46f90ce7fc2bc65dc12a41442ed...

[santaclaus]

> Metaballs, not to be confused with meatballs

I once reviewed an academic paper at a major CS conference that misspelled metaballs as meatballs throughout.

[dguaraglia]

After years of living in the US, I still have trouble that the word is "cockpit" not "cocktip". That became hilariously obvious when at work we had to use a library that uses the term "cockpit" for one of its main components.

[jlg23]

A nice example of the the impotence of proofreading![1]

[1] https://www.youtube.com/watch?v=OonDPGwAyfQ

[philipov]

You think that was a mistake?

[mileycyrusXOXO]

I just started learning GLSL shaders. As practice, I wrote a psuedo-metaball joystick. I didn't know about metaballs, but now that I do I can do some more research and improve my next iteration.

Touch blob joystick shader: https://www.shadertoy.com/view/4lfcRf

[spitfire]

https://www.youtube.com/watch?v=L_lD7iqG8nA

About 2 minutes in there's an excellent realtime metaballs implementation that ran smoothly on a 486-66mhz. Metaballs were an extremely popular effect in the early 90's.

[twic]

I wonder what the first demo to use metaballs was. Two candidates:

http://www.pouet.net/prod.php?which=1023

http://www.pouet.net/prod.php?which=911

How about first on the C64? Here's Booze in 2010:

http://www.pouet.net/prod.php?which=56003

[shove]

Paper.js is truly a great source of vector drawing tricks. Curious how difficult it would be to extend this technique beyond two circles. Might have to dust off some old experiments ... :)

[philipov]

Oh no... I shook it a bunch and it broke apart ;_;

[zokier]

Metaballs are always nice, but I think this page (that was linked in the article) that shows compass&straight-edge constructions to be especially nifty:

http://www.mathopenref.com/consttangentsext.html

[emmelaich]

See the Euclidea and Pythogorea phone apps for a puzzle game based on geometric principles.

[theoh]

During or just before WW2, Roy Liming developed analytic techniques for calculating a similar class of blend or fillet. They were taken up in aircraft design, a field that I can't imagine ever using implicit surfaces! I think it was Edgar Schmued's design for the P-51 Mustang that famously used Liming's work.

Liming wrote a book, but it's rare. Some technical discussion towards the end of this page: http://homepages.inf.ed.ac.uk/rbf/CVonline/LOCAL_COPIES/BOWY...

[ladon86]

Was this the technique used in World of Goo?

[easytiger]

I believe (the amazing) World of goo used stretched bitmaps* ( at least in the prototype )

* https://www.gamasutra.com/view/feature/2438/how_to_prototype...

[asadlionpk]

This actually refreshes my memory. I had to implement some metaballs myself some years back for a fluid simulation.

I had to struggle with metaball rendering on canvas back then. It was so slow. Now I guess a pixel shader in webGL can do a better job.

Check this out too: https://asadmemon.com/SPHjs/ source: https://github.com/asadm/SPHjs

[christotty]

An alternative method (with potentially different applications) that I found interesting. The visual aids in both articles are very good.

http://jamie-wong.com/2014/08/19/metaballs-and-marching-squa...

[fzaninotto]

We've use the blur+contrast approach successfully in EventDrops [1], a time series visualisation based on d3.js. It all happens client-side, with OK performance. Not sure the SVG approach brings more in this case.

[1] https://marmelab.com/EventDrops/