What causes WebGL particles issuing one draw call per particle?

Each particle is drawn with its own draw call instead of using instanced or buffer-based rendering, so the CPU-to-GPU overhead dominates and the frame rate collapses.

How do I catch this when it only happens for some players?

Capture it automatically from the player's device with the full stack trace, the device and OS, the build, and a breadcrumb trail of what they did. That turns a vague complaint into a specific, reproducible issue you can fix without owning the hardware it happens on.

How to Fix WebGL Particles Issuing One Draw Call Each Instead of Instancing

Quick answer: Use ANGLE_instanced_arrays (or WebGL2 instancing) to draw all particles in one call, or pack positions into a single buffer and update it per frame.

Drawing particles individually multiplies driver overhead. Instanced rendering submits one geometry and a per-instance attribute buffer, collapsing thousands of draws into one. Here is how.

How to fix it

1. Use instanced rendering

With WebGL2 (or the ANGLE_instanced_arrays extension) call drawArraysInstanced once, supplying per-particle position/color/size as instanced vertex attributes.

2. Update one buffer per frame

Keep particle state in a single typed-array-backed buffer and upload it with bufferSubData each frame instead of re-binding geometry per particle, minimizing state changes.

3. Move simulation off the hot path

For large counts, simulate in a vertex/transform-feedback or fragment shader so the CPU only uploads spawn data, avoiding per-particle JavaScript math each frame.

Catching the ones you can't reproduce

The hardest version of this to fix is the one you can't reproduce — it only happens on a player's hardware, OS, driver, or save state, under conditions that simply aren't present on your machine. A report that says “it crashed” or “it froze” gives you nothing to act on, so the bug survives release after release while quietly costing you players.

Automatic error capture closes that gap. Each failure arrives with its full stack trace, the device and OS, the build number, and a breadcrumb trail of what the player did right before it broke, so even a failure you have never seen becomes a specific, reproducible issue. Fold identical failures into one signature ranked by how many players each hits, and your worklist sorts itself worst-first instead of arriving as a stream of vague complaints.

This is where a tool like Bugnet earns its place. Its SDK captures every HTML5 error automatically with the full stack trace plus device, OS, memory, build, and game-state context, folds duplicates into one grouped issue with an occurrence count, and ties each to the build it first appeared on — so you fix the problem that hurts the most players first and confirm it is gone when its signature disappears from the next release.

Ship the fix, watch the signature disappear from the next build. That's how you know it's really gone.