Unlit water shader with foam

Resources
21

Hi all !

@Mugen87, thank you very much for sharing this project, I would like to use this techniques in my animation project: https://dean.yesbird.online, as it suits my needs the best way, but I stacked at porting it to present (0.172.0) threejs version.

I see that shaders stuff was changed since 0.111 and after changing ‘encodings_fragment’ to ‘colorspace_fragment’ I am getting some errors that can’t fix myself, as I am not expert in shaders language:
https://codesandbox.io/p/sandbox/crimson-voice-d4lh49?file=%2Fpackage.json%3A11%2C23

Please, help me to port it to the latest threejs version.
Thanks in advance.

1 Like
22

Fortunately I was able to force it to work by renaming a defined function round() that was conflicted with built-in function.

Although it works somehow, there are few errors reported to the console.
Maybe they are not critical, but it would be nice if some expert with shades of knowledge would look at the code and help me to fix them. Just to keep everything in order.

23

BTW: Here is a version with WebGPURenderer and the node material which has a much more simple setup: three.js dev template - module - JSFiddle - Code Playground

The only custom part is the implementation of the water material’s colorNode.

It also uses no separate depth pass but extracts the viewport’s depth which results in better performance.

2 Likes
24

Thanks a lot, performance is matter !
Hope I will be able to add waterfall to this implementation …