Feature Request: support GPU.js (or turbo.js) for rendering canvas ?

[fffiloni]

Nature of issue?

• New feature request

Most appropriate sub-area of p5.js?

• [ x] Core/Environment/Rendering

Which platform were you using when you encountered this?

• [x ] Desktop/Laptop

Problem encountered

I'm making an animation drawing tool, that displays onion skin to help animators to stay on track. But, when we have lots of curveVertex path displayed, like both onion skins + current drawing,
CPU is way too much working.

I handled that by giving possibility to enable/disable onion skins and specific layer, to let the CPU breath, but maybe we could give it even more air.

New feature details:

I was browsing the specs of some libraries that enables javascript to be rendered via the GPU, like GPU.js or Turbo.js, and i thought that we could be able to specify how the draw function would be executed form the CPU or from the GPU.

What about an additional module called p5.gpu.js that would let us active this performance enhancement feature ?

Thanks !

[Spongman]

Looks interesting. How do you propose these libraries will help improve the performance of your use-case? Can you show us a devtool bottom-up profiler screenshot while your ‘onion skins’ thing is running?

[fffiloni]

I found a way to improve performance while rendering onion skin, using both graphics buffer instead of recalculates curves each time, and give possibility to toggle the onions skins being displayed on canvas.

But to give a nice and smooth drawing experience, i redraw constantly the canvas while the mouse is down and dragged. So the current layer that handle the current drawed drawing is recalculated each time, but the others information (onion skins, previous images) are not recalculated, while the images from their dedicated buffers are still rendered on canvas.

For other event, the noLoop(); function is there and i only redraw when it is necessary.

The redraw process constantly running while mouse is dragged causes the high cpu usage.

It’s normal i guess, that’s why passing the redraw process through gpu instead of cpu would be another way to keep performance
Smooth.

You can experience it here: https://solomotion.herokuapp.com

[limzykenneth]

I find that for drawing while mouse is dragged is usually achieved more efficiently and more consistently with either using mouseIsPressed in draw() or tracking the state of the app in mousePressed and have the actual drawing always happening in draw() while querying the state of the app.

I think even if the processing is passed to the GPU it is still unnecessarily heavy as you will be calling the drawing functions on every cycle of the event loop and you will have no control over the fps as well.

I have implemented realtime curveVertex based drawing that uses two/three 2D p5.js canvases and one 3D three.js canvas (running its own stuff), each of them with half of full screen resolution and running 30-60fps without much problem. If you like I can try dig up some code for your reference.