Ray-caster: add a frame time monitor

It's time to start optimizing. Frame time is easy to measure, and we can
use it to gauge responsiveness.

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',

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::<DomNode>()
@@ -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" }