Merge pull request #288 from armansito/frame-stats

Add frame statistics UI to with_winit example
This commit is contained in:
Arman Uguray 2023-03-21 15:37:43 -07:00 committed by GitHub
commit a1f319d090
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 286 additions and 1 deletions

View file

@ -18,4 +18,7 @@ $ cargo run -p with_winit --release -- [SVG FILES]
- Mouse scroll wheel will zoom.
- Arrow keys switch between SVG images in the current set.
- Space resets the position and zoom of the image.
- S toggles the frame statistics layer
- C resets the min/max frame time tracked by statistics
- V toggles VSync on/off (default: on)
- Escape exits the program.

View file

@ -37,6 +37,7 @@ use winit::{
#[cfg(not(any(target_arch = "wasm32", target_os = "android")))]
mod hot_reload;
mod multi_touch;
mod stats;
#[derive(Parser, Debug)]
#[command(about, long_about = None, bin_name="cargo run -p with_winit --")]
@ -97,6 +98,10 @@ fn run(
let mut fragment = SceneFragment::new();
let mut simple_text = SimpleText::new();
let mut images = ImageCache::new();
let mut stats = stats::Stats::new();
let mut stats_shown = true;
let mut vsync_on = true;
let mut frame_start_time = Instant::now();
let start = Instant::now();
let mut touch_state = multi_touch::TouchState::new();
@ -142,6 +147,23 @@ fn run(
Some(VirtualKeyCode::Space) => {
transform = Affine::IDENTITY;
}
Some(VirtualKeyCode::S) => {
stats_shown = !stats_shown;
}
Some(VirtualKeyCode::C) => {
stats.clear_min_and_max();
}
Some(VirtualKeyCode::V) => {
vsync_on = !vsync_on;
render_cx.set_present_mode(
&mut render_state.surface,
if vsync_on {
wgpu::PresentMode::AutoVsync
} else {
wgpu::PresentMode::AutoNoVsync
},
);
}
Some(VirtualKeyCode::Escape) => {
*control_flow = ControlFlow::Exit;
}
@ -253,6 +275,7 @@ fn run(
let width = render_state.surface.config.width;
let height = render_state.surface.config.height;
let device_handle = &render_cx.devices[render_state.surface.dev_id];
let snapshot = stats.snapshot();
// Allow looping forever
scene_ix = scene_ix.rem_euclid(scenes.scenes.len() as i32);
@ -296,6 +319,16 @@ fn run(
transform = transform * Affine::scale(scale_factor);
}
builder.append(&fragment, Some(transform));
if stats_shown {
snapshot.draw_layer(
&mut builder,
&mut scene_params.text,
width as f64,
height as f64,
stats.samples(),
vsync_on,
);
}
let surface_texture = render_state
.surface
.surface
@ -334,6 +367,12 @@ fn run(
.expect("failed to render to surface");
surface_texture.present();
device_handle.device.poll(wgpu::Maintain::Poll);
let new_time = Instant::now();
stats.add_sample(stats::Sample {
frame_time_us: (new_time - frame_start_time).as_micros() as u64,
});
frame_start_time = new_time;
}
Event::UserEvent(event) => match event {
#[cfg(not(any(target_arch = "wasm32", target_os = "android")))]

View file

@ -0,0 +1,236 @@
// Copyright 2023 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// https://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
// Also licensed under MIT license, at your choice.
use scenes::SimpleText;
use std::collections::VecDeque;
use vello::{
kurbo::{Affine, PathEl, Rect},
peniko::{Brush, Color, Fill, Stroke},
SceneBuilder,
};
const SLIDING_WINDOW_SIZE: usize = 100;
#[derive(Debug)]
pub struct Snapshot {
pub fps: f64,
pub frame_time_ms: f64,
pub frame_time_min_ms: f64,
pub frame_time_max_ms: f64,
}
impl Snapshot {
pub fn draw_layer<'a, T>(
&self,
sb: &mut SceneBuilder,
text: &mut SimpleText,
viewport_width: f64,
viewport_height: f64,
samples: T,
vsync: bool,
) where
T: Iterator<Item = &'a u64>,
{
let width = (viewport_width * 0.4).max(200.).min(600.);
let height = width * 0.7;
let x_offset = viewport_width - width;
let y_offset = viewport_height - height;
let offset = Affine::translate((x_offset, y_offset));
// Draw the background
sb.fill(
Fill::NonZero,
offset,
&Brush::Solid(Color::rgba8(0, 0, 0, 200)),
None,
&Rect::new(0., 0., width, height),
);
let labels = [
format!("Frame Time: {:.2} ms", self.frame_time_ms),
format!("Frame Time (min): {:.2} ms", self.frame_time_min_ms),
format!("Frame Time (max): {:.2} ms", self.frame_time_max_ms),
format!("VSync: {}", if vsync { "on" } else { "off" }),
format!("Resolution: {viewport_width}x{viewport_height}"),
];
// height / 2 is dedicated to the text labels and the rest is filled by the bar graph.
let text_height = height * 0.5 / (1 + labels.len()) as f64;
let left_margin = width * 0.01;
let text_size = (text_height * 0.9) as f32;
for (i, label) in labels.iter().enumerate() {
text.add(
sb,
None,
text_size,
Some(&Brush::Solid(Color::WHITE)),
offset * Affine::translate((left_margin, (i + 1) as f64 * text_height)),
&label,
);
}
text.add(
sb,
None,
text_size,
Some(&Brush::Solid(Color::WHITE)),
offset * Affine::translate((width * 0.67, text_height)),
&format!("FPS: {:.2}", self.fps),
);
// Plot the samples with a bar graph
use PathEl::*;
let left_padding = width * 0.05; // Left padding for the frame time marker text.
let graph_max_height = height * 0.5;
let graph_max_width = width - 2. * left_margin - left_padding;
let left_margin_padding = left_margin + left_padding;
let bar_extent = graph_max_width / (SLIDING_WINDOW_SIZE as f64);
let bar_width = bar_extent * 0.4;
let bar = [
MoveTo((0., graph_max_height).into()),
LineTo((0., 0.).into()),
LineTo((bar_width, 0.).into()),
LineTo((bar_width, graph_max_height).into()),
];
// We determine the scale of the graph based on the maximum sampled frame time unless it's
// greater than 3x the current average. In that case we cap the max scale at 4/3 * the
// current average (rounded up to the nearest multiple of 5ms). This allows the scale to
// adapt to the most recent sample set as relying on the maximum alone can make the
// displayed samples to look too small in the presence of spikes/fluctuation without
// manually resetting the max sample.
let display_max = if self.frame_time_max_ms > 3. * self.frame_time_ms {
round_up((1.33334 * self.frame_time_ms) as usize, 5) as f64
} else {
self.frame_time_max_ms
};
for (i, sample) in samples.enumerate() {
let t = offset * Affine::translate((i as f64 * bar_extent, graph_max_height));
// The height of each sample is based on its ratio to the maximum observed frame time.
let sample_ms = ((*sample as f64) * 0.001).min(display_max);
let h = sample_ms / display_max;
let s = Affine::scale_non_uniform(1., -h);
let color = match *sample {
..=16_667 => Color::rgb8(100, 143, 255),
..=33_334 => Color::rgb8(255, 176, 0),
_ => Color::rgb8(220, 38, 127),
};
sb.fill(
Fill::NonZero,
t * Affine::translate((
left_margin_padding,
(1 + labels.len()) as f64 * text_height,
)) * s,
color,
None,
&bar,
);
}
// Draw horizontal lines to mark 8.33ms, 16.33ms, and 33.33ms
let marker = [
MoveTo((0., graph_max_height).into()),
LineTo((graph_max_width, graph_max_height).into()),
];
let thresholds = [8.33, 16.66, 33.33];
let thres_text_height = graph_max_height * 0.05;
let thres_text_height_2 = thres_text_height * 0.5;
for t in thresholds.iter().filter(|&&t| t < display_max) {
let y = t / display_max;
text.add(
sb,
None,
thres_text_height as f32,
Some(&Brush::Solid(Color::WHITE)),
offset
* Affine::translate((
left_margin,
(2. - y) * graph_max_height + thres_text_height_2,
)),
&format!("{}", t),
);
sb.stroke(
&Stroke::new((graph_max_height * 0.01) as f32),
offset * Affine::translate((left_margin_padding, (1. - y) * graph_max_height)),
Color::WHITE,
None,
&marker,
);
}
}
}
pub struct Sample {
pub frame_time_us: u64,
}
pub struct Stats {
count: usize,
sum: u64,
min: u64,
max: u64,
samples: VecDeque<u64>,
}
impl Stats {
pub fn new() -> Stats {
Stats {
count: 0,
sum: 0,
min: u64::MAX,
max: u64::MIN,
samples: VecDeque::with_capacity(SLIDING_WINDOW_SIZE),
}
}
pub fn samples(&self) -> impl Iterator<Item = &u64> {
self.samples.iter()
}
pub fn snapshot(&self) -> Snapshot {
let frame_time_ms = (self.sum as f64 / self.count as f64) * 0.001;
let fps = 1000. / frame_time_ms;
Snapshot {
fps,
frame_time_ms,
frame_time_min_ms: self.min as f64 * 0.001,
frame_time_max_ms: self.max as f64 * 0.001,
}
}
pub fn clear_min_and_max(&mut self) {
self.min = u64::MAX;
self.max = u64::MIN;
}
pub fn add_sample(&mut self, sample: Sample) {
let oldest = if self.count < SLIDING_WINDOW_SIZE {
self.count += 1;
None
} else {
self.samples.pop_front()
};
let micros = sample.frame_time_us;
self.sum += micros;
self.samples.push_back(micros);
if let Some(oldest) = oldest {
self.sum -= oldest;
}
self.min = self.min.min(micros);
self.max = self.max.max(micros);
}
}
fn round_up(n: usize, f: usize) -> usize {
n - 1 - (n - 1) % f + f
}

View file

@ -70,7 +70,7 @@ impl RenderContext {
format,
width,
height,
present_mode: wgpu::PresentMode::Fifo,
present_mode: wgpu::PresentMode::AutoVsync,
alpha_mode: wgpu::CompositeAlphaMode::Auto,
view_formats: vec![],
};
@ -92,6 +92,13 @@ impl RenderContext {
.configure(&self.devices[surface.dev_id].device, &surface.config);
}
pub fn set_present_mode(&self, surface: &mut RenderSurface, present_mode: wgpu::PresentMode) {
surface.config.present_mode = present_mode;
surface
.surface
.configure(&self.devices[surface.dev_id].device, &surface.config);
}
/// Finds or creates a compatible device handle id.
pub async fn device(&mut self, compatible_surface: Option<&Surface>) -> Option<usize> {
let compatible = match compatible_surface {