This example is running in WebGL2 and should work in most browsers. You can check the WebGPU examples here.
animation_graph.rs:
//! Demonstrates animation blending with animation graphs.
//!
//! The animation graph is shown on screen. You can change the weights of the
//! playing animations by clicking and dragging left or right within the nodes.
use ;
use ;
use FromArgs;
use FileAssetReader;
use IoTaskPool;
use PrettyConfig;
/// Where to find the serialized animation graph.
static ANIMATION_GRAPH_PATH: &str = "animation_graphs/Fox.animgraph.ron";
/// The indices of the nodes containing animation clips in the graph.
static CLIP_NODE_INDICES: = ;
/// The help text in the upper left corner.
static HELP_TEXT: &str = "Click and drag an animation clip node to change its weight";
/// The node widgets in the UI.
static NODE_TYPES: = ;
/// The positions of the node widgets in the UI.
///
/// These are in the same order as [`NODE_TYPES`] above.
static NODE_RECTS: = ;
/// The positions of the horizontal lines in the UI.
static HORIZONTAL_LINES: = ;
/// The positions of the vertical lines in the UI.
static VERTICAL_LINES: = ;
/// Initializes the app.
/// Demonstrates animation blending with animation graphs
/// The [`AnimationGraph`] asset, which specifies how the animations are to
/// be blended together.
;
/// The current weights of the three playing animations.
/// Initializes the scene.
/// Creates the assets programmatically, including the animation graph.
/// Optionally saves them to disk if `save` is present (corresponding to the
/// `--save` option).
/// Spawns the animated fox.
/// Places the help text at the top left of the window.
/// Initializes the node UI widgets.
/// Creates boxes for the horizontal and vertical lines.
///
/// This is a bit hacky: it uses 1-pixel-wide and 1-pixel-high boxes to draw
/// vertical and horizontal lines, respectively.
/// Attaches the animation graph to the scene, and plays all three animations.
/// Read cursor position relative to clip nodes, allowing the user to change weights
/// when dragging the node UI widgets.
// Updates the UI based on the weights that the user has chosen.
/// Takes the weights that were set in the UI and assigns them to the actual
/// playing animation.
/// An on-screen representation of a node.
/// Either a straight horizontal or a straight vertical line on screen.
///
/// The line starts at (`left`, `bottom`) and goes either right (if the line is
/// horizontal) or down (if the line is vertical).
/// The type of each node in the UI: either a clip node or a blend node.
/// The label for the UI representation of a clip node.