Tutorial 6 Questions: WASM view skew and camera controller speed #584

ExpertOfNil · 2024-12-21T23:36:38Z

I just finished "Uniform Buffers and 3D Camera" and noticed 2 things that made me wonder if I had made some mistakes:

When creating the winit window, I use with_inner_size to set the window size to PhysicalSize::new(1920, 1080). After implementing the camera, the native application no longer has a skew due to the aspect ratio. However, the WASM variant still does. For reference, I'm using wasm-pack build --target web with plain HTML. Is this expected? If so, how can I resolve it?

My canvas setup:

    // ...
let window = WindowBuilder::new()
    .with_title("insight")
    .with_inner_size(window_size)
    .build(&event_loop)
    .unwrap();

#[cfg(target_arch = "wasm32")]
{
    use winit::platform::web::WindowExtWebSys;

    web_sys::window()
        .and_then(|win| win.document())
        .and_then(|doc| {
            let dst = doc.get_element_by_id("view-canvas")?;
            let canvas = window.canvas()?;
            //canvas.set_width(size.width);
            //canvas.set_height(size.height);
            //let canvas = web_sys::Element::from(window.canvas()?);
            let canvas_element = canvas.into();
            dst.append_child(&canvas_element).ok()?;
            Some(())
        })
        .expect("Couldn't append canvas to document body.");

    if window.request_inner_size(window_size).is_none() {
        log::error!("Window size request returned None");
    };
}
// ...

My index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learn WGPU</title>
    <style>
        * {
            margin:0px;
            padding:0px;
        }
        body {
            width: 100%;
            height: 100%;
        }
        canvas {
            background-color: black;
            display: block;
        }
    </style>
</head>

<body id="view-canvas">
      <script type="module">
          import init from "./pkg/insight.js";
          init().then(() => {
              console.log("WASM Loaded");
          });
      </script>
</body>

</html>

The CameraController speed is way faster on the native build. Is this simply due to a much faster update cycle?

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tutorial 6 Questions: WASM view skew and camera controller speed #584

Tutorial 6 Questions: WASM view skew and camera controller speed #584

ExpertOfNil commented Dec 21, 2024

Tutorial 6 Questions: WASM view skew and camera controller speed #584

Tutorial 6 Questions: WASM view skew and camera controller speed #584

Comments

ExpertOfNil commented Dec 21, 2024