Examples: WebGPU - Compute Ping/Pong Textures Fluid simulation with TSL

[mats31]

Description

A few years ago, I've ported the Fluid Distortion example from OGL to three.js. Now that I'm digging into TSL, I decided to do it again in WebGPU. The logic stays the same using GPGPU rendering but with several StorageTextures. I thought that maybe it could be an helpful example 😊.

[RenaudRohlinger]

Nice! I also put together a TSL implementation with a basic RenderTarget. I’m curious to see how Storage Textures performances compares with classic RTT. That’s a neat idea, and I’m looking forward to benchmarking both approaches.

Also in a few weeks, Chrome Canary should release the optional texture-formats-tier2 feature (gpuweb/gpuweb#5226
). This would let us drop the ping-pong strategy and instead use a single storage texture with both read and write access at the same time.

That said, it probably makes sense to keep the ping-pong approach for now, since texture-formats-tier2 won’t be available on all GPUs. Realistically, we’ll likely need to wait another year before support is widespread enough to rely on it.

[mats31]

Thanks @RenaudRohlinger!

That would be a very interesting comparison indeed. I didn't know about this upcoming update for Chrome though, I'll make sure to have a look, thank you 👍.