This example is running in WebGL2 and should work in most browsers. You can check the WebGPU examples here.
cubic_splines.rs:
//! This example exhibits different available modes of constructing cubic Bezier curves.
use ;
// -----------------------------------
// Curve-related Resources and Systems
// -----------------------------------
/// The current spline mode, which determines the spline method used in conjunction with the
/// control points.
/// The current cycling mode, which determines whether the control points should be interpolated
/// cyclically (to make a loop).
/// The curve presently being displayed. This is optional because there may not be enough control
/// points to actually generate a curve.
;
/// The control points used to generate a curve. The tangent components are only used in the case of
/// Hermite interpolation.
/// This system is responsible for updating the [`Curve`] when the [control points] or active modes
/// change.
///
/// [control points]: ControlPoints
/// This system uses gizmos to draw the current [`Curve`] by breaking it up into a large number
/// of line segments.
/// This system uses gizmos to draw the current [control points] as circles, displaying their
/// tangent vectors as arrows in the case of a Hermite spline.
///
/// [control points]: ControlPoints
/// Helper function for generating a [`Curve`] from [control points] and selected modes.
///
/// [control points]: ControlPoints
// --------------------
// Text-related Components and Systems
// --------------------
/// Marker component for the text node that displays the current [`SplineMode`].
;
/// Marker component for the text node that displays the current [`CyclingMode`].
;
// -----------------------------------
// Input-related Resources and Systems
// -----------------------------------
/// A small state machine which tracks a click-and-drag motion used to create new control points.
///
/// When the user is not doing a click-and-drag motion, the `start` field is `None`. When the user
/// presses the left mouse button, the location of that press is temporarily stored in the field.
/// The current mouse position, if known.
;
/// Update the current cursor position and track it in the [`MousePosition`] resource.
/// This system handles updating the [`MouseEditMove`] resource, orchestrating the logical part
/// of the click-and-drag motion which actually creates new control points.
/// This system handles drawing the "preview" control point based on the state of [`MouseEditMove`].
/// This system handles all keyboard commands.