Creating a "glass text mask"

Greetings everyone, I came across the page of, and the text effect caught my attention, does anyone have an idea on how to achieve this effect (besides the fluid dynamics behind)?
I thought about doing an svg mask with fluid canvas behind but it doesn’t seem to be of the same effect.
Thank you.

Trying to raise the question again.

using shader materials, you can update texture based on time/space

Can you please elaborate, i am a beginner and not well acquainted with three.js, Thank you!

Objects in three.js is made by Geometry + Material, creating a Mesh, you looking for a specific “Material”.

Sorry for the low quality diagram, but what i though of the scene is as follows, a “text mask” maybe, with a fluid canvas behind, thought I am not sure.
I still didn’t get what your idea of getting the same effect is.

Shaders is based on pixel math, creating a texture image mixing R G B colors, this one is based on mouse iteration point x,y and time.
This is a base image used on this shader -
this one its a shader used to math pixels -
you need lear about shaders,

Obvius owner implemented some obfuscation on code.

1 Like

Thank you for the clarification, I believe that I have to make more research on the subject.

you don’t need masks. if you have a regular fluid shader that you would otherwise put on a plane, now put it onto your text geometry. with troika you would also have the outlines troika/packages/troika-three-text at main · protectwise/troika · GitHub

in other words, this is just about the fluid shader, everything else isn’t a problem.

1 Like

That seems interesting, thanks, I’ll try that.

Do you find a way for replicating the lumalabs’ effect? I tried with all the information provided but I was not able to. Can anyone suggest a good tutorial for learning how to replicate this wonderful effect?
Thank you for helping