Hi,
I am trying to create a meatball-style effect but I have no clue where to even start with this. I am quite new to shaders, The idea would be to create something similar to this YouTube video. Also, the shapes should stay the same unless they reach the threshold for the effect.
There is a let metaBallThreshold = 0.6; This should handle how far away the metaball effect starts to happen.
I have created a CodeSandbox with some big comment blocks hopefully they will help. The main comment blocks probably are:
- Shaders
- Load Assets (SVGs)
- Main Animation loop
Here is the CodeSandbox link
https://codesandbox.io/p/sandbox/polished-grass-6ck6xy?embed=1&file=%2Fsrc%2Fmain.js
Example video what I mean with metaball effect.
I appreciate all the help 
I’m very well experienced with meatballs. However, I don’t have sufficient skills with metaballs. You may want to have a look at one of the official Three.js examples. Even if it is not applicable to your case with SVG assets, it may still provide some clues.
https://threejs.org/examples/#webgl_marchingcubes
@PavelBoytchev Thanks for your quick reply, I looked at the marching cubes reference. This actually reminded me about the marching rays technique. Is there any code example you can maybe provide to set me in the right direction in my svg case?
I’m sorry, I have no experience with metaballs, so I cannot provide any reference or example code.
Actually, I just did my very first attempt for metaballs. It works only in 2D, so it is quite limited, but still I’m proud of it.
https://codepen.io/boytchev/full/xxMEPRo
