BatchedMesh Example much slower on WebGPU than WebGL on Android

The multiDrawAPI isn't currently supported in WebGPU, which is why a single multi-draw call with 20,000 batched elements performs significantly better in WebGL, especially on smartphones.

However, there’s good news! A new MultiDrawIndirect API is on the horizon for WebGPU, which is expected to surpass the performance of the WebGL version: https://github.com/gpuweb/gpuweb/issues/1354#issuecomment-2370162949 https://issues.chromium.org/issues/369246557/dependencies

This API is already available in Chrome Canary behind the chromium-experimental-multi-draw-indirect flag, enabled through enable-unsafe-webgpu. I plan to begin working with it over the coming weeks, as multi-draw is an important part of my workflow.

In the meantime, as discussed in this PR, we can implement a workaround using multiple drawIndirect() calls with a single indirect buffer, mapped at different offsets for each draw alongside Render Bundles. This approach can mimic the upcoming MultiDrawIndirect API until it becomes widely available: https://github.com/mrdoob/three.js/pull/29197#issuecomment-2324472275

For now, I’ll wait for @Spiri0's work on implementing drawIndirect that looks very promising, which will provide a solid base for that work: https://github.com/mrdoob/three.js/issues/29568#issuecomment-2396426753

mrdoob / three.js

BatchedMesh Example much slower on WebGPU than WebGL on Android #29580

Description

Reproduction steps

Code

Live example

Screenshots

Version

Device

Browser

OS