fix scaling for high dpi

Author: ChrLackner

webgpu/camera.py

@@ -18,7 +18,7 @@ class CameraUniforms(UniformBase):
         ("aspect", ct.c_float),
         ("width", ct.c_uint32),
         ("height", ct.c_uint32),
-        ("padding", ct.c_uint32),
+        ("dpr", ct.c_float),
     ]
 
     def update(self, transform, canvas):
@@ -81,6 +81,7 @@ def update(self, transform, canvas):
         self.rot_mat[:] = rot_mat4.transpose().flatten()
         self.width = canvas.width
         self.height = canvas.height
+        self.dpr = float(getattr(canvas, 'dpr', 1.0))
         self.update_buffer()
 
         return model_view_proj, model_view

webgpu/canvas.py

@@ -284,6 +284,8 @@ def __init__(self, device, canvas, multisample_count=4):
         )
         self.multisample = MultisampleState(count=multisample_count)
 
+        self.dpr = 1.0  # updated in resize(); kept as attribute for camera uniforms
+
         self.update_html_canvas(canvas)
 
     def __del__(self):
@@ -409,6 +411,7 @@ def resize(self):
             canvas.width = width
             canvas.height = height
 
+            self.dpr = dpr
             device = self.device
 
             self.destroy_textures()

webgpu/engine/camera.js

@@ -229,7 +229,7 @@ class Camera {
    *   aspect  (f32)         [320..323]
    *   width   (u32)         [324..327]
    *   height  (u32)         [328..331]
-   *   padding (u32)         [332..335]
+   *   dpr     (f32)         [332..335]  device-pixel ratio (0 in old blobs)
    */
   updateUniforms(width, height) {
     if (height === 0) return null;
@@ -301,7 +301,7 @@ class Camera {
     f32[80] = aspect;
     u32[81] = width;
     u32[82] = height;
-    u32[83] = 0;
+    f32[83] = (typeof window !== 'undefined' && window.devicePixelRatio) || 1;
 
     return buf;
   }

webgpu/engine/input.js

@@ -70,13 +70,19 @@ class InputHandler {
     // Suppress pointer-based rotation/pan while a multi-touch gesture is active
     if (this._activeTouches.size >= 2) return;
 
+    // On high-DPI screens (e.g. macOS Retina) the OS reports pointer movement
+    // in device pixels, which are then divided by devicePixelRatio to produce
+    // CSS-pixel deltas.  Multiply back by DPR so that the same physical finger
+    // movement always produces the same camera rotation/pan, regardless of
+    // the screen's pixel density.
+    const dpr = window.devicePixelRatio || 1;
     const t = this.camera.transform;
     if (this._isRotating) {
-      t.rotate(0.3 * ev.movementY, 0.3 * ev.movementX);
+      t.rotate(0.3 * dpr * ev.movementY, 0.3 * dpr * ev.movementX);
       this.camera._notify();
       this.onRender();
     } else if (this._isPanning) {
-      t.translate(0.01 * ev.movementX, -0.01 * ev.movementY);
+      t.translate(0.01 * dpr * ev.movementX, -0.01 * dpr * ev.movementY);
       this.camera._notify();
       this.onRender();
     }

webgpu/shaders/camera.wgsl

@@ -7,8 +7,10 @@ struct CameraUniforms {
   aspect: f32,
   width: u32,
   height: u32,
-
-  padding: u32,
+  // Device-pixel ratio of the canvas (e.g. 2.0 on Retina).  Used by the font
+  // shader to convert device-pixel dimensions to CSS-pixel dimensions so that
+  // font sizes are DPI-independent.  Zero in old blobs — treated as 1.0.
+  dpr: f32,
 };
 
 @group(0) @binding(0) var<uniform> u_camera : CameraUniforms;

webgpu/shaders/font.wgsl

@@ -35,11 +35,18 @@ fn fontGetSizeInTexture() -> vec2<f32> {
 }
 
 fn fontGetSizeOnScreen() -> vec3<f32> {
+    // u_camera.dpr is 0.0 in old exported blobs — treat that as 1.0 (no
+    // correction) so existing assets are not broken.
+    let dpr = max(1.0, u_camera.dpr);
+    // u_camera.width/height are device pixels; divide by dpr to get CSS pixels
+    // so that font_size values behave like CSS pixels on every screen density.
+    let css_width  = f32(u_camera.width)  / dpr;
+    let css_height = f32(u_camera.height) / dpr;
     let size = f32(u_font.size * u_font.size_scaling);
-    let h = 2.0 * size / f32(u_camera.height);
-    let size_horizontal = 2.0 * size / f32(u_camera.width);
+    let h = 2.0 * size / css_height;
+    let size_horizontal = 2.0 * size / css_width;
     let w = size_horizontal * u_font.aspect;
-    let shift = 2.0 * u_font.advance * u_font.size / f32(u_camera.width);
+    let shift = 2.0 * u_font.advance * u_font.size / css_width;
     return vec3<f32>(w, h, shift);
 }