3 ms·

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

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.

garaetjjte 9y ago
In WebGL: https://bkaradzic.github.io/bgfx/examples.html#metaballs https://bkaradzic.github.io/bgfx/examples.html#metaballs
yoklov 9y ago
I did something fairly similar to this here: https://codepen.io/thomcc/pen/vLzyPY 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 9y 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 9y ago
    Agreed, but it does run at 60fps on my 2015 macbook pro running macOS Sierra
  - yoklov 9y ago
    I am, but it certainly was at 60fps on my laptop when I wrote it, which was also a mac.
winkerVSbecks 9y ago
Absolutely. This is by far worst way to render metaballs But, I love that you can do this as just paths.
- microcolonel 9y 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.
woodrowbarlow 9y 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 https://codepen.io/keithclark/pen/sEbFz

garaetjjte 9y ago

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

yoklov 9y ago

I did something fairly similar to this here: https://codepen.io/thomcc/pen/vLzyPY 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 9y 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 9y ago
  Agreed, but it does run at 60fps on my 2015 macbook pro running macOS Sierra
- yoklov 9y ago
  I am, but it certainly was at 60fps on my laptop when I wrote it, which was also a mac.

winkerVSbecks 9y ago

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

microcolonel 9y 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.

woodrowbarlow 9y 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 https://codepen.io/keithclark/pen/sEbFz