I have an application using three.js with WebGLRenderer that renders a lot of lines (2D polygons). It's 20K+ polygons consisting up to 70K points. Right now I use custom shader based on LineMaterial from three. It works similarly, but doesn't use InterleavedBufferAttributes, just BufferAttributes i.e. is eligible for geometry merging.
I've read somewhere that WebGPU can merge draw calls automatically (so I could quit geometry merging), but didn't manage to make it work with experimental three.js implementation. Is this even a thing? I can't find relevant information right now.
Is there any advantages WebGPU has over WebGL for my case? Would it be faster? Are there some performance tweaks? I'd like to get most efficient rendering for as much polygons as it's possible.
I've read somewhere that WebGPU can merge draw calls automatically...
No, I'm afraid not. Maybe the overhead is a bit lower. But merging/batching will still be important in WebGPU, as it is in other modern graphics APIs like Vulkan, DirectX, or Metal. Don't plan to draw 100,000 THREE.Mesh instances casually any time soon. :)
WebGPU remains a very new technology today (October 2023) and its implementation in three.js is still catching up with the three.js WebGL backend, just in terms of basic support for normal features. WebGPU isn't magic performance dust: it mainly has greater flexibility, and offers features missing in WebGL that an engine could use appropriately in the right circumstances to render faster, but an engine has to implement these optimizations too.
Unless you're planning to use some feature of WebGPU that WebGL doesn't have, it's probably best to use three.js defaults, which is THREE.WebGLRenderer today. I expect that if/when THREE.WebGPURenderer becomes stable, better, and faster, three.js will begin to use it by default.
On the bright side — 70,000 points shouldn't be a bottleneck in either API, if appropriately batched.