I created a sketch which draws 100s of thousands of lines. As expected, it is quite slow. So, I tried the same sketch with WEBGL mode. But this turned out to be slower than the default mode.
My understanding was that WEBGL leverages GPU for fast rendering. Is it not true?
Thank you.
createCanvas(windowWidth, windowHeight, WEBGL)
Side note: I coded this sketch first in Processing (java), where the WEBGL mode was 100 times faster than the default mode. So, I expected the same with P5js.
Drawing numerous stroked shapes in p5.js with WEBGL is notoriously slow. See: Sketch runs slow in P5.js WEBGL on the processing.org Discourse forum. If you specifically want to draw lines and/or curves and you don't need 3d perspective then a 2d canvas will actually perform better (and in most browsers it will still utilize the GPU). If you are actually utilizing 3d perspective and other WEBGL rendering capabilities then the key thing is to reduce the number of drawing instructions, and if possible avoid relying on p5.js to draw strokes. In order to give you more specific advice on how to do that you are going to have to post a minimal reproducible example of what you are trying to do.