[Performance] Support GPU Instancing to Reduce Draw Calls for Multiple Sprites

Problem

When rendering multiple Rive sprites with the same artboard/animation, each sprite requires a separate draw call. This limits performance when displaying many identical sprites (e.g., particles, crowds, repeated elements).

Current Performance:

• 100 identical sprites = 100 draw calls = - fps

Expected with Instancing:

• 100 identical sprites = 1 draw call = + FPS

Proposed Solution

Implement GPU instancing or batching for sprites that share:

• Same artboard
• Same animation state
• Same texture/material

This would allow rendering hundreds or thousands of identical sprites with minimal performance impact.

Use Cases

• Particle systems
• Crowd simulations
• Repeated UI elements
• Tile-based games
• Background decorations

Technical Approach

Similar to how PixiJS implements sprite batching, the renderer could:

1. Group sprites with identical properties
2. Upload instance data (position, scale, rotation) to a single buffer
3. Use drawArraysInstanced or drawElementsInstanced for WebGL2
4. Fall back to manual batching for WebGL1

Current Workarounds

• Frustum culling (only render visible sprites)
• Shared artboards, animation (reduce memory, but not draw calls)

Note

While Rive already supports artboard instancing for memory optimization, this feature request is specifically about reducing draw calls through GPU instancing, which is a different optimization technique.

Start by locating the renderer's WebGL1 and WebGL2 paths and reviewing how existing artboard instancing is implemented. Measure current draw calls for repeated sprites, then define and validate batching or GPU instancing for matching artboards, animation state, and materials, including the WebGL1 fallback.