preserve image aspect ratio

Author: chayleaf

shader.wgsl

@@ -26,10 +26,10 @@ fn transform_coords2(coords: vec2<f32>) -> vec2<f32> {
 }
 
 struct Data {
-    @location(0) image_dim: vec2<f32>,
-    @location(1) pos: vec2<f32>,
-    @location(2) scale: f32,
-    @location(3) padding: vec2<f32>,
+    @location(0) img_dim: vec2<f32>,
+    @location(1) win_dim: vec2<f32>,
+    @location(2) pos: vec2<f32>,
+    @location(3) scale: f32,
 }
 
 struct VertexOutput {
@@ -42,8 +42,14 @@ fn vs_main(@builtin(vertex_index) in_vertex_index: u32) -> VertexOutput {
     let pos = vec2<f32>(f32((in_vertex_index & 2u) >> 1), f32(in_vertex_index & 1u));
     var out: VertexOutput;
     out.tex_coords = vec2<f32>(pos.x, 1 - pos.y);
+    var scale: vec2<f32>;
+    if (data.win_dim.y > data.win_dim.x) {
+        scale = vec2<f32>(data.scale, data.scale * data.win_dim.x / data.win_dim.y * data.img_dim.y / data.img_dim.x);
+    } else {
+        scale = vec2<f32>(data.scale * data.win_dim.y / data.win_dim.x * data.img_dim.x / data.img_dim.y, data.scale);
+    }
     out.pos = vec4<f32>(
-        ((pos + data.pos) * 2.0 - 1) * data.scale,
+        ((pos + data.pos) * 2.0 - 1) * scale,
         0.0, 1.0
     );
     return out;

src/lib.rs

@@ -31,7 +31,7 @@ struct App {
     // stuff to load/reload later
     bind_group: Option<BindGroup>,
     data_buffer: wgpu::Buffer,
-    dim: (f32, f32),
+    img_dim: (f32, f32),
     pos: (f32, f32),
     scale: f32,
 }
@@ -40,10 +40,16 @@ impl App {
     // must be a multiple of 16 bytes
     fn buf_contents(&self) -> [u8; 32] {
         let mut ret = [0u8; 32];
-        for (dst, src) in ret
-            .chunks_exact_mut(4)
-            .zip([self.dim.0, self.dim.1, self.pos.0, self.pos.1, self.scale])
-        {
+        let win_dim = self.window.inner_size();
+        for (dst, src) in ret.chunks_exact_mut(4).zip([
+            self.img_dim.0,
+            self.img_dim.1,
+            win_dim.width as f32,
+            win_dim.height as f32,
+            self.pos.0,
+            self.pos.1,
+            self.scale,
+        ]) {
             dst.copy_from_slice(&src.to_le_bytes());
         }
         ret
@@ -97,7 +103,7 @@ impl App {
     fn load_image(&mut self, img: image::DynamicImage) {
         let dimensions = img.dimensions();
         let rgba = img.into_rgba8();
-        self.dim = (dimensions.0 as f32, dimensions.1 as f32);
+        self.img_dim = (dimensions.0 as f32, dimensions.1 as f32);
 
         let size = wgpu::Extent3d {
             width: dimensions.0,
@@ -286,7 +292,7 @@ impl App {
                 bind_group: None,
                 layout,
                 data_buffer,
-                dim: (0., 0.),
+                img_dim: (0., 0.),
                 pos: (0.0, 0.0),
                 scale: 1.0,
             }