2

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.

Praveen
  • 23
  • 5

1 Answers1

2

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.

Paul Wheeler
  • 18,988
  • 3
  • 28
  • 41
  • Thank you for confirming that WEBGL is slower than the default mode. I have roughly 2 million lines being drawn and the profiler as expected shows the lines render taking the most amount of time. I need these many lines to get the texture I am looking for. – Praveen Mar 24 '22 at 14:41
  • 1
    2 million lines is going to be a lot whether you use WEBGL or a 2d canvas. There are definitely ways to use WEBGL to draw such complex things performantly. The trick is to minimize the distinct drawing instructions that get sent to the GPU and maximizing what can be statically cached on the GPU (typically a list of triangle vertices/normals/UVs). This means describing what you're drawing with geometry and uniforms, and then drawn in parallel using shaders. Two million calls to the `line()` function is going to be the absolute opposite of this. There will be no caching and little parallelism. – Paul Wheeler Mar 24 '22 at 19:48
  • I wish there was some way to do this with P5js (processing lib with java was dramatically fast in WEBGL mode). It appears that I will have to explore core WEBGL for this. Any idea if three.js will provide better flexibility to play around with buffering etc? – Praveen Mar 24 '22 at 20:32
  • 1
    I believe Three.js is more flexible/full featured in this department. However p5.js does have some extensibility in this regard: https://paulwheeler.us/articles/custom-3d-geometry-in-p5js/ – Paul Wheeler Mar 24 '22 at 23:30