Examples: Add WebGPU check to some compute demos.

[Mugen87]

Related issue: -

Description

The PR adds WebGPU compatibility checks to some compute demos that don't work properly with WebGL 2.

1. webgpu_compute_birds runs with 3-4 FPS in Firefox/macOS with M2 Pro and produces the following WebGL warnings:

WebGL warning: texSubImage: Uploads from a buffer with a final row with a byte count smaller than the row stride can incur extra overhead. 27
WebGL warning: drawArraysInstanced: Drawing to a destination rect smaller than the viewport rect. (This warning will only be given once)

@cmhhelgeson Is this example supposed to run with WebGL 2? If so, do you know why Firefox complains?

2. webgpu_compute_cloth shows a broken velvet mesh in the first frames and then the velvet disappears. The following warnings are logged.

WebGL warning: texSubImage: Uploads from a buffer with a final row with a byte count smaller than the row stride can incur extra overhead.

@holtsetio Does the cloth simulation support WebGL 2? I suppose it's similar problem like webgpu_compute_birds.

3. webgpu_compute_texture_3d fails with a runtime error:

Uncaught (in promise) Error: Uniform "storageTexture" not declared.

[cmhhelgeson]

@cmhhelgeson Is this example supposed to run with WebGL 2? If so, do you know why Firefox complains?

I recall it working on Chrome/Firefox on Windows but I never tested it on Mac. I'll have to try it again.

I'm not sure how much work we want to put into this given previous statements on aligning the WebGL backend to offer comparable compute capabilities as the WebGPU backend: #31250 (comment) However, I'm not sure the compute_birds example would fall under errors introduced by the transform feedback, so I'll take another look at it.

[Mugen87]

I'm not sure how much work we want to put into this given previous statements on aligning the WebGL backend to offer comparable compute capabilities as the WebGPU backend-

Indeed. The PR does not question this premise.

However, the examples should work without producing warnings in the browser console. If there are warnings, we should understand why and verify if we can fix them.

It's also a red flag if examples work with WebGPU but visually break in the WebGL backend like webgpu_compute_cloth.

[Mugen87]

Merging the PR for now. Ideally, at least webgpu_compute_cloth and webgpu_compute_birds can be fixed, so the compatibility check can be removed.

Besides, webgpu_compute_birds is computationally very expensive. Even with Chrome and WebGPU the examples only runs in the range 20-35 FPS on a macMini with M2 Pro. How about reducing the bird count to mitigate this issue?

[cmhhelgeson]

Merging the PR for now. Ideally, at least webgpu_compute_cloth and webgpu_compute_birds can be fixed, so the compatibility check can be removed.

Besides, webgpu_compute_birds is computationally very expensive. Even with Chrome and WebGPU the examples only runs in the range 20-35 FPS on a macMini with M2 Pro. How about reducing the bird count to mitigate this issue?

The birds performance issue can likely be resolved by sorting the birds so each bird doesn't have to loop through each of this neighbors. This is something I've wanted to implement and something explicitly mentioned by @simondevyoutube in his shader tutorials as an improvement. We can use bitonic sort for this purpose to get something up quickly, or potentially a prefix sum/counting sort approach for maximum performance.

How about this. I will try to prioritize performance improvements for the compute examples over the weekend. If those aren't addressed by r180 launch, then we can lower the number of birds until the Mac performance issue is sufficiently addressed.

[Mugen87]

Sounds good!