[WebGPU] GPUCanvasContext does not respect Document::deviceScaleFactor()

https://bugs.webkit.org/show_bug.cgi?id=249605 <radar://103528514> Reviewed by Dean Jackson. Scale surface width by the device scale factor. * Source/WebCore/html/canvas/GPUCanvasContext.cpp: (WebCore::getCanvasSizeAsIntSize): * Websites/webkit.org/demos/webgpu/scripts/instanced-textured-cube.js: (async helloCube.frameUpdate): (async helloCube): Add a test to ensure this functionality works, also add MSAA support to this sample which removes all jaggies as the cubes are rotating. Canonical link: https://commits.webkit.org/258153@main
WebKit · Dec 20, 2022 · f8f6a06 · f8f6a06
1 parent 8aa9e80
commit f8f6a06
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/Source/WebCore/html/canvas/GPUCanvasContext.cpp b/Source/WebCore/html/canvas/GPUCanvasContext.cpp
@@ -45,7 +45,8 @@ namespace WebCore {
 static IntSize getCanvasSizeAsIntSize(const GPUCanvasContext::CanvasType& canvas)
 {
     return WTF::switchOn(canvas, [](const RefPtr<HTMLCanvasElement>& htmlCanvas) -> IntSize {
-        return { static_cast<int>(htmlCanvas->width()), static_cast<int>(htmlCanvas->height()) };
+        auto scaleFactor = htmlCanvas->document().deviceScaleFactor();
+        return { static_cast<int>(scaleFactor * htmlCanvas->width()), static_cast<int>(scaleFactor * htmlCanvas->height()) };
     }
 #if ENABLE(OFFSCREEN_CANVAS)
     , [](const RefPtr<OffscreenCanvas>& offscreenCanvas) -> IntSize {

diff --git a/Websites/webkit.org/demos/webgpu/scripts/instanced-textured-cube.js b/Websites/webkit.org/demos/webgpu/scripts/instanced-textured-cube.js
@@ -247,10 +247,19 @@ async function helloCube() {
         }
     };
 
+    const deviceScaleFactor = window.devicePixelRatio || 1;
     const depthTexture = device.createTexture({
-        size: [ canvas.width, canvas.height ],
+        size: [ canvas.width * deviceScaleFactor, canvas.height * deviceScaleFactor ],
         format: 'depth24plus',
         usage: GPUTextureUsage.RENDER_ATTACHMENT,
+        sampleCount: 4
+    });
+
+    const msaaRenderTarget = device.createTexture({
+        size: [ canvas.width * deviceScaleFactor, canvas.height * deviceScaleFactor ],
+        sampleCount: 4,
+        format: 'bgra8unorm',
+        usage: GPUTextureUsage.RENDER_ATTACHMENT,
     });
 
     const depthTextureView = depthTexture.createView();
@@ -306,7 +315,8 @@ async function helloCube() {
 
         /* GPURenderPassColorATtachmentDescriptor */
         const colorAttachmentDescriptor = {
-            view: renderAttachment,
+            view: msaaRenderTarget.createView(),
+            resolveTarget: renderAttachment,
             loadOp: "clear",
             storeOp: "store",
             clearColor: darkBlue