# Simple stylized water shader
**URL:** https://forum.babylonjs.com/t/simple-stylized-water-shader/17672
**Category:** Demos and projects
**Created:** [January 21, 2021, 2:53am UTC](https://forum.babylonjs.com/t/simple-stylized-water-shader/17672 "2021-01-21T02:53:14Z")
**Posts on this page:** 19
**Page:** 1
### Author:  [@phaselock](https://forum.babylonjs.com/u/phaselock)
#### Post date: [January 21, 2021, 2:53am UTC](https://forum.babylonjs.com/t/simple-stylized-water-shader/17672/1 "2021-01-21T02:53:14Z")
With help from @Evgeni_Popov and @Pryme8, I’ve ported a simple stylized water shader from Unity ([https://www.reddit.com/r/Unity3D/comments/f6bh50/making\_stylized\_water\_with\_shader\_graph/](https://www.reddit.com/r/Unity3D/comments/f6bh50/making_stylized_water_with_shader_graph/)) into bjs. This is useful when you need a fuss-free non-MC environment asset.
Playground: [https://playground.babylonjs.com/#UNGKGD#7](https://playground.babylonjs.com/#UNGKGD#7)
webGPU version: [https://playground.babylonjs.com/#UNGKGD#298](https://playground.babylonjs.com/#UNGKGD#298)
\<\<\< Frame graph versions \>\>\>
webgl2: [https://playground.babylonjs.com/#UNGKGD#306](https://playground.babylonjs.com/#UNGKGD#306)
webGPU: [https://playground.babylonjs.com/#UNGKGD#307](https://playground.babylonjs.com/#UNGKGD#307)
Parameters:
- _wNoiseScale_ and _wNoiseOffset_ - control water refraction
- _fNoiseScale_ - controls foam
- _maxDepth_ - set max depth of your water mesh
- _wDeepColor_ and _wShallowColor_ - set the water colors for shallow and deep
I’ve added in some gizmos in the PG so you can play around with the spheres and water.
In the spirit of opensource, do what you will with it. It served my needs as a base and there’s a lot more that can be done/customized for your own needs. Feel free to experiment.
Enjoy, cheers !
---
### Author:  [@gbz](https://forum.babylonjs.com/u/gbz)
#### Post date: [January 21, 2021, 3:19am UTC](https://forum.babylonjs.com/t/simple-stylized-water-shader/17672/2 "2021-01-21T03:19:44Z")
Whoa, this is awesome 😃 Thanks for sharing, @phaselock !
---
### Author:  [@MarkBevels](https://forum.babylonjs.com/u/MarkBevels)
#### Post date: [January 21, 2021, 4:19am UTC](https://forum.babylonjs.com/t/simple-stylized-water-shader/17672/3 "2021-01-21T04:19:20Z")
Amazing work! Well done @phaselock
---
### Author:  [@phaselock](https://forum.babylonjs.com/u/phaselock)
#### Post date: [January 21, 2021, 7:35am UTC](https://forum.babylonjs.com/t/simple-stylized-water-shader/17672/5 "2021-01-21T07:35:35Z")
The demo has a vertex shader with a simple wave function. You can switch it off: [https://playground.babylonjs.com/#X70GES#2](https://playground.babylonjs.com/#X70GES#2)
Hope it helps !
---
### Author:  [@phaselock](https://forum.babylonjs.com/u/phaselock)
#### Post date: [January 21, 2021, 10:56am UTC](https://forum.babylonjs.com/t/simple-stylized-water-shader/17672/7 "2021-01-21T10:56:30Z")
You have to pass the boat into the depth map for the foam to show.
[https://playground.babylonjs.com/#X70GES#5](https://playground.babylonjs.com/#X70GES#5)
---
### Author:  [@shaderbytes](https://forum.babylonjs.com/u/shaderbytes)
#### Post date: [January 21, 2021, 2:04pm UTC](https://forum.babylonjs.com/t/simple-stylized-water-shader/17672/8 "2021-01-21T14:04:28Z")
great so far! just your foam seems to be a tad blockish in comparison to the Unity version. I will see to play around with some numbers later , thanks 😉
---
### Author:  [@Nevergrind](https://forum.babylonjs.com/u/Nevergrind)
#### Post date: [March 29, 2021, 11:13am UTC](https://forum.babylonjs.com/t/simple-stylized-water-shader/17672/9 "2021-03-29T11:13:13Z")
Nice one, gonna use this 😃 with some tweaks
[https://playground.babylonjs.com/#UNGKGD#8](https://playground.babylonjs.com/#UNGKGD#8)
---
### Author:  [@Gugis](https://forum.babylonjs.com/u/Gugis)
#### Post date: [September 30, 2021, 4:53pm UTC](https://forum.babylonjs.com/t/simple-stylized-water-shader/17672/10 "2021-09-30T16:53:31Z")
@phaselock sorry for resurrecting old thread, but I was googling for stylized water shader and found myself here 🙂 There is one problem I noticed, that foam edge is rendered even if mesh or it’s part is above water. Foam is rendered as long as target mesh and water mesh overlaps from camera perspective.
As you can see here, part inside of red rectangle is above water. How we could render foam only on the edge where water and mesh actually meets?
Thank you.
---
### Author:  [@Pryme8](https://forum.babylonjs.com/u/Pryme8)
#### Post date: [September 30, 2021, 5:16pm UTC](https://forum.babylonjs.com/t/simple-stylized-water-shader/17672/11 "2021-09-30T17:16:42Z")
I made the original shader so I’ll let you know right away that’s the one downfall of this method and there is no easy work around other then using a completely different method.
---
### Author:  [@Gugis](https://forum.babylonjs.com/u/Gugis)
#### Post date: [September 30, 2021, 6:05pm UTC](https://forum.babylonjs.com/t/simple-stylized-water-shader/17672/12 "2021-09-30T18:05:21Z")
Oh, I see. That’s unfortunate.
---
### Author:  [@phaselock](https://forum.babylonjs.com/u/phaselock)
#### Post date: [October 1, 2021, 1:56am UTC](https://forum.babylonjs.com/t/simple-stylized-water-shader/17672/13 "2021-10-01T01:56:45Z")
@Gugis you can find @Pryme8 alternative approach here: [Get current frame buffer texture for shader material](https://forum.babylonjs.com/t/get-current-frame-buffer-texture-for-shader-material/17443)
It might suit your needs better. Hope it helps. 🙂
---
### Author:  [@Pryme8](https://forum.babylonjs.com/u/Pryme8)
#### Post date: [October 1, 2021, 2:21am UTC](https://forum.babylonjs.com/t/simple-stylized-water-shader/17672/14 "2021-10-01T02:21:03Z")
Ha I forgot about that one thanks for finding it.
Honestly you might be able to find another one of my methods too if you dig hard enough. I geeked on that stuff for a while.
---
### Author:  [@Moriy](https://forum.babylonjs.com/u/Moriy)
#### Post date: [October 20, 2021, 2:43am UTC](https://forum.babylonjs.com/t/simple-stylized-water-shader/17672/15 "2021-10-20T02:43:06Z")
I think it is beacuse the size of depthMap is lower than mainTexutre, I meet the same question when I write some postprocess with depthMap
---
### Author:  [@phaselock](https://forum.babylonjs.com/u/phaselock)
#### Post date: [May 6, 2025, 7:25am UTC](https://forum.babylonjs.com/t/simple-stylized-water-shader/17672/16 "2025-05-06T07:25:24Z")
Added [webGPU](https://playground.babylonjs.com/#UNGKGD#298) version to OP, for those who need a direct port. Cheers!
---
### Author:  [@cyborg\_ean](https://forum.babylonjs.com/u/cyborg_ean)
#### Post date: [May 16, 2025, 7:18pm UTC](https://forum.babylonjs.com/t/simple-stylized-water-shader/17672/18 "2025-05-16T19:18:27Z")
I get this error when viewing this playground on my lower end laptop using Ubuntu/Brave.
---
### Author:  [@phaselock](https://forum.babylonjs.com/u/phaselock)
#### Post date: [May 17, 2025, 4:27am UTC](https://forum.babylonjs.com/t/simple-stylized-water-shader/17672/19 "2025-05-17T04:27:33Z")
> [@cyborg\_ean](#):
>
> lower end laptop using Ubuntu/Brave
yeah, the errors are from your browser setup. Seems like webgpu isn’t setup by default. I’m not familiar with yr OS/browser. ☹ You’ll have to take it up with the Brave developers, sorry.
---
### Author:  [@roland](https://forum.babylonjs.com/u/roland)
#### Post date: [May 17, 2025, 5:07am UTC](https://forum.babylonjs.com/t/simple-stylized-water-shader/17672/20 "2025-05-17T05:07:43Z")
This could help:
>
>
> \## Description
> The Brave browser currently lacks support for WebGPU. This limi…tation prevents users from utilizing the full potential of WebGPU-based applications and experiences within the Brave ecosystem.
>
> The question i would like to ask in this issue: is there any status on development in this feature for the brave browser?
>
>
> \## Steps to Reproduce
>
> 1. Install the Brave browser.
> 2. Go to a website like \[WebGPU Test\](https://toji.github.io/webgpu-test/).
>
> \## Actual result:
> WebGPU is not supported on this browser
>
> \## Expected result:
> The application or website should function as in any other chromium based browser.
>
> \## Desktop Brave version:
> Version: 1.52.117
> Chromium: 114.0.5735.90
> Revision: 386bc09e8f4f2e025eddae123f36f6263096ae49-refs/branch-heads/5735@{#1052}
>
> \## Version/Channel Information:
> In the stable branch this issue is still occurring, however i am not currently aware of the status within other brave channels.
>
> \## Other Additional Information:
> WebGPU is supported on other major browsers like Chrome, Edge and Opera.
---
### Author:  [@phaselock](https://forum.babylonjs.com/u/phaselock)
#### Post date: [May 30, 2025, 2:43am UTC](https://forum.babylonjs.com/t/simple-stylized-water-shader/17672/21 "2025-05-30T02:43:00Z")
Added frame graph versions to OP, enjoy! Cheers!
webgl2: [https://playground.babylonjs.com/#UNGKGD#306](https://playground.babylonjs.com/#UNGKGD#306)
webGPU: [https://playground.babylonjs.com/#UNGKGD#307](https://playground.babylonjs.com/#UNGKGD#307)
edit: did not want to confuse users, made it 1 version instead.
---
### Author:  [@Pryme8](https://forum.babylonjs.com/u/Pryme8)
#### Post date: [June 5, 2025, 12:53am UTC](https://forum.babylonjs.com/t/simple-stylized-water-shader/17672/22 "2025-06-05T00:53:33Z")
It crazy to see you keep refining your shader off the original work I did, you just keep making it better and better (plus more reusable).