
Metaballs and WebGL - robertelder
http://jamie-wong.com/2016/07/06/metaballs-and-webgl/
======
bicubic
Just as an aside, there's a much better way of doing metaballs in 2D but that
can't be expanded to 3D: [http://nullcandy.com/2d-metaballs-in-
xna/](http://nullcandy.com/2d-metaballs-in-xna/)

The basic idea is you draw a gaussian falloff sprite for each blob into a
render target with additive blending, such that you get a density field from
the sum of the falloffs. After that you do a simple threshold operation in the
pixel shader and bam, very cheap unlimited metaballs. This is also the
principle behind Smoothed Particle Hydrodynamics.

------
yoklov
Metaballs are great! Here's demo I wrote a while back that does them, but in a
slightly hacky way for performance reasons (and it performs pretty well!)
[http://codepen.io/thomcc/pen/vLzyPY](http://codepen.io/thomcc/pen/vLzyPY)

Basically, each "ball" is a 2d gradient texture, i render them all to a
framebuffer, and then do a postprocessing pass which applies a threshold (not
strictly binary so as to get some antialiasing) to the gradient, rendering the
isosurface.

(And I also have a 3D pen, which does the more legit marching-cubes approach:
[http://codepen.io/thomcc/pen/NGmmPB](http://codepen.io/thomcc/pen/NGmmPB) )

~~~
spyder
The 2D one doesn't work in Firefox for me, because instead of the balls I just
see blue rectangles.

~~~
yoklov
Very strange (and somewhat embarrassing! I work on Firefox). It works fine in
Firefox for me. Can you give any more information about your platform?

------
wgreenberg
Always great to see an introduction to WebGL that isn't just a tutorial on
three.js. This is exactly the kind of guide I wish I had back when I was first
learning about GL programming.

------
chadscira
I love it. I have been going through the same thing, as I'm new to 3D.
Learning the pipeline, and trying to figure out all the options we have out
there for WebGL. I ended up going with option #3, but due to the massive
amount of data in my array i ran into performance issues when generating the
initial array. I was able to split the original arrays ArrayBuffer into
smaller ones, and send them to web workers (transferable objects :D) then
concatenate the buffers at the end. I'll try to write an article as well, its
amazing how much performance you can squeeze out of WebGL by doing your
animation inside of your shader.

Please do a write up on the RTT/Render to texture approach you mentioned ;)

------
kowdermeister
Yay, make sure you check out the marching squares tutorial too, that's the
real deal.

~~~
chadscira
Link: [http://jamie-wong.com/2014/08/19/metaballs-and-marching-
squa...](http://jamie-wong.com/2014/08/19/metaballs-and-marching-squares/)

~~~
phleet
Author here -- I also just published a new post on ray marching, which you
might find interesting if you find this post interesting: [http://jamie-
wong.com/2016/07/15/ray-marching-signed-distanc...](http://jamie-
wong.com/2016/07/15/ray-marching-signed-distance-functions/)

My luck on HN has been not so great. All in all, I think my posts have reached
the front page ~5 times, only 1 of which I submitted. But oh well! Glad they
get there somehow and people like them!

------
cocktailpeanuts
Before realizing what I clicked, I really wished this was Meatballs and WebGL.

~~~
tiglionabbit
I also misread, and am hungry. But metaballs seems cool enough. I spent a
while staring at it wondering how this was a visualization of meatballs until
I noticed my mistake.

