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.
This commit is contained in:
Aaron Fenyes 2024-08-26 23:39:51 -07:00
parent 5e9c5db231
commit ec48592ef1
2 changed files with 22 additions and 1 deletions

View File

@ -22,6 +22,7 @@ console_error_panic_hook = { version = "0.1.7", optional = true }
version = "0.3.69"
features = [
'HtmlCanvasElement',
'Performance',
'WebGl2RenderingContext',
'WebGlBuffer',
'WebGlProgram',

View File

@ -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" }