# Help with foam water shader

**URL:** <https://forum.babylonjs.com/t/help-with-foam-water-shader/35063>\
**Category:** Questions\
**Created:** [October 24, 2022, 7:50am UTC](https://forum.babylonjs.com/t/help-with-foam-water-shader/35063 "2022-10-24T07:50:09Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![leen\_alfalah](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/leen_alfalah/32/27715_2.png) [@leen\_alfalah](https://forum.babylonjs.com/u/leen_alfalah)\
**Post date:** [October 24, 2022, 7:50am UTC](https://forum.babylonjs.com/t/help-with-foam-water-shader/35063/1 "2022-10-24T07:50:09Z")

</div>

Hi folk, i am new here i am trying to put a glb model instade of the sphere can any one help me ??

> **[Babylon.js Playground](https://playground.babylonjs.com/#UNGKGD%2393)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [October 24, 2022, 8:14am UTC](https://forum.babylonjs.com/t/help-with-foam-water-shader/35063/2 "2022-10-24T08:14:02Z")

</div>

Welcome aboard!

It’s only a matter of scaling and moving the meshes so that they are visible:

> **[Babylon.js Playground](https://playground.babylonjs.com/#UNGKGD%2394)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![leen\_alfalah](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/leen_alfalah/32/27715_2.png) [@leen\_alfalah](https://forum.babylonjs.com/u/leen_alfalah)\
**Post date:** [October 24, 2022, 8:44am UTC](https://forum.babylonjs.com/t/help-with-foam-water-shader/35063/3 "2022-10-24T08:44:36Z")

</div>

> [@Evgeni\_Popov](#):
>
> Welcome aboard!
> 
> It’s only a matter of scaling and moving the meshes so that they are visible:
> 
> [Babylon.js Playground](https://playground.babylonjs.com/#UNGKGD%2394)

thank you for reply but I mean I need to apply the foam to it ?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [October 24, 2022, 8:48am UTC](https://forum.babylonjs.com/t/help-with-foam-water-shader/35063/4 "2022-10-24T08:48:59Z")

</div>

You need to add the meshes to the depth and refraction render targets:

> **[Babylon.js Playground](https://playground.babylonjs.com/#UNGKGD%2395)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![leen\_alfalah](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/leen_alfalah/32/27715_2.png) [@leen\_alfalah](https://forum.babylonjs.com/u/leen_alfalah)\
**Post date:** [October 24, 2022, 10:10am UTC](https://forum.babylonjs.com/t/help-with-foam-water-shader/35063/6 "2022-10-24T10:10:46Z")

</div>

> [@Evgeni\_Popov](#):
>
> You need to add the meshes to the depth and refraction render targets:

That’s what i want thank you, and then can any body help me with morph it to threejs as a paid job if needed, i am start already!

---

<div class="post-metadata">

**Author:** ![leen\_alfalah](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/leen_alfalah/32/27715_2.png) [@leen\_alfalah](https://forum.babylonjs.com/u/leen_alfalah)\
**Post date:** [October 24, 2022, 10:32am UTC](https://forum.babylonjs.com/t/help-with-foam-water-shader/35063/7 "2022-10-24T10:32:29Z")

</div>

> [@leen\_alfalah](#):
>
> That’s what i want thank you, and then can any body help me with morph it to threejs as a paid job if needed, i am start already!

> **[stupefied-khorana-rupm67 - CodeSandbox](https://codesandbox.io/s/dazzling-poincare-506qch?file=%2Fsrc%2Findex.js)**
>
> stupefied-khorana-rupm67 using three

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [October 24, 2022, 11:46am UTC](https://forum.babylonjs.com/t/help-with-foam-water-shader/35063/8 "2022-10-24T11:46:45Z")

</div>

Maybe this thread in 3js forum can help:

> **[Unlit water shader with foam](https://discourse.threejs.org/t/unlit-water-shader-with-foam/11641)**
>
> I’d like to share a water shader that might be useful when rendering scenes with NPR-techniques. The great thing about this code is the ability to detect obstacles in the water and then render a nice foam around them. I’ve seen this effect in Unity...

---

<div class="post-metadata">

**Author:** ![leen\_alfalah](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/leen_alfalah/32/27715_2.png) [@leen\_alfalah](https://forum.babylonjs.com/u/leen_alfalah)\
**Post date:** [October 24, 2022, 11:56am UTC](https://forum.babylonjs.com/t/help-with-foam-water-shader/35063/9 "2022-10-24T11:56:14Z")

</div>

> [@Evgeni\_Popov](#):
>
> Maybe this thread in 3js forum can help:

Yah i tried this one but it cause some problem in my model, so i tried this in babylon and looks wonderfall, so i really need to put it in threejs 😊

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 24, 2022, 12:43pm UTC](https://forum.babylonjs.com/t/help-with-foam-water-shader/35063/10 "2022-10-24T12:43:06Z")

</div>

@leen_alfalah why not using babylon if it works wonderfully ?

---

<div class="post-metadata">

**Author:** ![leen\_alfalah](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/leen_alfalah/32/27715_2.png) [@leen\_alfalah](https://forum.babylonjs.com/u/leen_alfalah)\
**Post date:** [October 24, 2022, 12:45pm UTC](https://forum.babylonjs.com/t/help-with-foam-water-shader/35063/11 "2022-10-24T12:45:05Z")

</div>

Cuz I finished all the project with threejs , so it’s too hard now to flip

---

<div class="post-metadata">

**Author:** ![leen\_alfalah](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/leen_alfalah/32/27715_2.png) [@leen\_alfalah](https://forum.babylonjs.com/u/leen_alfalah)\
**Post date:** [October 24, 2022, 12:45pm UTC](https://forum.babylonjs.com/t/help-with-foam-water-shader/35063/12 "2022-10-24T12:45:39Z")

</div>

> [@sebavan](#):
>
> @leen_alfalah why not using babylon if it works wonderfully ?

Cuz I finished all the project with threejs , so it’s too hard now to flip

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 24, 2022, 12:51pm UTC](https://forum.babylonjs.com/t/help-with-foam-water-shader/35063/13 "2022-10-24T12:51:21Z")

</div>

Sorry about that but you would need to take the question there as we are not the best on the Babylon forum to do things with Three 🙂

---

<div class="post-metadata">

**Author:** ![leen\_alfalah](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/leen_alfalah/32/27715_2.png) [@leen\_alfalah](https://forum.babylonjs.com/u/leen_alfalah)\
**Post date:** [October 24, 2022, 12:52pm UTC](https://forum.babylonjs.com/t/help-with-foam-water-shader/35063/14 "2022-10-24T12:52:17Z")

</div>

I see thank you @sebavan
