iFFT Ocean Wave Generator Module

[phil_crowther]

You can use the Ocean module (described below) to add ocean waves to a standard three.js Plane mesh. Modules are available for use with WebGPU and WebGL2 programs. Here are instructions for using the modules in your program. You can also reference the sample programs below [revised 9/22/2025]

Ocean waves from the movie “Dunkirk” compared to waves created by this module.

GRDMAP and GRDWTR MODULES
I have now added a new page from which you can download the version of the GrdMap module (GrdWtr) that works with the Ocean module to provide you with a moving map of animated waves that extends to the horizon.. [EDIT 9/15/25: The linked page is being revised.]

UPDATE 5/31/2023
The “GrdMap and GrdWtr” page listed above has been updated. The GrdWtr module is now a simplified version of the GrdMap module designed to work with the Oceans module. The GrdMap module allows you to add and modify textures and materials.

WEBGL2 VERSION3 [NodeTextures] (4/6/2024) [Outdated - Links removed]
I have now created a Nodes version, which I will add to the webpages.. [EDIT 9/15/25: This link is removed because this version is a historical anomaly that was only valid for a couple of revisions]

WEBGL2 VERSION3 [Final] (9/15/25)
Here is a static demo of the latest version of the WebGL2 Ocean module. As noted above, this version cannot use NodeTextures, which are now only available with WebGPU. The Ocean module can be used with the GrdWtr module to create a moving map as shown in this demo These modules (Ocean3 and GrdWtr3) are available in the xtra_perm/jsm directory of my GitHub Repository (see link below). The GrdWtr3 module has been updated to work like GrdWtr4 (below). The only difference between the two modules is that GrdWtr3 uses standard textures and GrdWtr4 uses node textures.

WEBGPU VERSION4 (Summer 2024) [Outdated - Links removed]
Since, after r165, NodeMaterials no longer work with WebGL2, I was finally “forced” to create a WebGPU version of the Wave Generator. This is essentially a scaled-down version of a WebGPU Wave Generator created by Attila Schroeder (which uses a butterfly texture). Since this is for a flight simulation, I have focused on trying to make the water look better from both high and low altitudes. I have moved my files to my GitHub Repository. [EDIT 9/15/25: This version is outdated and the links have been removed]

WEBGPU VERSION4 r167 (8/15/2024) [Outdated - Links removed]
And, almost as soon as I got the WebGPU version working, r167 changed how WebGPU is implemented in three.js. [EDIT 9/15/25: This version is now outdated and the links have been removed ]

WEBGPU VERSION4 [Final] r180 (9/15/2025)
For archives purposes, here is a static demo of the latest version of the old Ocean module which uses texture buffers shaders. The Ocean module can be used with the GrdWtr module to create a moving map as shown in this demo. These modules (Ocean4 and GrdWtr4) are available in the xtra_perm/jsm directory of my GitHub Repository (see link below). For fun, here is a display that shows the buffers in action. These are the same in the WebGL2 version.

NEW WEBGPU VERSION [Compute Buffers and Shaders] r180 (9/15/25)
Here is a static demo of the latest version of the Ocean module. This module is a stripped-down version of the Ocean program created by Attila Schroeder. That program is complete revision of prior programs and mostly uses compute shaders in place of texture shaders. This module was created with his assistance (and in this case, the word “assistance” is an understatement since I am a complete novice with regard to compute shaders). This version has many more variables and the compute shaders allow for a significant increase in resolution.

Here is a display that shows the various buffers in action. The top row of buffers are statics. The middle row shows the final resuls for intermediate buffers. The bottom row shows the displacement and normal maps.

As before, the Ocean module can be used with the GrdWtr module to create a moving map as shown in this demo. The latest version of both modules are available in the jsm directory of my GitHub Repository. Over time, all of the GrdWtr modules have been modified to spread a multi-colored diffuse texture and a corresponding roughness map over several grids. Not only does this make the appearance more realistic, but this makes the ocean look more interesting and the colors help hide tiling.

A FINAL NOTE (9/15/2025)
Since this is probably the last major version of the Ocean module, I am revising this original post to eliminate excess discussion and the (now broken) links to outdated versions of the Ocean and GrdWtr modules. Instead, I have created links to an archive of the latest versions of the old WebGPU Ocean module (version 4) and the WebGL Ocean module (version 3) for those who are using WebGL. All are updated to r180. Those versions are available in the xtra/jsm directory of my GitHub Repository (link above). I am retaining the chronology of my posts so that all the helpful comments below can be viewed in context.

[PavelBoytchev]

The waves look quite realistic. Thanks for providing the code as a library/module.

Do you plan to make a generator for beach waves? They have different shape when they break on the beach, not just “chaotic” ripples.

[phil_crowther]

That would be an interesting challenge and there is definitely room to improve the module.

However, for now, I plan to continue to work on my flight simulation modules, including adding some form of enemy AI-driven aircraft. And, now that I know how easily the terrain can be reshaped, I might work on a module to create terrain using height maps.

[shootTheLuck]

NIce! Thanks for sharing this. And it responds to directional lights in the scene.

[Attila_Schroeder]

That’s funny. You made the ocean and now you want to make the land. I made the land and now I want to make the ocean
But I didn’t find it that easy with the landmasses. I messed around there for two years. But now I can fly around freely or walk around on the surface. I’ve had an AMD 7900XTX readon for about 3 weeks and it runs so smoothly even when I’m flying very fast.

I now use almost 1000 maps only for the earth. I have far better ones but they don’t have space on my tablet. Clouds and the ocean are now the next big steps. That’s why I find your post very interesting.
A planet-wide ocean will be a challenging task. Because of the curvature I will need a lot of dynamic reflection renderings. To connect that with a dynamic surface, which has to adjust its resolution depending on where you are, will certainly also be a mammoth task. But it would be boring otherwise. At first i will analyze your recommendation with the ifft wave generator in detail. Thank you for the tipp

[phil_crowther]

iFFT seems to be the recommended approach for creating ocean waves. More modern examples seems to take a slightly different approach to generating the waves, but this program seems pretty fast. (It even runs at 60 fps on my iPhone.)

You may want to add some kind of cascading to avoid tiling. However, that may not be as big a problem as I once thought. I recently realized that my altitude scale was wrong. When I fixed that, the waves started disappearing a lot faster with increases in altitude. This helped make the tiling less obvious. However, the reason is that the ocean surface was quickly becoming a featureless blue. I checked some pictures taken from the air and this appears to be true in real life.

So you may want to add some texturing to the material to create interesting color patterns in the ocean surface. Otherwise, you will be flying over a single blue color plane. Realistic, perhaps, but boring.

Yes, I need to take another shot at creating halfway decent clouds. One of the fun parts of flying on instruments IRL was being able to pop in and out of fluffy clouds. Popping out of a big fluffy cloud into the clear air was especially fun as it often gave the same sensation as stepping off the end of a cliff.

[Attila_Schroeder]

Maybe that will help you with your clouds. I uploaded this to github because I had a problem there. I took out a lot because otherwise it would have been way too big, but what’s still in there are my cloud texture generators Cloud and Worley in cloud-model.js

GitHub - Spiri0/Threejs-Ray-Box-Intersection

In the shader I had the problem that my weathermap, which determines where clouds are, caused ugly borders. I was able to solve the problem with a higher threshold value. For the actual cloud effect, however, the cloud generators are important. Cloud and Worley are two 3D textures.

Here is a screenshot in reddish light. Flying through there looks pretty good. Like through dense fog. But I’m not satisfied yet and am still working on it myself.

[Attila_Schroeder]

If i find the time i will make you a small sample app with my clouds and upload it to github

[phil_crowther]

Thanks! I had some luck creating flat cloud layers using thousands of sprites. I looks like you may also be using sprites, but to create fluffy clouds instead.

BTW - do you know if displacement maps in three.js materials work on all 3 axes (vector displacement) or only on the vertical axis? The iFFT method computes displacement on all 3 axes - which is why the displacement map shown in the upper left panel on my demo program is multi-colored. And the related normal map is computed assuming that there is 3-way displacement.

[Attila_Schroeder]

I don’t use sprites. These are volumetric clouds where you can really be inside. To do this, I define a volume in which clouds should be and then I perform raymarching. I integrate numerically the variable cloud density that depends from my cloudgenerators step by step along the ray. In addition, the density decreases with altitude, which is why the clouds below are flatter, wider and more dense , just like in reality. As a result, I get really dense, hazy clouds, because I create quasi-physical clouds. Quasi-physical because I have to integrate numerically and cannot take infinitesimal small steps. That would be far too computationally intensive. The disadvantage of my method, which creates realistic clouds, is that it is also quite computationally intensive. At least for mobile devices. But if you take smaller volumes (just 10 km instead 1000 km) and don’t make the integration steps too big, it works quite well. The picture is from my tablet. My readon 7900XTX on the desktop has no trouble at all and creates very nice clouds over tousans of km because I can place the integration steps very high there. I’ll make you a cloud app at the weekend. As mentioned, I’m far from finished, but it will help you to understand how it works. Since I have overcome the actual hurdles with the clouds and know that the rest is just fine-tuning and optimization, I have dedicated myself to the numerous other unsolved tasks of my project. I have to do cloud shadows too

[phil_crowther]

I will be interested to see if my computer can handle both iFFT waves and raymarching clouds. Above a certain altitude, I can dispense with the displacement map and switch to using a flat plane with normal map. And you should not have to render a fully detailed cloud until you get close to one. (And once you get inside the cloud, everything is white - and you hope it stays that way.) So it might be possible to economize enough to keep the framerate at my target of 60 fps.

[Attila_Schroeder]

I’ve even extracted the clouds into a miniapp. I’ll clean that a bit and then upload it.
The idea of ​​making the clouds only in the close-up range as volumetric clouds also occurred to me. It works well from the ground, because the atmosphere only allows a maximum visibility of about 300 km anyway, and that under the best conditions and you can no longer see any cloud details much earlier. But the atmosphere is important for a realistic impression! Because it changes the appearance of the clouds significantly after just a few km. That’s why I also have a scattering atmosphere, i.e. my atmosphere is also volumetric. You can see them well in my screenshots above. Or here in my homepage:

the-mars-project.com

Without an atmosphere, the clouds appear too dominant in the sky when viewed from the surface. The atmosphere scatters light more and more with distance and prefers blue light. My challenge is that clouds can be seen much further very clearly from space, but that’s my handicap, not yours

[phil_crowther]

Fluffy cumulus clouds are definitely the most challenging. You can handle stratus clouds with a simple flat plane. And I had some luck creating a fluffy undercast with sprites (I will see if I can resurrect that demo.)

If you are going to be flying at supersonic speeds, you can probably focus mostly on the distant and mid-range design. The simulations I am working on are subsonic, so I need to focus on nearby and mid-range design. I might not even reach the more distant clouds.

[Attila_Schroeder]

Here the link

GitHub - Spiri0/Simple-Volumetric-Clouds

I have tried to omit everything that has nothing to do with clouds. I added a sphere so you have an example of how the clouds cover something or are covered by it. The ugly ripples at the edge of the clouds and where there is only a hint of clouds comes from my primitive raymarching.

I still have a few things to improve on.

If you have any questions, just ask, because fighting through it yourself can be tedious.

P.S. I’m making progress on my ocean. I’m excited to see what I can achieve over the weekend.

[phil_crowther]

Thanks. It sounds like this could be really helpful.

Regarding the ocean, I find that I am facing a problem that I thought I had solved. The flat surface which holds the ocean consists of 3 groups of squares of increasingly larger sizes. I want the squares to use the same animated normal texture to create an animated material, but, in all cases, the texture needs to appear to be the same size. For example, if I have two squares and one is 2X larger than the first, that second square needs to show the animated material 4X.

Here is an example: On the left are 4 identical squares that each show the animated material 1X. On the right is a single square that is 2X larger. It also shows the material 1X, but needs to show the animated material 4X so that it looks identical to the 4 squares on the left.

The simple solution would be for the larger square to repeat the material 2X in each direction. However, in Three.js, the repeating is done at the texture level. So repeating the texture causes the material to repeat on both the large and small squares.

Are you aware of a solution to this problem?

[makc3d]

this was supposed to be solved with texture.source thing - when you have different textures with the same source (image) you can have different uv repeat settings on them

[phil_crowther]

Thanks for the heads-up. I will see if I can find some examples using that approach.
That sounds a lot easier than the other option I was pursuing of having to create a BufferGeometry with segments and pushing the same material into each segment. (They have gotten rid of faces, so all those old discussions were useless.)

EDIT
Here is what I am trying with no luck:

let txtB = txtA.clone();   // txtA is the original texture
txtB.source = txtA.source;   // with cloning, this may be unnecessary
txtB.wrapS = txtB.wrapT = THREE.RepeatWrapping;
txtB.repeat.set(2,2);
txtB.needsUpdate = true;

All I get as a result is a black texture and an error message that:
“Failed to execute ‘texSubImage2D’ on ‘WebGL2RenderingContext’: Overload resolution failed.”
The txtA is created as a frameBuffer.texture, if that makes any difference.

[Attila_Schroeder]

With the BufferGeometry is my approach. Unfortunately, I still haven’t understand the problem why my DataTexture suddenly turns black from a certain geometry resolution. And in addition this issue is also device-dependent, very strange. With BufferGeometries it would be possible to create a tiling free ocean with high resolution in close areas and low resolution from far areas.

[phil_crowther]

It appears that I will have to try this method.
Could your problem with black texture be that the texture is somehow not a multiple of 2?
I think that is a requirement for DataTexture. Or maybe I am thinking of MipMaps.

[makc3d]

@phil_crowther

I am trying with no luck

try harder

@phil_crowther

The txtA is created as a frameBuffer.texture, if that makes any difference.

oh I did not try that tbh. Idk why would it not work, but maybe. make a fiddle. you were right, it does not work.