Web3D | 基于Cesium的高性能水面与水体仿真
Web3D | 基于Cesium的自定义渲染
https://threejs.org/examples/?q=ocean#webgpu_ocean
https://sbcode.net/threejs/gerstnerwater/
29a.ch/sandbox/2011/webglice/
You mean something like this example by Attila Schroeder? [See related discussion here.]
I used his program to create a simpler version which is incorporated in a module that I use for flight simulations, like this or this.
For best performance, I would suggest using WebGPU. However, if you are determined to use WebGL, I have a WebGL version of the above - which is an updated version of the jbouny program.
In the images that you posted above, the bottom example doesn’t need a special wave generator, but merely a reflective plane.
Can you see the video in the linked article? The difference in the effectiveness of these feelings that you share is very large
Can you see the video in the linked article? The difference in the effectiveness of these feelings that you share is very large 
No, I hadn’t looked at them because I thought they were links to the 2 articles.
The examples that I provided use mesh geometries to create realistic 3D waves using the inverse fast fourier transformation.
However, the videos indicate that you may not need 3D waves. If so, you can use the three.js Ocean module that use normal maps to create the illusion of waves. Or if you are more interested in flowing water, you can use the Water2 module. And WebGPU offers another interesting variation that looks interesting both above and below the water.
So, just within three.js, you have many different artistic options available to you.
I saw video. Cant see difference.
https://www.tamats.com/work/bwr/
Could it be the reason for the space environment?
Do you know how they do the wake and whitecaps on this sailing example? I have a wake on mine, but I like this version better.
I know almost everything about creating water in video games.
In the example “tamats” foam trail is texture appling to water shader, but thre trail applied for one boat, other boats wihout trails, because of performance. You can see code with extension Spector.js. Waves is one plane with projectes waves and have issue in some angles.
float foam = 0.0;
vec3 foam_texture = texture2D(u_foam_texture, v_oldpos.xz * -0.12 + vec2(0.01, 0.02) * u_time * 1.5).x * texture2D(u_foam_texture, v_oldpos.xz * 0.25 + vec2(-0.031, -0.05) * u_time).xyz;
float top_factor = max(u_foam.y, v_top_factor); //pow( clamp( pos.y / (u_amplitude), 0.0, 1.0), 1.0) * 3.0;
vec2 trail_uv = (u_trail_transform * vec3(pos.xz - u_camtarget.xz, 1.0)).xy;
trail_uv = clamp(trail_uv, 0.0, 1.0);
float trail = texture2D( u_foamtrail_texture, trail_uv ).x * 1.5 * u_foam.z;
col += v_att * clamp( foam_texture - vec3( 1.0 - (max(u_foam.x * top_factor, trail)) ), 0.0, 1.0);
Another solution is using render target texture where you can project boat position like white color and then in fragment shader change white color to foam. And maybe for large distance need to use several render target to show trail for far boats.
Foam trail-fluid: Register | The Digital Fairy
Source: GitHub - jwagner/fluidwebgl: WebGL Fluid Simulation
Last year i made some types of water.
Thanks for this demo (its 2D, but in my project its already 3D waves): GLSL Sandbox
Okay, it looks like I need to find a way to find a good transparent texture and figure out where to place the texture within my particular grid system since I will not always be aboard the ship.
That is a nice gallery of different styles.
