many_gradients/
many_gradients.rs

1//! Stress test demonstrating gradient performance improvements.
2//!
3//! This example creates many UI nodes with gradients to measure the performance
4//! impact of pre-converting colors to the target color space on the CPU.
5
6use argh::FromArgs;
7use bevy::{
8    color::palettes::css::*,
9    diagnostic::{FrameTimeDiagnosticsPlugin, LogDiagnosticsPlugin},
10    math::ops::sin,
11    prelude::*,
12    ui::{
13        BackgroundGradient, ColorStop, Display, Gradient, InterpolationColorSpace, LinearGradient,
14        RepeatedGridTrack,
15    },
16    window::{PresentMode, WindowResolution},
17    winit::WinitSettings,
18};
19
20const COLS: usize = 30;
21
22#[derive(FromArgs, Resource, Debug)]
23/// Gradient stress test
24struct Args {
25    /// how many gradients per group (default: 900)
26    #[argh(option, default = "900")]
27    gradient_count: usize,
28
29    /// whether to animate gradients by changing colors
30    #[argh(switch)]
31    animate: bool,
32
33    /// use sRGB interpolation
34    #[argh(switch)]
35    srgb: bool,
36
37    /// use HSL interpolation
38    #[argh(switch)]
39    hsl: bool,
40}
41
42fn main() {
43    let args: Args = argh::from_env();
44    let total_gradients = args.gradient_count;
45
46    println!("Gradient stress test with {total_gradients} gradients");
47    println!(
48        "Color space: {}",
49        if args.srgb {
50            "sRGB"
51        } else if args.hsl {
52            "HSL"
53        } else {
54            "OkLab (default)"
55        }
56    );
57
58    App::new()
59        .add_plugins((
60            LogDiagnosticsPlugin::default(),
61            FrameTimeDiagnosticsPlugin::default(),
62            DefaultPlugins.set(WindowPlugin {
63                primary_window: Some(Window {
64                    title: "Gradient Stress Test".to_string(),
65                    resolution: WindowResolution::new(1920, 1080).with_scale_factor_override(1.0),
66                    present_mode: PresentMode::AutoNoVsync,
67                    ..default()
68                }),
69                ..default()
70            }),
71        ))
72        .insert_resource(WinitSettings::continuous())
73        .insert_resource(args)
74        .add_systems(Startup, setup)
75        .add_systems(Update, animate_gradients)
76        .run();
77}
78
79fn setup(mut commands: Commands, args: Res<Args>) {
80    commands.spawn(Camera2d);
81
82    let rows_to_spawn = args.gradient_count.div_ceil(COLS);
83
84    // Create a grid of gradients
85    commands
86        .spawn(Node {
87            width: percent(100),
88            height: percent(100),
89            display: Display::Grid,
90            grid_template_columns: RepeatedGridTrack::flex(COLS as u16, 1.0),
91            grid_template_rows: RepeatedGridTrack::flex(rows_to_spawn as u16, 1.0),
92            ..default()
93        })
94        .with_children(|parent| {
95            for i in 0..args.gradient_count {
96                let angle = (i as f32 * 10.0) % 360.0;
97
98                let mut gradient = LinearGradient::new(
99                    angle,
100                    vec![
101                        ColorStop::new(RED, percent(0)),
102                        ColorStop::new(BLUE, percent(100)),
103                        ColorStop::new(GREEN, percent(20)),
104                        ColorStop::new(YELLOW, percent(40)),
105                        ColorStop::new(ORANGE, percent(60)),
106                        ColorStop::new(LIME, percent(80)),
107                        ColorStop::new(DARK_CYAN, percent(90)),
108                    ],
109                );
110
111                gradient.color_space = if args.srgb {
112                    InterpolationColorSpace::Srgba
113                } else if args.hsl {
114                    InterpolationColorSpace::Hsla
115                } else {
116                    InterpolationColorSpace::Oklaba
117                };
118
119                parent.spawn((
120                    Node {
121                        width: percent(100),
122                        height: percent(100),
123                        ..default()
124                    },
125                    BackgroundGradient(vec![Gradient::Linear(gradient)]),
126                    GradientNode { index: i },
127                ));
128            }
129        });
130}
131
132#[derive(Component)]
133struct GradientNode {
134    index: usize,
135}
136
137fn animate_gradients(
138    mut gradients: Query<(&mut BackgroundGradient, &GradientNode)>,
139    args: Res<Args>,
140    time: Res<Time>,
141) {
142    if !args.animate {
143        return;
144    }
145
146    let t = time.elapsed_secs();
147
148    for (mut bg_gradient, node) in &mut gradients {
149        let offset = node.index as f32 * 0.01;
150        let hue_shift = sin(t + offset) * 0.5 + 0.5;
151
152        if let Some(Gradient::Linear(gradient)) = bg_gradient.0.get_mut(0) {
153            let color1 = Color::hsl(hue_shift * 360.0, 1.0, 0.5);
154            let color2 = Color::hsl((hue_shift + 0.3) * 360.0 % 360.0, 1.0, 0.5);
155
156            gradient.stops = vec![
157                ColorStop::new(color1, percent(0)),
158                ColorStop::new(color2, percent(100)),
159                ColorStop::new(
160                    Color::hsl((hue_shift + 0.1) * 360.0 % 360.0, 1.0, 0.5),
161                    percent(20),
162                ),
163                ColorStop::new(
164                    Color::hsl((hue_shift + 0.15) * 360.0 % 360.0, 1.0, 0.5),
165                    percent(40),
166                ),
167                ColorStop::new(
168                    Color::hsl((hue_shift + 0.2) * 360.0 % 360.0, 1.0, 0.5),
169                    percent(60),
170                ),
171                ColorStop::new(
172                    Color::hsl((hue_shift + 0.25) * 360.0 % 360.0, 1.0, 0.5),
173                    percent(80),
174                ),
175                ColorStop::new(
176                    Color::hsl((hue_shift + 0.28) * 360.0 % 360.0, 1.0, 0.5),
177                    percent(90),
178                ),
179            ];
180        }
181    }
182}
many_gradients/many_gradients.rs

many_gradients/
many_gradients.rs
