Link (currently only works in Chrome):
paukparl.github.io/body
Sketch:
I figured I would track the nose and both the eyes to create 3 meta balls. Later, I added a fourth one to add some irregularity.
Code:
The code is really long and unorganized. I will clean it up later as I later make some improvements. The current code can be found here:
https://github.com/paukparl/sketches/blob/master/examples/test.html
Thoughts:
I wanted to make a real time 3D interactive sketch. While browsing through ThreeJS examples, I saw a sketch with moving isosurfaces, and I was instantly hooked. The way those balls formed surfaces based on proximity was really satisfying to watch.
I looked up how to make such surfaces. It could be done by something called "marching cubes." The underlying mechanisms of 3D graphics are really fascinating. It would have been really rewarding to make the whole sketch from scratch with WebGL, but I didn't have time. So I cloned the ThreeJS examples to my local repository and started making modifications to the original example code.
I originally wanted to work with refraction or reflection, but soon found out I would need to use something called cube maps. I couldn't figure out how to convert the flat webcam data to a cube map, so then I looked into texture mapping onto the isosurface. There is just one file dedicated to marching cubes in ThreeJS, and had some shortcomings, so I had to work around some things to get my current result.