Draw Calls and WebGL Performance
In WebGL-based applications, each draw call represents a request to render a mesh or a part of a mesh. Drawing multiple objects with separate draw calls can quickly become a performance bottleneck, especially when dealing with scenes containing a large number of objects or complex animations. Reducing the number of draw calls is critical for achieving smooth and responsive 3D experiences on the web.
Link: Optimize Your Scene
WEBGL_multi_draw Extension
The WEBGL_multi_draw extension is an WebGL extension that allows multiple draw calls to be batched together into a single call. This extension has the potential to significantly reduce the overhead associated with issuing individual draw calls, leading to improved rendering performance.
Link:
- WEBGL_multi_draw from MDN docs
- Tracking issue of firefox, also source of the image above
Alternatives
- Instancing: requiring all meshes to be exactly the same
- Instances: animatable, not fast enough
- Thin Instances: fast, hard to update, only baked bone animations available
- Merging Meshes: unable to change or animate
- WebGPU Snapshot Rendering: hard to animate, require WebGPU to work
- WebGPU multi draw indirect: spec not finished yet
