3.1.4
Added new pointers API
Fixed multi-touch support for p5play
3.1.1
q5-webgpu: fixed noTint
3.1.0
q5 WebGPU can now draw significantly more shapes!
| Shape | Unstroked | Stroked |
|---|---|---|
| Rect (un-rounded) | 1x | 2.5x |
| Rounded Rect | 10x | 15x |
| Ellipse, Circles, & Arcs | 2x | 6x |
| Line | - | 4x |
It's about ~30-50x more shapes than p5 v2 can draw.
These performance gains were achieved via the addition of two new shaders for rounded rects and elliptical arcs. These specialized shaders use instanced rendering, a newish feature of WebGPU.
The new approach gives more work to the GPU, freeing up the CPU. That's an especially good tradeoff for q5 when used with CPU heavy addons such as the upcoming q5play!
Here's a breakdown of which shader is used to draw which q5 functions.
Rounded rectangle shader used by:
rect, square, line, and capsule (new!)
Elliptical arc shader used by:
ellipse, circle, arc, point
Custom shapes shader used by:
triangle, quad, plane, beginShape/endShape
Visual quality of the shapes that use the new shaders was also improved. Strokes are no longer made up of separate lines and ellipses, which were visible when using a translucent stroke. Also, curved edges are now smooth and anti-aliased since they're drawn in the fragment shader step, not via triangle strips.
A new function for stroked capsule drawing capsule has been added! A capsule is basically pill shaped. It'll be used extensively by q5play.
https://q5js.org/learn/#capsule
Demo: https://beta.openprocessing.org/sketch/2658148
One caveat is the performance gains from this new method only compound if you're drawing shapes in the same family of shapes (rounded rects or elliptical arcs). Performance is diminished if your sketch requires that q5 frequently switch shaders which also changes pipelines in WebGPU. For example, it'd be best to draw 50,000 rects, then 50,000 ellipses rather than trying to draw a rect then an ellipse 100,000 times.