From 8798683d25c8e24dba2592e06efa5905a6d37783 Mon Sep 17 00:00:00 2001
From: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Date: Sun, 25 Aug 2024 00:00:28 -0700
Subject: [PATCH 01/10] Ray-caster: store sphere data in arrays

This is a first step toward general depth sorting.
---
 .../inversive-display/src/inversive.frag      | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/app-proto/inversive-display/src/inversive.frag b/app-proto/inversive-display/src/inversive.frag
index a4cbe8d..12b4129 100644
--- a/app-proto/inversive-display/src/inversive.frag
+++ b/app-proto/inversive-display/src/inversive.frag
@@ -121,29 +121,31 @@ vec2 sphere_cast(vecInv v, vec3 dir) {
 }
 
 void main() {
+    const int sphere_cnt = 2;
+    
     vec2 scr = (2.*gl_FragCoord.xy - resolution) / shortdim;
     vec3 dir = vec3(focal_slope * scr, -1.);
     
     // initialize two spheres
-    vecInv v [2];
-    v[0] = sphere(vec3(0.5, 0.5, -5. + ctrl.x), radius.x);
-    v[1] = sphere(vec3(-0.5, -0.5, -5. + ctrl.y), radius.y);
-    vec3 color0 = vec3(1., 0.214, 0.);
-    vec3 color1 = vec3(0., 0.214, 1.);
+    vecInv sphere_list [sphere_cnt];
+    sphere_list[0] = sphere(vec3(0.5, 0.5, -5. + ctrl.x), radius.x);
+    sphere_list[1] = sphere(vec3(-0.5, -0.5, -5. + ctrl.y), radius.y);
+    vec3 color_list [sphere_cnt];
+    color_list[0] = vec3(1., 0.214, 0.);
+    color_list[1] = vec3(0., 0.214, 1.);
     
     // cast rays through the spheres
-    vec2 u0 = sphere_cast(v[0], dir);
-    vec2 u1 = sphere_cast(v[1], dir);
+    vec2 depth_pairs [sphere_cnt];
+    taggedFrag frags [2*sphere_cnt];
+    for (int i = 0; i < sphere_cnt; i++) {
+        vec2 hit_depths = sphere_cast(sphere_list[i], dir);
+        frags[2*i] = sphere_shading(sphere_list[i], hit_depths[0] * dir, color_list[i], i);
+        frags[2*i+1] = sphere_shading(sphere_list[i], hit_depths[1] * dir, color_list[i], i);
+    }
     
     // shade and depth-sort the impact points
-    taggedFrag front_hits[2] = sort(
-        sphere_shading(v[0], u0[0] * dir, color0, 0),
-        sphere_shading(v[1], u1[0] * dir, color1, 1)
-    );
-    taggedFrag back_hits[2] = sort(
-        sphere_shading(v[0], u0[1] * dir, color0, 0),
-        sphere_shading(v[1], u1[1] * dir, color1, 1)
-    );
+    taggedFrag front_hits[2] = sort(frags[0], frags[2]);
+    taggedFrag back_hits[2] = sort(frags[1], frags[3]);
     taggedFrag middle_frags[2] = sort(front_hits[1], back_hits[0]);
     
     // finish depth sorting
@@ -170,7 +172,7 @@ void main() {
         
         // cusps
         float cusp_cos = abs(dot(dir, frag0.normal));
-        float cusp_threshold = 2.*sqrt(ixn_threshold * v[frag0.id].lt.s);
+        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_by_depth[i].color = mix(frags_by_depth[i].color, vec4(1.), cusp_highlight);
     }

From c18cac642b23e0daeac65bb9b7b493a7749b16d7 Mon Sep 17 00:00:00 2001
From: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Date: Sun, 25 Aug 2024 00:47:36 -0700
Subject: [PATCH 02/10] Ray-caster: generalize depth sorting

Switch from a hard-coded sorting network for four fragments to an
insertion sort, which should work for any number of fragments.
---
 .../inversive-display/src/inversive.frag      | 54 +++++++++++--------
 1 file changed, 31 insertions(+), 23 deletions(-)

diff --git a/app-proto/inversive-display/src/inversive.frag b/app-proto/inversive-display/src/inversive.frag
index 12b4129..93bdde4 100644
--- a/app-proto/inversive-display/src/inversive.frag
+++ b/app-proto/inversive-display/src/inversive.frag
@@ -137,29 +137,37 @@ void main() {
     // cast rays through the spheres
     vec2 depth_pairs [sphere_cnt];
     taggedFrag frags [2*sphere_cnt];
-    for (int i = 0; i < sphere_cnt; i++) {
+    int frag_cnt = 0;
+    for (int i = 0; i < sphere_cnt; ++i) {
         vec2 hit_depths = sphere_cast(sphere_list[i], dir);
-        frags[2*i] = sphere_shading(sphere_list[i], hit_depths[0] * dir, color_list[i], i);
-        frags[2*i+1] = sphere_shading(sphere_list[i], hit_depths[1] * dir, color_list[i], i);
+        if (!isnan(hit_depths[0])) {
+            frags[frag_cnt] = sphere_shading(sphere_list[i], hit_depths[0] * dir, color_list[i], i);
+            ++frag_cnt;
+        }
+        if (!isnan(hit_depths[1])) {
+            frags[frag_cnt] = sphere_shading(sphere_list[i], hit_depths[1] * dir, color_list[i], i);
+            ++frag_cnt;
+        }
     }
     
-    // shade and depth-sort the impact points
-    taggedFrag front_hits[2] = sort(frags[0], frags[2]);
-    taggedFrag back_hits[2] = sort(frags[1], frags[3]);
-    taggedFrag middle_frags[2] = sort(front_hits[1], back_hits[0]);
-    
-    // finish depth sorting
-    taggedFrag frags_by_depth[4];
-    frags_by_depth[0] = front_hits[0];
-    frags_by_depth[1] = middle_frags[0];
-    frags_by_depth[2] = middle_frags[1];
-    frags_by_depth[3] = back_hits[1];
+    // sort the fragments by depth, using an insertion sort
+    for (int take = 1; take < frag_cnt; ++take) {
+        taggedFrag pulled = frags[take];
+        for (int put = take; put >= 0; --put) {
+            if (put < 1 || frags[put-1].pt.z >= pulled.pt.z) {
+                frags[put] = pulled;
+                break;
+            } else {
+                frags[put] = frags[put-1];
+            }
+        }
+    }
     
     // highlight intersections and cusps
-    for (int i = 3; i >= 1; --i) {
+    for (int i = frag_cnt-1; i >= 1; --i) {
         // intersections
-        taggedFrag frag0 = frags_by_depth[i];
-        taggedFrag frag1 = frags_by_depth[i-1];
+        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(
@@ -167,21 +175,21 @@ void main() {
             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_by_depth[i].color = mix(frags_by_depth[i].color, vec4(1.), ixn_highlight);
-        frags_by_depth[i-1].color = mix(frags_by_depth[i-1].color, vec4(1.), ixn_highlight);
+        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_by_depth[i].color = mix(frags_by_depth[i].color, vec4(1.), cusp_highlight);
+        frags[i].color = mix(frags[i].color, vec4(1.), cusp_highlight);
     }
     
     // composite the sphere fragments
     vec3 color = vec3(0.);
-    for (int i = 3; i >= layer_threshold; --i) {
-        if (frags_by_depth[i].pt.z < 0.) {
-            vec4 frag_color = frags_by_depth[i].color;
+    for (int i = frag_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);
         }
     }

From 206a2df480db850df30201382fa9f9ea14d80755 Mon Sep 17 00:00:00 2001
From: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Date: Sun, 25 Aug 2024 16:41:31 -0700
Subject: [PATCH 03/10] Ray-caster: add a third test sphere

This helps confirm that the generalized depth-sorting is working.
---
 app-proto/inversive-display/src/inversive.frag | 8 +++++---
 app-proto/inversive-display/src/main.rs        | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/app-proto/inversive-display/src/inversive.frag b/app-proto/inversive-display/src/inversive.frag
index 93bdde4..dcc8610 100644
--- a/app-proto/inversive-display/src/inversive.frag
+++ b/app-proto/inversive-display/src/inversive.frag
@@ -121,7 +121,7 @@ vec2 sphere_cast(vecInv v, vec3 dir) {
 }
 
 void main() {
-    const int sphere_cnt = 2;
+    const int sphere_cnt = 3;
     
     vec2 scr = (2.*gl_FragCoord.xy - resolution) / shortdim;
     vec3 dir = vec3(focal_slope * scr, -1.);
@@ -130,9 +130,11 @@ void main() {
     vecInv sphere_list [sphere_cnt];
     sphere_list[0] = sphere(vec3(0.5, 0.5, -5. + ctrl.x), radius.x);
     sphere_list[1] = sphere(vec3(-0.5, -0.5, -5. + ctrl.y), radius.y);
+    sphere_list[2] = sphere(vec3(-0.5, 0.5, -5.), 0.75);
     vec3 color_list [sphere_cnt];
-    color_list[0] = vec3(1., 0.214, 0.);
-    color_list[1] = vec3(0., 0.214, 1.);
+    color_list[0] = vec3(1., 0.25, 0.);
+    color_list[1] = vec3(0., 0.25, 1.);
+    color_list[2] = vec3(0.25, 0., 1.0);
     
     // cast rays through the spheres
     vec2 depth_pairs [sphere_cnt];
diff --git a/app-proto/inversive-display/src/main.rs b/app-proto/inversive-display/src/main.rs
index 186facf..7bd2639 100644
--- a/app-proto/inversive-display/src/main.rs
+++ b/app-proto/inversive-display/src/main.rs
@@ -211,7 +211,7 @@ fn main() {
                 )
                 input(
                     type="range",
-                    max=3.0,
+                    max=5.0,
                     step=1.0,
                     bind:valueAsNumber=layer_threshold
                 )

From 5bf23fa78974f2addf6cd766f008814db852fd42 Mon Sep 17 00:00:00 2001
From: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Date: Sun, 25 Aug 2024 21:40:46 -0700
Subject: [PATCH 04/10] Ray-caster: pass spheres in through uniforms

Keep the hard-coded spheres for comparison.
---
 app-proto/inversive-display/Cargo.toml        |  1 +
 app-proto/inversive-display/src/engine.rs     | 12 ++++
 .../inversive-display/src/inversive.frag      | 68 ++++++++++++-------
 app-proto/inversive-display/src/main.rs       | 51 ++++++++++++--
 4 files changed, 103 insertions(+), 29 deletions(-)
 create mode 100644 app-proto/inversive-display/src/engine.rs

diff --git a/app-proto/inversive-display/Cargo.toml b/app-proto/inversive-display/Cargo.toml
index 3d7eb3f..bcf6b76 100644
--- a/app-proto/inversive-display/Cargo.toml
+++ b/app-proto/inversive-display/Cargo.toml
@@ -9,6 +9,7 @@ default = ["console_error_panic_hook"]
 
 [dependencies]
 js-sys = "0.3.70"
+nalgebra = "0.33.0"
 sycamore = "0.9.0-beta.2"
 
 # The `console_error_panic_hook` crate provides better debugging of panics by
diff --git a/app-proto/inversive-display/src/engine.rs b/app-proto/inversive-display/src/engine.rs
new file mode 100644
index 0000000..7fbcd03
--- /dev/null
+++ b/app-proto/inversive-display/src/engine.rs
@@ -0,0 +1,12 @@
+use nalgebra::DVector;
+
+pub fn sphere(center_x: f64, center_y: f64, center_z: f64, radius: f64) -> DVector<f64> {
+    let center_norm_sq = center_x * center_x + center_y * center_y + center_z * center_z;
+    DVector::from_column_slice(&[
+        center_x / radius,
+        center_y / radius,
+        center_z / radius,
+        0.5 / radius,
+        0.5 * (center_norm_sq / radius - radius)
+    ])
+}
\ No newline at end of file
diff --git a/app-proto/inversive-display/src/inversive.frag b/app-proto/inversive-display/src/inversive.frag
index dcc8610..ff6ad6b 100644
--- a/app-proto/inversive-display/src/inversive.frag
+++ b/app-proto/inversive-display/src/inversive.frag
@@ -4,6 +4,29 @@ precision highp float;
 
 out vec4 outColor;
 
+// --- inversive geometry ---
+
+struct vecInv {
+    vec3 sp;
+    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
+const int SPHERE_MAX = 256;
+uniform vecInv sphere_list[SPHERE_MAX];
+
 // view
 uniform vec2 resolution;
 uniform float shortdim;
@@ -14,6 +37,7 @@ uniform vec2 radius;
 uniform float opacity;
 uniform float highlight;
 uniform int layer_threshold;
+uniform bool use_test_construction;
 
 // light and camera
 const float focal_slope = 0.3;
@@ -46,23 +70,6 @@ vec3 sRGB(vec3 color) {
     return vec3(sRGB(color.r), sRGB(color.g), sRGB(color.b));
 }
 
-// --- inversive geometry ---
-
-struct vecInv {
-    vec3 sp;
-    vec2 lt;
-};
-
-vecInv sphere(vec3 center, float radius) {
-    return vecInv(
-        center / radius,
-        vec2(
-            0.5 / radius,
-            0.5 * (dot(center, center) / radius - radius)
-        )
-    );
-}
-
 // --- shading ---
 
 struct taggedFrag {
@@ -127,10 +134,21 @@ void main() {
     vec3 dir = vec3(focal_slope * scr, -1.);
     
     // initialize two spheres
-    vecInv sphere_list [sphere_cnt];
-    sphere_list[0] = sphere(vec3(0.5, 0.5, -5. + ctrl.x), radius.x);
-    sphere_list[1] = sphere(vec3(-0.5, -0.5, -5. + ctrl.y), radius.y);
-    sphere_list[2] = sphere(vec3(-0.5, 0.5, -5.), 0.75);
+    vecInv sphere_list_internal [sphere_cnt];
+    if (use_test_construction) {
+        /* DEBUG */
+        // spheres 0 and 1 are identical in the test construction hard-coded
+        // here and the construction passed in through uniforms. sphere 2 has
+        // a different radius in the construction; we can use that to show that
+        // the switch is working
+        sphere_list_internal[0] = sphere(vec3(0.5, 0.5, -5. + ctrl.x), radius.x);
+        sphere_list_internal[1] = sphere(vec3(-0.5, -0.5, -5. + ctrl.y), radius.y);
+        sphere_list_internal[2] = sphere(vec3(-0.5, 0.5, -5.), 0.5);
+    } else {
+        for (int i = 0; i < sphere_cnt; ++i) {
+            sphere_list_internal[i] = sphere_list[i];
+        }
+    }
     vec3 color_list [sphere_cnt];
     color_list[0] = vec3(1., 0.25, 0.);
     color_list[1] = vec3(0., 0.25, 1.);
@@ -141,13 +159,13 @@ void main() {
     taggedFrag frags [2*sphere_cnt];
     int frag_cnt = 0;
     for (int i = 0; i < sphere_cnt; ++i) {
-        vec2 hit_depths = sphere_cast(sphere_list[i], dir);
+        vec2 hit_depths = sphere_cast(sphere_list_internal[i], dir);
         if (!isnan(hit_depths[0])) {
-            frags[frag_cnt] = sphere_shading(sphere_list[i], hit_depths[0] * dir, color_list[i], i);
+            frags[frag_cnt] = sphere_shading(sphere_list_internal[i], hit_depths[0] * dir, color_list[i], i);
             ++frag_cnt;
         }
         if (!isnan(hit_depths[1])) {
-            frags[frag_cnt] = sphere_shading(sphere_list[i], hit_depths[1] * dir, color_list[i], i);
+            frags[frag_cnt] = sphere_shading(sphere_list_internal[i], hit_depths[1] * dir, color_list[i], i);
             ++frag_cnt;
         }
     }
@@ -182,7 +200,7 @@ void main() {
         
         // cusps
         float cusp_cos = abs(dot(dir, frag0.normal));
-        float cusp_threshold = 2.*sqrt(ixn_threshold * sphere_list[frag0.id].lt.s);
+        float cusp_threshold = 2.*sqrt(ixn_threshold * sphere_list_internal[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);
     }
diff --git a/app-proto/inversive-display/src/main.rs b/app-proto/inversive-display/src/main.rs
index 7bd2639..83e05c0 100644
--- a/app-proto/inversive-display/src/main.rs
+++ b/app-proto/inversive-display/src/main.rs
@@ -8,9 +8,13 @@
 //
 
 extern crate js_sys;
+use core::array;
+use nalgebra::DVector;
 use sycamore::{prelude::*, rt::{JsCast, JsValue}};
 use web_sys::{console, WebGl2RenderingContext, WebGlShader};
 
+mod engine;
+
 fn compile_shader(
     context: &WebGl2RenderingContext,
     shader_type: u32,
@@ -70,6 +74,7 @@ fn main() {
     console_error_panic_hook::set_once();
     
     sycamore::render(|| {
+        // controls
         let ctrl_x = create_signal(0.0);
         let ctrl_y = create_signal(0.0);
         let radius_x = create_signal(1.0);
@@ -77,9 +82,16 @@ fn main() {
         let opacity = create_signal(0.5);
         let highlight = create_signal(0.2);
         let layer_threshold = create_signal(0.0);
+        let use_test_construction = create_signal(false);
+        
+        // display
         let display = create_node_ref();
         
         on_mount(move || {
+            // list construction elements
+            const SPHERE_MAX: usize = 256;
+            let mut sphere_vec = Vec::<DVector<f64>>::new();
+            
             // get the display canvas
             let canvas = display
                 .get::<DomNode>()
@@ -119,14 +131,21 @@ fn main() {
             ctx.use_program(Some(&program));
             
             // find indices of vertex attributes and uniforms
+            let sphere_sp_locs = array::from_fn::<_, SPHERE_MAX, _>(
+                |n| ctx.get_uniform_location(&program, format!("sphere_list[{}].sp", n).as_str())
+            );
+            let sphere_lt_locs = array::from_fn::<_, SPHERE_MAX, _>(
+                |n| ctx.get_uniform_location(&program, format!("sphere_list[{}].lt", n).as_str())
+            );
             let position_index = ctx.get_attrib_location(&program, "position") as u32;
             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");
-            let radius_loc = ctx.get_uniform_location(&program, "radius");
+            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");
+            let use_test_construction_loc = ctx.get_uniform_location(&program, "use_test_construction");
             
             // create a vertex array and bind it to the graphics context
             let vertex_array = ctx.create_vertex_array().unwrap();
@@ -148,18 +167,38 @@ fn main() {
             
             // set up a repainting routine
             create_effect(move || {
+                // update the construction
+                sphere_vec.clear();
+                sphere_vec.push(engine::sphere(0.5, 0.5, -5.0 + ctrl_x.get(), radius_x.get()));
+                sphere_vec.push(engine::sphere(-0.5, -0.5, -5.0 + ctrl_y.get(), radius_y.get()));
+                sphere_vec.push(engine::sphere(-0.5, 0.5, -5.0, 0.75));
+                
                 // 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
+                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
+                    );
+                }
+                
                 // pass the control parameters
-                ctx.uniform2f(ctrl_loc.as_ref(), ctrl_x.get() as f32, ctrl_y.get() as f32);
-                ctx.uniform2f(radius_loc.as_ref(), radius_x.get() as f32, radius_y.get() as f32);
+                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);
+                ctx.uniform1i(use_test_construction_loc.as_ref(), use_test_construction.get() as i32);
                 
                 // draw the scene
                 ctx.draw_arrays(WebGl2RenderingContext::TRIANGLES, 0, VERTEX_CNT as i32);
@@ -215,6 +254,10 @@ fn main() {
                     step=1.0,
                     bind:valueAsNumber=layer_threshold
                 )
+                input(
+                    type="checkbox",
+                    bind:checked=use_test_construction
+                )
             }
         }
     });

From c5fe725b1b8086366537a6983f36de1e13dcb5c5 Mon Sep 17 00:00:00 2001
From: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Date: Sun, 25 Aug 2024 22:22:14 -0700
Subject: [PATCH 05/10] Ray-caster: automate getting uniform array locations

---
 app-proto/inversive-display/src/main.rs | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/app-proto/inversive-display/src/main.rs b/app-proto/inversive-display/src/main.rs
index 83e05c0..e2097e7 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::*, rt::{JsCast, JsValue}};
-use web_sys::{console, WebGl2RenderingContext, WebGlShader};
+use web_sys::{console, WebGl2RenderingContext, WebGlProgram, WebGlShader, WebGlUniformLocation};
 
 mod engine;
 
@@ -26,6 +26,18 @@ fn compile_shader(
     shader
 }
 
+fn get_uniform_array_locations<const N: usize>(
+    context: &WebGl2RenderingContext,
+    program: &WebGlProgram,
+    var_name: &str,
+    member_name: &str
+) -> [Option<WebGlUniformLocation>; N] {
+    array::from_fn(|n| {
+        let name = format!("{var_name}[{n}].{member_name}");
+        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,
@@ -131,11 +143,11 @@ fn main() {
             ctx.use_program(Some(&program));
             
             // find indices of vertex attributes and uniforms
-            let sphere_sp_locs = array::from_fn::<_, SPHERE_MAX, _>(
-                |n| ctx.get_uniform_location(&program, format!("sphere_list[{}].sp", n).as_str())
+            let sphere_sp_locs = get_uniform_array_locations::<SPHERE_MAX>(
+                &ctx, &program, "sphere_list", "sp"
             );
-            let sphere_lt_locs = array::from_fn::<_, SPHERE_MAX, _>(
-                |n| ctx.get_uniform_location(&program, format!("sphere_list[{}].lt", n).as_str())
+            let sphere_lt_locs = get_uniform_array_locations::<SPHERE_MAX>(
+                &ctx, &program, "sphere_list", "lt"
             );
             let position_index = ctx.get_attrib_location(&program, "position") as u32;
             let resolution_loc = ctx.get_uniform_location(&program, "resolution");

From 85db7b9be08a11f66f0dc9cf6b192139bdefdf1e Mon Sep 17 00:00:00 2001
From: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Date: Mon, 26 Aug 2024 00:43:42 -0700
Subject: [PATCH 06/10] Ray-caster: pass the sphere count as a uniform

In the process, start exploring array size limits of various kinds.
---
 .../inversive-display/src/inversive.frag      | 16 ++++++-------
 app-proto/inversive-display/src/main.rs       | 23 +++++++++++++++++--
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/app-proto/inversive-display/src/inversive.frag b/app-proto/inversive-display/src/inversive.frag
index ff6ad6b..fdfcc0b 100644
--- a/app-proto/inversive-display/src/inversive.frag
+++ b/app-proto/inversive-display/src/inversive.frag
@@ -23,8 +23,10 @@ vecInv sphere(vec3 center, float radius) {
 
 // --- uniforms ---
 
-// construction
-const int SPHERE_MAX = 256;
+// 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 = 12;
+uniform int sphere_cnt;
 uniform vecInv sphere_list[SPHERE_MAX];
 
 // view
@@ -128,13 +130,11 @@ vec2 sphere_cast(vecInv v, vec3 dir) {
 }
 
 void main() {
-    const int sphere_cnt = 3;
-    
     vec2 scr = (2.*gl_FragCoord.xy - resolution) / shortdim;
     vec3 dir = vec3(focal_slope * scr, -1.);
     
     // initialize two spheres
-    vecInv sphere_list_internal [sphere_cnt];
+    vecInv sphere_list_internal [SPHERE_MAX];
     if (use_test_construction) {
         /* DEBUG */
         // spheres 0 and 1 are identical in the test construction hard-coded
@@ -149,14 +149,14 @@ void main() {
             sphere_list_internal[i] = sphere_list[i];
         }
     }
-    vec3 color_list [sphere_cnt];
+    vec3 color_list [SPHERE_MAX];
     color_list[0] = vec3(1., 0.25, 0.);
     color_list[1] = vec3(0., 0.25, 1.);
     color_list[2] = vec3(0.25, 0., 1.0);
     
     // cast rays through the spheres
-    vec2 depth_pairs [sphere_cnt];
-    taggedFrag frags [2*sphere_cnt];
+    vec2 depth_pairs [SPHERE_MAX];
+    taggedFrag frags [2*SPHERE_MAX];
     int frag_cnt = 0;
     for (int i = 0; i < sphere_cnt; ++i) {
         vec2 hit_depths = sphere_cast(sphere_list_internal[i], dir);
diff --git a/app-proto/inversive-display/src/main.rs b/app-proto/inversive-display/src/main.rs
index e2097e7..eceecd7 100644
--- a/app-proto/inversive-display/src/main.rs
+++ b/app-proto/inversive-display/src/main.rs
@@ -101,7 +101,7 @@ fn main() {
         
         on_mount(move || {
             // list construction elements
-            const SPHERE_MAX: usize = 256;
+            const SPHERE_MAX: usize = 12;
             let mut sphere_vec = Vec::<DVector<f64>>::new();
             
             // get the display canvas
@@ -142,14 +142,32 @@ fn main() {
             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::<SPHERE_MAX>(
                 &ctx, &program, "sphere_list", "sp"
             );
             let sphere_lt_locs = get_uniform_array_locations::<SPHERE_MAX>(
                 &ctx, &program, "sphere_list", "lt"
             );
-            let position_index = ctx.get_attrib_location(&program, "position") as u32;
             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 */
@@ -192,6 +210,7 @@ fn main() {
                 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(

From b9370ceb41537e83efa45094a4da1bbb4d6b1496 Mon Sep 17 00:00:00 2001
From: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Date: Mon, 26 Aug 2024 01:47:53 -0700
Subject: [PATCH 07/10] Ray-caster: label controls

---
 app-proto/inversive-display/main.css    |  12 ++-
 app-proto/inversive-display/src/main.rs | 132 +++++++++++++++---------
 2 files changed, 93 insertions(+), 51 deletions(-)

diff --git a/app-proto/inversive-display/main.css b/app-proto/inversive-display/main.css
index f79e62c..7cdc831 100644
--- a/app-proto/inversive-display/main.css
+++ b/app-proto/inversive-display/main.css
@@ -18,6 +18,16 @@ canvas {
   margin-top: 5px;
 }
 
+.control {
+  display: flex;
+  flex-direction: row;
+  width: 600px;
+}
+
+label {
+  width: 150px;
+}
+
 input {
-  margin-top: 5px;
+  flex-grow: 1;
 }
\ No newline at end of file
diff --git a/app-proto/inversive-display/src/main.rs b/app-proto/inversive-display/src/main.rs
index eceecd7..6b52a12 100644
--- a/app-proto/inversive-display/src/main.rs
+++ b/app-proto/inversive-display/src/main.rs
@@ -239,56 +239,88 @@ fn main() {
         view! {
             div(id="app") {
                 canvas(ref=display, width="600", height="600")
-                input(
-                    type="range",
-                    min=-1.0,
-                    max=1.0,
-                    step=0.001,
-                    bind:valueAsNumber=ctrl_x
-                )
-                input(
-                    type="range",
-                    min=-1.0,
-                    max=1.0,
-                    step=0.001,
-                    bind:valueAsNumber=ctrl_y
-                )
-                input(
-                    type="range",
-                    min=0.5,
-                    max=1.5,
-                    step=0.001,
-                    bind:valueAsNumber=radius_x
-                )
-                input(
-                    type="range",
-                    min=0.5,
-                    max=1.5,
-                    step=0.001,
-                    bind:valueAsNumber=radius_y
-                )
-                input(
-                    type="range",
-                    max=1.0,
-                    step=0.001,
-                    bind:valueAsNumber=opacity
-                )
-                input(
-                    type="range",
-                    max=1.0,
-                    step=0.001,
-                    bind:valueAsNumber=highlight
-                )
-                input(
-                    type="range",
-                    max=5.0,
-                    step=1.0,
-                    bind:valueAsNumber=layer_threshold
-                )
-                input(
-                    type="checkbox",
-                    bind:checked=use_test_construction
-                )
+                div(class="control") {
+                    label(for="ctrl-x") { "Sphere 0 depth" }
+                    input(
+                        type="range",
+                        id="ctrl-x",
+                        min=-1.0,
+                        max=1.0,
+                        step=0.001,
+                        bind:valueAsNumber=ctrl_x
+                    )
+                }
+                div(class="control") {
+                    label(for="ctrl-y") { "Sphere 1 depth" }
+                    input(
+                        type="range",
+                        id="ctrl-y",
+                        min=-1.0,
+                        max=1.0,
+                        step=0.001,
+                        bind:valueAsNumber=ctrl_y
+                    )
+                }
+                div(class="control") {
+                    label(for="radius-x") { "Sphere 0 radius" }
+                    input(
+                        type="range",
+                        id="radius-x",
+                        min=0.5,
+                        max=1.5,
+                        step=0.001,
+                        bind:valueAsNumber=radius_x
+                    )
+                }
+                div(class="control") {
+                    label(for="radius-y") { "Sphere 1 radius" }
+                    input(
+                        type="range",
+                        id="radius-y",
+                        min=0.5,
+                        max=1.5,
+                        step=0.001,
+                        bind:valueAsNumber=radius_y
+                    )
+                }
+                div(class="control") {
+                    label(for="opacity") { "Opacity" }
+                    input(
+                        type="range",
+                        id="opacity",
+                        max=1.0,
+                        step=0.001,
+                        bind:valueAsNumber=opacity
+                    )
+                }
+                div(class="control") {
+                    label(for="highlight") { "Highlight" }
+                    input(
+                        type="range",
+                        id="highlight",
+                        max=1.0,
+                        step=0.001,
+                        bind:valueAsNumber=highlight
+                    )
+                }
+                div(class="control") {
+                    label(for="layer-threshold") { "Layer threshold" }
+                    input(
+                        type="range",
+                        id="layer-threshold",
+                        max=5.0,
+                        step=1.0,
+                        bind:valueAsNumber=layer_threshold
+                    )
+                }
+                div(class="control") {
+                    label(for="use-test-construction") { "Use test values" }
+                    input(
+                        type="checkbox",
+                        id="use-test-construction",
+                        bind:checked=use_test_construction
+                    )
+                }
             }
         }
     });

From cbec31f5df3284954f13f8c29725f54cf06d325e Mon Sep 17 00:00:00 2001
From: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Date: Mon, 26 Aug 2024 13:41:34 -0700
Subject: [PATCH 08/10] Ray-caster: pass colors in through uniforms

---
 .../inversive-display/src/inversive.frag      | 14 ++++++-----
 app-proto/inversive-display/src/main.rs       | 23 +++++++++++++++----
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/app-proto/inversive-display/src/inversive.frag b/app-proto/inversive-display/src/inversive.frag
index fdfcc0b..db1a3c0 100644
--- a/app-proto/inversive-display/src/inversive.frag
+++ b/app-proto/inversive-display/src/inversive.frag
@@ -28,6 +28,7 @@ vecInv sphere(vec3 center, float radius) {
 const int SPHERE_MAX = 12;
 uniform int sphere_cnt;
 uniform vecInv sphere_list[SPHERE_MAX];
+uniform vec3 color_list[SPHERE_MAX];
 
 // view
 uniform vec2 resolution;
@@ -135,6 +136,7 @@ void main() {
     
     // initialize two spheres
     vecInv sphere_list_internal [SPHERE_MAX];
+    vec3 color_list_internal [SPHERE_MAX];
     if (use_test_construction) {
         /* DEBUG */
         // spheres 0 and 1 are identical in the test construction hard-coded
@@ -144,15 +146,15 @@ void main() {
         sphere_list_internal[0] = sphere(vec3(0.5, 0.5, -5. + ctrl.x), radius.x);
         sphere_list_internal[1] = sphere(vec3(-0.5, -0.5, -5. + ctrl.y), radius.y);
         sphere_list_internal[2] = sphere(vec3(-0.5, 0.5, -5.), 0.5);
+        color_list_internal[0] = vec3(1., 0.25, 0.);
+        color_list_internal[1] = vec3(0., 0.25, 1.);
+        color_list_internal[2] = vec3(0.25, 0., 1.0);
     } else {
         for (int i = 0; i < sphere_cnt; ++i) {
             sphere_list_internal[i] = sphere_list[i];
+            color_list_internal[i] = color_list[i];
         }
     }
-    vec3 color_list [SPHERE_MAX];
-    color_list[0] = vec3(1., 0.25, 0.);
-    color_list[1] = vec3(0., 0.25, 1.);
-    color_list[2] = vec3(0.25, 0., 1.0);
     
     // cast rays through the spheres
     vec2 depth_pairs [SPHERE_MAX];
@@ -161,11 +163,11 @@ void main() {
     for (int i = 0; i < sphere_cnt; ++i) {
         vec2 hit_depths = sphere_cast(sphere_list_internal[i], dir);
         if (!isnan(hit_depths[0])) {
-            frags[frag_cnt] = sphere_shading(sphere_list_internal[i], hit_depths[0] * dir, color_list[i], i);
+            frags[frag_cnt] = sphere_shading(sphere_list_internal[i], hit_depths[0] * dir, color_list_internal[i], i);
             ++frag_cnt;
         }
         if (!isnan(hit_depths[1])) {
-            frags[frag_cnt] = sphere_shading(sphere_list_internal[i], hit_depths[1] * dir, color_list[i], i);
+            frags[frag_cnt] = sphere_shading(sphere_list_internal[i], hit_depths[1] * dir, color_list_internal[i], i);
             ++frag_cnt;
         }
     }
diff --git a/app-proto/inversive-display/src/main.rs b/app-proto/inversive-display/src/main.rs
index 6b52a12..5a9b875 100644
--- a/app-proto/inversive-display/src/main.rs
+++ b/app-proto/inversive-display/src/main.rs
@@ -30,10 +30,13 @@ fn get_uniform_array_locations<const N: usize>(
     context: &WebGl2RenderingContext,
     program: &WebGlProgram,
     var_name: &str,
-    member_name: &str
+    member_name_opt: Option<&str>
 ) -> [Option<WebGlUniformLocation>; N] {
     array::from_fn(|n| {
-        let name = format!("{var_name}[{n}].{member_name}");
+        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())
     })
 }
@@ -103,6 +106,11 @@ fn main() {
             // list construction elements
             const SPHERE_MAX: usize = 12;
             let mut sphere_vec = Vec::<DVector<f64>>::new();
+            let color_vec = vec![
+                [1.00_f32, 0.25_f32, 0.00_f32],
+                [0.00_f32, 0.25_f32, 1.00_f32],
+                [0.25_f32, 0.00_f32, 1.00_f32]
+            ];
             
             // get the display canvas
             let canvas = display
@@ -163,10 +171,13 @@ fn main() {
             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::<SPHERE_MAX>(
-                &ctx, &program, "sphere_list", "sp"
+                &ctx, &program, "sphere_list", Some("sp")
             );
             let sphere_lt_locs = get_uniform_array_locations::<SPHERE_MAX>(
-                &ctx, &program, "sphere_list", "lt"
+                &ctx, &program, "sphere_list", Some("lt")
+            );
+            let color_locs = get_uniform_array_locations::<SPHERE_MAX>(
+                &ctx, &program, "color_list", None
             );
             let resolution_loc = ctx.get_uniform_location(&program, "resolution");
             let shortdim_loc = ctx.get_uniform_location(&program, "shortdim");
@@ -221,6 +232,10 @@ fn main() {
                         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 control parameters

From bf140efaf7bce9f1c9f03b97602589d9d7ca1bdd Mon Sep 17 00:00:00 2001
From: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Date: Mon, 26 Aug 2024 13:51:01 -0700
Subject: [PATCH 09/10] Ray-caster: remove hard-coded test construction

---
 .../inversive-display/src/inversive.frag      | 32 +++----------------
 app-proto/inversive-display/src/main.rs       | 12 +++----
 2 files changed, 11 insertions(+), 33 deletions(-)

diff --git a/app-proto/inversive-display/src/inversive.frag b/app-proto/inversive-display/src/inversive.frag
index db1a3c0..51bc0ff 100644
--- a/app-proto/inversive-display/src/inversive.frag
+++ b/app-proto/inversive-display/src/inversive.frag
@@ -40,7 +40,7 @@ uniform vec2 radius;
 uniform float opacity;
 uniform float highlight;
 uniform int layer_threshold;
-uniform bool use_test_construction;
+uniform bool test_mode;
 
 // light and camera
 const float focal_slope = 0.3;
@@ -134,40 +134,18 @@ void main() {
     vec2 scr = (2.*gl_FragCoord.xy - resolution) / shortdim;
     vec3 dir = vec3(focal_slope * scr, -1.);
     
-    // initialize two spheres
-    vecInv sphere_list_internal [SPHERE_MAX];
-    vec3 color_list_internal [SPHERE_MAX];
-    if (use_test_construction) {
-        /* DEBUG */
-        // spheres 0 and 1 are identical in the test construction hard-coded
-        // here and the construction passed in through uniforms. sphere 2 has
-        // a different radius in the construction; we can use that to show that
-        // the switch is working
-        sphere_list_internal[0] = sphere(vec3(0.5, 0.5, -5. + ctrl.x), radius.x);
-        sphere_list_internal[1] = sphere(vec3(-0.5, -0.5, -5. + ctrl.y), radius.y);
-        sphere_list_internal[2] = sphere(vec3(-0.5, 0.5, -5.), 0.5);
-        color_list_internal[0] = vec3(1., 0.25, 0.);
-        color_list_internal[1] = vec3(0., 0.25, 1.);
-        color_list_internal[2] = vec3(0.25, 0., 1.0);
-    } else {
-        for (int i = 0; i < sphere_cnt; ++i) {
-            sphere_list_internal[i] = sphere_list[i];
-            color_list_internal[i] = color_list[i];
-        }
-    }
-    
     // cast rays through the spheres
     vec2 depth_pairs [SPHERE_MAX];
     taggedFrag frags [2*SPHERE_MAX];
     int frag_cnt = 0;
     for (int i = 0; i < sphere_cnt; ++i) {
-        vec2 hit_depths = sphere_cast(sphere_list_internal[i], dir);
+        vec2 hit_depths = sphere_cast(sphere_list[i], dir);
         if (!isnan(hit_depths[0])) {
-            frags[frag_cnt] = sphere_shading(sphere_list_internal[i], hit_depths[0] * dir, color_list_internal[i], i);
+            frags[frag_cnt] = sphere_shading(sphere_list[i], hit_depths[0] * dir, color_list[i], i);
             ++frag_cnt;
         }
         if (!isnan(hit_depths[1])) {
-            frags[frag_cnt] = sphere_shading(sphere_list_internal[i], hit_depths[1] * dir, color_list_internal[i], i);
+            frags[frag_cnt] = sphere_shading(sphere_list[i], hit_depths[1] * dir, color_list[i], i);
             ++frag_cnt;
         }
     }
@@ -202,7 +180,7 @@ void main() {
         
         // cusps
         float cusp_cos = abs(dot(dir, frag0.normal));
-        float cusp_threshold = 2.*sqrt(ixn_threshold * sphere_list_internal[frag0.id].lt.s);
+        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);
     }
diff --git a/app-proto/inversive-display/src/main.rs b/app-proto/inversive-display/src/main.rs
index 5a9b875..a5bfedc 100644
--- a/app-proto/inversive-display/src/main.rs
+++ b/app-proto/inversive-display/src/main.rs
@@ -97,7 +97,7 @@ fn main() {
         let opacity = create_signal(0.5);
         let highlight = create_signal(0.2);
         let layer_threshold = create_signal(0.0);
-        let use_test_construction = create_signal(false);
+        let debug_mode = create_signal(false);
         
         // display
         let display = create_node_ref();
@@ -186,7 +186,7 @@ fn main() {
             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 use_test_construction_loc = ctx.get_uniform_location(&program, "use_test_construction");
+            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();
@@ -244,7 +244,7 @@ fn main() {
                 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);
-                ctx.uniform1i(use_test_construction_loc.as_ref(), use_test_construction.get() as i32);
+                ctx.uniform1i(debug_mode_loc.as_ref(), debug_mode.get() as i32);
                 
                 // draw the scene
                 ctx.draw_arrays(WebGl2RenderingContext::TRIANGLES, 0, VERTEX_CNT as i32);
@@ -329,11 +329,11 @@ fn main() {
                     )
                 }
                 div(class="control") {
-                    label(for="use-test-construction") { "Use test values" }
+                    label(for="debug-mode") { "Debug mode" }
                     input(
                         type="checkbox",
-                        id="use-test-construction",
-                        bind:checked=use_test_construction
+                        id="debug-mode",
+                        bind:checked=debug_mode
                     )
                 }
             }

From 5e9c5db231dfd0061ebae387d01507019051acc5 Mon Sep 17 00:00:00 2001
From: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Date: Mon, 26 Aug 2024 16:06:37 -0700
Subject: [PATCH 10/10] Ray-caster: switch from draw effect to animation loop

This wastes a lot of CPU time, as explained on lines 253--258 of
`main.rs`, but it's better than the previous version, which could block
graphics updates system-wide for seconds on end.
---
 app-proto/inversive-display/src/main.rs | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/app-proto/inversive-display/src/main.rs b/app-proto/inversive-display/src/main.rs
index a5bfedc..ebbf713 100644
--- a/app-proto/inversive-display/src/main.rs
+++ b/app-proto/inversive-display/src/main.rs
@@ -10,7 +10,7 @@
 extern crate js_sys;
 use core::array;
 use nalgebra::DVector;
-use sycamore::{prelude::*, rt::{JsCast, JsValue}};
+use sycamore::{prelude::*, motion::create_raf, rt::{JsCast, JsValue}};
 use web_sys::{console, WebGl2RenderingContext, WebGlProgram, WebGlShader, WebGlUniformLocation};
 
 mod engine;
@@ -207,7 +207,7 @@ fn main() {
             bind_vertex_attrib(&ctx, position_index, 3, &positions);
             
             // set up a repainting routine
-            create_effect(move || {
+            let (_, start_updating_display, _) = create_raf(move || {
                 // update the construction
                 sphere_vec.clear();
                 sphere_vec.push(engine::sphere(0.5, 0.5, -5.0 + ctrl_x.get(), radius_x.get()));
@@ -249,6 +249,14 @@ fn main() {
                 // draw the scene
                 ctx.draw_arrays(WebGl2RenderingContext::TRIANGLES, 0, VERTEX_CNT as i32);
             });
+            
+            /*
+            this wastes CPU time by running an animation loop, which updates the
+            display even when nothing has changed. there should be a way to make
+            Sycamore do single-frame updates in response to changes, but i
+            haven't found it yet
+            */
+            start_updating_display();
         });
         
         view! {