Particles timer

tsherif · Feb 11, 2024 · 336615d · 336615d
1 parent 023813a
commit 336615d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 5 deletions.
diff --git a/particles.html b/particles.html
@@ -28,8 +28,17 @@
 -->
 <body>
 <canvas id="webgpu-canvas"></canvas>
+<div id="stats">
+    <div>
+        CPU Time: <span id="cpu-time"></span>
+    </div>
+    <div>
+        GPU Time: <span id="gpu-time"></span>
+    </div>
+</div>
 <script type="module">
 import { checkSupport, addDescription } from "./utils/utils.js";
+import { Timer } from "./utils/Timer.js";
 
 const WORKGROUP_SIZE = 64;
 const NUM_WORKGROUPS = 1000;
@@ -55,7 +64,9 @@
     // Set up device and canvas context
     ////////////////////////////////////
 
-    const device = await adapter.requestDevice();
+    const device = await adapter.requestDevice({
+        requiredFeatures: adapter.features.has("timestamp-query") ? ["timestamp-query"] : []
+    });
 
     const canvas = document.getElementById("webgpu-canvas");
     canvas.width = window.innerWidth;
@@ -67,6 +78,11 @@
         format: presentationFormat
     });
 
+    const timer = new Timer(device);
+
+    const cpuTimeDisplay = document.getElementById("cpu-time");
+    const gpuTimeDisplay = document.getElementById("gpu-time");
+
     ////////////////////////////////////////////////////////
     // Create buffers for compute pass
     // (positionBuffer also used in render pass)
@@ -173,7 +189,6 @@
     // Compute bind group
     ////////////////////////
 
-
     const computeBindGroup = device.createBindGroup({
         layout: computePipeline.getBindGroupLayout(0),
         entries: [
@@ -198,6 +213,10 @@
         ]
     });
 
+    const computePassDescription = {
+        timestampWrites: timer.passDescriptor(Timer.PASS_START)
+    };
+
     ///////////////////////////////////
     // Create buffers for render pass
     ///////////////////////////////////
@@ -371,7 +390,8 @@
             loadOp: "clear",
             storeOp: "store",
             clearValue: [0, 0, 0, 1]
-        }]
+        }],
+        timestampWrites: timer.passDescriptor(Timer.PASS_END)
     };
 
     window.addEventListener("resize", () => {
@@ -391,6 +411,7 @@
     });
 
     requestAnimationFrame(function draw() {
+        timer.frameStart();
 
         /////////////////////////
         // Set up command buffer
@@ -402,7 +423,7 @@
         // Encode compute pass
         ///////////////////////
 
-        const computePass = commandEncoder.beginComputePass();
+        const computePass = commandEncoder.beginComputePass(computePassDescription);
         computePass.setPipeline(computePipeline);
         computePass.setBindGroup(0, computeBindGroup);
         computePass.dispatchWorkgroups(NUM_WORKGROUPS);
@@ -435,8 +456,15 @@
         // Submit command buffer
         //////////////////////////
 
+        timer.beforeSubmit(commandEncoder);
+
         device.queue.submit([commandEncoder.finish()]);
 
+        timer.frameEnd();
+
+        cpuTimeDisplay.innerText = `${timer.cpuAverage.toFixed(2)}ms`;
+        gpuTimeDisplay.innerText = timer.hasGPUTimer ? `${timer.gpuAverage.toFixed(2)}ms` : "N/A";
+
         requestAnimationFrame(draw);
     });
 })();

diff --git a/utils/Timer.js b/utils/Timer.js
@@ -1,4 +1,4 @@
-const FRAME_COUNT = 20;
+const FRAME_COUNT = 50;
 
 export class Timer {
     static PASS_START = 1;