How would you add buoyancy to this?

[ROBYER1]

Before I dive in at the deep end and try this - how would you recommend I start with adding buoyancy to this like for a boat floating in the waves?

Maybe I can submit a PR when I attempt it, this example is fantastic!

[Spiri0]

Hi @ROBYER1, for buoyancy you need the displacement data on the CPU side. This means that you have to read out the displacement textures. However, you don't need to read them out in a particularly high resolution, as larger waves are crucial for buoyancy.
To demonstrate how to read data from textures, I created an example in threejs: https://threejs.org/examples/?q=readba#webgpu_multiple_rendertargets_readback

In the example you can read the diffuse and normal textures from the GPU back into the CPU. So that you can see them, I put them on the screen again using a dataTexture. But this only serves as an illustration. What is crucial is that you then have the texture data in an array in the CPU. And in the case of displacement textures, the wave heights.

I've actually had this in mind since the beginning, but I'm working on three other projects and am also busy with a PR for threejs.

The readback function to get data from the GPU back into the CPU is very useful and if you don't overdo it, it's not a problem. I also use it in my Mars app, for example: https://the-mars-project-app.site/Mars/

This is the magic line to read data back from the GPU.

pixelBuffer = await renderer.readRenderTargetPixelsAsync( readbackTarget, 0, 0, width, height, 1 );