Fix web build

build.ps1

@@ -1,3 +1,7 @@
+#! /usr/bin/env pwsh
+#Requires -Version 7.0
+#Requires -PSEdition Core
+
 cargo clippy -- -D warnings
 cargo build --release
 
@@ -8,6 +12,7 @@ Pop-Location
 
 Push-Location ".\wgpu-testbed-webapp"
 Remove-Item "./node_modules" -Recurse -ErrorAction SilentlyContinue
+Remove-Item "./dist" -Recurse -ErrorAction SilentlyContinue
 yarn install
 yarn build
 Pop-Location

wgpu-testbed-lib/src/lib.rs

@@ -58,9 +58,32 @@ pub async fn run() {
             .document()
             .expect("Could not get document reference");
         let body = document.body().expect("Could not get body reference");
+        web_sys::console::log_1(
+            &format!(
+                "Web Window Width: {}, Height: {}",
+                web_window.inner_width().unwrap().as_f64().unwrap(),
+                web_window.inner_height().unwrap().as_f64().unwrap()
+            )
+            .as_str()
+            .into(),
+        );
 
         body.append_child(&canvas)
             .expect("Append canvas to HTML body");
+
+        canvas
+            .set_attribute("style", "width: 100%; aspect-ratio: 16/9;")
+            .expect("Set canvas style");
+
+        web_sys::console::log_1(
+            &format!(
+                "Canvas Window Width: {}, Height: {}",
+                canvas.width(),
+                canvas.height()
+            )
+            .as_str()
+            .into(),
+        );
     }
 
     let mut render_state = State::new(window.clone()).await;
@@ -71,7 +94,21 @@ pub async fn run() {
                 window_id,
             } if window_id == window.id() && !render_state.input(event) => match event {
                 WindowEvent::CloseRequested => target.exit(),
-                WindowEvent::Resized(new_size) => render_state.resize(*new_size),
+                WindowEvent::Resized(new_size) => {
+                    #[cfg(target_arch = "wasm32")]
+                    {
+                        use winit::platform::web::WindowExtWebSys;
+
+                        if (new_size.width > 0 && new_size.height > 0) {
+                            let canvas = window.canvas().expect("Could not get canvas reference");
+                            canvas
+                                .set_attribute("style", "width: 100%; aspect-ratio: auto;")
+                                .expect("Set canvas style");
+                        }
+                    }
+
+                    render_state.resize(*new_size)
+                }
                 WindowEvent::ScaleFactorChanged {
                     scale_factor: _,
                     inner_size_writer: _,

wgpu-testbed-lib/src/state.rs

@@ -67,6 +67,19 @@ pub struct State<'a> {
 impl<'a> State<'_> {
     pub async fn new(window: Arc<Window>) -> Self {
         let size = window.inner_size();
+
+        #[cfg(target_arch = "wasm32")]
+        {
+            web_sys::console::log_1(
+                &format!(
+                    "Window Inner Size Window Width: {}, Height: {}",
+                    size.width, size.height
+                )
+                .as_str()
+                .into(),
+            );
+        }
+
         let instance_desc = InstanceDescriptor::default();
         let instance = wgpu::Instance::new(instance_desc);
         let surface = instance
@@ -94,6 +107,7 @@ impl<'a> State<'_> {
             )
             .await
             .expect("Could not get device from adapter!");
+
         let capabilities = surface.get_capabilities(&adapter);
         let surface_config = wgpu::SurfaceConfiguration {
             usage: wgpu::TextureUsages::RENDER_ATTACHMENT,
@@ -262,22 +276,15 @@ impl<'a> State<'_> {
                     let x = SPACE_BETWEEN * (x as f32 - INSTANCES_PER_ROW as f32 / 2.0);
                     let z = SPACE_BETWEEN * (z as f32 - INSTANCES_PER_ROW as f32 / 2.0);
 
-                    let position = cgmath::Vector3 {
-                        x,
-                        y: 0.0,
-                        z,
-                    } - INSTANCE_DISPLACEMENT;
+                    let position = cgmath::Vector3 { x, y: 0.0, z } - INSTANCE_DISPLACEMENT;
 
                     let rotation = if position.is_zero() {
                         cgmath::Quaternion::from_axis_angle(
                             cgmath::Vector3::unit_z(),
                             cgmath::Deg(0.0),
                         )
                     } else {
-                        cgmath::Quaternion::from_axis_angle(
-                            position.normalize(),
-                            cgmath::Deg(45.0),
-                        )
+                        cgmath::Quaternion::from_axis_angle(position.normalize(), cgmath::Deg(45.0))
                     };
 
                     Instance { position, rotation }