Hacker News new | past | comments | ask | show | jobs | submit login
Metaballs and WebGL (jamie-wong.com)
95 points by robertelder on July 15, 2016 | hide | past | favorite | 12 comments



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/

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.


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

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 )


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


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?


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.


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



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...

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!


I remember this one, it was very inspiring, and it's still very inspiring.


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


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.


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 ;)




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: