# Metaball shader material

**URL:** <https://discourse.threejs.org/t/metaball-shader-material/57686>\
**Category:** Questions\
**Tags:** shader-material, materials\
**Created:** [November 2, 2023, 4:12pm UTC](https://discourse.threejs.org/t/metaball-shader-material/57686 "2023-11-02T16:12:02Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![bonttimo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bonttimo/32/41539_2.png) [@bonttimo](https://discourse.threejs.org/u/bonttimo)\
**Post date:** [November 2, 2023, 4:12pm UTC](https://discourse.threejs.org/t/metaball-shader-material/57686/1 "2023-11-02T16:12:02Z")

</div>

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](https://www.youtube.com/watch?v=heM9gLSbDNs). 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](https://codesandbox.io/p/sandbox/polished-grass-6ck6xy?embed=1&file=%2Fsrc%2Fmain.js)

Example video what I mean with metaball effect.

[![](https://img.youtube.com/vi/heM9gLSbDNs/maxresdefault.jpg "After Effects Sticky Metaball Easy Tutorial l 더 쫄깃한 메타볼") ](https://www.youtube.com/watch?v=heM9gLSbDNs)

I appreciate all the help 🙂

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [November 2, 2023, 4:46pm UTC](https://discourse.threejs.org/t/metaball-shader-material/57686/2 "2023-11-02T16:46:03Z")

</div>

> [@bonttimo](#):
>
> I am trying to create a meatball-style effect but I have no clue where to even start with this.

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](https://threejs.org/examples/#webgl_marchingcubes)

[![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/e/becafb4fde76070c885262b86adba6a719878944.jpeg)](https://threejs.org/examples/#webgl_marchingcubes)

---

<div class="post-metadata">

**Author:** ![bonttimo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bonttimo/32/41539_2.png) [@bonttimo](https://discourse.threejs.org/u/bonttimo)\
**Post date:** [November 2, 2023, 4:58pm UTC](https://discourse.threejs.org/t/metaball-shader-material/57686/3 "2023-11-02T16:58:19Z")

</div>

@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?

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [November 2, 2023, 6:12pm UTC](https://discourse.threejs.org/t/metaball-shader-material/57686/4 "2023-11-02T18:12:03Z")

</div>

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](https://codepen.io/boytchev/full/xxMEPRo)

[![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/e/9e4e0406d5c6ef66930080a256c4c4bb0003f478.jpeg)](https://codepen.io/boytchev/full/xxMEPRo)