Per-pass timer API

tsherif · Feb 12, 2024 · 8f8295d · 8f8295d
1 parent 129581b
commit 8f8295d
Show file tree

Hide file tree

Showing 6 changed files with 168 additions and 146 deletions.
diff --git a/cube.html b/cube.html
@@ -31,10 +31,10 @@
 <canvas id="webgpu-canvas"></canvas>
 <div id="stats">
     <div>
-        CPU Time: <span id="cpu-time"></span>
+        CPU Frame Time: <span id="cpu-time"></span>
     </div>
     <div>
-        GPU Time: <span id="gpu-time"></span>
+        GPU Draw Time: <span id="gpu-time"></span>
     </div>
 </div>
 <script type="module">
@@ -81,7 +81,7 @@
         format: presentationFormat
     });
 
-    const timer = new Timer(device);
+    const timer = new Timer(device, ["draw"]);
 
     const cpuTimeDisplay = document.getElementById("cpu-time");
     const gpuTimeDisplay = document.getElementById("gpu-time");
@@ -353,7 +353,7 @@
             depthLoadOp: 'clear',
             depthStoreOp: "store"
         },
-        timestampWrites: timer.passDescriptor(Timer.PASS_START | Timer.PASS_END)
+        timestampWrites: timer.passDescriptor("draw")
     };
 
     window.addEventListener("resize", () => {
@@ -388,7 +388,7 @@
 
     let lastTime;
     requestAnimationFrame(function draw(time) {
-        timer.frameStart();
+        timer.cpuTimeStart("frame");
 
         lastTime = lastTime ?? time;
         const dt = time - lastTime;
@@ -430,10 +430,11 @@
 
         device.queue.submit([commandEncoder.finish()]);
 
-        timer.frameEnd();
+        timer.afterSubmit();
+        timer.cpuTimeEnd("frame");
 
-        cpuTimeDisplay.innerText = `${timer.cpuAverage.toFixed(2)}ms`;
-        gpuTimeDisplay.innerText = timer.hasGPUTimer ? `${timer.gpuAverage.toFixed(2)}ms` : "N/A";
+        cpuTimeDisplay.innerText = `${timer.cpuTimes["frame"].toFixed(2)}ms`;
+        gpuTimeDisplay.innerText = timer.hasGPUTimer ? `${timer.gpuTimes["draw"].toFixed(2)}ms` : "N/A";
 
         requestAnimationFrame(draw);
     });

diff --git a/deferred.html b/deferred.html
@@ -31,10 +31,16 @@
 <canvas id="webgpu-canvas"></canvas>
 <div id="stats">
     <div>
-        CPU Time: <span id="cpu-time"></span>
+        CPU Frame Time: <span id="cpu-time"></span>
     </div>
     <div>
-        GPU Time: <span id="gpu-time"></span>
+        GPU Lights Draw Time: <span id="lights-time"></span>
+    </div>
+    <div>
+        GPU GBuffer Render Time: <span id="gbuffer-time"></span>
+    </div>
+    <div>
+        GPU Lighting Time: <span id="lighting-time"></span>
     </div>
 </div>
 <script type="module">
@@ -86,9 +92,11 @@
     });
 
     const cpuTimeDisplay = document.getElementById("cpu-time");
-    const gpuTimeDisplay = document.getElementById("gpu-time");
+    const lightsTimeDisplay = document.getElementById("lights-time");
+    const gBufferTimeDisplay = document.getElementById("gbuffer-time");
+    const lightingTimeDisplay = document.getElementById("lighting-time");
 
-    const timer = new Timer(device);
+    const timer = new Timer(device, ["lights", "gbuffer", "lighting"]);
 
     ////////////////////////////////////////
     // Create vertex buffers and load data
@@ -744,7 +752,7 @@
             depthLoadOp: "clear",
             depthStoreOp: "store"
         },
-        timestampWrites: timer.passDescriptor(Timer.PASS_START)
+        timestampWrites: timer.passDescriptor("lights")
     };
 
     const gBufferRenderPassDescription = {
@@ -773,7 +781,8 @@
             view: depthTexture.createView(),
             depthLoadOp: "load",
             depthStoreOp: "store"
-        }
+        },
+        timestampWrites: timer.passDescriptor("gbuffer")
     };
 
 
@@ -785,7 +794,7 @@
             loadOp: "load",
             storeOp: "store",
         }],
-        timestampWrites: timer.passDescriptor(Timer.PASS_END)
+        timestampWrites: timer.passDescriptor("lighting")
     };
 
     window.addEventListener("resize", () => {
@@ -899,7 +908,7 @@
 
     let lastTime;
     function draw(time) {
-        timer.frameStart();
+        timer.cpuTimeStart("frame");
 
         lastTime = lastTime ?? time;
         const dt = time - lastTime;
@@ -997,10 +1006,14 @@
 
         device.queue.submit([commandEncoder.finish()]);
 
-        timer.frameEnd();
+        timer.afterSubmit();
+
+        timer.cpuTimeEnd("frame");
 
-        cpuTimeDisplay.innerText = `${timer.cpuAverage.toFixed(2)}ms`;
-        gpuTimeDisplay.innerText = timer.hasGPUTimer ? `${timer.gpuAverage.toFixed(2)}ms` : "N/A";
+        cpuTimeDisplay.innerText = `${timer.cpuTimes["frame"].toFixed(2)}ms`;
+        lightsTimeDisplay.innerText = timer.hasGPUTimer ? `${timer.gpuTimes["lights"].toFixed(2)}ms` : "N/A";
+        gBufferTimeDisplay.innerText = timer.hasGPUTimer ? `${timer.gpuTimes["gbuffer"].toFixed(2)}ms` : "N/A";
+        lightingTimeDisplay.innerText = timer.hasGPUTimer ? `${timer.gpuTimes["lighting"].toFixed(2)}ms` : "N/A";
 
         requestAnimationFrame(draw);
     }

diff --git a/multi-canvas.html b/multi-canvas.html
@@ -39,17 +39,8 @@
   CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 -->
 <body>
-<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, loadImageBitmaps, createCube, xformMatrix, randomRange, getMipLevelCount, generate2DMipmap } from "./utils/utils.js";
-import { Timer } from "./utils/Timer.js";
 
 const { mat4 } = glMatrix;
 const NUM_CANVASES = 100;
@@ -82,11 +73,6 @@
         requiredFeatures: adapter.features.has("timestamp-query") ? ["timestamp-query"] : []
     });
 
-    const timer = new Timer(device);
-
-    const cpuTimeDisplay = document.getElementById("cpu-time");
-    const gpuTimeDisplay = document.getElementById("gpu-time");
-
     ////////////////////////////////////////
     // Create vertex buffers and load data
     ////////////////////////////////////////
@@ -385,13 +371,8 @@
         }
     });
 
-    canvases[0].renderPassDescriptor.timestampWrites =  timer.passDescriptor(Timer.PASS_START);
-    canvases.at(-1).renderPassDescriptor.timestampWrites =  timer.passDescriptor(Timer.PASS_END);
-
     let lastTime;
     requestAnimationFrame(function draw(time) {
-        timer.frameStart();
-
         lastTime = lastTime ?? time;
         const dt = time - lastTime;
         lastTime = time;
@@ -428,15 +409,8 @@
             renderPass.end();
         });
 
-        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/particles.html b/particles.html
@@ -30,10 +30,13 @@
 <canvas id="webgpu-canvas"></canvas>
 <div id="stats">
     <div>
-        CPU Time: <span id="cpu-time"></span>
+        CPU Frame Time: <span id="cpu-time"></span>
     </div>
     <div>
-        GPU Time: <span id="gpu-time"></span>
+        GPU Compute Time: <span id="compute-time"></span>
+    </div>
+    <div>
+        GPU Draw Time: <span id="draw-time"></span>
     </div>
 </div>
 <script type="module">
@@ -78,10 +81,11 @@
         format: presentationFormat
     });
 
-    const timer = new Timer(device);
+    const timer = new Timer(device, ["compute", "draw"]);
 
     const cpuTimeDisplay = document.getElementById("cpu-time");
-    const gpuTimeDisplay = document.getElementById("gpu-time");
+    const computeTimeDisplay = document.getElementById("compute-time");
+    const drawTimeDisplay = document.getElementById("draw-time");
 
     ////////////////////////////////////////////////////////
     // Create buffers for compute pass
@@ -214,7 +218,7 @@
     });
 
     const computePassDescription = {
-        timestampWrites: timer.passDescriptor(Timer.PASS_START)
+        timestampWrites: timer.passDescriptor("compute")
     };
 
     ///////////////////////////////////
@@ -391,7 +395,7 @@
             storeOp: "store",
             clearValue: [0, 0, 0, 1]
         }],
-        timestampWrites: timer.passDescriptor(Timer.PASS_END)
+        timestampWrites: timer.passDescriptor("draw")
     };
 
     window.addEventListener("resize", () => {
@@ -411,7 +415,7 @@
     });
 
     requestAnimationFrame(function draw() {
-        timer.frameStart();
+        timer.cpuTimeStart("frame");
 
         /////////////////////////
         // Set up command buffer
@@ -460,10 +464,12 @@
 
         device.queue.submit([commandEncoder.finish()]);
 
-        timer.frameEnd();
+        timer.afterSubmit();
+        timer.cpuTimeEnd("frame");
 
-        cpuTimeDisplay.innerText = `${timer.cpuAverage.toFixed(2)}ms`;
-        gpuTimeDisplay.innerText = timer.hasGPUTimer ? `${timer.gpuAverage.toFixed(2)}ms` : "N/A";
+        cpuTimeDisplay.innerText = `${timer.cpuTimes["frame"].toFixed(2)}ms`;
+        computeTimeDisplay.innerText = timer.hasGPUTimer ? `${timer.gpuTimes["compute"].toFixed(2)}ms` : "N/A";
+        drawTimeDisplay.innerText = timer.hasGPUTimer ? `${timer.gpuTimes["draw"].toFixed(2)}ms` : "N/A";
 
         requestAnimationFrame(draw);
     });

diff --git a/pick.html b/pick.html
@@ -31,10 +31,13 @@
 <canvas id="webgpu-canvas"></canvas>
 <div id="stats">
     <div>
-        CPU Time: <span id="cpu-time"></span>
+        CPU Frame Time: <span id="cpu-time"></span>
     </div>
     <div>
-        GPU Time: <span id="gpu-time"></span>
+        GPU Pick Time: <span id="pick-time"></span>
+    </div>
+    <div>
+        GPU Draw Time: <span id="draw-time"></span>
     </div>
 </div>
 <script type="module">
@@ -81,10 +84,11 @@
         format: presentationFormat
     });
 
-    const timer = new Timer(device);
+    const timer = new Timer(device, ["pick", "draw"]);
 
     const cpuTimeDisplay = document.getElementById("cpu-time");
-    const gpuTimeDisplay = document.getElementById("gpu-time");
+    const pickTimeDisplay = document.getElementById("pick-time");
+    const drawTimeDisplay = document.getElementById("draw-time");
 
     ////////////////////////////////////////
     // Create vertex buffers and load data
@@ -496,7 +500,7 @@
             depthLoadOp: "clear",
             depthStoreOp: "store"
         },
-        timestampWrites: timer.passDescriptor(Timer.PASS_START)
+        timestampWrites: timer.passDescriptor("pick")
     };
 
     const drawRenderPassDescription = {
@@ -512,12 +516,10 @@
             depthClearValue: 1,
             depthLoadOp: "clear",
             depthStoreOp: "store"
-        }
+        },
+        timestampWrites: timer.passDescriptor("draw")
     };
 
-    const timestampWritesPicked = timer.passDescriptor(Timer.PASS_END);
-    const timestampWritesNoPick = timer.passDescriptor(Timer.PASS_START | Timer.PASS_END);
-
     // MOUSE HANDLER FOR PICKING
     let mouseX = -1;
     let mouseY = -1;
@@ -580,7 +582,7 @@
 
     let lastTime;
     function draw(time) {
-        timer.frameStart();
+        timer.cpuTimeStart("frame");
 
         lastTime = lastTime ?? time;
         const dt = time - lastTime;
@@ -601,10 +603,7 @@
         // Picking
         //////////////
 
-        let picked = false;
         if (mouseX > -1 && pickBuffer.mapState === "unmapped") {
-            picked = true;
-
             const pickCommandEncoder = device.createCommandEncoder();
             const pickPass = pickCommandEncoder.beginRenderPass(pickRenderPassDescription);
 
@@ -631,8 +630,12 @@
                 [1, 1]
             );
 
+            timer.beforeSubmit(pickCommandEncoder, ["pick"]);
+
             device.queue.submit([pickCommandEncoder.finish()]);
 
+            timer.afterSubmit(["pick"])
+
             // Map buffer
             pickBuffer.mapAsync(GPUMapMode.READ).then(() => {
 
@@ -668,7 +671,6 @@
         ///////////
 
         drawRenderPassDescription.colorAttachments[0].resolveTarget = context.getCurrentTexture().createView();
-        drawRenderPassDescription.timestampWrites = picked ? timestampWritesPicked : timestampWritesNoPick;
 
         const drawCommandEncoder = device.createCommandEncoder();
         const renderPass = drawCommandEncoder.beginRenderPass(drawRenderPassDescription);
@@ -685,14 +687,16 @@
 
         renderPass.end();
 
-        timer.beforeSubmit(drawCommandEncoder);
+        timer.beforeSubmit(drawCommandEncoder, ["draw"]);
 
         device.queue.submit([drawCommandEncoder.finish()]);
 
-        timer.frameEnd();
+        timer.afterSubmit(["draw"]);
+        timer.cpuTimeEnd("frame");
 
-        cpuTimeDisplay.innerText = `${timer.cpuAverage.toFixed(2)}ms`;
-        gpuTimeDisplay.innerText = timer.hasGPUTimer ? `${timer.gpuAverage.toFixed(2)}ms` : "N/A";
+        cpuTimeDisplay.innerText = `${timer.cpuTimes["frame"].toFixed(2)}ms`;
+        pickTimeDisplay.innerText = timer.hasGPUTimer ? `${timer.gpuTimes["pick"].toFixed(2)}ms` : "N/A";
+        drawTimeDisplay.innerText = timer.hasGPUTimer ? `${timer.gpuTimes["draw"].toFixed(2)}ms` : "N/A";
 
         requestAnimationFrame(draw);
     }