GOPHERSPACE.DE - P H O X Y
gophering on hngopher.com
HN Gopher Feed (2017-10-17) - page 1 of 10
 
___________________________________________________________________
Show HN: Metaballs
389 points by winkerVSbecks
http://varun.ca/metaballs
___________________________________________________________________
 
davidkuhta - 5 hours ago
This is pretty awesome.I wonder how much would need to be adjusted
to provide a scaling factor to the first metaball such that the
area was constant (Thus ending up with two equally sized metaballs)
or even utilizing the speed of the pull in determining the second
balls size.
 
winkerVSbecks - 2 hours ago
For everyone complaining about the lack of meatballs? here are
some: https://codepen.io/winkerVSbecks/full/oGJLwo/
 
corprew - 4 hours ago
I clicked through this hoping that someone had done a 'Show HN' for
a literal plate of meatballs.
 
microcolonel - 5 hours ago
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 - 4 hours ago
  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
 
  garaetjjte - 3 hours ago
  In WebGL:
  https://bkaradzic.github.io/bgfx/examples.html#metaballs
 
  yoklov - 5 hours ago
  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.
 
    microcolonel - 5 hours ago
    > I need to look into why this isn't running at 60fps anymore
    on my laptop, it certainly used to...Runs at 60fps for me on a
    Chromebook from 2014. I suspect you're looking at it on macOS,
    which has had very poor (arguably the poorest of any x86
    platform) OpenGL drivers for the last four or five years.
 
      DarkTree - 4 hours ago
      Agreed, but it does run at 60fps on my 2015 macbook pro
      running macOS Sierra
 
  winkerVSbecks - 5 hours ago
  Absolutely. This is by far worst way to render metaballs  But, I
  love that you can do this as just paths.
 
    microcolonel - 5 hours ago
    Far from the worst: if the update rate is reasonably low, this
    approach makes it a lot simpler to handle high-resolution
    displays, event registration. It should also run on a few more
    browsers and devices.
 
mgalka - 2 hours ago
Surprised I've never seen metaballs before. Very cool.
 
shove - 6 hours ago
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 ... :)
 
christotty - 4 hours ago
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...
 
santaclaus - 5 hours ago
> Metaballs, not to be confused with meatballsI once reviewed an
academic paper at a major CS conference that misspelled metaballs
as meatballs throughout.
 
  philipov - 5 hours ago
  You think that was a mistake?
 
  dguaraglia - 4 hours ago
  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 - 4 hours ago
  A nice example of the the impotence of proofreading![1][1]
  https://www.youtube.com/watch?v=OonDPGwAyfQ
 
    ninju - 43 minutes ago
    And the importance  (oh...I see what you did there...well
    played)
 
bpicolo - 6 hours ago
That bubble slider is super cute.
https://codepen.io/chrisgannon/pen/GZNgLw
 
  thoughtpalette - 4 hours ago
  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.
 
    bpicolo - 3 hours ago
    It definitely moved the opposite way I expected it to, but this
    way grew on me, hah.It's not a perfect UI element - you can't
    actually see the options without scrolling through it all, but
    I could imagine something similar being a pretty cool little
    thing in the right context
 
fairpx - 5 hours ago
I would love to incorporate this in some of the UI design work we
do for startups. Are there more similar libraries available? We
could reference it to our network of clients (mostly developer
driven startups) to help translate some of the design ideas we
propose. If you know of other similar projects like Metaballs,
please do share below or ping me (details in my bio)
 
mileycyrusXOXO - 4 hours ago
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
 
panic - 3 hours ago
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.
 
  ehsankia - 3 hours ago
  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.
 
  zaroth - 3 hours ago
  This is just calling out for a propagation wave effect through
  the parent ball at the moment of separation.
 
fibo - 36 minutes ago
there is a popular vvvv shader that implements metballs, see
https://vvvv.org/blog/debug2-2
 
femto113 - 4 hours ago
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
 
  winkerVSbecks - 3 hours ago
  That is awesome!
 
  XaspR8d - 1 hours ago
  Keeping 100% accurate constant area would require a pretty insane
  closed form equation. Even ignoring the amount of area  added by
  the stretched portions.
 
  fergyfresh - 4 hours ago
  That is weirdly satisfying to watch...
 
    Raphmedia - 4 hours ago
    Would make a great loader icon.
 
alex_suzuki - 6 hours ago
I was disappointed that this was not about meatballs, for I am
hungry.
 
a_e_k - 27 minutes ago
Andrew Glassner published a paper on something extremely similar
back in 2015:"Globs: A Primitive Shape for Graceful Blends Between
Circles"http://jcgt.org/published/0004/03/01/
 
ladon86 - 5 hours ago
Was this the technique used in World of Goo?
 
  easytiger - 5 hours ago
  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 - 5 hours ago
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
 
zokier - 5 hours ago
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
 
mikewhy - 5 hours ago
Reminds me of this demo from years ago: https://tympanus.net/Develo
pment/CreativeGooeyEffects/menu.h...Article for more detail:
https://tympanus.net/codrops/2015/03/10/creative-gooey-effec...
 
Osmium - 6 hours ago
Could this extend to 3D?
 
  Impossible - 4 hours ago
  My first experience with metaballs was in 3D as a feature in
  Truespace (https://en.wikipedia.org/wiki/TrueSpace) where they
  were used for modeling.In order to render a surface you have to
  either use a contouring algorithm like marching cubes to generate
  a mesh like the above three.js demo, or raytrace or raymarch
  them.  Because metaballs describe a distance function, its really
  easy to use SDF raymarching and there is a whole category
  dedicated to metaball shaders on shader toy
  (https://www.shadertoy.com/results?query=tag%3Dmetaballs).
 
  knolan - 5 hours ago
  You can do 3D metaballs with Blender.
 
  kowdermeister - 5 hours ago
  Yes, there's a Three.js
  demo:https://threejs.org/examples/#webgl_marchingcubes
 
    Osmium - 1 hours ago
    That's marching cubes though, which is different from the
    parametric/B?zier approach in the article?
 
  thibaut_barrere - 5 hours ago
  Like this? https://youtu.be/RiHUKEEtzNE?t=3m48s (1997).
 
  [deleted]
 
  elihu - 5 hours ago
  Jim Blinn was doing that in the 80's.
  http://delivery.acm.org/10.1145/360000/357310/p235-blinn.pdf
 
  Ologn - 5 hours ago
  Like this?  https://www.youtube.com/watch?v=wcdKHCp9foYWorks on
  Unix, Mac, iOS and AndroidCode mirror is here -
  https://github.com/Zygo/xscreensaverW.P. van Paassen's metaballs
  C code is here -https://github.com/Zygo/xscreensaver/blob/master/
  hacks/metab...Also, you can set various parameter tweaks for the
  metaballs from the command line or settings - count, radius etc.
 
  striking - 6 hours ago
  It already does, for water effects.
 
    santaclaus - 5 hours ago
    No one to my knowledge actually uses metaballs for surfacing
    fluids.
 
      efraim - 5 hours ago
      What is used instead?
 
        dvt - 4 hours ago
        Fluid simulation; see
        https://developer.nvidia.com/particles and
        https://www.youtube.com/watch?v=2gp7-ejkwBQMetaballs are
        way too expensive.
 
          pdkl95 - 2 hours ago
          From the associated article for that video:> SPH ... with
          500 000 particles ... about 2.5 fps on my GTX 1070Still
          slower than what CNCD & Fairlight demonstrated in 2011
          with "Numb Res", at 120fps (stereo 3D) on a geforce 280:>
          The demo features up to 500,000 particles running under
          3D SPH in realtime on the GPU, with surface tension and
          viscosity terms; this is in combination with collisions,
          meshing, high end effects like MLAA and depth of field,
          and plenty of lighting
          effectshttps://directtovideo.wordpress.com/2011/05/03
          /numb-res/
 
          efraim - 4 hours ago
          Metaballs would not be for simulating fluids but for
          creating the simulated fluid's surface. In your youtube
          link it would be a step between "simulating particles"
          and "meshed result".
 
  winkerVSbecks - 5 hours ago
  ?\_(?)_/? you could probably make 3D bezier curves to generate
  the connector. The real iso-surface metaball definitely works in
  3D.
 
slavik81 - 2 hours ago
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 - 1 hours ago
  I believe 2D canvas rendering is performed on the CPU rather than
  the GPU.
 
    ZenPsycho - 42 minutes ago
    much of it is offloaded to the GPU by recent browsers
 
    Franciscouzo - 25 minutes ago
    You wouldn't use a 2d context, you can use WebGL shaders
    instead. Besides that, most operations on a 2d context are
    performed on the GPU.
 
robodale - 4 hours ago
I keep seeing Metaballs as Meatballs.
 
philipov - 6 hours ago
Oh no... I shook it a bunch and it broke apart ;_;
 
fenollp - 6 hours ago
>CodePen requires a referrer to render this. Your browser isn't
sending one.Interesting.
 
  icebraining - 5 hours ago
  Apparently it's to prevent phishing. You should be able to click
  on "Edit on Codepen" to see it.(Not affiliated with them, I just
  found https://blog.codepen.io/2017/10/05/regarding-referer-
  headers...)
 
dmschaab - 2 hours ago
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
 
  winkerVSbecks - 2 hours ago
   this is so well done! I'm going to have to try out real
  metaballs now.
 
  robocat - 2 hours ago
  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.
 
spitfire - 3 hours ago
https://www.youtube.com/watch?v=L_lD7iqG8nAAbout 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 - 2 hours ago
  I wonder what the first demo to use metaballs was. Two candidates
  :http://www.pouet.net/prod.php?which=1023http://www.pouet.net/pro
  d.php?which=911How about first on the C64? Here's Booze in
  2010:http://www.pouet.net/prod.php?which=56003
 
theoh - 2 hours ago
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...
 
[deleted]