Examples: Add webgpu_compute_cloth

[holtsetio]

Description

This adds a simple cloth simulation example. It uses a verlet system running in compute shaders and is also a nice showcase for MeshPhysicalNodeMaterial's sheen properties.

live example

[holtsetio]

Possible improvements:

• Add a ground and shadows
• right now the verlet vertex forces are accumulated by looping over the affecting springs. Using fixed point atomics instead might be a bit slower and less precise, but the code might be easier to follow.
• Right now the cloth mesh is a two-sided plane. Giving it a little bit of depth/volume would look way better, but code would become more verbose.

[RenaudRohlinger]

The example is currently broken in WebGL due to exceeding the limit on instancedAttributes. In WebGL2, the maximum number of separate transform feedback varyings is typically 4. To work around this, we could use interleaved mode with transform feedback, which allows up to 64 components via MAX_TRANSFORM_FEEDBACK_INTERLEAVED_COMPONENTS.

But switching to interleaved mode would increase complexity and the webgl fallback of the compute shaders is already tricky so I would avoid such change.

For now, a simpler fix is to pack multiple uint values into a single uvec4 instanced attribute, which should keep us within the WebGL2 limits and get the fallback working again without major changes.

[sunag]

I followed your other examples on X, they are all amazing, thanks for sharing.

I made a small update to the way normalView was being replaced.

[kungfooman]

Super cool example! I implemented verlet physics once too after I figured out that the Hitman series used it (at least in the oldest releases). I would love to see more verlet physics for everything - you can even use it for skeletal animation blending e.g.! ❣️ Will you work more with verlet?

Even tho I'm on Linux and WebGPU is broken on my setup, this still works anyway 🤯 Does it just fallback to WebGL? I guess than it's not just "WebGPU".