# Port shader toy project to threejs

**URL:** <https://discourse.threejs.org/t/port-shader-toy-project-to-threejs/28655>\
**Category:** Questions\
**Tags:** animation, shaders\
**Created:** [August 4, 2021, 7:59pm UTC](https://discourse.threejs.org/t/port-shader-toy-project-to-threejs/28655 "2021-08-04T19:59:24Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![mayyar](https://avatars.discourse-cdn.com/v4/letter/m/ce7236/32.png) [@mayyar](https://discourse.threejs.org/u/mayyar)\
**Post date:** [August 4, 2021, 7:59pm UTC](https://discourse.threejs.org/t/port-shader-toy-project-to-threejs/28655/1 "2021-08-04T19:59:25Z")

</div>

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

> **[Shadertoy](https://www.shadertoy.com/view/WlVSz3)**

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

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [August 4, 2021, 8:42pm UTC](https://discourse.threejs.org/t/port-shader-toy-project-to-threejs/28655/2 "2021-08-04T20:42:24Z")

</div>

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

[https://threejs.org/examples/?q=Water](https://threejs.org/examples/?q=Water)

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

---

<div class="post-metadata">

**Author:** ![mayyar](https://avatars.discourse-cdn.com/v4/letter/m/ce7236/32.png) [@mayyar](https://discourse.threejs.org/u/mayyar)\
**Post date:** [August 5, 2021, 6:13am UTC](https://discourse.threejs.org/t/port-shader-toy-project-to-threejs/28655/3 "2021-08-05T06:13:36Z")

</div>

> [@Lawrence3DPK](#):
>
> If so, do you have a specific requirement that is not met by these?

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

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [August 5, 2021, 9:30am UTC](https://discourse.threejs.org/t/port-shader-toy-project-to-threejs/28655/4 "2021-08-05T09:30:40Z")

</div>

[https://threejs.org/examples/?q=Water#webgl\_gpgpu\_water](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

---

<div class="post-metadata">

**Author:** ![mayyar](https://avatars.discourse-cdn.com/v4/letter/m/ce7236/32.png) [@mayyar](https://discourse.threejs.org/u/mayyar)\
**Post date:** [August 5, 2021, 9:33am UTC](https://discourse.threejs.org/t/port-shader-toy-project-to-threejs/28655/5 "2021-08-05T09:33:17Z")

</div>

> [@Lawrence3DPK](#):
>
> Can you put the image texture you need on this?

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

---

<div class="post-metadata">

**Author:** ![mayyar](https://avatars.discourse-cdn.com/v4/letter/m/ce7236/32.png) [@mayyar](https://discourse.threejs.org/u/mayyar)\
**Post date:** [August 5, 2021, 9:37am UTC](https://discourse.threejs.org/t/port-shader-toy-project-to-threejs/28655/6 "2021-08-05T09:37:42Z")

</div>

> [@Lawrence3DPK](#):
>
> Can you put the image texture you need on this?

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

---

<div class="post-metadata">

**Author:** ![mayyar](https://avatars.discourse-cdn.com/v4/letter/m/ce7236/32.png) [@mayyar](https://discourse.threejs.org/u/mayyar)\
**Post date:** [August 5, 2021, 10:14am UTC](https://discourse.threejs.org/t/port-shader-toy-project-to-threejs/28655/7 "2021-08-05T10:14:43Z")

</div>

> [@Lawrence3DPK](#):
>
> Can you put the image texture you need on this?

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

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [August 5, 2021, 10:47am UTC](https://discourse.threejs.org/t/port-shader-toy-project-to-threejs/28655/8 "2021-08-05T10:47:14Z")

</div>

> [@mayyar](#):
>
> new THREE.TextureLoader().load

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?