Batching for the rendering of objects.

Increasing Access

This would increase the speed of projects.

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

Feature enhancement details

Currently projects with multiple shapes drawn can be very slow. This is largely due to draw calls. This can be partially fixed with instancing like seen here: https://github.com/processing/p5.js/pull/6276 and in issue #6275, but another effective strategy, especially for those who don't want to deal with more complex things like combining meshes manually or instancing would be to batch the rendering of objects together so that they may be able to be drawn within less drawn calls. This would however be quite the undertaking and require a decently substantial change to p5.js, so if it's not possible or worth it to implement this, I'd understand that too.

Start by reading pull request #6276 and issue #6275, which are cited as related approaches to reducing draw calls. Investigate how p5.js currently renders multiple shapes, then define and benchmark a batching approach whose completion can be measured by fewer draw calls and improved performance for projects with many objects.