Making use of the GPU to render huge amount of objects

Hi,

Welcome to the community! :slight_smile:

By default, p5.js is not using the WEBGL mode for rendering but rather the standard canvas html element.

You said that you were using WEBGL but if you are only drawing lines, text and rectangles in two dimensions, there’s no need to use it.

For the canvas, it’s usually drawn using the CPU (in immediate mode) but today some browsers do hardware acceleration using the GPU for rendering :

On the other side WEBGL is using the gpu for rendering and you might actually wonder which one to choose as stated in this thread :

Then if you need more performance, there’s some tricks to optimize the canvas rendering (like the one you did by pre rendering static shapes on a separate layer) :

But the issue is that p5js takes care of the webgl rendering for you so you don’t have a direct low level access to the api. If you really need more performance, go with WEBGL directly rather than using p5js so you can do optimizations. (again makes more sense if you are rendering 3d but works for 2d)

1 Like