search

processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
http://p5js.org/
GNU Lesser General Public License v2.1
21.67k stars 3.33k forks source link

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

Open fffiloni opened 5 years ago

fffiloni commented 5 years ago

Nature of issue?

Most appropriate sub-area of p5.js?

Which platform were you using when you encountered this?

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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.