Batching for the rendering of objects.

[RandomGamingDev]

trafficstars

Increasing Access

This would increase the speed of projects.

Most appropriate sub-area of p5.js?

• [ ] Accessibility
• [ ] Color
• [X] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [x] 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.

[davepagurek]

Specifically for the combining multiple meshes into one case, I'm working on something for https://github.com/processing/p5.js/issues/5393 that will be able to do that, I'll tag you when I put up a PR so you can see if that addresses some of the use you're thinking of! For now it'd be done on the CPU once upfront to create a p5.Geometry that can be drawn all at once with model(), optimizing mostly for the case where you would be reusing that one combined shape. In the future that could be sped up with webgl2 transform feedback instead of CPU calculations, but maybe you were talking about something more immediate mode than retained mode like that?

[RandomGamingDev]

That sounds pretty good and I was talking more generally so both count lol