From d84d8a0395252854d35fd8d6167a7d73c6a7c6e4 Mon Sep 17 00:00:00 2001 From: Brandon Jones Date: Thu, 18 Jul 2024 09:17:01 -0700 Subject: [PATCH 1/4] Adding a test for a bug I discovered --- iframe-raf/iframe.html | 16 ++++++++++++ iframe-raf/index.html | 48 ++++++++++++++++++++++++++++++++++++ iframe-raf/raf.js | 56 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 120 insertions(+) create mode 100644 iframe-raf/iframe.html create mode 100644 iframe-raf/index.html create mode 100644 iframe-raf/raf.js diff --git a/iframe-raf/iframe.html b/iframe-raf/iframe.html new file mode 100644 index 0000000..8277b1a --- /dev/null +++ b/iframe-raf/iframe.html @@ -0,0 +1,16 @@ + + + + + + + + + + Particle System - WebGPU + + + + iframe + + \ No newline at end of file diff --git a/iframe-raf/index.html b/iframe-raf/index.html new file mode 100644 index 0000000..624ae17 --- /dev/null +++ b/iframe-raf/index.html @@ -0,0 +1,48 @@ + + + + + + + + + + Particle System - WebGPU + + + + Top Level + + +
+ + + + + + + \ No newline at end of file diff --git a/iframe-raf/raf.js b/iframe-raf/raf.js new file mode 100644 index 0000000..afad9e8 --- /dev/null +++ b/iframe-raf/raf.js @@ -0,0 +1,56 @@ + + +async function initWebGPU() { + const adapter = await navigator.gpu.requestAdapter(); + const device = await adapter.requestDevice(); + + const canvas = document.createElement('canvas'); + canvas.width = 16; + canvas.height = 16; + + const context = canvas.getContext('webgpu'); + context.configure({ + format: navigator.gpu.getPreferredCanvasFormat(), + device + }); + + // Place a counter of the page that shows the FPS of the rAF callback + const fpsOutput = document.createElement('div'); + document.body.appendChild(fpsOutput); + document.body.appendChild(canvas); + + let lastTimestamp = performance.now(); + let frameCount = 0; + + let clearCounter = 0; + + const rafCallback = (time) => { + requestAnimationFrame(rafCallback); + frameCount++; + // Every second update the FPS counter + if(time - lastTimestamp > 1000) { + fpsOutput.innerText = `rAF FPS: ${frameCount}`; + frameCount = 0; + lastTimestamp = time; + clearCounter++; + } + + const encoder = device.createCommandEncoder(); + + const pass = encoder.beginRenderPass({ + colorAttachments: [{ + view: context.getCurrentTexture().createView(), + clearValue: clearCounter % 2 ? [0, 0, 1, 1] : [1, 0, 0, 1], + loadOp: 'clear', + storeOp: 'store', + }] + }); + pass.end(); + + device.queue.submit([encoder.finish()]); + } + + requestAnimationFrame(rafCallback); +} + +window.addEventListener('load', initWebGPU); \ No newline at end of file From 88f2fd6e002051b2be6ac5801bfecc746f142d68 Mon Sep 17 00:00:00 2001 From: Brandon Jones Date: Thu, 18 Jul 2024 10:33:12 -0700 Subject: [PATCH 2/4] Figured out how to repro the bug! --- iframe-raf/iframe.html | 31 +++++++++++++++++------ iframe-raf/index.html | 33 ++++++++++++++++--------- iframe-raf/raf.js | 56 ------------------------------------------ 3 files changed, 44 insertions(+), 76 deletions(-) delete mode 100644 iframe-raf/raf.js diff --git a/iframe-raf/iframe.html b/iframe-raf/iframe.html index 8277b1a..fd0a972 100644 --- a/iframe-raf/iframe.html +++ b/iframe-raf/iframe.html @@ -2,15 +2,30 @@ - - - - - - Particle System - WebGPU + iframe rAF test page - - iframe + same-origin iframe + \ No newline at end of file diff --git a/iframe-raf/index.html b/iframe-raf/index.html index 624ae17..9f567f1 100644 --- a/iframe-raf/index.html +++ b/iframe-raf/index.html @@ -18,26 +18,35 @@ - Top Level - +
-
- - - + + + + + From 024ffab1362c0b47ed4e1128fbe7606a965c1177 Mon Sep 17 00:00:00 2001 From: Brandon Jones Date: Mon, 21 Oct 2024 13:44:06 -0400 Subject: [PATCH 4/4] Made the canvas background color change on device loss --- device-loss.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/device-loss.html b/device-loss.html index 23ed32b..2123f74 100644 --- a/device-loss.html +++ b/device-loss.html @@ -197,7 +197,7 @@ view: undefined, resolveTarget: undefined, - clearValue: { r: 0.0, g: 0.0, b: 0.3, a: 1.0 }, + clearValue: { r: Math.random() * 0.5, g: Math.random() * 0.5, b: Math.random() * 0.5, a: 1.0 }, loadOp: 'clear', storeOp: 'store' };