The video you linked uses a 2D metabase. When metabases come together, they form droplets, not large circles. Are you okay with that?
Before continuing, you should read the introduction to metabachy. Just google 2D metabola.
So hopefully you read about metaball thresholds and dips. Your decline function should have a radius - the distance that the function falls to zero.
We can achieve the LOD effect by adjusting the threshold and radius. Basically, when you zoom out, increase the radius so that the dots affect a large area and begin to shrink together. Also, adjust the threshold so that areas with insufficient dot density begin to disappear.
I found this existing demo of jsfiddle 2D metalls and I modified it to demonstrate the LOD:
- LOD 0: individual points in the form of circles. ( http://jsfiddle.net/TscNZ/370/ )
- LOD 1: Isolated points begin to contract, but clusters of points begin to form droplets. ( http://jsfiddle.net/TscNZ/374/ )
- LOD 2: The isolated dots have disappeared. Blobs less and more. (change above url to jsfiddle version 377)
- LOD 3: Blobs are even smaller and even bigger. (change above url to jsfiddle 380 version)
As you can see in different versions of jsfiddle, changing the LOD only requires setting a few variables:
threshold = 1, max_alpha = 1, point_radius = 10,
The key point, which many articles of metaballs do not affect: you need to use an agreement in which only values above your threshold are considered "inside" the metaball. Then, when you get far, you need to set a threshold value above the peak value of your falloff function. This will cause the isolated point to completely disappear, leaving only clumps visible.
Rendering metaballs is a whole topic in itself. This jsfiddle demonstration uses a very inefficient brute force approach, but there are more efficient marching squares.
source share