Shader with Three.js

Would the following shader work in combination with my Three.js scene (github repo), so that instead of the ‘video text’ I would place the ‘shader text’ and the refractions would still work?

Edit: would something like blotter.js work?

Why wouldn’t it work? :thinking:
I’ve put a mesh of a plane and ShaderMaterial, with a simple noise pattern, behind the cube.

Demo: https://codepen.io/prisoner849/full/JjwBexX

7 Likes

Thank you for your time and efforts to craft the custom tailered example for me. No seriously; I guinuinly appreciate it, coming from my heart <3 I just fear that the example I provided on codepen cannot quite as easily be converted to Three.js.

It makes me wonder how to achieve a similar effect using only Three.js.

From my quick and rough analysis of the text codepen example, I can determine that it uses two 2d contexts. One for reference, one for post-effects. I think he is placing the wanted text on the reference context, somehow extracting the shape of the text and then using the extracted shape in the post-effect context to achieve the effect (as i said; very rough analysis).

Is there anything that could be done to achieve a similar effect using Three.js and as little shaders, preferably none at all?

The mainpoint is that im looking for suitable transitions for the text on my website, because at the moment when you rotate the cube, the text changes immediately with no transition inbetween them, making it feel lifeless and stagnant.

The method of how the text gets displayed is not set in stone. It just needs to be vibrant, colorful, and able to generate refractions in a transparant object infront of it. Ways to achieve a a text with these parameters could be: your two examples here and here, this thing and a projection onto the text geometry (like here). The actual problem for me is to transition between the texts smoothly.

Creativity is up to you :slight_smile:
If you can’t repeat/understand something, then do what you can. Impovise, create things in your own way. :handshake:

Demo: https://codepen.io/prisoner849/full/GRPBaVZ

5 Likes

Thank you! I will post my resuts :slight_smile:

1 Like