Make the projection map a uniform

This commit is contained in:
Aaron Fenyes 2024-08-21 23:07:14 -07:00
parent 81f9b8e040
commit 80b210e667
2 changed files with 18 additions and 12 deletions

View File

@ -25,6 +25,7 @@ features = [
'WebGlBuffer', 'WebGlBuffer',
'WebGlProgram', 'WebGlProgram',
'WebGlShader', 'WebGlShader',
'WebGlUniformLocation',
'WebGlVertexArrayObject', 'WebGlVertexArrayObject',
'Window' 'Window'
] ]

View File

@ -10,7 +10,7 @@
extern crate js_sys; extern crate js_sys;
/* use std::f64::consts::PI as PI; */ /* use std::f64::consts::PI as PI; */
use sycamore::{prelude::*, rt::{JsCast, JsValue}}; use sycamore::{prelude::*, rt::{JsCast, JsValue}};
use web_sys::{console, WebGl2RenderingContext, WebGlProgram, WebGlShader}; use web_sys::{console, WebGl2RenderingContext, WebGlShader};
fn compile_shader( fn compile_shader(
context: &WebGl2RenderingContext, context: &WebGl2RenderingContext,
@ -97,18 +97,9 @@ fn main() {
out vec4 vertexColor; out vec4 vertexColor;
const float focal_length = 3.0; uniform mat4 world_to_clip;
const float near_clip = 0.1;
const float far_clip = 20.0;
const float depth_inv = 1. / (far_clip - near_clip);
void main() { void main() {
const mat4 world_to_clip = mat4(
focal_length, 0.0, 0.0, 0.0,
0.0, focal_length, 0.0, 0.0,
0.0, 0.0, (near_clip + far_clip) * depth_inv, -1.,
0.0, 0.0, 2. * near_clip * far_clip * depth_inv, 0.0
);
gl_Position = world_to_clip * vec4(position, 1.); gl_Position = world_to_clip * vec4(position, 1.);
vertexColor = vec4(color, 1.); vertexColor = vec4(color, 1.);
} }
@ -146,14 +137,28 @@ fn main() {
console::log_1(&JsValue::from(link_msg)); console::log_1(&JsValue::from(link_msg));
ctx.use_program(Some(&program)); ctx.use_program(Some(&program));
// find indices of vertex attributes // find indices of vertex attributes and uniforms
let position_index = ctx.get_attrib_location(&program, "position") as u32; let position_index = ctx.get_attrib_location(&program, "position") as u32;
let color_index = ctx.get_attrib_location(&program, "color") as u32; let color_index = ctx.get_attrib_location(&program, "color") as u32;
let world_to_clip_loc = ctx.get_uniform_location(&program, "world_to_clip");
// 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();
ctx.bind_vertex_array(Some(&vertex_array)); ctx.bind_vertex_array(Some(&vertex_array));
// set the projection map
let focal_length = 3.0_f32;
let near_clip = 0.1_f32;
let far_clip = 20_f32;
let depth_inv = 1_f32 / (far_clip - near_clip);
let world_to_clip: [f32; 16] = [
focal_length, 0.0, 0.0, 0.0,
0.0, focal_length, 0.0, 0.0,
0.0, 0.0, (near_clip + far_clip) * depth_inv, -1.,
0.0, 0.0, 2. * near_clip * far_clip * depth_inv, 0.0
];
ctx.uniform_matrix4fv_with_f32_array(world_to_clip_loc.as_ref(), false, &world_to_clip);
// set up a repainting routine // set up a repainting routine
create_effect(move || { create_effect(move || {
const VERTEX_CNT: usize = 9; const VERTEX_CNT: usize = 9;