[Feature] Gradients for Backgrounds

[bungoboingo]

Gradients are now usable as a Background variant

When creating a background with a gradient, the syntax is slightly different than when creating it on a Canvas.

Example of building a gradient for background:

container::Appearance {
    background: Gradient::linear(Radians(PI/3.0)) //or Degrees(45.0)!
        .add_stop(0.0, Color::from_rgb8(255, 0, 0))
        .add_stop(0.5, Color::from_rgb8(0, 255, 0))
        .add_stop(1.0, Color::from_rgb8(0, 0, 255))
        .build()
        .into(),
    ..Default::default()
}

Users can declare a Gradient with a specified Angle (rads or degrees), and add up to =8 ColorStops along that angle. The bounds of the gradient will be calculated from the bounds of the quad that it is filling.

Changes to Canvas gradient syntax

Users can no longer specify a Position::Absolute or a Position::Relative; now users can only specify an absolute start & end position when using a gradient as a Fill on a Canvas. This change was made to simplify the gradient API. Calculating bounds is possible with a mesh but would increase the cost of our tessellation phase which is not ideal.

New syntax for creating a Gradient fill on a Canvas (very similar to old one):

let gradient = Gradient::linear(
    Point::ORIGIN,
    Point::new(
        bounds.x + bounds.size().width,
        bounds.y + bounds.size().height,
    ),
)
.add_stop(0.0, Color::from_rgb8(255, 0, 0))
.add_stop(0.5, Color::from_rgb8(0, 255, 0))
.add_stop(1.0, Color::from_rgb8(0, 0, 255))
.build();
    
frame.fill_rectangle(Point::ORIGIN, bounds.size(), gradient);

Some API notes

Due to this differing requirement for both Canvas and Background gradient types, I've had to redeclare Gradients separately in core & graphics. I messed about with keeping one builder for both, but it led to too many unexpected behaviors. Duping the Gradient declaration between the two now has no unintended consequences of, for example, declaring a Gradient with an angle as a fill for a mesh, which is undefined behavior. Let me know what you think!

Changes to Gradient rendering pipeline

Gradients are now stored as a vertex type, GradientVertex2D which takes a position & flattened gradient data. This change allows us to stay fast & reduce draw calls in quad instancing/triangle drawing. This will also make gradients more accessible for different platforms (eg for WASM target), as it removes the requirements of storage buffer support.

Old gradients bench (rendering 5151 static gradients):

New gradients bench (same 5151 static gradients)!:

GPU is now much more happy!

This does have the tradeoff of forcing a lower maximum number of color stops, which is now 8 compared to.. like 186,000. If anyone has any issues with this please let me know in the comments below!

Support added

WASM should now be able to compile gradient shaders & use gradients as I've removed the need of storage buffers. Let me know if you see any issues!

Testing

Tested:
M1 mac (WGPU + metal, tiny-skia)
Linux (WGPU + Vulkan, tiny-skia)
Windows 10 (WGPU + DirectX, tiny-skia)

🌈 🌈 🌈
Welcoming all feedback on the API & other changes! 🎉

(reopened from 1597 which was auto closed due to advanced-text merge)

[hecrj]

Awesomesauce! 🥳

Changed some minor details here and there, but overall the work here is excellent. Great job @bungoboingo!

Let's get this merged! 🎉