sharper rendering -> true devicePixelRatio

Author: ChrLackner

webgpu/canvas.py

@@ -282,7 +282,6 @@ def update_html_canvas(self, html_canvas):
                     "device": self.device.handle,
                     "format": self.format,
                     "alphaMode": "premultiplied",
-                    "sampleCount": self.multisample.count,
                     "usage": TextureUsage.RENDER_ATTACHMENT | TextureUsage.COPY_DST,
                 }
             )
@@ -366,8 +365,9 @@ def resize(self):
             if canvas is None:
                 return
             rect = canvas.getBoundingClientRect()
-            width = int(rect.width)
-            height = int(rect.height)
+            dpr = getattr(platform.js.window, 'devicePixelRatio', 1) or 1
+            width = round(rect.width * dpr)
+            height = round(rect.height * dpr)
 
             if width == self.width and height == self.height:
                 for func in self._on_resize_callbacks:

webgpu/jupyter.py

@@ -87,8 +87,6 @@ def _draw_scene(scene: Scene, width, height, id_):
 
     while html_canvas is None:
         html_canvas = platform.js.document.getElementById(f"{id_}canvas")
-    html_canvas.width = width
-    html_canvas.height = height
     gui_element = platform.js.document.getElementById(f"{id_}lilgui")
 
     # Lazily initialize the WebGPU device the first time we draw.

webgpu/link/link.js

@@ -27,8 +27,9 @@ function serializeEvent(event) {
   let obj = Object.fromEntries(keys.map((k) => [k, event[k]]));
   if (event.x !== undefined) {
     let rect = event.target.getBoundingClientRect();
-    obj.canvasX = event.x - Math.floor(rect.x);
-    obj.canvasY = event.y - Math.floor(rect.y);
+    let dpr = window.devicePixelRatio || 1;
+    obj.canvasX = Math.round((event.x - rect.x) * dpr);
+    obj.canvasY = Math.round((event.y - rect.y) * dpr);
   }
   return obj;
 }