metaballs idea
Some checks are pending
Deploy Arise to html branch / Deploy Arise (push) Waiting to run

This commit is contained in:
Jose Falanga 2025-11-11 21:50:17 -03:00
parent 57a9445b9c
commit 5aef3dde48
8 changed files with 66 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

View file

@ -0,0 +1,53 @@
<!-- BEGIN ARISE ------------------------------
Title:: "2D Metaballs"
Author:: "Jose Falanga"
Description:: "Basic understanding of SDF ann Metaballs"
Language:: "en"
Published Date:: ""
Modified Date:: ""
---- END ARISE \\ DO NOT MODIFY THIS LINE ---->
# 2D Metaballs
Today I woke up thinking about procedural geometry. In particular, for terrain generation. In the past I did some experiments, and possibly I{m re-exploring them here just to formalize them. But I specifically want to explore 3D Metaballs. That's not what the title of this article says, isn't it? Correct, I will first explore the fundamentals behind just 2D Metaballs, and a later article will expand on the 3D anologues and possible applications. Why? Well, using 3D also has the complexity of procedural geometry, so I guess I prefer exploring the metaball complexity separately from that. Lame excuse, I know, but I want to keep this article short and full of pictures, so, roll with it.
## Understanding Metaballs
First place to look at is the [Wikipedia page](https://en.wikipedia.org/wiki/Metaballs) on the subject:
> In [computer graphics](https://en.wikipedia.org/wiki/Computer_graphics "Computer graphics"), **metaballs**, also known as **blobby objects**,[[1]](https://en.wikipedia.org/wiki/Metaballs#cite_note-1)[[2]](https://en.wikipedia.org/wiki/Metaballs#cite_note-2) are organic-looking _n_-dimensional [isosurfaces](https://en.wikipedia.org/wiki/Isosurface "Isosurface"), characterised by their ability to meld together when in close proximity to create single, contiguous objects.
It also has great pictures:
![[Metaball_contact_sheet.png]]
> The interaction between two differently coloured 3D positive metaballs, created in [Bryce](https://en.wikipedia.org/wiki/Bryce_\(software\) "Bryce (software)"). _Note that the two smaller metaballs combine to create one larger object._
So, these blobby objects are basically circular or spheric shapes (depending on how many dimensions you are going to handle) that get merged togheter in close vicinity, smoothly. It uses a threshold to determine if stuff is or is not part of the shape. Techincally these are dots with some mass or radius, if they get close enough, that radius overlap turns into a "bridge" of sort between the two. Well, technically they can be more than 2, that's when stuff starts looking organic, but you get the idea.
One interesting thing to note, is that their "mass" is combined, so two balls of the same mass completely combined, should end in a bigger ball (I guess equivalent to the mass of both added up or something like that).
Also, if any other properties exist in each ball, you could also merge them. In the picture, color is another thing that can gets merged. For the sake of simplicity, let's not do that.
## Signed Distance Fields
After reading a bit about this blobby friends, and the threshold thing, SDFs are the first thing that comes to me. It's a neat trick used basically for infinite resolution in many things. Text Mesh Pro uses it for [FontAssets](https://docs.unity3d.com/Packages/com.unity.textmeshpro@4.0/manual/FontAssets.html):
![[FontAtlasExample.png]]
In that example font, each letter has this "weird" gradient to black. If you apply a threshold function to that, you get this:
![[FontAtlasExample33.png]]
> at 66%
![[FontAtlasExample50.png]]
> at 50%
![[FontAtlasExample66.png]]
> at 33%
You get the idea, the gradient combined with the threshold define the font "boldness". The bigger the threshold, the more pixels are turned white. Let's see what happens if we do the same for circles. A quick Photopea idea shows we are into something:
![[MetaballsIdea.png]]
> This definitely looks like a blobby thing to me.
So, it seems like points, turned into radial gradients, multiplied, and then having a threshold function applied looks promising. Let's try to implement it in Godot!

View file

@ -0,0 +1,13 @@
<!-- BEGIN ARISE ------------------------------
Title:: "Index: Game Dev"
Author:: "Jose Falanga"
Description:: "A collection of game development notes and stuff."
Language:: "en"
Thumbnail:: ""
Published Date:: ""
Modified Date:: ""
toc:: "true"
content_header:: "false"
---- END ARISE \\ DO NOT MODIFY THIS LINE ---->