From 634e97b6595ac16ef70817baeb6161bbab662cca Mon Sep 17 00:00:00 2001 From: Aaron Fenyes Date: Thu, 12 Sep 2024 22:36:54 -0700 Subject: [PATCH 01/15] Outline: switch to user-facing ID --- app-proto/sketch-outline/main.css | 2 +- app-proto/sketch-outline/src/editor.rs | 36 +++++++++++++------------- 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/app-proto/sketch-outline/main.css b/app-proto/sketch-outline/main.css index 2e6aedc..7e0fe01 100644 --- a/app-proto/sketch-outline/main.css +++ b/app-proto/sketch-outline/main.css @@ -24,7 +24,7 @@ li:not(:last-child) { margin-bottom: 8px; } -li > .elt-name { +li > .elt-label { flex-grow: 1; padding: 2px 0px 2px 4px; } diff --git a/app-proto/sketch-outline/src/editor.rs b/app-proto/sketch-outline/src/editor.rs index b0d3f2e..07c0084 100644 --- a/app-proto/sketch-outline/src/editor.rs +++ b/app-proto/sketch-outline/src/editor.rs @@ -3,10 +3,10 @@ use sycamore::{prelude::*, web::tags::div}; #[derive(Clone, PartialEq)] struct Element { - id: i64, - name: String, + id: String, + label: String, + color: [f32; 3], rep: DVector, - color: [f32; 3] } struct EditorState { @@ -18,22 +18,22 @@ pub fn Editor() -> View { let state = EditorState { elements: create_signal(vec![ Element { - id: 1, - name: String::from("Central"), - rep: DVector::::from_column_slice(&[0.0, 0.0, 0.0, 0.25, -1.0]), - color: [0.75_f32, 0.75_f32, 0.75_f32] + id: String::from("central"), + label: String::from("Central"), + color: [0.75_f32, 0.75_f32, 0.75_f32], + rep: DVector::::from_column_slice(&[0.0, 0.0, 0.0, 0.25, -1.0]) }, Element { - id: 2, - name: String::from("Wing A"), - rep: DVector::::from_column_slice(&[0.5, 0.5, 0.0, 0.5, -0.25]), - color: [1.00_f32, 0.25_f32, 0.00_f32] + id: String::from("wing_a"), + label: String::from("Wing A"), + color: [1.00_f32, 0.25_f32, 0.00_f32], + rep: DVector::::from_column_slice(&[0.5, 0.5, 0.0, 0.5, -0.25]) }, Element { - id: 3, - name: String::from("Wing B"), - rep: DVector::::from_column_slice(&[-0.5, -0.5, 0.0, 0.5, -0.25]), - color: [1.00_f32, 0.25_f32, 0.00_f32] + id: String::from("wing_b"), + label: String::from("Wing B"), + color: [1.00_f32, 0.25_f32, 0.00_f32], + rep: DVector::::from_column_slice(&[-0.5, -0.5, 0.0, 0.5, -0.25]) } ]) }; @@ -43,18 +43,18 @@ pub fn Editor() -> View { Keyed( list=state.elements, view=|elt| { - let name = elt.name.clone(); + let label = elt.label.clone(); let rep_components = elt.rep.iter().map( |u| View::from(div().children(u.to_string().replace("-", "\u{2212}"))) ).collect::>(); view! { li { - div(class="elt-name") { (name) } + div(class="elt-label") { (label) } div(class="elt-rep") { (rep_components) } } } }, - key=|elt| elt.id + key=|elt| elt.id.clone() ) } } From 20b96a9764cfe4413d779b40ac271d1286560253 Mon Sep 17 00:00:00 2001 From: Aaron Fenyes Date: Thu, 12 Sep 2024 22:39:21 -0700 Subject: [PATCH 02/15] Outline: switch from "Editor" to "App" --- app-proto/sketch-outline/src/{editor.rs => app.rs} | 6 +++--- app-proto/sketch-outline/src/main.rs | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) rename app-proto/sketch-outline/src/{editor.rs => app.rs} (95%) diff --git a/app-proto/sketch-outline/src/editor.rs b/app-proto/sketch-outline/src/app.rs similarity index 95% rename from app-proto/sketch-outline/src/editor.rs rename to app-proto/sketch-outline/src/app.rs index 07c0084..35503f0 100644 --- a/app-proto/sketch-outline/src/editor.rs +++ b/app-proto/sketch-outline/src/app.rs @@ -9,13 +9,13 @@ struct Element { rep: DVector, } -struct EditorState { +struct AppState { elements: Signal> } #[component] -pub fn Editor() -> View { - let state = EditorState { +pub fn App() -> View { + let state = AppState { elements: create_signal(vec![ Element { id: String::from("central"), diff --git a/app-proto/sketch-outline/src/main.rs b/app-proto/sketch-outline/src/main.rs index 8b7ce30..e46fff3 100644 --- a/app-proto/sketch-outline/src/main.rs +++ b/app-proto/sketch-outline/src/main.rs @@ -1,13 +1,13 @@ use sycamore::prelude::*; -mod editor; +mod app; -use editor::Editor; +use app::App; fn main() { sycamore::render(|| { view! { - Editor {} + App {} } }); } \ No newline at end of file From d481181ef87162f660f0f74e16be3b629ff5f53e Mon Sep 17 00:00:00 2001 From: Aaron Fenyes Date: Fri, 13 Sep 2024 00:07:49 -0700 Subject: [PATCH 03/15] Outline: sort elements by ID --- app-proto/sketch-outline/Cargo.toml | 1 + app-proto/sketch-outline/src/app.rs | 25 ++++++++++++++++++------- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/app-proto/sketch-outline/Cargo.toml b/app-proto/sketch-outline/Cargo.toml index 522c994..b039ab8 100644 --- a/app-proto/sketch-outline/Cargo.toml +++ b/app-proto/sketch-outline/Cargo.toml @@ -8,6 +8,7 @@ edition = "2021" default = ["console_error_panic_hook"] [dependencies] +itertools = "0.13.0" js-sys = "0.3.70" nalgebra = "0.33.0" sycamore = "0.9.0-beta.3" diff --git a/app-proto/sketch-outline/src/app.rs b/app-proto/sketch-outline/src/app.rs index 35503f0..cc63ec0 100644 --- a/app-proto/sketch-outline/src/app.rs +++ b/app-proto/sketch-outline/src/app.rs @@ -1,3 +1,4 @@ +use itertools::Itertools; use nalgebra::DVector; use sycamore::{prelude::*, web::tags::div}; @@ -10,6 +11,7 @@ struct Element { } struct AppState { + // the order of the elements is arbitrary, and it could change at any time elements: Signal> } @@ -17,12 +19,6 @@ struct AppState { pub fn App() -> View { let state = AppState { elements: create_signal(vec![ - Element { - id: String::from("central"), - label: String::from("Central"), - color: [0.75_f32, 0.75_f32, 0.75_f32], - rep: DVector::::from_column_slice(&[0.0, 0.0, 0.0, 0.25, -1.0]) - }, Element { id: String::from("wing_a"), label: String::from("Wing A"), @@ -34,14 +30,29 @@ pub fn App() -> View { label: String::from("Wing B"), color: [1.00_f32, 0.25_f32, 0.00_f32], rep: DVector::::from_column_slice(&[-0.5, -0.5, 0.0, 0.5, -0.25]) + }, + Element { + id: String::from("central"), + label: String::from("Central"), + color: [0.75_f32, 0.75_f32, 0.75_f32], + rep: DVector::::from_column_slice(&[0.0, 0.0, 0.0, 0.25, -1.0]) } ]) }; + // sort the elements alphabetically by ID + let elements_sorted = create_memo(move || + state.elements + .get_clone() + .into_iter() + .sorted_by_key(|elt| elt.id.clone()) + .collect() + ); + view! { ul { Keyed( - list=state.elements, + list=elements_sorted, view=|elt| { let label = elt.label.clone(); let rep_components = elt.rep.iter().map( From e6d1e0b8658b041e667785a370bc52c2db47f4c4 Mon Sep 17 00:00:00 2001 From: Aaron Fenyes Date: Fri, 13 Sep 2024 00:40:34 -0700 Subject: [PATCH 04/15] Outline: encapsulate assembly data --- app-proto/sketch-outline/src/app.rs | 55 +++++++++++------------- app-proto/sketch-outline/src/assembly.rs | 16 +++++++ app-proto/sketch-outline/src/main.rs | 5 ++- 3 files changed, 44 insertions(+), 32 deletions(-) create mode 100644 app-proto/sketch-outline/src/assembly.rs diff --git a/app-proto/sketch-outline/src/app.rs b/app-proto/sketch-outline/src/app.rs index cc63ec0..1435fa9 100644 --- a/app-proto/sketch-outline/src/app.rs +++ b/app-proto/sketch-outline/src/app.rs @@ -2,47 +2,42 @@ use itertools::Itertools; use nalgebra::DVector; use sycamore::{prelude::*, web::tags::div}; -#[derive(Clone, PartialEq)] -struct Element { - id: String, - label: String, - color: [f32; 3], - rep: DVector, -} +use crate::assembly::{Assembly, Element}; struct AppState { - // the order of the elements is arbitrary, and it could change at any time - elements: Signal> + assembly: Assembly } #[component] pub fn App() -> View { let state = AppState { - elements: create_signal(vec![ - Element { - id: String::from("wing_a"), - label: String::from("Wing A"), - color: [1.00_f32, 0.25_f32, 0.00_f32], - rep: DVector::::from_column_slice(&[0.5, 0.5, 0.0, 0.5, -0.25]) - }, - Element { - id: String::from("wing_b"), - label: String::from("Wing B"), - color: [1.00_f32, 0.25_f32, 0.00_f32], - rep: DVector::::from_column_slice(&[-0.5, -0.5, 0.0, 0.5, -0.25]) - }, - Element { - id: String::from("central"), - label: String::from("Central"), - color: [0.75_f32, 0.75_f32, 0.75_f32], - rep: DVector::::from_column_slice(&[0.0, 0.0, 0.0, 0.25, -1.0]) - } - ]) + assembly: Assembly { + elements: create_signal(vec![ + Element { + id: String::from("wing_a"), + label: String::from("Wing A"), + color: [1.00_f32, 0.25_f32, 0.00_f32], + rep: DVector::::from_column_slice(&[0.5, 0.5, 0.0, 0.5, -0.25]) + }, + Element { + id: String::from("wing_b"), + label: String::from("Wing B"), + color: [1.00_f32, 0.25_f32, 0.00_f32], + rep: DVector::::from_column_slice(&[-0.5, -0.5, 0.0, 0.5, -0.25]) + }, + Element { + id: String::from("central"), + label: String::from("Central"), + color: [0.75_f32, 0.75_f32, 0.75_f32], + rep: DVector::::from_column_slice(&[0.0, 0.0, 0.0, 0.25, -1.0]) + } + ]) + } }; // sort the elements alphabetically by ID let elements_sorted = create_memo(move || - state.elements + state.assembly.elements .get_clone() .into_iter() .sorted_by_key(|elt| elt.id.clone()) diff --git a/app-proto/sketch-outline/src/assembly.rs b/app-proto/sketch-outline/src/assembly.rs new file mode 100644 index 0000000..e18242b --- /dev/null +++ b/app-proto/sketch-outline/src/assembly.rs @@ -0,0 +1,16 @@ +use nalgebra::DVector; +use sycamore::reactive::Signal; + +#[derive(Clone, PartialEq)] +pub struct Element { + pub id: String, + pub label: String, + pub color: [f32; 3], + pub rep: DVector, +} + +// a complete, view-independent description of an assembly +pub struct Assembly { + // the order of the elements is arbitrary, and it could change at any time + pub elements: Signal> +} \ No newline at end of file diff --git a/app-proto/sketch-outline/src/main.rs b/app-proto/sketch-outline/src/main.rs index e46fff3..06700e5 100644 --- a/app-proto/sketch-outline/src/main.rs +++ b/app-proto/sketch-outline/src/main.rs @@ -1,6 +1,7 @@ -use sycamore::prelude::*; - mod app; +mod assembly; + +use sycamore::prelude::*; use app::App; From 0c2869d3f367521f7b7e709614a686f6ce5083da Mon Sep 17 00:00:00 2001 From: Aaron Fenyes Date: Fri, 13 Sep 2024 00:43:19 -0700 Subject: [PATCH 05/15] Outline: improve code formatting --- app-proto/sketch-outline/src/app.rs | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app-proto/sketch-outline/src/app.rs b/app-proto/sketch-outline/src/app.rs index 1435fa9..934c960 100644 --- a/app-proto/sketch-outline/src/app.rs +++ b/app-proto/sketch-outline/src/app.rs @@ -50,9 +50,10 @@ pub fn App() -> View { list=elements_sorted, view=|elt| { let label = elt.label.clone(); - let rep_components = elt.rep.iter().map( - |u| View::from(div().children(u.to_string().replace("-", "\u{2212}"))) - ).collect::>(); + let rep_components = elt.rep.iter().map(|u| { + let u_coord = u.to_string().replace("-", "\u{2212}"); + View::from(div().children(u_coord)) + }).collect::>(); view! { li { div(class="elt-label") { (label) } From 49170671b4266ae5550fc764cb69e9768fa4c43b Mon Sep 17 00:00:00 2001 From: Aaron Fenyes Date: Fri, 13 Sep 2024 14:53:12 -0700 Subject: [PATCH 06/15] App: add display canvas --- app-proto/sketch-outline/Cargo.toml | 1 - app-proto/sketch-outline/main.css | 31 ++++++++++++++++++++++++- app-proto/sketch-outline/src/app.rs | 4 +++- app-proto/sketch-outline/src/display.rs | 10 ++++++++ app-proto/sketch-outline/src/main.rs | 3 +++ 5 files changed, 46 insertions(+), 3 deletions(-) create mode 100644 app-proto/sketch-outline/src/display.rs diff --git a/app-proto/sketch-outline/Cargo.toml b/app-proto/sketch-outline/Cargo.toml index b039ab8..3afe26e 100644 --- a/app-proto/sketch-outline/Cargo.toml +++ b/app-proto/sketch-outline/Cargo.toml @@ -9,7 +9,6 @@ default = ["console_error_panic_hook"] [dependencies] itertools = "0.13.0" -js-sys = "0.3.70" nalgebra = "0.33.0" sycamore = "0.9.0-beta.3" diff --git a/app-proto/sketch-outline/main.css b/app-proto/sketch-outline/main.css index 7e0fe01..9e8cdb4 100644 --- a/app-proto/sketch-outline/main.css +++ b/app-proto/sketch-outline/main.css @@ -5,11 +5,17 @@ body { background-color: #222; } +/* outline */ + ul { + float: left; width: 450px; + height: 750px; + margin: 0px; padding: 8px; - border: 1px solid #888; + border: 1px solid #555; border-radius: 16px; + box-sizing: border-box; } li { @@ -20,6 +26,11 @@ li { border-radius: 8px; } +li:focus { + color: #fff; + background-color: #666; +} + li:not(:last-child) { margin-bottom: 8px; } @@ -41,10 +52,28 @@ li > .elt-rep > div { background-color: #333; } +li:focus > .elt-rep > div { + background-color: #555; +} + li > .elt-rep > div:first-child { border-radius: 6px 0px 0px 6px; } li > .elt-rep > div:last-child { border-radius: 0px 6px 6px 0px; +} + +/* display */ + +canvas { + float: left; + margin-left: 16px; + background-color: #020202; + border: 1px solid #555; + border-radius: 16px; +} + +canvas:focus { + border-color: #aaa; } \ No newline at end of file diff --git a/app-proto/sketch-outline/src/app.rs b/app-proto/sketch-outline/src/app.rs index 934c960..dca056a 100644 --- a/app-proto/sketch-outline/src/app.rs +++ b/app-proto/sketch-outline/src/app.rs @@ -55,7 +55,9 @@ pub fn App() -> View { View::from(div().children(u_coord)) }).collect::>(); view! { - li { + /* [TO DO] switch to integer-valued parameters whenever + that becomes possible again */ + li(tabindex="0") { div(class="elt-label") { (label) } div(class="elt-rep") { (rep_components) } } diff --git a/app-proto/sketch-outline/src/display.rs b/app-proto/sketch-outline/src/display.rs new file mode 100644 index 0000000..88336bf --- /dev/null +++ b/app-proto/sketch-outline/src/display.rs @@ -0,0 +1,10 @@ +use sycamore::prelude::*; + +#[component] +pub fn Display() -> View { + view! { + /* [TO DO] switch back to integer-valued parameters when that becomes + possible again */ + canvas(width="750", height="750", tabindex="0") + } +} \ No newline at end of file diff --git a/app-proto/sketch-outline/src/main.rs b/app-proto/sketch-outline/src/main.rs index 06700e5..c375a9c 100644 --- a/app-proto/sketch-outline/src/main.rs +++ b/app-proto/sketch-outline/src/main.rs @@ -1,14 +1,17 @@ mod app; mod assembly; +mod display; use sycamore::prelude::*; use app::App; +use display::Display; fn main() { sycamore::render(|| { view! { App {} + Display {} } }); } \ No newline at end of file From 959e4cc8b58c49b9e7a63d3a8d8c2e7c3ee7c4f6 Mon Sep 17 00:00:00 2001 From: Aaron Fenyes Date: Fri, 13 Sep 2024 15:15:55 -0700 Subject: [PATCH 07/15] App: pass app state into outline as context --- app-proto/sketch-outline/src/assembly.rs | 1 + app-proto/sketch-outline/src/main.rs | 40 +++++++++++++++++-- .../sketch-outline/src/{app.rs => outline.rs} | 34 ++-------------- 3 files changed, 41 insertions(+), 34 deletions(-) rename app-proto/sketch-outline/src/{app.rs => outline.rs} (51%) diff --git a/app-proto/sketch-outline/src/assembly.rs b/app-proto/sketch-outline/src/assembly.rs index e18242b..b53e38d 100644 --- a/app-proto/sketch-outline/src/assembly.rs +++ b/app-proto/sketch-outline/src/assembly.rs @@ -10,6 +10,7 @@ pub struct Element { } // a complete, view-independent description of an assembly +#[derive(Clone)] pub struct Assembly { // the order of the elements is arbitrary, and it could change at any time pub elements: Signal> diff --git a/app-proto/sketch-outline/src/main.rs b/app-proto/sketch-outline/src/main.rs index c375a9c..9e74d28 100644 --- a/app-proto/sketch-outline/src/main.rs +++ b/app-proto/sketch-outline/src/main.rs @@ -1,16 +1,50 @@ -mod app; mod assembly; mod display; +mod outline; +use nalgebra::DVector; use sycamore::prelude::*; -use app::App; +use assembly::{Assembly, Element}; use display::Display; +use outline::Outline; + +#[derive(Clone)] +struct AppState { + assembly: Assembly +} fn main() { sycamore::render(|| { + provide_context( + AppState { + assembly: Assembly { + elements: create_signal(vec![ + Element { + id: String::from("wing_a"), + label: String::from("Wing A"), + color: [1.00_f32, 0.25_f32, 0.00_f32], + rep: DVector::::from_column_slice(&[0.5, 0.5, 0.0, 0.5, -0.25]) + }, + Element { + id: String::from("wing_b"), + label: String::from("Wing B"), + color: [1.00_f32, 0.25_f32, 0.00_f32], + rep: DVector::::from_column_slice(&[-0.5, -0.5, 0.0, 0.5, -0.25]) + }, + Element { + id: String::from("central"), + label: String::from("Central"), + color: [0.75_f32, 0.75_f32, 0.75_f32], + rep: DVector::::from_column_slice(&[0.0, 0.0, 0.0, 0.25, -1.0]) + } + ]) + } + } + ); + view! { - App {} + Outline {} Display {} } }); diff --git a/app-proto/sketch-outline/src/app.rs b/app-proto/sketch-outline/src/outline.rs similarity index 51% rename from app-proto/sketch-outline/src/app.rs rename to app-proto/sketch-outline/src/outline.rs index dca056a..546b272 100644 --- a/app-proto/sketch-outline/src/app.rs +++ b/app-proto/sketch-outline/src/outline.rs @@ -1,39 +1,11 @@ use itertools::Itertools; -use nalgebra::DVector; use sycamore::{prelude::*, web::tags::div}; -use crate::assembly::{Assembly, Element}; - -struct AppState { - assembly: Assembly -} +use crate::AppState; #[component] -pub fn App() -> View { - let state = AppState { - assembly: Assembly { - elements: create_signal(vec![ - Element { - id: String::from("wing_a"), - label: String::from("Wing A"), - color: [1.00_f32, 0.25_f32, 0.00_f32], - rep: DVector::::from_column_slice(&[0.5, 0.5, 0.0, 0.5, -0.25]) - }, - Element { - id: String::from("wing_b"), - label: String::from("Wing B"), - color: [1.00_f32, 0.25_f32, 0.00_f32], - rep: DVector::::from_column_slice(&[-0.5, -0.5, 0.0, 0.5, -0.25]) - }, - Element { - id: String::from("central"), - label: String::from("Central"), - color: [0.75_f32, 0.75_f32, 0.75_f32], - rep: DVector::::from_column_slice(&[0.0, 0.0, 0.0, 0.25, -1.0]) - } - ]) - } - }; +pub fn Outline() -> View { + let state = use_context::(); // sort the elements alphabetically by ID let elements_sorted = create_memo(move || From 49655a8d62130d34cc63ec28780ba69d39c16ef7 Mon Sep 17 00:00:00 2001 From: Aaron Fenyes Date: Sat, 14 Sep 2024 10:58:46 -0700 Subject: [PATCH 08/15] Ray-caster: remove debug code Remove GPU code and uniforms that were used as scaffolding during initial development, but have now been replaced by CPU analogues. --- app-proto/inversive-display/src/inversive.frag | 12 ------------ app-proto/inversive-display/src/main.rs | 5 ----- 2 files changed, 17 deletions(-) diff --git a/app-proto/inversive-display/src/inversive.frag b/app-proto/inversive-display/src/inversive.frag index 2e185a5..93bec50 100644 --- a/app-proto/inversive-display/src/inversive.frag +++ b/app-proto/inversive-display/src/inversive.frag @@ -11,16 +11,6 @@ struct vecInv { vec2 lt; }; -vecInv sphere(vec3 center, float radius) { - return vecInv( - center / radius, - vec2( - 0.5 / radius, - 0.5 * (dot(center, center) / radius - radius) - ) - ); -} - // --- uniforms --- // construction. the SPHERE_MAX array size seems to affect frame rate a lot, @@ -35,8 +25,6 @@ uniform vec2 resolution; uniform float shortdim; // controls -uniform vec2 ctrl; -uniform vec2 radius; uniform float opacity; uniform float highlight; uniform int layer_threshold; diff --git a/app-proto/inversive-display/src/main.rs b/app-proto/inversive-display/src/main.rs index d351149..8d16732 100644 --- a/app-proto/inversive-display/src/main.rs +++ b/app-proto/inversive-display/src/main.rs @@ -7,7 +7,6 @@ // https://stackoverflow.com/a/39684775 // -extern crate js_sys; use core::array; use nalgebra::{DMatrix, DVector, Rotation3, Vector3}; use sycamore::{prelude::*, motion::create_raf, rt::{JsCast, JsValue}}; @@ -343,8 +342,6 @@ fn main() { ); let resolution_loc = ctx.get_uniform_location(&program, "resolution"); let shortdim_loc = ctx.get_uniform_location(&program, "shortdim"); - let ctrl_loc = ctx.get_uniform_location(&program, "ctrl"); /* DEBUG */ - let radius_loc = ctx.get_uniform_location(&program, "radius"); /* DEBUG */ let opacity_loc = ctx.get_uniform_location(&program, "opacity"); let highlight_loc = ctx.get_uniform_location(&program, "highlight"); let layer_threshold_loc = ctx.get_uniform_location(&program, "layer_threshold"); @@ -483,8 +480,6 @@ fn main() { } // pass the control parameters - ctx.uniform2f(ctrl_loc.as_ref(), ctrl_x.get() as f32, ctrl_y.get() as f32); /* DEBUG */ - ctx.uniform2f(radius_loc.as_ref(), radius_x.get() as f32, radius_y.get() as f32); /* DEBUG */ ctx.uniform1f(opacity_loc.as_ref(), opacity.get() as f32); ctx.uniform1f(highlight_loc.as_ref(), highlight.get() as f32); ctx.uniform1i(layer_threshold_loc.as_ref(), layer_threshold.get() as i32); From cd18d594e033fb47ebf21b70d65fe5e29471d08e Mon Sep 17 00:00:00 2001 From: Aaron Fenyes Date: Sat, 14 Sep 2024 11:46:24 -0700 Subject: [PATCH 09/15] Display: bring in ray-casting code --- app-proto/sketch-outline/Cargo.toml | 11 + app-proto/sketch-outline/src/display.rs | 340 +++++++++++++++++++- app-proto/sketch-outline/src/identity.vert | 7 + app-proto/sketch-outline/src/inversive.frag | 227 +++++++++++++ app-proto/sketch-outline/src/main.rs | 4 +- 5 files changed, 583 insertions(+), 6 deletions(-) create mode 100644 app-proto/sketch-outline/src/identity.vert create mode 100644 app-proto/sketch-outline/src/inversive.frag diff --git a/app-proto/sketch-outline/Cargo.toml b/app-proto/sketch-outline/Cargo.toml index 3afe26e..7d1d608 100644 --- a/app-proto/sketch-outline/Cargo.toml +++ b/app-proto/sketch-outline/Cargo.toml @@ -9,6 +9,7 @@ default = ["console_error_panic_hook"] [dependencies] itertools = "0.13.0" +js-sys = "0.3.70" nalgebra = "0.33.0" sycamore = "0.9.0-beta.3" @@ -20,6 +21,16 @@ console_error_panic_hook = { version = "0.1.7", optional = true } [dependencies.web-sys] version = "0.3.69" +features = [ + 'HtmlCanvasElement', + 'Performance', + 'WebGl2RenderingContext', + 'WebGlBuffer', + 'WebGlProgram', + 'WebGlShader', + 'WebGlUniformLocation', + 'WebGlVertexArrayObject' +] [dev-dependencies] wasm-bindgen-test = "0.3.34" diff --git a/app-proto/sketch-outline/src/display.rs b/app-proto/sketch-outline/src/display.rs index 88336bf..b1bf6ea 100644 --- a/app-proto/sketch-outline/src/display.rs +++ b/app-proto/sketch-outline/src/display.rs @@ -1,10 +1,342 @@ -use sycamore::prelude::*; +use core::array; +use nalgebra::{DMatrix, DVector, Rotation3, Vector3}; +use sycamore::{prelude::*, motion::create_raf}; +use web_sys::{ + console, + window, + WebGl2RenderingContext, + WebGlProgram, + WebGlShader, + WebGlUniformLocation, + wasm_bindgen::{JsCast, JsValue} +}; + +fn compile_shader( + context: &WebGl2RenderingContext, + shader_type: u32, + source: &str, +) -> WebGlShader { + let shader = context.create_shader(shader_type).unwrap(); + context.shader_source(&shader, source); + context.compile_shader(&shader); + shader +} + +fn get_uniform_array_locations( + context: &WebGl2RenderingContext, + program: &WebGlProgram, + var_name: &str, + member_name_opt: Option<&str> +) -> [Option; N] { + array::from_fn(|n| { + let name = match member_name_opt { + Some(member_name) => format!("{var_name}[{n}].{member_name}"), + None => format!("{var_name}[{n}]") + }; + context.get_uniform_location(&program, name.as_str()) + }) +} + +// load the given data into the vertex input of the given name +fn bind_vertex_attrib( + context: &WebGl2RenderingContext, + index: u32, + size: i32, + data: &[f32] +) { + // create a data buffer and bind it to ARRAY_BUFFER + let buffer = context.create_buffer().unwrap(); + context.bind_buffer(WebGl2RenderingContext::ARRAY_BUFFER, Some(&buffer)); + + // load the given data into the buffer. the function `Float32Array::view` + // creates a raw view into our module's `WebAssembly.Memory` buffer. + // allocating more memory will change the buffer, invalidating the view. + // that means we have to make sure we don't allocate any memory until the + // view is dropped + unsafe { + context.buffer_data_with_array_buffer_view( + WebGl2RenderingContext::ARRAY_BUFFER, + &js_sys::Float32Array::view(&data), + WebGl2RenderingContext::STATIC_DRAW, + ); + } + + // allow the target attribute to be used + context.enable_vertex_attrib_array(index); + + // take whatever's bound to ARRAY_BUFFER---here, the data buffer created + // above---and bind it to the target attribute + // + // https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/vertexAttribPointer + // + context.vertex_attrib_pointer_with_i32( + index, + size, + WebGl2RenderingContext::FLOAT, + false, // don't normalize + 0, // zero stride + 0, // zero offset + ); +} #[component] pub fn Display() -> View { + // canvas + let display = create_node_ref(); + + // navigation + let pitch_up = create_signal(0.0); + let pitch_down = create_signal(0.0); + let yaw_right = create_signal(0.0); + let yaw_left = create_signal(0.0); + let roll_ccw = create_signal(0.0); + let roll_cw = create_signal(0.0); + let zoom_in = create_signal(0.0); + let zoom_out = create_signal(0.0); + + // change listener + let scene_changed = create_signal(true); + + /* INSTRUMENTS */ + const SAMPLE_PERIOD: i32 = 60; + let mut last_sample_time = 0.0; + let mut frames_since_last_sample = 0; + let mean_frame_interval = create_signal(0.0); + + on_mount(move || { + /* SCAFFOLDING */ + /* create list of construction elements */ + const SPHERE_MAX: usize = 200; + let mut sphere_vec = Vec::>::new(); + let mut color_vec = Vec::<[f32; 3]>::new(); + + // timing + let mut last_time = 0.0; + + // viewpoint + const ROT_SPEED: f64 = 0.4; // in radians per second + const ZOOM_SPEED: f64 = 0.15; // multiplicative rate per second + let mut orientation = DMatrix::::identity(5, 5); + let mut rotation = DMatrix::::identity(5, 5); + let mut location_z: f64 = 5.0; + + // display parameters + const OPACITY: f32 = 0.5; /* SCAFFOLDING */ + const HIGHLIGHT: f32 = 0.2; /* SCAFFOLDING */ + const LAYER_THRESHOLD: i32 = 0; /* DEBUG */ + const DEBUG_MODE: i32 = 0; /* DEBUG */ + + /* INSTRUMENTS */ + let performance = window().unwrap().performance().unwrap(); + + // get the display canvas + let canvas = display.get().unchecked_into::(); + let ctx = canvas + .get_context("webgl2") + .unwrap() + .unwrap() + .dyn_into::() + .unwrap(); + + // compile and attach the vertex and fragment shaders + let vertex_shader = compile_shader( + &ctx, + WebGl2RenderingContext::VERTEX_SHADER, + include_str!("identity.vert"), + ); + let fragment_shader = compile_shader( + &ctx, + WebGl2RenderingContext::FRAGMENT_SHADER, + include_str!("inversive.frag"), + ); + let program = ctx.create_program().unwrap(); + ctx.attach_shader(&program, &vertex_shader); + ctx.attach_shader(&program, &fragment_shader); + ctx.link_program(&program); + let link_status = ctx + .get_program_parameter(&program, WebGl2RenderingContext::LINK_STATUS) + .as_bool() + .unwrap(); + let link_msg = if link_status { + "Linked successfully" + } else { + "Linking failed" + }; + console::log_1(&JsValue::from(link_msg)); + ctx.use_program(Some(&program)); + + /* DEBUG */ + // print the maximum number of vectors that can be passed as + // uniforms to a fragment shader. the OpenGL ES 3.0 standard + // requires this maximum to be at least 224, as discussed in the + // documentation of the GL_MAX_FRAGMENT_UNIFORM_VECTORS parameter + // here: + // + // https://registry.khronos.org/OpenGL-Refpages/es3.0/html/glGet.xhtml + // + // there are also other size limits. for example, on Aaron's + // machine, the the length of a float or genType array seems to be + // capped at 1024 elements + console::log_2( + &ctx.get_parameter(WebGl2RenderingContext::MAX_FRAGMENT_UNIFORM_VECTORS).unwrap(), + &JsValue::from("uniform vectors available") + ); + + // find indices of vertex attributes and uniforms + let position_index = ctx.get_attrib_location(&program, "position") as u32; + let sphere_cnt_loc = ctx.get_uniform_location(&program, "sphere_cnt"); + let sphere_sp_locs = get_uniform_array_locations::( + &ctx, &program, "sphere_list", Some("sp") + ); + let sphere_lt_locs = get_uniform_array_locations::( + &ctx, &program, "sphere_list", Some("lt") + ); + let color_locs = get_uniform_array_locations::( + &ctx, &program, "color_list", None + ); + let resolution_loc = ctx.get_uniform_location(&program, "resolution"); + let shortdim_loc = ctx.get_uniform_location(&program, "shortdim"); + let opacity_loc = ctx.get_uniform_location(&program, "opacity"); + let highlight_loc = ctx.get_uniform_location(&program, "highlight"); + let layer_threshold_loc = ctx.get_uniform_location(&program, "layer_threshold"); + let debug_mode_loc = ctx.get_uniform_location(&program, "debug_mode"); + + // create a vertex array and bind it to the graphics context + let vertex_array = ctx.create_vertex_array().unwrap(); + ctx.bind_vertex_array(Some(&vertex_array)); + + // set the vertex positions + const VERTEX_CNT: usize = 6; + let positions: [f32; 3*VERTEX_CNT] = [ + // northwest triangle + -1.0, -1.0, 0.0, + -1.0, 1.0, 0.0, + 1.0, 1.0, 0.0, + // southeast triangle + -1.0, -1.0, 0.0, + 1.0, 1.0, 0.0, + 1.0, -1.0, 0.0 + ]; + bind_vertex_attrib(&ctx, position_index, 3, &positions); + + // set up a repainting routine + let (_, start_animation_loop, _) = create_raf(move || { + // get the time step + let time = performance.now(); + let time_step = 0.001*(time - last_time); + last_time = time; + + // get the navigation state + let pitch_up_val = pitch_up.get(); + let pitch_down_val = pitch_down.get(); + let yaw_right_val = yaw_right.get(); + let yaw_left_val = yaw_left.get(); + let roll_ccw_val = roll_ccw.get(); + let roll_cw_val = roll_cw.get(); + let zoom_in_val = zoom_in.get(); + let zoom_out_val = zoom_out.get(); + + // update the assembly's orientation + let ang_vel = { + let pitch = pitch_up_val - pitch_down_val; + let yaw = yaw_right_val - yaw_left_val; + let roll = roll_ccw_val - roll_cw_val; + if pitch != 0.0 || yaw != 0.0 || roll != 0.0 { + ROT_SPEED * Vector3::new(-pitch, yaw, roll).normalize() + } else { + Vector3::zeros() + } + }; + let mut rotation_sp = rotation.fixed_view_mut::<3, 3>(0, 0); + rotation_sp.copy_from( + Rotation3::from_scaled_axis(time_step * ang_vel).matrix() + ); + orientation = &rotation * &orientation; + + // update the assembly's location + let zoom = zoom_out_val - zoom_in_val; + location_z *= (time_step * ZOOM_SPEED * zoom).exp(); + + if scene_changed.get() { + /* INSTRUMENTS */ + // measure mean frame interval + frames_since_last_sample += 1; + if frames_since_last_sample >= SAMPLE_PERIOD { + mean_frame_interval.set((time - last_sample_time) / (SAMPLE_PERIOD as f64)); + last_sample_time = time; + frames_since_last_sample = 0; + } + + // find the map from construction space to world space + let location = { + let u = -location_z; + DMatrix::from_column_slice(5, 5, &[ + 1.0, 0.0, 0.0, 0.0, 0.0, + 0.0, 1.0, 0.0, 0.0, 0.0, + 0.0, 0.0, 1.0, 0.0, u, + 0.0, 0.0, 2.0*u, 1.0, u*u, + 0.0, 0.0, 0.0, 0.0, 1.0 + ]) + }; + let construction_to_world = &location * &orientation; + + // update the construction + sphere_vec.clear(); + sphere_vec.push(&construction_to_world * DVector::::from_column_slice(&[0.5, 0.5, 0.0, 0.5, -0.25])); + sphere_vec.push(&construction_to_world * DVector::::from_column_slice(&[-0.5, -0.5, 0.0, 0.5, -0.25])); + sphere_vec.push(&construction_to_world * DVector::::from_column_slice(&[0.0, 0.0, 0.0, 0.4, -0.625])); + color_vec.clear(); + color_vec.push([1.00_f32, 0.25_f32, 0.00_f32]); + color_vec.push([0.00_f32, 0.25_f32, 1.00_f32]); + color_vec.push([0.75_f32, 0.75_f32, 0.75_f32]); + + // set the resolution + let width = canvas.width() as f32; + let height = canvas.height() as f32; + ctx.uniform2f(resolution_loc.as_ref(), width, height); + ctx.uniform1f(shortdim_loc.as_ref(), width.min(height)); + + // pass the construction + ctx.uniform1i(sphere_cnt_loc.as_ref(), sphere_vec.len() as i32); + for n in 0..sphere_vec.len() { + let v = &sphere_vec[n]; + ctx.uniform3f( + sphere_sp_locs[n].as_ref(), + v[0] as f32, v[1] as f32, v[2] as f32 + ); + ctx.uniform2f( + sphere_lt_locs[n].as_ref(), + v[3] as f32, v[4] as f32 + ); + ctx.uniform3fv_with_f32_array( + color_locs[n].as_ref(), + &color_vec[n] + ); + } + + // pass the display parameters + ctx.uniform1f(opacity_loc.as_ref(), OPACITY); + ctx.uniform1f(highlight_loc.as_ref(), HIGHLIGHT); + ctx.uniform1i(layer_threshold_loc.as_ref(), LAYER_THRESHOLD); + ctx.uniform1i(debug_mode_loc.as_ref(), DEBUG_MODE); + + // draw the scene + ctx.draw_arrays(WebGl2RenderingContext::TRIANGLES, 0, VERTEX_CNT as i32); + + // clear the scene change flag + scene_changed.set(false); + } else { + frames_since_last_sample = 0; + mean_frame_interval.set(-1.0); + } + }); + start_animation_loop(); + }); + view! { - /* [TO DO] switch back to integer-valued parameters when that becomes - possible again */ - canvas(width="750", height="750", tabindex="0") + /* TO DO */ + // switch back to integer-valued parameters when that becomes possible + // again + canvas(ref=display, width="750", height="750", tabindex="0") } } \ No newline at end of file diff --git a/app-proto/sketch-outline/src/identity.vert b/app-proto/sketch-outline/src/identity.vert new file mode 100644 index 0000000..183a65f --- /dev/null +++ b/app-proto/sketch-outline/src/identity.vert @@ -0,0 +1,7 @@ +#version 300 es + +in vec4 position; + +void main() { + gl_Position = position; +} \ No newline at end of file diff --git a/app-proto/sketch-outline/src/inversive.frag b/app-proto/sketch-outline/src/inversive.frag new file mode 100644 index 0000000..93bec50 --- /dev/null +++ b/app-proto/sketch-outline/src/inversive.frag @@ -0,0 +1,227 @@ +#version 300 es + +precision highp float; + +out vec4 outColor; + +// --- inversive geometry --- + +struct vecInv { + vec3 sp; + vec2 lt; +}; + +// --- uniforms --- + +// construction. the SPHERE_MAX array size seems to affect frame rate a lot, +// even though we should only be using the first few elements of each array +const int SPHERE_MAX = 200; +uniform int sphere_cnt; +uniform vecInv sphere_list[SPHERE_MAX]; +uniform vec3 color_list[SPHERE_MAX]; + +// view +uniform vec2 resolution; +uniform float shortdim; + +// controls +uniform float opacity; +uniform float highlight; +uniform int layer_threshold; +uniform bool debug_mode; + +// light and camera +const float focal_slope = 0.3; +const vec3 light_dir = normalize(vec3(2., 2., 1.)); +const float ixn_threshold = 0.005; +const float INTERIOR_DIMMING = 0.7; + +// --- sRGB --- + +// map colors from RGB space to sRGB space, as specified in the sRGB standard +// (IEC 61966-2-1:1999) +// +// https://www.color.org/sRGB.pdf +// https://www.color.org/chardata/rgb/srgb.xalter +// +// in RGB space, color value is proportional to light intensity, so linear +// color-vector interpolation corresponds to physical light mixing. in sRGB +// space, the color encoding used by many monitors, we use more of the value +// interval to represent low intensities, and less of the interval to represent +// high intensities. this improves color quantization + +float sRGB(float t) { + if (t <= 0.0031308) { + return 12.92*t; + } else { + return 1.055*pow(t, 5./12.) - 0.055; + } +} + +vec3 sRGB(vec3 color) { + return vec3(sRGB(color.r), sRGB(color.g), sRGB(color.b)); +} + +// --- shading --- + +struct taggedFrag { + int id; + vec4 color; + vec3 pt; + vec3 normal; +}; + +taggedFrag[2] sort(taggedFrag a, taggedFrag b) { + taggedFrag[2] result; + if (a.pt.z > b.pt.z) { + result[0] = a; + result[1] = b; + } else { + result[0] = b; + result[1] = a; + } + return result; +} + +taggedFrag sphere_shading(vecInv v, vec3 pt, vec3 base_color, int id) { + // the expression for normal needs to be checked. it's supposed to give the + // negative gradient of the lorentz product between the impact point vector + // and the sphere vector with respect to the coordinates of the impact + // point. i calculated it in my head and decided that the result looked good + // enough for now + vec3 normal = normalize(-v.sp + 2.*v.lt.s*pt); + + float incidence = dot(normal, light_dir); + float illum = mix(0.4, 1.0, max(incidence, 0.0)); + return taggedFrag(id, vec4(illum * base_color, opacity), pt, normal); +} + +// --- ray-casting --- + +// if `a/b` is less than this threshold, we approximate `a*u^2 + b*u + c` by +// the linear function `b*u + c` +const float DEG_THRESHOLD = 1e-9; + +// the depths, represented as multiples of `dir`, where the line generated by +// `dir` hits the sphere represented by `v`. if both depths are positive, the +// smaller one is returned in the first component. if only one depth is +// positive, it could be returned in either component +vec2 sphere_cast(vecInv v, vec3 dir) { + float a = -v.lt.s * dot(dir, dir); + float b = dot(v.sp, dir); + float c = -v.lt.t; + + float adjust = 4.*a*c/(b*b); + if (adjust < 1.) { + // as long as `b` is non-zero, the linear approximation of + // + // a*u^2 + b*u + c + // + // at `u = 0` will reach zero at a finite depth `u_lin`. the root of the + // quadratic adjacent to `u_lin` is stored in `lin_root`. if both roots + // have the same sign, `lin_root` will be the one closer to `u = 0` + float square_rect_ratio = 1. + sqrt(1. - adjust); + float lin_root = -(2.*c)/b / square_rect_ratio; + if (abs(a) > DEG_THRESHOLD * abs(b)) { + return vec2(lin_root, -b/(2.*a) * square_rect_ratio); + } else { + return vec2(lin_root, -1.); + } + } else { + // the line through `dir` misses the sphere completely + return vec2(-1., -1.); + } +} + +void main() { + vec2 scr = (2.*gl_FragCoord.xy - resolution) / shortdim; + vec3 dir = vec3(focal_slope * scr, -1.); + + // cast rays through the spheres + const int LAYER_MAX = 12; + taggedFrag frags [LAYER_MAX]; + int layer_cnt = 0; + for (int id = 0; id < sphere_cnt; ++id) { + // find out where the ray hits the sphere + vec2 hit_depths = sphere_cast(sphere_list[id], dir); + + // insertion-sort the fragments we hit into the fragment list + float dimming = 1.; + for (int side = 0; side < 2; ++side) { + float hit_z = -hit_depths[side]; + if (0. > hit_z) { + for (int layer = layer_cnt; layer >= 0; --layer) { + if (layer < 1 || frags[layer-1].pt.z >= hit_z) { + // we're not as close to the screen as the fragment + // before the empty slot, so insert here + if (layer < LAYER_MAX) { + frags[layer] = sphere_shading( + sphere_list[id], + hit_depths[side] * dir, + dimming * color_list[id], + id + ); + } + break; + } else { + // we're closer to the screen than the fragment before + // the empty slot, so move that fragment into the empty + // slot + frags[layer] = frags[layer-1]; + } + } + layer_cnt = min(layer_cnt + 1, LAYER_MAX); + dimming = INTERIOR_DIMMING; + } + } + } + + /* DEBUG */ + // in debug mode, show the layer count instead of the shaded image + if (debug_mode) { + // at the bottom of the screen, show the color scale instead of the + // layer count + if (gl_FragCoord.y < 10.) layer_cnt = int(16. * gl_FragCoord.x / resolution.x); + + // convert number to color + ivec3 bits = layer_cnt / ivec3(1, 2, 4); + vec3 color = mod(vec3(bits), 2.); + if (layer_cnt % 16 >= 8) { + color = mix(color, vec3(0.5), 0.5); + } + outColor = vec4(color, 1.); + return; + } + + // highlight intersections and cusps + for (int i = layer_cnt-1; i >= 1; --i) { + // intersections + taggedFrag frag0 = frags[i]; + taggedFrag frag1 = frags[i-1]; + float ixn_sin = length(cross(frag0.normal, frag1.normal)); + vec3 disp = frag0.pt - frag1.pt; + float ixn_dist = max( + abs(dot(frag1.normal, disp)), + abs(dot(frag0.normal, disp)) + ) / ixn_sin; + float ixn_highlight = 0.5 * highlight * (1. - smoothstep(2./3.*ixn_threshold, 1.5*ixn_threshold, ixn_dist)); + frags[i].color = mix(frags[i].color, vec4(1.), ixn_highlight); + frags[i-1].color = mix(frags[i-1].color, vec4(1.), ixn_highlight); + + // cusps + float cusp_cos = abs(dot(dir, frag0.normal)); + float cusp_threshold = 2.*sqrt(ixn_threshold * sphere_list[frag0.id].lt.s); + float cusp_highlight = highlight * (1. - smoothstep(2./3.*cusp_threshold, 1.5*cusp_threshold, cusp_cos)); + frags[i].color = mix(frags[i].color, vec4(1.), cusp_highlight); + } + + // composite the sphere fragments + vec3 color = vec3(0.); + for (int i = layer_cnt-1; i >= layer_threshold; --i) { + if (frags[i].pt.z < 0.) { + vec4 frag_color = frags[i].color; + color = mix(color, frag_color.rgb, frag_color.a); + } + } + outColor = vec4(sRGB(color), 1.); +} \ No newline at end of file diff --git a/app-proto/sketch-outline/src/main.rs b/app-proto/sketch-outline/src/main.rs index 9e74d28..6c6608f 100644 --- a/app-proto/sketch-outline/src/main.rs +++ b/app-proto/sketch-outline/src/main.rs @@ -29,14 +29,14 @@ fn main() { Element { id: String::from("wing_b"), label: String::from("Wing B"), - color: [1.00_f32, 0.25_f32, 0.00_f32], + color: [0.00_f32, 0.25_f32, 1.00_f32], rep: DVector::::from_column_slice(&[-0.5, -0.5, 0.0, 0.5, -0.25]) }, Element { id: String::from("central"), label: String::from("Central"), color: [0.75_f32, 0.75_f32, 0.75_f32], - rep: DVector::::from_column_slice(&[0.0, 0.0, 0.0, 0.25, -1.0]) + rep: DVector::::from_column_slice(&[0.0, 0.0, 0.0, 0.25, 1.0]) } ]) } From f47be08d9849abc027009e6c102d983745016649 Mon Sep 17 00:00:00 2001 From: Aaron Fenyes Date: Sun, 15 Sep 2024 11:31:22 -0700 Subject: [PATCH 10/15] Display: get the assembly from the app state --- app-proto/sketch-outline/src/display.rs | 35 +++++++++++-------------- app-proto/sketch-outline/src/main.rs | 2 +- 2 files changed, 16 insertions(+), 21 deletions(-) diff --git a/app-proto/sketch-outline/src/display.rs b/app-proto/sketch-outline/src/display.rs index b1bf6ea..59a72c9 100644 --- a/app-proto/sketch-outline/src/display.rs +++ b/app-proto/sketch-outline/src/display.rs @@ -1,5 +1,5 @@ use core::array; -use nalgebra::{DMatrix, DVector, Rotation3, Vector3}; +use nalgebra::{DMatrix, Rotation3, Vector3}; use sycamore::{prelude::*, motion::create_raf}; use web_sys::{ console, @@ -11,6 +11,8 @@ use web_sys::{ wasm_bindgen::{JsCast, JsValue} }; +use crate::AppState; + fn compile_shader( context: &WebGl2RenderingContext, shader_type: u32, @@ -81,6 +83,8 @@ fn bind_vertex_attrib( #[component] pub fn Display() -> View { + let state = use_context::(); + // canvas let display = create_node_ref(); @@ -104,12 +108,6 @@ pub fn Display() -> View { let mean_frame_interval = create_signal(0.0); on_mount(move || { - /* SCAFFOLDING */ - /* create list of construction elements */ - const SPHERE_MAX: usize = 200; - let mut sphere_vec = Vec::>::new(); - let mut color_vec = Vec::<[f32; 3]>::new(); - // timing let mut last_time = 0.0; @@ -183,6 +181,7 @@ pub fn Display() -> View { ); // find indices of vertex attributes and uniforms + const SPHERE_MAX: usize = 200; let position_index = ctx.get_attrib_location(&program, "position") as u32; let sphere_cnt_loc = ctx.get_uniform_location(&program, "sphere_cnt"); let sphere_sp_locs = get_uniform_array_locations::( @@ -280,15 +279,11 @@ pub fn Display() -> View { }; let construction_to_world = &location * &orientation; - // update the construction - sphere_vec.clear(); - sphere_vec.push(&construction_to_world * DVector::::from_column_slice(&[0.5, 0.5, 0.0, 0.5, -0.25])); - sphere_vec.push(&construction_to_world * DVector::::from_column_slice(&[-0.5, -0.5, 0.0, 0.5, -0.25])); - sphere_vec.push(&construction_to_world * DVector::::from_column_slice(&[0.0, 0.0, 0.0, 0.4, -0.625])); - color_vec.clear(); - color_vec.push([1.00_f32, 0.25_f32, 0.00_f32]); - color_vec.push([0.00_f32, 0.25_f32, 1.00_f32]); - color_vec.push([0.75_f32, 0.75_f32, 0.75_f32]); + // get the construction + let elements = state.assembly.elements.get_clone(); + let element_iter = (&elements).into_iter(); + let reps_world: Vec<_> = element_iter.clone().map(|elt| &construction_to_world * &elt.rep).collect(); + let colors: Vec<_> = element_iter.map(|elt| elt.color).collect(); // set the resolution let width = canvas.width() as f32; @@ -297,9 +292,9 @@ pub fn Display() -> View { ctx.uniform1f(shortdim_loc.as_ref(), width.min(height)); // pass the construction - ctx.uniform1i(sphere_cnt_loc.as_ref(), sphere_vec.len() as i32); - for n in 0..sphere_vec.len() { - let v = &sphere_vec[n]; + ctx.uniform1i(sphere_cnt_loc.as_ref(), elements.len() as i32); + for n in 0..reps_world.len() { + let v = &reps_world[n]; ctx.uniform3f( sphere_sp_locs[n].as_ref(), v[0] as f32, v[1] as f32, v[2] as f32 @@ -310,7 +305,7 @@ pub fn Display() -> View { ); ctx.uniform3fv_with_f32_array( color_locs[n].as_ref(), - &color_vec[n] + &colors[n] ); } diff --git a/app-proto/sketch-outline/src/main.rs b/app-proto/sketch-outline/src/main.rs index 6c6608f..ee7682a 100644 --- a/app-proto/sketch-outline/src/main.rs +++ b/app-proto/sketch-outline/src/main.rs @@ -36,7 +36,7 @@ fn main() { id: String::from("central"), label: String::from("Central"), color: [0.75_f32, 0.75_f32, 0.75_f32], - rep: DVector::::from_column_slice(&[0.0, 0.0, 0.0, 0.25, 1.0]) + rep: DVector::::from_column_slice(&[0.0, 0.0, 0.0, 0.4, -0.625]) } ]) } From 7cb01bab82db1dc463718bd1e1ae1bc8c954e3d8 Mon Sep 17 00:00:00 2001 From: Aaron Fenyes Date: Sun, 15 Sep 2024 11:38:32 -0700 Subject: [PATCH 11/15] Ray-caster: drop outdated performance comment The size of the internal fragment arrays is what really matters, as discussed in the "Display" page on the wiki. --- app-proto/inversive-display/src/inversive.frag | 3 +-- app-proto/sketch-outline/src/inversive.frag | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/app-proto/inversive-display/src/inversive.frag b/app-proto/inversive-display/src/inversive.frag index 93bec50..ae3b930 100644 --- a/app-proto/inversive-display/src/inversive.frag +++ b/app-proto/inversive-display/src/inversive.frag @@ -13,8 +13,7 @@ struct vecInv { // --- uniforms --- -// construction. the SPHERE_MAX array size seems to affect frame rate a lot, -// even though we should only be using the first few elements of each array +// construction const int SPHERE_MAX = 200; uniform int sphere_cnt; uniform vecInv sphere_list[SPHERE_MAX]; diff --git a/app-proto/sketch-outline/src/inversive.frag b/app-proto/sketch-outline/src/inversive.frag index 93bec50..ae3b930 100644 --- a/app-proto/sketch-outline/src/inversive.frag +++ b/app-proto/sketch-outline/src/inversive.frag @@ -13,8 +13,7 @@ struct vecInv { // --- uniforms --- -// construction. the SPHERE_MAX array size seems to affect frame rate a lot, -// even though we should only be using the first few elements of each array +// construction const int SPHERE_MAX = 200; uniform int sphere_cnt; uniform vecInv sphere_list[SPHERE_MAX]; From e2d3af2867024057400f2104d28b2b794fdfae5c Mon Sep 17 00:00:00 2001 From: Aaron Fenyes Date: Sun, 15 Sep 2024 11:41:16 -0700 Subject: [PATCH 12/15] Display: say "assembly" instead of "construction" Update variable names and comments in code from the display prototype. --- app-proto/sketch-outline/src/display.rs | 10 +++++----- app-proto/sketch-outline/src/inversive.frag | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app-proto/sketch-outline/src/display.rs b/app-proto/sketch-outline/src/display.rs index 59a72c9..efe42b2 100644 --- a/app-proto/sketch-outline/src/display.rs +++ b/app-proto/sketch-outline/src/display.rs @@ -266,7 +266,7 @@ pub fn Display() -> View { frames_since_last_sample = 0; } - // find the map from construction space to world space + // find the map from assembly space to world space let location = { let u = -location_z; DMatrix::from_column_slice(5, 5, &[ @@ -277,12 +277,12 @@ pub fn Display() -> View { 0.0, 0.0, 0.0, 0.0, 1.0 ]) }; - let construction_to_world = &location * &orientation; + let assembly_to_world = &location * &orientation; - // get the construction + // get the assembly let elements = state.assembly.elements.get_clone(); let element_iter = (&elements).into_iter(); - let reps_world: Vec<_> = element_iter.clone().map(|elt| &construction_to_world * &elt.rep).collect(); + let reps_world: Vec<_> = element_iter.clone().map(|elt| &assembly_to_world * &elt.rep).collect(); let colors: Vec<_> = element_iter.map(|elt| elt.color).collect(); // set the resolution @@ -291,7 +291,7 @@ pub fn Display() -> View { ctx.uniform2f(resolution_loc.as_ref(), width, height); ctx.uniform1f(shortdim_loc.as_ref(), width.min(height)); - // pass the construction + // pass the assembly ctx.uniform1i(sphere_cnt_loc.as_ref(), elements.len() as i32); for n in 0..reps_world.len() { let v = &reps_world[n]; diff --git a/app-proto/sketch-outline/src/inversive.frag b/app-proto/sketch-outline/src/inversive.frag index ae3b930..d75377e 100644 --- a/app-proto/sketch-outline/src/inversive.frag +++ b/app-proto/sketch-outline/src/inversive.frag @@ -13,7 +13,7 @@ struct vecInv { // --- uniforms --- -// construction +// assembly const int SPHERE_MAX = 200; uniform int sphere_cnt; uniform vecInv sphere_list[SPHERE_MAX]; From 93190e99da52c398ac568385b6d0ec44ccdc520a Mon Sep 17 00:00:00 2001 From: Aaron Fenyes Date: Sun, 15 Sep 2024 11:54:39 -0700 Subject: [PATCH 13/15] Display: bring in keyboard navigation code --- app-proto/sketch-outline/src/display.rs | 75 ++++++++++++++++++++++++- 1 file changed, 73 insertions(+), 2 deletions(-) diff --git a/app-proto/sketch-outline/src/display.rs b/app-proto/sketch-outline/src/display.rs index efe42b2..f3804f6 100644 --- a/app-proto/sketch-outline/src/display.rs +++ b/app-proto/sketch-outline/src/display.rs @@ -4,6 +4,7 @@ use sycamore::{prelude::*, motion::create_raf}; use web_sys::{ console, window, + KeyboardEvent, WebGl2RenderingContext, WebGlProgram, WebGlShader, @@ -319,7 +320,16 @@ pub fn Display() -> View { ctx.draw_arrays(WebGl2RenderingContext::TRIANGLES, 0, VERTEX_CNT as i32); // clear the scene change flag - scene_changed.set(false); + scene_changed.set( + pitch_up_val != 0.0 + || pitch_down_val != 0.0 + || yaw_left_val != 0.0 + || yaw_right_val != 0.0 + || roll_cw_val != 0.0 + || roll_ccw_val != 0.0 + || zoom_in_val != 0.0 + || zoom_out_val != 0.0 + ); } else { frames_since_last_sample = 0; mean_frame_interval.set(-1.0); @@ -328,10 +338,71 @@ pub fn Display() -> View { start_animation_loop(); }); + let set_nav_signal = move |event: KeyboardEvent, value: f64| { + let mut navigating = true; + let shift = event.shift_key(); + match event.key().as_str() { + "ArrowUp" if shift => zoom_in.set(value), + "ArrowDown" if shift => zoom_out.set(value), + "ArrowUp" => pitch_up.set(value), + "ArrowDown" => pitch_down.set(value), + "ArrowRight" if shift => roll_cw.set(value), + "ArrowLeft" if shift => roll_ccw.set(value), + "ArrowRight" => yaw_right.set(value), + "ArrowLeft" => yaw_left.set(value), + _ => navigating = false + }; + if navigating { + scene_changed.set(true); + event.prevent_default(); + } + }; + view! { /* TO DO */ // switch back to integer-valued parameters when that becomes possible // again - canvas(ref=display, width="750", height="750", tabindex="0") + canvas( + ref=display, + width="750", + height="750", + tabindex="0", + on:keydown=move |event: KeyboardEvent| { + if event.key() == "Shift" { + roll_cw.set(yaw_right.get()); + roll_ccw.set(yaw_left.get()); + zoom_in.set(pitch_up.get()); + zoom_out.set(pitch_down.get()); + yaw_right.set(0.0); + yaw_left.set(0.0); + pitch_up.set(0.0); + pitch_down.set(0.0); + } else { + set_nav_signal(event, 1.0); + } + }, + on:keyup=move |event: KeyboardEvent| { + if event.key() == "Shift" { + yaw_right.set(roll_cw.get()); + yaw_left.set(roll_ccw.get()); + pitch_up.set(zoom_in.get()); + pitch_down.set(zoom_out.get()); + roll_cw.set(0.0); + roll_ccw.set(0.0); + zoom_in.set(0.0); + zoom_out.set(0.0); + } else { + set_nav_signal(event, 0.0); + } + }, + on:blur=move |_| { + pitch_up.set(0.0); + pitch_down.set(0.0); + yaw_right.set(0.0); + yaw_left.set(0.0); + roll_ccw.set(0.0); + roll_cw.set(0.0); + } + ) } } \ No newline at end of file From a60624884ad7741d916a5dec84881f7d08568ce6 Mon Sep 17 00:00:00 2001 From: Aaron Fenyes Date: Mon, 16 Sep 2024 11:29:44 -0700 Subject: [PATCH 14/15] App: add element selection --- app-proto/sketch-outline/main.css | 4 ++-- app-proto/sketch-outline/src/assembly.rs | 4 ++++ app-proto/sketch-outline/src/display.rs | 13 ++++++++++++- app-proto/sketch-outline/src/main.rs | 9 ++++++--- app-proto/sketch-outline/src/outline.rs | 18 +++++++++++++++++- 5 files changed, 41 insertions(+), 7 deletions(-) diff --git a/app-proto/sketch-outline/main.css b/app-proto/sketch-outline/main.css index 9e8cdb4..cd7bc44 100644 --- a/app-proto/sketch-outline/main.css +++ b/app-proto/sketch-outline/main.css @@ -26,7 +26,7 @@ li { border-radius: 8px; } -li:focus { +li.selected { color: #fff; background-color: #666; } @@ -52,7 +52,7 @@ li > .elt-rep > div { background-color: #333; } -li:focus > .elt-rep > div { +li.selected > .elt-rep > div { background-color: #555; } diff --git a/app-proto/sketch-outline/src/assembly.rs b/app-proto/sketch-outline/src/assembly.rs index b53e38d..dded2a1 100644 --- a/app-proto/sketch-outline/src/assembly.rs +++ b/app-proto/sketch-outline/src/assembly.rs @@ -7,6 +7,10 @@ pub struct Element { pub label: String, pub color: [f32; 3], pub rep: DVector, + + /* TO DO */ + // does this belong in the element data? + pub selected: Signal } // a complete, view-independent description of an assembly diff --git a/app-proto/sketch-outline/src/display.rs b/app-proto/sketch-outline/src/display.rs index f3804f6..70beacf 100644 --- a/app-proto/sketch-outline/src/display.rs +++ b/app-proto/sketch-outline/src/display.rs @@ -101,6 +101,11 @@ pub fn Display() -> View { // change listener let scene_changed = create_signal(true); + create_effect(move || { + let elements = state.assembly.elements.get_clone(); + for elt in elements { elt.selected.track(); } + scene_changed.set(true); + }); /* INSTRUMENTS */ const SAMPLE_PERIOD: i32 = 60; @@ -284,7 +289,13 @@ pub fn Display() -> View { let elements = state.assembly.elements.get_clone(); let element_iter = (&elements).into_iter(); let reps_world: Vec<_> = element_iter.clone().map(|elt| &assembly_to_world * &elt.rep).collect(); - let colors: Vec<_> = element_iter.map(|elt| elt.color).collect(); + let colors: Vec<_> = element_iter.map(|elt| + if elt.selected.get() { + elt.color.map(|ch| 0.5 + 0.5*ch) + } else { + elt.color + } + ).collect(); // set the resolution let width = canvas.width() as f32; diff --git a/app-proto/sketch-outline/src/main.rs b/app-proto/sketch-outline/src/main.rs index ee7682a..06cc43d 100644 --- a/app-proto/sketch-outline/src/main.rs +++ b/app-proto/sketch-outline/src/main.rs @@ -24,19 +24,22 @@ fn main() { id: String::from("wing_a"), label: String::from("Wing A"), color: [1.00_f32, 0.25_f32, 0.00_f32], - rep: DVector::::from_column_slice(&[0.5, 0.5, 0.0, 0.5, -0.25]) + rep: DVector::::from_column_slice(&[0.5, 0.5, 0.0, 0.5, -0.25]), + selected: create_signal(false) }, Element { id: String::from("wing_b"), label: String::from("Wing B"), color: [0.00_f32, 0.25_f32, 1.00_f32], - rep: DVector::::from_column_slice(&[-0.5, -0.5, 0.0, 0.5, -0.25]) + rep: DVector::::from_column_slice(&[-0.5, -0.5, 0.0, 0.5, -0.25]), + selected: create_signal(false) }, Element { id: String::from("central"), label: String::from("Central"), color: [0.75_f32, 0.75_f32, 0.75_f32], - rep: DVector::::from_column_slice(&[0.0, 0.0, 0.0, 0.4, -0.625]) + rep: DVector::::from_column_slice(&[0.0, 0.0, 0.0, 0.4, -0.625]), + selected: create_signal(false) } ]) } diff --git a/app-proto/sketch-outline/src/outline.rs b/app-proto/sketch-outline/src/outline.rs index 546b272..5d650b3 100644 --- a/app-proto/sketch-outline/src/outline.rs +++ b/app-proto/sketch-outline/src/outline.rs @@ -1,5 +1,6 @@ use itertools::Itertools; use sycamore::{prelude::*, web::tags::div}; +use web_sys::KeyboardEvent; use crate::AppState; @@ -21,6 +22,9 @@ pub fn Outline() -> View { Keyed( list=elements_sorted, view=|elt| { + let class = create_memo(move || + if elt.selected.get() { "selected" } else { "" } + ); let label = elt.label.clone(); let rep_components = elt.rep.iter().map(|u| { let u_coord = u.to_string().replace("-", "\u{2212}"); @@ -29,7 +33,19 @@ pub fn Outline() -> View { view! { /* [TO DO] switch to integer-valued parameters whenever that becomes possible again */ - li(tabindex="0") { + li( + class=class.get(), + tabindex="0", + on:click=move |_| { + elt.selected.set_fn(|sel| !sel); + }, + on:keydown=move |event: KeyboardEvent| { + if event.key() == "Enter" { + elt.selected.set_fn(|sel| !sel); + event.prevent_default(); + } + } + ) { div(class="elt-label") { (label) } div(class="elt-rep") { (rep_components) } } From 96afad0c97ccfc5f5fca6825d50dd5e8079fd8ac Mon Sep 17 00:00:00 2001 From: Aaron Fenyes Date: Mon, 16 Sep 2024 15:46:45 -0700 Subject: [PATCH 15/15] Display: highlight selected elements --- app-proto/sketch-outline/src/display.rs | 16 ++++++++++++---- app-proto/sketch-outline/src/inversive.frag | 12 ++++++++---- 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/app-proto/sketch-outline/src/display.rs b/app-proto/sketch-outline/src/display.rs index 70beacf..373c857 100644 --- a/app-proto/sketch-outline/src/display.rs +++ b/app-proto/sketch-outline/src/display.rs @@ -199,10 +199,12 @@ pub fn Display() -> View { let color_locs = get_uniform_array_locations::( &ctx, &program, "color_list", None ); + let highlight_locs = get_uniform_array_locations::( + &ctx, &program, "highlight_list", None + ); let resolution_loc = ctx.get_uniform_location(&program, "resolution"); let shortdim_loc = ctx.get_uniform_location(&program, "shortdim"); let opacity_loc = ctx.get_uniform_location(&program, "opacity"); - let highlight_loc = ctx.get_uniform_location(&program, "highlight"); let layer_threshold_loc = ctx.get_uniform_location(&program, "layer_threshold"); let debug_mode_loc = ctx.get_uniform_location(&program, "debug_mode"); @@ -289,13 +291,16 @@ pub fn Display() -> View { let elements = state.assembly.elements.get_clone(); let element_iter = (&elements).into_iter(); let reps_world: Vec<_> = element_iter.clone().map(|elt| &assembly_to_world * &elt.rep).collect(); - let colors: Vec<_> = element_iter.map(|elt| + let colors: Vec<_> = element_iter.clone().map(|elt| if elt.selected.get() { - elt.color.map(|ch| 0.5 + 0.5*ch) + elt.color.map(|ch| 0.2 + 0.8*ch) } else { elt.color } ).collect(); + let highlights: Vec<_> = element_iter.map(|elt| + if elt.selected.get() { 1.0_f32 } else { HIGHLIGHT } + ).collect(); // set the resolution let width = canvas.width() as f32; @@ -319,11 +324,14 @@ pub fn Display() -> View { color_locs[n].as_ref(), &colors[n] ); + ctx.uniform1f( + highlight_locs[n].as_ref(), + highlights[n] + ); } // pass the display parameters ctx.uniform1f(opacity_loc.as_ref(), OPACITY); - ctx.uniform1f(highlight_loc.as_ref(), HIGHLIGHT); ctx.uniform1i(layer_threshold_loc.as_ref(), LAYER_THRESHOLD); ctx.uniform1i(debug_mode_loc.as_ref(), DEBUG_MODE); diff --git a/app-proto/sketch-outline/src/inversive.frag b/app-proto/sketch-outline/src/inversive.frag index d75377e..47743eb 100644 --- a/app-proto/sketch-outline/src/inversive.frag +++ b/app-proto/sketch-outline/src/inversive.frag @@ -18,6 +18,7 @@ const int SPHERE_MAX = 200; uniform int sphere_cnt; uniform vecInv sphere_list[SPHERE_MAX]; uniform vec3 color_list[SPHERE_MAX]; +uniform float highlight_list[SPHERE_MAX]; // view uniform vec2 resolution; @@ -25,7 +26,6 @@ uniform float shortdim; // controls uniform float opacity; -uniform float highlight; uniform int layer_threshold; uniform bool debug_mode; @@ -66,6 +66,7 @@ vec3 sRGB(vec3 color) { struct taggedFrag { int id; vec4 color; + float highlight; vec3 pt; vec3 normal; }; @@ -82,7 +83,7 @@ taggedFrag[2] sort(taggedFrag a, taggedFrag b) { return result; } -taggedFrag sphere_shading(vecInv v, vec3 pt, vec3 base_color, int id) { +taggedFrag sphere_shading(vecInv v, vec3 pt, vec3 base_color, float highlight, int id) { // the expression for normal needs to be checked. it's supposed to give the // negative gradient of the lorentz product between the impact point vector // and the sphere vector with respect to the coordinates of the impact @@ -92,7 +93,7 @@ taggedFrag sphere_shading(vecInv v, vec3 pt, vec3 base_color, int id) { float incidence = dot(normal, light_dir); float illum = mix(0.4, 1.0, max(incidence, 0.0)); - return taggedFrag(id, vec4(illum * base_color, opacity), pt, normal); + return taggedFrag(id, vec4(illum * base_color, opacity), highlight, pt, normal); } // --- ray-casting --- @@ -158,6 +159,7 @@ void main() { sphere_list[id], hit_depths[side] * dir, dimming * color_list[id], + highlight_list[id], id ); } @@ -203,13 +205,15 @@ void main() { abs(dot(frag1.normal, disp)), abs(dot(frag0.normal, disp)) ) / ixn_sin; - float ixn_highlight = 0.5 * highlight * (1. - smoothstep(2./3.*ixn_threshold, 1.5*ixn_threshold, ixn_dist)); + float max_highlight = max(frags[i].highlight, frags[i-1].highlight); + float ixn_highlight = 0.5 * max_highlight * (1. - smoothstep(2./3.*ixn_threshold, 1.5*ixn_threshold, ixn_dist)); frags[i].color = mix(frags[i].color, vec4(1.), ixn_highlight); frags[i-1].color = mix(frags[i-1].color, vec4(1.), ixn_highlight); // cusps float cusp_cos = abs(dot(dir, frag0.normal)); float cusp_threshold = 2.*sqrt(ixn_threshold * sphere_list[frag0.id].lt.s); + float highlight = frags[i].highlight; float cusp_highlight = highlight * (1. - smoothstep(2./3.*cusp_threshold, 1.5*cusp_threshold, cusp_cos)); frags[i].color = mix(frags[i].color, vec4(1.), cusp_highlight); }