Port shader toy project to threejs

Questions
,
1

Hi , have a nice day , can we port like this effect to threejs ?

and is it a performance way?
i want to make water ripple effect on hover on plane?
thank’s

2

@mayyar have you had a look at the water examples already part of the library?

https://threejs.org/examples/?q=Water

If so, do you have a specific requirement that is not met by these?

1 Like
3

Hey , thank you for replay ,yes i saw it , but i need to make water ripple effect with mouse hover on image , like i have a plane with texture and when i hove mouse on it look a ripple , i hope i can explain

4

https://threejs.org/examples/?q=Water#webgl_gpgpu_water

Can you put the image texture you need on this?

If not I did find a formula for porting shadertoy shaders, I’ll try dig it up and share for you

5

Oh , yes now i show it , this is what i need , cam i put an image to it ?
i try yo make demo to share for you on jsfiddle but i cannot set SimplexNoise and GPUComputationRenderer

6

http://jsfiddle.net/kxLr0u3v/4/ here we go , this is the base i need , now can i add texture to it ?

7

i try to add texture on this line
//material.map = new THREE.TextureLoader().load(“https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRPdWnpnIBuk2upy17yHWCaM49f0rFnTABnVw&usqp=CAU”)

8

i think you would need to include the texture in the fragment shader uniforms, i’m not exactly sure how to modify this but i’m sure it’s possible, maybe someone else can offer a bit of guidance?