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 ef…

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 m…

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

[image] m4nnb3ll: Can you please elaborate, i am a beginner and not well acquainted with three.js, Thank you! 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

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

[image] m4nnb3ll: “text mask” maybe, with a fluid canvas behind 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 · protec…

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

Creating a "glass text mask"

Questions

m4nnb3ll February 23, 2024, 11:40pm 7

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.
diagram

Topic		Replies	Views
How to do text mask and used Three.js component as a background Questions materials , react , react-three-fiber	2	1661	March 26, 2023
Shader with Three.js Questions shaders	4	632	October 2, 2023
How to change material color using maskTexture in THREE.js Questions textures , materials	1	276	August 16, 2024
An example of text to canvas to texture to material to mesh. Not too difficult Resources	15	14117	April 21, 2021
Three.js and Twgl.js Questions shaders	16	2227	September 17, 2019

Creating a "glass text mask"

Related topics