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 links to four variations which appear on my âpage of Piratesâ (link appears in initial post)::
- 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.
- 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.
- iFFT Ocean - The ocean waves created using an iFFT program which generates about 256 separate sine wives..
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 altitude.
UPDATED 12 May 2025:
- Fixed links (I had chanced the directory name from âSeasâ to âOceanâ).
- âMirror Oceanâ example deleted, probably because it did not seem to add much to the examples.
- âiFFT Oceanâ added, which contains an early example of my Ocean Module. Since this is an old program, the colors no longer look right.
1 Like
Looks cool 
, 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 ) 
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.
Iâm thinking about replacing them with a âskeleton crewâ 
1 Like
Hello, these links cannot be opened
The links should work now.
I have also updated/fixed most of the links in the first post.
1 Like
Any of them.
If you run the demo included in the repo, you will see that he has several different viewing environments. Initially the ocean looks almost black and this may be the basic color he is using for the ocean plane. However, if you look through the different environments, you will see some where the ocean is blue or even red. This is because the ocean is also reflecting the color of the skybox. So you can change the ocean color to anything you want by changing the basic color, the skybox, and the intensity of the skybox reflection.
To illustrate, when I started trying to create iFFT waves, I did so by updating that particular program from r79. Here is the r101 version. As you can see, both the sky and the ocean are a brighter shade of blue.
My latest versions (such as the one referenced in the May update of the first post), include other modifiers which affect the color and reflectiveness of the water which helps add some variety and to hide the tiling.
One problem I have run into with older examples of my programs is that Navy Blue (which has a red component) is now showing up as purple. I am not sure why this has happened - there have been some changes in the ways colors are rendered. So I have had to switch to shades of blue that do not have a red component.
In any case, you now have several options for creating ocean waves that werenât available a couple of years ago. You can use an iFFT wave generator (there are versions that work with WebGL2 and WebGPU). Or if that is too much, you can still use the simple sine wave examples shown on the Pirates page.
I also like the above discussion because a couple of the contributors (seanwasere and prisoner849) discuss different grid systems that they use. I use a simple scrolling grids with 3 different sizes of squares. The demo in the repo uses a non-scrolling grid with only 1 size of square. So you now have those options as well.
1 Like
