Application prototype #14
@ -9,6 +9,7 @@ default = ["console_error_panic_hook"]
|
|||||||
|
|
||||||
[dependencies]
|
[dependencies]
|
||||||
js-sys = "0.3.70"
|
js-sys = "0.3.70"
|
||||||
|
nalgebra = "0.33.0"
|
||||||
sycamore = "0.9.0-beta.2"
|
sycamore = "0.9.0-beta.2"
|
||||||
|
|
||||||
# The `console_error_panic_hook` crate provides better debugging of panics by
|
# The `console_error_panic_hook` crate provides better debugging of panics by
|
||||||
|
12
app-proto/inversive-display/src/engine.rs
Normal file
12
app-proto/inversive-display/src/engine.rs
Normal file
@ -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)
|
||||||
|
])
|
||||||
|
}
|
@ -4,6 +4,29 @@ precision highp float;
|
|||||||
|
|
||||||
out vec4 outColor;
|
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
|
// view
|
||||||
uniform vec2 resolution;
|
uniform vec2 resolution;
|
||||||
uniform float shortdim;
|
uniform float shortdim;
|
||||||
@ -14,6 +37,7 @@ uniform vec2 radius;
|
|||||||
uniform float opacity;
|
uniform float opacity;
|
||||||
uniform float highlight;
|
uniform float highlight;
|
||||||
uniform int layer_threshold;
|
uniform int layer_threshold;
|
||||||
|
uniform bool use_test_construction;
|
||||||
|
|
||||||
// light and camera
|
// light and camera
|
||||||
const float focal_slope = 0.3;
|
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));
|
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 ---
|
// --- shading ---
|
||||||
|
|
||||||
struct taggedFrag {
|
struct taggedFrag {
|
||||||
@ -127,10 +134,21 @@ void main() {
|
|||||||
vec3 dir = vec3(focal_slope * scr, -1.);
|
vec3 dir = vec3(focal_slope * scr, -1.);
|
||||||
|
|
||||||
// initialize two spheres
|
// initialize two spheres
|
||||||
vecInv sphere_list [sphere_cnt];
|
vecInv sphere_list_internal [sphere_cnt];
|
||||||
sphere_list[0] = sphere(vec3(0.5, 0.5, -5. + ctrl.x), radius.x);
|
if (use_test_construction) {
|
||||||
sphere_list[1] = sphere(vec3(-0.5, -0.5, -5. + ctrl.y), radius.y);
|
/* DEBUG */
|
||||||
sphere_list[2] = sphere(vec3(-0.5, 0.5, -5.), 0.75);
|
// 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];
|
vec3 color_list [sphere_cnt];
|
||||||
color_list[0] = vec3(1., 0.25, 0.);
|
color_list[0] = vec3(1., 0.25, 0.);
|
||||||
color_list[1] = vec3(0., 0.25, 1.);
|
color_list[1] = vec3(0., 0.25, 1.);
|
||||||
@ -141,13 +159,13 @@ void main() {
|
|||||||
taggedFrag frags [2*sphere_cnt];
|
taggedFrag frags [2*sphere_cnt];
|
||||||
int frag_cnt = 0;
|
int frag_cnt = 0;
|
||||||
for (int i = 0; i < sphere_cnt; ++i) {
|
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])) {
|
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;
|
++frag_cnt;
|
||||||
}
|
}
|
||||||
if (!isnan(hit_depths[1])) {
|
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;
|
++frag_cnt;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -182,7 +200,7 @@ void main() {
|
|||||||
|
|
||||||
// cusps
|
// cusps
|
||||||
float cusp_cos = abs(dot(dir, frag0.normal));
|
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));
|
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);
|
frags[i].color = mix(frags[i].color, vec4(1.), cusp_highlight);
|
||||||
}
|
}
|
||||||
|
@ -8,9 +8,13 @@
|
|||||||
//
|
//
|
||||||
|
|
||||||
extern crate js_sys;
|
extern crate js_sys;
|
||||||
|
use core::array;
|
||||||
|
use nalgebra::DVector;
|
||||||
use sycamore::{prelude::*, rt::{JsCast, JsValue}};
|
use sycamore::{prelude::*, rt::{JsCast, JsValue}};
|
||||||
use web_sys::{console, WebGl2RenderingContext, WebGlShader};
|
use web_sys::{console, WebGl2RenderingContext, WebGlShader};
|
||||||
|
|
||||||
|
mod engine;
|
||||||
|
|
||||||
fn compile_shader(
|
fn compile_shader(
|
||||||
context: &WebGl2RenderingContext,
|
context: &WebGl2RenderingContext,
|
||||||
shader_type: u32,
|
shader_type: u32,
|
||||||
@ -70,6 +74,7 @@ fn main() {
|
|||||||
console_error_panic_hook::set_once();
|
console_error_panic_hook::set_once();
|
||||||
|
|
||||||
sycamore::render(|| {
|
sycamore::render(|| {
|
||||||
|
// controls
|
||||||
let ctrl_x = create_signal(0.0);
|
let ctrl_x = create_signal(0.0);
|
||||||
let ctrl_y = create_signal(0.0);
|
let ctrl_y = create_signal(0.0);
|
||||||
let radius_x = create_signal(1.0);
|
let radius_x = create_signal(1.0);
|
||||||
@ -77,9 +82,16 @@ fn main() {
|
|||||||
let opacity = create_signal(0.5);
|
let opacity = create_signal(0.5);
|
||||||
let highlight = create_signal(0.2);
|
let highlight = create_signal(0.2);
|
||||||
let layer_threshold = create_signal(0.0);
|
let layer_threshold = create_signal(0.0);
|
||||||
|
let use_test_construction = create_signal(false);
|
||||||
|
|
||||||
|
// display
|
||||||
let display = create_node_ref();
|
let display = create_node_ref();
|
||||||
|
|
||||||
on_mount(move || {
|
on_mount(move || {
|
||||||
|
// list construction elements
|
||||||
|
const SPHERE_MAX: usize = 256;
|
||||||
|
let mut sphere_vec = Vec::<DVector<f64>>::new();
|
||||||
|
|
||||||
// get the display canvas
|
// get the display canvas
|
||||||
let canvas = display
|
let canvas = display
|
||||||
.get::<DomNode>()
|
.get::<DomNode>()
|
||||||
@ -119,14 +131,21 @@ fn main() {
|
|||||||
ctx.use_program(Some(&program));
|
ctx.use_program(Some(&program));
|
||||||
|
|
||||||
// find indices of vertex attributes and uniforms
|
// 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 position_index = ctx.get_attrib_location(&program, "position") as u32;
|
||||||
let resolution_loc = ctx.get_uniform_location(&program, "resolution");
|
let resolution_loc = ctx.get_uniform_location(&program, "resolution");
|
||||||
let shortdim_loc = ctx.get_uniform_location(&program, "shortdim");
|
let shortdim_loc = ctx.get_uniform_location(&program, "shortdim");
|
||||||
let ctrl_loc = ctx.get_uniform_location(&program, "ctrl");
|
let ctrl_loc = ctx.get_uniform_location(&program, "ctrl"); /* DEBUG */
|
||||||
let radius_loc = ctx.get_uniform_location(&program, "radius");
|
let radius_loc = ctx.get_uniform_location(&program, "radius"); /* DEBUG */
|
||||||
let opacity_loc = ctx.get_uniform_location(&program, "opacity");
|
let opacity_loc = ctx.get_uniform_location(&program, "opacity");
|
||||||
let highlight_loc = ctx.get_uniform_location(&program, "highlight");
|
let highlight_loc = ctx.get_uniform_location(&program, "highlight");
|
||||||
let layer_threshold_loc = ctx.get_uniform_location(&program, "layer_threshold");
|
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
|
// create a vertex array and bind it to the graphics context
|
||||||
let vertex_array = ctx.create_vertex_array().unwrap();
|
let vertex_array = ctx.create_vertex_array().unwrap();
|
||||||
@ -148,18 +167,38 @@ fn main() {
|
|||||||
|
|
||||||
// set up a repainting routine
|
// set up a repainting routine
|
||||||
create_effect(move || {
|
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
|
// set the resolution
|
||||||
let width = canvas.width() as f32;
|
let width = canvas.width() as f32;
|
||||||
let height = canvas.height() as f32;
|
let height = canvas.height() as f32;
|
||||||
ctx.uniform2f(resolution_loc.as_ref(), width, height);
|
ctx.uniform2f(resolution_loc.as_ref(), width, height);
|
||||||
ctx.uniform1f(shortdim_loc.as_ref(), width.min(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
|
// pass the control parameters
|
||||||
ctx.uniform2f(ctrl_loc.as_ref(), ctrl_x.get() as f32, ctrl_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);
|
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(opacity_loc.as_ref(), opacity.get() as f32);
|
||||||
ctx.uniform1f(highlight_loc.as_ref(), highlight.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(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
|
// draw the scene
|
||||||
ctx.draw_arrays(WebGl2RenderingContext::TRIANGLES, 0, VERTEX_CNT as i32);
|
ctx.draw_arrays(WebGl2RenderingContext::TRIANGLES, 0, VERTEX_CNT as i32);
|
||||||
@ -215,6 +254,10 @@ fn main() {
|
|||||||
step=1.0,
|
step=1.0,
|
||||||
bind:valueAsNumber=layer_threshold
|
bind:valueAsNumber=layer_threshold
|
||||||
)
|
)
|
||||||
|
input(
|
||||||
|
type="checkbox",
|
||||||
|
bind:checked=use_test_construction
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user