Greetings everyone, I came across the page of https://lumalabs.ai, 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
https://threejs.org/examples/webgl_shader_lava.html
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”.
https://threejs.org/docs/#api/en/objects/Mesh
https://threejs.org/docs/#examples/en/geometries/TextGeometry
https://threejs.org/docs/#api/en/materials/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 - https://cdn-luma.com/public/lumalabs.ai/images/luma-logo-interactive/rainbow-texture.jpg
this one its a shader used to math pixels - https://lumalabs.ai/_next/static/chunks/9cd1d5d7-75c3bc5a0090024b.js
you need lear about shaders, https://learnopengl.com/Getting-started/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