diff --git a/app-proto/inversive-display/Cargo.toml b/app-proto/inversive-display/Cargo.toml index bcf6b76..c0cbf3d 100644 --- a/app-proto/inversive-display/Cargo.toml +++ b/app-proto/inversive-display/Cargo.toml @@ -22,6 +22,7 @@ console_error_panic_hook = { version = "0.1.7", optional = true } version = "0.3.69" features = [ 'HtmlCanvasElement', + 'Performance', 'WebGl2RenderingContext', 'WebGlBuffer', 'WebGlProgram', diff --git a/app-proto/inversive-display/src/main.rs b/app-proto/inversive-display/src/main.rs index ebbf713..5f1987f 100644 --- a/app-proto/inversive-display/src/main.rs +++ b/app-proto/inversive-display/src/main.rs @@ -11,7 +11,7 @@ extern crate js_sys; use core::array; use nalgebra::DVector; use sycamore::{prelude::*, motion::create_raf, rt::{JsCast, JsValue}}; -use web_sys::{console, WebGl2RenderingContext, WebGlProgram, WebGlShader, WebGlUniformLocation}; +use web_sys::{console, window, WebGl2RenderingContext, WebGlProgram, WebGlShader, WebGlUniformLocation}; mod engine; @@ -99,6 +99,12 @@ fn main() { let layer_threshold = create_signal(0.0); let debug_mode = create_signal(false); + /* INSTRUMENTS */ + const SAMPLE_PERIOD: i32 = 20; + let mut last_frame_moment = 0.0; + let mut frames_since_last_sample = 0; + let frame_time = create_signal(0.0); + // display let display = create_node_ref(); @@ -112,6 +118,9 @@ fn main() { [0.25_f32, 0.00_f32, 1.00_f32] ]; + /* INSTRUMENTS */ + let performance = window().unwrap().performance().unwrap(); + // get the display canvas let canvas = display .get::() @@ -208,6 +217,16 @@ fn main() { // set up a repainting routine let (_, start_updating_display, _) = create_raf(move || { + /* INSTRUMENTS */ + // measure frame time + frames_since_last_sample += 1; + if frames_since_last_sample >= SAMPLE_PERIOD { + let frame_moment = performance.now(); + frame_time.set((frame_moment - last_frame_moment) / (SAMPLE_PERIOD as f64)); + last_frame_moment = frame_moment; + frames_since_last_sample = 0; + } + // update the construction sphere_vec.clear(); sphere_vec.push(engine::sphere(0.5, 0.5, -5.0 + ctrl_x.get(), radius_x.get())); @@ -261,6 +280,7 @@ fn main() { view! { div(id="app") { + div { (frame_time.get()) " ms" } canvas(ref=display, width="600", height="600") div(class="control") { label(for="ctrl-x") { "Sphere 0 depth" }