Help with Morphing Gooey Particles into MSDF Text Effect

Questions
,
1

Hi everyone,

I’m working on an effect in Three.js where random spheres (or, in my case, ink drops) morph and merge into the shape of text. I want to apply this effect to the title in my project, which uses MSDF text.

section1.PNG
section1.PNG1920×1158 39 KB

However, I am experimenting with this effect separately to understand the best approach to achieve it.

The approach I’ve taken so far involves applying a blur pass in both vertical and horizontal directions to a render target scene, which creates a gooey effect.

The issue arises when these particles begin merging to form the text:

  1. Excessive Gooeyness: Due to the blur pass, the particles become too gooey, making the text hard to read.
  2. MSDF Text Challenges: I am using MSDF text (instead of standard Three.js text geometry), but MSDF text lacks depth and the necessary surface points for the ink drops to align.

I’ve tried sampling the surface points of the MSDF text using MeshSurfaceSampler, but it results in NaN values due to the insufficient count of position attributes in the MSDF mesh. This has been a roadblock for properly aligning the spheres or drops onto the text surface.

What I Want to Achieve:

I’m aiming to create an effect where:

  • The drops morph or melt into each other and form clean, readable text.
  • The transition should feel natural and visually appealing, similar to how two signed distance fields (SDFs) can smoothly combine using a smin operation in raymarching.

My Ideas So Far:

  1. Raymarching Approach:
  • Create an SDF of the MSDF text as the target shape.
  • Use smaller sphere SDFs as the starting “ink drops.”
  • Interpolate their positions based on progress and merge them using smin.
  • This would produce a clean melting/morphing effect, but I’m new to raymarching and not sure how to bring my MSDF text into the raymarching domain.
  1. Alternative Blur Pass or Morphing in Three.js:
  • If raymarching is too complex, I’d like to know how to refine the current gooey effect to make the text readable while still achieving the morphing/merging effect.
  • Can morph attributes be used here? If so, how do I first separate the drops before morphing them back into the text?

Challenges:

  • How to make the blur pass-based gooey effect cleaner?
  • How to integrate MSDF text into a raymarching pipeline or simulate a similar effect in Three.js?
  • How to properly sample points from MSDF text or find an alternative for aligning the ink drops?

I’d appreciate any guidance, examples, or resources to help me achieve this effect. If you’ve dealt with similar challenges or have insights into morphing effects with MSDF text, your help would mean a lot!

Thank you!