ec48592ef1
It's time to start optimizing. Frame time is easy to measure, and we can use it to gauge responsiveness.
370 lines
No EOL
14 KiB
Rust
370 lines
No EOL
14 KiB
Rust
// based on the WebGL example in the `wasm-bindgen` guide
|
|
//
|
|
// https://rustwasm.github.io/wasm-bindgen/examples/webgl.html
|
|
//
|
|
// and this StackOverflow answer by wangdq
|
|
//
|
|
// https://stackoverflow.com/a/39684775
|
|
//
|
|
|
|
extern crate js_sys;
|
|
use core::array;
|
|
use nalgebra::DVector;
|
|
use sycamore::{prelude::*, motion::create_raf, rt::{JsCast, JsValue}};
|
|
use web_sys::{console, window, WebGl2RenderingContext, WebGlProgram, WebGlShader, WebGlUniformLocation};
|
|
|
|
mod engine;
|
|
|
|
fn compile_shader(
|
|
context: &WebGl2RenderingContext,
|
|
shader_type: u32,
|
|
source: &str,
|
|
) -> WebGlShader {
|
|
let shader = context.create_shader(shader_type).unwrap();
|
|
context.shader_source(&shader, source);
|
|
context.compile_shader(&shader);
|
|
shader
|
|
}
|
|
|
|
fn get_uniform_array_locations<const N: usize>(
|
|
context: &WebGl2RenderingContext,
|
|
program: &WebGlProgram,
|
|
var_name: &str,
|
|
member_name_opt: Option<&str>
|
|
) -> [Option<WebGlUniformLocation>; 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,
|
|
index: u32,
|
|
size: i32,
|
|
data: &[f32]
|
|
) {
|
|
// create a data buffer and bind it to ARRAY_BUFFER
|
|
let buffer = context.create_buffer().unwrap();
|
|
context.bind_buffer(WebGl2RenderingContext::ARRAY_BUFFER, Some(&buffer));
|
|
|
|
// load the given data into the buffer. the function `Float32Array::view`
|
|
// creates a raw view into our module's `WebAssembly.Memory` buffer.
|
|
// allocating more memory will change the buffer, invalidating the view.
|
|
// that means we have to make sure we don't allocate any memory until the
|
|
// view is dropped
|
|
unsafe {
|
|
context.buffer_data_with_array_buffer_view(
|
|
WebGl2RenderingContext::ARRAY_BUFFER,
|
|
&js_sys::Float32Array::view(&data),
|
|
WebGl2RenderingContext::STATIC_DRAW,
|
|
);
|
|
}
|
|
|
|
// allow the target attribute to be used
|
|
context.enable_vertex_attrib_array(index);
|
|
|
|
// take whatever's bound to ARRAY_BUFFER---here, the data buffer created
|
|
// above---and bind it to the target attribute
|
|
//
|
|
// https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/vertexAttribPointer
|
|
//
|
|
context.vertex_attrib_pointer_with_i32(
|
|
index,
|
|
size,
|
|
WebGl2RenderingContext::FLOAT,
|
|
false, // don't normalize
|
|
0, // zero stride
|
|
0, // zero offset
|
|
);
|
|
}
|
|
|
|
fn main() {
|
|
// set up a config option that forwards panic messages to `console.error`
|
|
#[cfg(feature = "console_error_panic_hook")]
|
|
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);
|
|
let radius_y = create_signal(1.0);
|
|
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);
|
|
|
|
/* INSTRUMENTS */
|
|
const SAMPLE_PERIOD: i32 = 20;
|
|
let mut last_frame_moment = 0.0;
|
|
let mut frames_since_last_sample = 0;
|
|
let frame_time = create_signal(0.0);
|
|
|
|
// display
|
|
let display = create_node_ref();
|
|
|
|
on_mount(move || {
|
|
// 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]
|
|
];
|
|
|
|
/* INSTRUMENTS */
|
|
let performance = window().unwrap().performance().unwrap();
|
|
|
|
// get the display canvas
|
|
let canvas = display
|
|
.get::<DomNode>()
|
|
.unchecked_into::<web_sys::HtmlCanvasElement>();
|
|
let ctx = canvas
|
|
.get_context("webgl2")
|
|
.unwrap()
|
|
.unwrap()
|
|
.dyn_into::<WebGl2RenderingContext>()
|
|
.unwrap();
|
|
|
|
// compile and attach the vertex and fragment shaders
|
|
let vertex_shader = compile_shader(
|
|
&ctx,
|
|
WebGl2RenderingContext::VERTEX_SHADER,
|
|
include_str!("identity.vert"),
|
|
);
|
|
let fragment_shader = compile_shader(
|
|
&ctx,
|
|
WebGl2RenderingContext::FRAGMENT_SHADER,
|
|
include_str!("inversive.frag"),
|
|
);
|
|
let program = ctx.create_program().unwrap();
|
|
ctx.attach_shader(&program, &vertex_shader);
|
|
ctx.attach_shader(&program, &fragment_shader);
|
|
ctx.link_program(&program);
|
|
let link_status = ctx
|
|
.get_program_parameter(&program, WebGl2RenderingContext::LINK_STATUS)
|
|
.as_bool()
|
|
.unwrap();
|
|
let link_msg = if link_status {
|
|
"Linked successfully"
|
|
} else {
|
|
"Linking failed"
|
|
};
|
|
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", Some("sp")
|
|
);
|
|
let sphere_lt_locs = get_uniform_array_locations::<SPHERE_MAX>(
|
|
&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");
|
|
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();
|
|
ctx.bind_vertex_array(Some(&vertex_array));
|
|
|
|
// set the vertex positions
|
|
const VERTEX_CNT: usize = 6;
|
|
let positions: [f32; 3*VERTEX_CNT] = [
|
|
// northwest triangle
|
|
-1.0, -1.0, 0.0,
|
|
-1.0, 1.0, 0.0,
|
|
1.0, 1.0, 0.0,
|
|
// southeast triangle
|
|
-1.0, -1.0, 0.0,
|
|
1.0, 1.0, 0.0,
|
|
1.0, -1.0, 0.0
|
|
];
|
|
bind_vertex_attrib(&ctx, position_index, 3, &positions);
|
|
|
|
// set up a repainting routine
|
|
let (_, start_updating_display, _) = create_raf(move || {
|
|
/* INSTRUMENTS */
|
|
// measure frame time
|
|
frames_since_last_sample += 1;
|
|
if frames_since_last_sample >= SAMPLE_PERIOD {
|
|
let frame_moment = performance.now();
|
|
frame_time.set((frame_moment - last_frame_moment) / (SAMPLE_PERIOD as f64));
|
|
last_frame_moment = frame_moment;
|
|
frames_since_last_sample = 0;
|
|
}
|
|
|
|
// 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); /* 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") {
|
|
div { (frame_time.get()) " ms" }
|
|
canvas(ref=display, width="600", height="600")
|
|
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
|
|
)
|
|
}
|
|
}
|
|
}
|
|
});
|
|
} |