Get a WebGL canvas working in Sycamore

app-proto/inversive-display/src/main.rs

@@ -0,0 +1,152 @@
+// based on the WebGL example in the `wasm-bindgen` guide
+//
+//   https://rustwasm.github.io/wasm-bindgen/examples/webgl.html
+//
+
+extern crate js_sys;
+use std::f64::consts::PI as PI;
+use sycamore::{prelude::*, rt::{JsCast, JsValue}};
+use web_sys::{console, WebGl2RenderingContext, WebGlProgram, WebGlShader};
+
+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 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(|| {
+        let tip = create_signal(0.0);
+        let display = create_node_ref();
+        
+        on_mount(move || {
+            // 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();
+            
+            // load the vertex and fragment shaders
+            let vertex_shader = compile_shader(
+                &ctx,
+                WebGl2RenderingContext::VERTEX_SHADER,
+                r##"#version 300 es
+                
+                in vec4 position;
+                
+                void main() {
+                    gl_Position = position;
+                }
+                "##,
+            );
+            let fragment_shader = compile_shader(
+                &ctx,
+                WebGl2RenderingContext::FRAGMENT_SHADER,
+                r##"#version 300 es
+            
+                precision highp float;
+                out vec4 outColor;
+                
+                void main() {
+                    outColor = vec4(gl_FragCoord.xy / 600., 1., 1.);
+                }
+                "##,
+            );
+            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));
+            
+            // set up a repainting routine
+            create_effect(move || {
+                // list the vertices
+                let vertices: [f32; 9] = [
+                    -0.9, 0.9, 0.0,
+                    -0.9, -0.9, 0.0,
+                    0.9*(tip.get() as f32), 0.0, 0.0
+                ];
+                
+                // create a vertex buffer and bind it to ARRAY_BUFFER
+                let position_attribute_location = ctx.get_attrib_location(&program, "position");
+                let buffer = ctx.create_buffer().unwrap();
+                ctx.bind_buffer(WebGl2RenderingContext::ARRAY_BUFFER, Some(&buffer));
+                
+                // load the vertex list into the vertex 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 {
+                    ctx.buffer_data_with_array_buffer_view(
+                        WebGl2RenderingContext::ARRAY_BUFFER,
+                        &js_sys::Float32Array::view(&vertices),
+                        WebGl2RenderingContext::STATIC_DRAW,
+                    );
+                }
+                
+                // create a vertex array and bind it to the graphics context
+                let vtx_array_obj = ctx.create_vertex_array().unwrap();
+                ctx.bind_vertex_array(Some(&vtx_array_obj));
+                
+                // use whatever is bound to ARRAY_BUFFER---here, the vertex
+                // buffer created above---as the vertex attribute array
+                //
+                //   https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/vertexAttribPointer
+                //
+                ctx.vertex_attrib_pointer_with_i32(
+                    position_attribute_location as u32,
+                    3, // dimension
+                    WebGl2RenderingContext::FLOAT, // type
+                    false, // normalized?
+                    0, // stride
+                    0, // offset
+                );
+                ctx.enable_vertex_attrib_array(position_attribute_location as u32);
+                
+                // clear the screen and draw the scene
+                let vert_count = (vertices.len() / 3) as i32;
+                ctx.clear_color(0.0, 0.0, 0.0, 1.0);
+                ctx.clear(WebGl2RenderingContext::COLOR_BUFFER_BIT);
+                ctx.draw_arrays(WebGl2RenderingContext::TRIANGLES, 0, vert_count);
+            });
+        });
+        
+        view! {
+            div(id="app") {
+                canvas(ref=display, width="600", height="600")
+                input(
+                    type="range",
+                    max=1.0,
+                    step=0.01,
+                    bind:valueAsNumber=tip
+                )
+            }
+        }
+    });
+}