Skip to content

[Feature Request] Batch Multiple Sprites into Single Draw Call (GPU Instancing) #414

@breno131c-prog

Description

@breno131c-prog

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

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions