Add FFT Ocean

[RicardoTM05]

Hello, I'm wondering if there's any plan on adding the ocean.
I've been looking for ways to add the ocean to my project, and most techniques I found aren't realistic enough to pair with the atmosphere, however I've found one technique that I think would match perfectly. Unfortunately I didn't found any three.js implementation that really fits this project (most have tiling issues). However, GarretGunnell's Water not only looks amazing, he also solved the tiling issue, the problem is that it was made on Unity. I'm wondering if it would be feasible to port it to three.js. You can see his video on the topic, it's a great video.

Anyways, unfortunately I'm not savvy enough to make it happen, but I leave the idea in case someone capable is willing to implement his work on this project, I believe it would fit quite nicely.

[shotamatsuda]

Good point. I've actually created ocean shaders a couple of times, and there are plenty of techniques and examples that can be directly implemented, including the one you mentioned.

The real blocker to me is that if we want a globe-scale ocean, we will need the water-land boundary with sufficient resolution. Simply adding ellipsoidal surface geometries over 3D tiles doesn't really work, because the geometric error at the boundary quickly becomes noticeable. Cesium Ion provides water-area mask data as part of quantized mesh, which can be used for this purpose. For 3D tiles such as Google Photorealistic Tiles, ocean tiles represent the sea floor rather than sea surface.

One approach I've been thinking about is to overlay a custom shader material, masked by water-land boundary images, on top of 3D tiles, where the reflected radiance is computed at the intersection between the view ray and the ellipsoid (with modifying the depth buffer). Although it would be fragment-intensive, it could allow us to compute the optical depth between the sea surface and sea floor in a single pass.

The problem, however, is that Three.js doesn't yet support NodeMaterial on WebGLRenderer, which prevents 3d-tiles-renderer from supporting it as well. Adding the support for NodeMaterial to ImageOverlayPlugin on the user side doesn't seem to be trivial, unlike fading them.

[fyyyyy]

Cant you refine the border on the fly while geometry is loaded ? any geometry below 0 MSL will be ocean. There are only very few places on earth that would get "drowned"

[shotamatsuda]

There's no such information in 3D tiles or quantized meshes about whether a tile contains water-land boundaries, as far as I know. Even if we had that, the intersection between terrain and water surface would require much higher detail than terrain alone, so refining the geometric errors would not be feasible. Think of a complex shoreline on an otherwise relatively flat terrain.

[tomasferrerasdev]

Isn't there a chance of using overpass or similar and making it based on a geoJson? (maybe theres a lot of data in a geojson of that size)

[shotamatsuda]

Depending on what you want to achieve, if it is the globe-scale ocean I mentioned earlier, my previous answer still holds regardless of whether the data source is image or vector (GeoJSON). One possibility with GeoJSON is to project it onto the ellipsoid and triangulate it, but it will quickly become apparent that tiling is necessary. At that point, the situation will be similar to creating 3D tiles or a quantized mesh from GeoJSON.

If the area you want cover with water surface is sufficiently small that the geometries created from GeoJSON don't need frustum culling or LOD, then such approach might work, though the same applies to image sources for the water-land boundary.

[shotamatsuda]

An approach that feels worth trying now is, in WebGLRenderer, to generate image tiles using GDAL from image sources such as Solar System Scope's 8K earth specular map, and overlay them using ImageOverlayPlugin with a custom ocean material. 8K is far from sufficient to cover viewpoints near the ground, but that would at least reduce the problem down to finding a better data source that we can use.