Animated Ocean Waves

Do you know how to make the color of the ocean more navy blue?

I have tried changing the water color, but that does not seem to have much effect. I suspect that the reflection of the sky color is over-riding the color of the ocean.

That is one of the characteristics of the ocean. If you look out horizontally from a lower altitude, you see more of a reflection of the sky color. But as your altitude increases, you are looking more downwards and the natural color of the water becomes more dominant. This transition is subtle because both the ocean and the sky are blue.

It would be interesting to see what would happen if we were able to dynamically change the reflectiveness of the ocean based on viewing angle or altitude. We would not want to eliminate the reflectiveness entirely because with this method defines the waves using reflections - eliminating all reflections would cause the waves to disappear.

The fragment shader is where the colours are decided.
And fragment shaders, especially the water example, are not something I understand very well.
But the sky colour is reflected in the fragment shader.
The variable is mirrorSampler
So, you could make your sky darker as your altitude increases.

1 Like

Thanks.
Yes, that is one improvement I wish that they would implement - providing us with more documentation about how their “add ons” work. Not just from a user perspective, but from a programmer perspective.

Here are three variations to my Pirate Ship demo:

  • Standard Ocean - Uses MeshStandardMaterial. This is the standard version with both a normal and perlin map which create height.
  • Cartoon Ocean - .Uses MeshToonMaterial. For some reason, I like this one the best. Instead of height, the normal map creates colors. And there is no reflection of the sun.
  • Mirror Ocean - A mirror-like surface that reflects the sky and has all kinds of colors. If pushed, this would probably be the first to drop below 60 fps.
  • Gerstner Ocean - A version of Ocean modified by Sean Wasere to include Gerstner Waves (the original Ocean looks like it has waves, but is flat). I have not yet added his subroutine which should float the boat correctly.

The ship now has a waving flag, created using the same principles as the waves. I will add animated sails. (This should end up as a sine wave demo.)

While these look okay here, they do not work so well with the flight simulation due to the tiling effect which is mitigated somewhat by increasing the grid size. Also, the visual impact of using physical waves is mostly lost at atititude.

1 Like

Looks cool :+1: , but my brain refuses to believe that waves move in one direction and the flag waves in another one (btw, about a waving flag: Three.js + noisejs, can be done with 2d noise in shaders ) :slight_smile:

Do you have a favorite?

Ship motion can be deceiving. My interpretation is that the waves (or, more correctly, ocean swells) are not moving towards you, but that you are sailing with them and overtaking them. I moved the normal map to try to convey this motion through the swells.

Regarding noise, I wanted to generate a noise that would have the same value for each xz position so that the routine for computing normals works correctly. Does the 2d noise do that? (Also, I would want a perlin noise generator which would create smooth changes.)

I like the gerstner version. Its progressing really well.
The reflection is really good that the normals look correct.

But, there is something wrong with the green on the bow, and the red on the stern. Port and starboard on boats is the same as it is on aeroplanes. :slight_smile:

I’m thinking about replacing them with a “skeleton crew” :skull:

1 Like