Custom Water(fall) Shader

I am attempting to create a reflection-less (reflections are a bit too heavy for this purpose) water shader based on the Three.js Ocean example. I am building a kind of floating city type zone (from the original 2D version of my game), and some water falls really would make it pop.

Problem is, I just cannot seem to get the shader quite right. I suppose the primary issue I am experiencing is the fact that I have practically no idea what I am doing =]

Here is what I’ve got so far lol, looks “okay…”, but gets worse over time:

I tried to build this standalone in a fiddle, but it looks even worse!

This is not a three.js bug or anything like that, but if someone could help nudge me in the right direction, I would greatly appreciate it.


you probably just want a scrolling texture. If you use 2 layers with different speed, one below scrolling at like half the speed - it should be sufficiently i think. Another thing you can do is use particles at the bottom. One more cue is curving the water mesh a bit at the top. I think it’s mostly artistry :slight_smile:

You want to convey that substance is falling. For that sense of speed is key.


Yes indeed. I have begin working on bending the plane near the top. May just do this in Blender though since I can have the flatter parts lower poly.

Great idea with the particles =]

As far as the texture part goes, I was hoping to be able to just use the existing water shader (minus the reflections) since it looks pretty nice. But your solution is probably more pragmatic.

I will attempt both. Hard part for one is finding good textures and the other is a million trials and errors until I get the shader looking correct =]

Thank you for your suggestions!

In my experience - it’s quite easy to bastardize a texture a bit, like make half of it much brighter, or greener or whatever else - and see what effect that has in-game, does it bring you closer to desired look or not. It’s been a useful tool in my kit for making objects look consistent in the world.