Compare commits
No commits in common. "3493a798d10c1a7771362e0a49830a4c15f18e90" and "f14855296485250277a7216c711eb598148d8346" have entirely different histories.
3493a798d1
...
f148552964
@ -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 {
|
||||||
|
@ -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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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" }
|
||||||
|
Loading…
Reference in New Issue
Block a user