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/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/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 { + 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 a4cbe8d..51bc0ff 100644 --- a/app-proto/inversive-display/src/inversive.frag +++ b/app-proto/inversive-display/src/inversive.frag @@ -4,6 +4,32 @@ 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. 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]; +uniform vec3 color_list[SPHERE_MAX]; + // view uniform vec2 resolution; uniform float shortdim; @@ -14,6 +40,7 @@ uniform vec2 radius; uniform float opacity; uniform float highlight; uniform int layer_threshold; +uniform bool test_mode; // light and camera const float focal_slope = 0.3; @@ -46,23 +73,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 { @@ -124,40 +134,40 @@ void main() { 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.); - // cast rays through the spheres - vec2 u0 = sphere_cast(v[0], dir); - vec2 u1 = sphere_cast(v[1], dir); + 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[i], dir); + 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( - 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 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( @@ -165,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 * 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); + 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); } } diff --git a/app-proto/inversive-display/src/main.rs b/app-proto/inversive-display/src/main.rs index 186facf..ebbf713 100644 --- a/app-proto/inversive-display/src/main.rs +++ b/app-proto/inversive-display/src/main.rs @@ -8,8 +8,12 @@ // extern crate js_sys; -use sycamore::{prelude::*, rt::{JsCast, JsValue}}; -use web_sys::{console, WebGl2RenderingContext, WebGlShader}; +use core::array; +use nalgebra::DVector; +use sycamore::{prelude::*, motion::create_raf, rt::{JsCast, JsValue}}; +use web_sys::{console, WebGl2RenderingContext, WebGlProgram, WebGlShader, WebGlUniformLocation}; + +mod engine; fn compile_shader( context: &WebGl2RenderingContext, @@ -22,6 +26,21 @@ fn compile_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, @@ -70,6 +89,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 +97,21 @@ fn main() { let opacity = create_signal(0.5); let highlight = create_signal(0.2); let layer_threshold = create_signal(0.0); + let debug_mode = create_signal(false); + + // display let display = create_node_ref(); on_mount(move || { + // list construction elements + const SPHERE_MAX: usize = 12; + let mut sphere_vec = Vec::>::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 .get::() @@ -118,15 +150,43 @@ 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::( + &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 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 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(); @@ -147,74 +207,143 @@ 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())); + 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 + 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 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(debug_mode_loc.as_ref(), debug_mode.get() as i32); // 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! { 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=3.0, - step=1.0, - bind:valueAsNumber=layer_threshold - ) + 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="debug-mode") { "Debug mode" } + input( + type="checkbox", + id="debug-mode", + bind:checked=debug_mode + ) + } } } });