Compare commits

..

No commits in common. "3493a798d10c1a7771362e0a49830a4c15f18e90" and "f14855296485250277a7216c711eb598148d8346" have entirely different histories.

3 changed files with 52 additions and 208 deletions

View File

@ -18,41 +18,14 @@ canvas {
margin-top: 5px; margin-top: 5px;
} }
.hidden { .control {
display: none;
}
.control, .tab-pane {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 600px; width: 600px;
} }
input[type="radio"] {
display: none;
}
.tab-pane > label {
border: 1px solid #aaa;
border-radius: 5px;
text-align: center;
padding: 5px;
margin-right: 10px;
margin-bottom: 5px;
}
.tab-pane > label:has(:checked) {
border-color: #fcfcfc;
background-color: #555;
}
.tab-pane > label:hover:not(:has(:checked)) {
border-color: #bbb;
background-color: #333;
}
label { label {
width: 170px; width: 150px;
} }
input { input {

View File

@ -46,7 +46,6 @@ uniform bool debug_mode;
const float focal_slope = 0.3; const float focal_slope = 0.3;
const vec3 light_dir = normalize(vec3(2., 2., 1.)); const vec3 light_dir = normalize(vec3(2., 2., 1.));
const float ixn_threshold = 0.005; const float ixn_threshold = 0.005;
const float INTERIOR_DIMMING = 0.7;
// --- sRGB --- // --- sRGB ---
@ -144,7 +143,6 @@ void main() {
vec2 hit_depths = sphere_cast(sphere_list[id], dir); vec2 hit_depths = sphere_cast(sphere_list[id], dir);
// insertion-sort the fragments we hit into the fragment list // insertion-sort the fragments we hit into the fragment list
float dimming = 1.;
for (int side = 0; side < 2; ++side) { for (int side = 0; side < 2; ++side) {
float hit_z = -hit_depths[side]; float hit_z = -hit_depths[side];
if (0. > hit_z) { if (0. > hit_z) {
@ -156,7 +154,7 @@ void main() {
frags[layer] = sphere_shading( frags[layer] = sphere_shading(
sphere_list[id], sphere_list[id],
hit_depths[side] * dir, hit_depths[side] * dir,
dimming * color_list[id], color_list[id],
id id
); );
} }
@ -169,7 +167,6 @@ void main() {
} }
} }
layer_cnt = min(layer_cnt + 1, LAYER_MAX); layer_cnt = min(layer_cnt + 1, LAYER_MAX);
dimming = INTERIOR_DIMMING;
} }
} }
} }

View File

@ -10,7 +10,6 @@
extern crate js_sys; extern crate js_sys;
use core::array; use core::array;
use nalgebra::{DMatrix, DVector}; use nalgebra::{DMatrix, DVector};
use std::f64::consts::FRAC_1_SQRT_2;
use sycamore::{prelude::*, motion::create_raf, rt::{JsCast, JsValue}}; use sycamore::{prelude::*, motion::create_raf, rt::{JsCast, JsValue}};
use web_sys::{console, window, WebGl2RenderingContext, WebGlProgram, WebGlShader, WebGlUniformLocation}; use web_sys::{console, window, WebGl2RenderingContext, WebGlProgram, WebGlShader, WebGlUniformLocation};
@ -84,62 +83,17 @@ fn bind_vertex_attrib(
); );
} }
fn push_gen_construction(
sphere_vec: &mut Vec<DVector<f64>>,
construction_to_world: &DMatrix<f64>,
ctrl_x: f64,
ctrl_y: f64,
radius_x: f64,
radius_y: f64
) {
sphere_vec.push(construction_to_world * engine::sphere(0.5, 0.5, ctrl_x, radius_x));
sphere_vec.push(construction_to_world * engine::sphere(-0.5, -0.5, ctrl_y, radius_y));
sphere_vec.push(construction_to_world * engine::sphere(-0.5, 0.5, 0.0, 0.75));
sphere_vec.push(construction_to_world * engine::sphere(0.5, -0.5, 0.0, 0.5));
sphere_vec.push(construction_to_world * engine::sphere(0.0, 0.15, 1.0, 0.25));
sphere_vec.push(construction_to_world * engine::sphere(0.0, -0.15, -1.0, 0.25));
}
fn push_low_curv_construction(
sphere_vec: &mut Vec<DVector<f64>>,
construction_to_world: &DMatrix<f64>,
curv_x: f64,
curv_y: f64
) {
sphere_vec.push(construction_to_world * DVector::from_column_slice(&[0.0, -1.0, 0.0, 0.5*curv_x, 0.0]));
sphere_vec.push(construction_to_world * DVector::from_column_slice(&[-FRAC_1_SQRT_2, 0.0, -FRAC_1_SQRT_2, 0.5*curv_y, 0.0]));
sphere_vec.push(construction_to_world * engine::sphere(0.5, 0.0, 0.5, FRAC_1_SQRT_2));
sphere_vec.push(construction_to_world * engine::sphere(-0.5, 0.0, -0.5, FRAC_1_SQRT_2));
}
#[derive(Clone, Copy, PartialEq)]
enum Tab {
GenTab,
LowCurvTab
}
fn main() { fn main() {
// set up a config option that forwards panic messages to `console.error` // set up a config option that forwards panic messages to `console.error`
#[cfg(feature = "console_error_panic_hook")] #[cfg(feature = "console_error_panic_hook")]
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
sycamore::render(|| { sycamore::render(|| {
// tab selection // controls
let tab_selection = create_signal(Tab::GenTab);
// controls for general example
let gen_controls = create_node_ref();
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);
let radius_y = create_signal(1.0); let radius_y = create_signal(1.0);
// controls for low-curvature example
let low_curv_controls = create_node_ref();
let curv_x = create_signal(0.0);
let curv_y = create_signal(0.0);
// shared controls
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 turntable = create_signal(false); let turntable = create_signal(false);
@ -158,20 +112,10 @@ fn main() {
// change listener // change listener
let scene_changed = create_signal(true); let scene_changed = create_signal(true);
create_effect(move || { create_effect(move || {
// track tab selection
tab_selection.track();
// track controls for general example
ctrl_x.track(); ctrl_x.track();
ctrl_y.track(); ctrl_y.track();
radius_x.track(); radius_x.track();
radius_y.track(); radius_y.track();
// track controls for low-curvature example
curv_x.track();
curv_y.track();
// track shared controls
opacity.track(); opacity.track();
highlight.track(); highlight.track();
turntable.track(); turntable.track();
@ -182,23 +126,6 @@ fn main() {
}); });
on_mount(move || { on_mount(move || {
// tab listener
create_effect(move || {
// get the control panel nodes
let gen_controls_node = gen_controls.get::<DomNode>();
let low_curv_controls_node = low_curv_controls.get::<DomNode>();
// hide all the control panels
gen_controls_node.add_class("hidden");
low_curv_controls_node.add_class("hidden");
// show the selected control panel
match tab_selection.get() {
Tab::GenTab => gen_controls_node.remove_class("hidden"),
Tab::LowCurvTab => low_curv_controls_node.remove_class("hidden")
}
});
// list construction elements // list construction elements
const SPHERE_MAX: usize = 200; const SPHERE_MAX: usize = 200;
let mut sphere_vec = Vec::<DVector<f64>>::new(); let mut sphere_vec = Vec::<DVector<f64>>::new();
@ -365,19 +292,12 @@ fn main() {
// update the construction // update the construction
sphere_vec.clear(); sphere_vec.clear();
match tab_selection.get() { sphere_vec.push(&construction_to_world * engine::sphere(0.5, 0.5, ctrl_x.get(), radius_x.get()));
Tab::GenTab => push_gen_construction( sphere_vec.push(&construction_to_world * engine::sphere(-0.5, -0.5, ctrl_y.get(), radius_y.get()));
&mut sphere_vec, sphere_vec.push(&construction_to_world * engine::sphere(-0.5, 0.5, 0.0, 0.75));
&construction_to_world, sphere_vec.push(&construction_to_world * engine::sphere(0.5, -0.5, 0.0, 0.5));
ctrl_x.get(), ctrl_y.get(), sphere_vec.push(&construction_to_world * engine::sphere(0.0, 0.15, 1.0, 0.25));
radius_x.get(), radius_y.get() sphere_vec.push(&construction_to_world * engine::sphere(0.0, -0.15, -1.0, 0.25));
),
Tab::LowCurvTab => push_low_curv_construction(
&mut sphere_vec,
&construction_to_world,
curv_x.get(), curv_y.get()
)
};
// set the resolution // set the resolution
let width = canvas.width() as f32; let width = canvas.width() as f32;
@ -426,97 +346,51 @@ fn main() {
view! { view! {
div(id="app") { div(id="app") {
div(class="tab-pane") {
label {
"General"
input(
type="radio",
name="tab",
prop:checked=tab_selection.get() == Tab::GenTab,
on:click=move |_| tab_selection.set(Tab::GenTab)
)
}
label {
"Low curvature"
input(
type="radio",
name="tab",
prop:checked=tab_selection.get() == Tab::LowCurvTab,
on:change=move |_| tab_selection.set(Tab::LowCurvTab)
)
}
}
div { "Mean frame interval: " (mean_frame_interval.get()) " ms" } div { "Mean frame interval: " (mean_frame_interval.get()) " ms" }
canvas(ref=display, width="600", height="600") canvas(ref=display, width="600", height="600")
div(ref=gen_controls) { div(class="control") {
div(class="control") { label(for="ctrl-x") { "Sphere 0 depth" }
label(for="ctrl-x") { "Sphere 0 depth" } input(
input( type="range",
type="range", id="ctrl-x",
id="ctrl-x", min=-1.0,
min=-1.0, max=1.0,
max=1.0, step=0.001,
step=0.001, bind:valueAsNumber=ctrl_x
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(ref=low_curv_controls) { div(class="control") {
div(class="control") { label(for="ctrl-y") { "Sphere 1 depth" }
label(for="curv-x") { "Sphere 0 curvature" } input(
input( type="range",
type="range", id="ctrl-y",
id="curv-x", min=-1.0,
min=0.0, max=1.0,
max=2.0, step=0.001,
step=0.001, bind:valueAsNumber=ctrl_y
bind:valueAsNumber=curv_x )
) }
} div(class="control") {
div(class="control") { label(for="radius-x") { "Sphere 0 radius" }
label(for="curv-y") { "Sphere 1 curvature" } input(
input( type="range",
type="range", id="radius-x",
id="curv-y", min=0.5,
min=0.0, max=1.5,
max=2.0, step=0.001,
step=0.001, bind:valueAsNumber=radius_x
bind:valueAsNumber=curv_y )
) }
} 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") { div(class="control") {
label(for="opacity") { "Opacity" } label(for="opacity") { "Opacity" }