From 8f8295d68968b7a60a038e61721bc195e96aa884 Mon Sep 17 00:00:00 2001
From: Tarek Sherif <tareksherif@pm.me>
Date: Mon, 12 Feb 2024 06:59:29 -0500
Subject: [PATCH] Per-pass timer API

---
 cube.html         |  17 ++---
 deferred.html     |  35 +++++++---
 multi-canvas.html |  26 -------
 particles.html    |  26 ++++---
 pick.html         |  40 ++++++-----
 utils/Timer.js    | 170 ++++++++++++++++++++++++++--------------------
 6 files changed, 168 insertions(+), 146 deletions(-)

diff --git a/cube.html b/cube.html
index 896f6d3..347fd6e 100644
--- 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
index 27d05be..feccf64 100644
--- 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
index cb3e94d..0c70bdf 100644
--- 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
index 94f95a7..569083e 100644
--- 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
index 35c6e24..834eee6 100644
--- 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);
     }
diff --git a/utils/Timer.js b/utils/Timer.js
index a1ec892..190dfad 100644
--- a/utils/Timer.js
+++ b/utils/Timer.js
@@ -1,104 +1,128 @@
-const FRAME_COUNT = 50;
+const DEFAULT_SAMPLE_COUNT = 50;
 
 export class Timer {
-    static PASS_START = 1;
-    static PASS_END = 2;
-
-    constructor(device) {
+    constructor(device, passNames, sampleCount = DEFAULT_SAMPLE_COUNT) {
+        this.passNames = passNames.slice();
+        this.sampleCount = sampleCount;
         this.hasGPUTimer = false;
-        this.querySet = null;
-        this.resolveBuffer = null;
-        this.resultBuffer = null;
-        this.cpuTime = 0;
-        this.cpuTimeCount = 0;
-        this.cpuAverage = 0;
-        this.gpuTime = 0;
-        this.gpuTimeCount = 0;
-        this.gpuAverage = 0;
-        this.frameStartTime = 0;
+        this.cpuTimers = {};
+        this.cpuTimes = {};
+        this.passTimers = {};
+        this.gpuTimes = {}
 
         if (device.features.has("timestamp-query")) {
             this.hasGPUTimer = true;
 
-            this.querySet = device.createQuerySet({
-                type: "timestamp",
-                count: 2
-            });
-    
-            this.resolveBuffer = device.createBuffer({
-                size: this.querySet.count * 8,
-                usage: GPUBufferUsage.QUERY_RESOLVE | GPUBufferUsage.COPY_SRC
-            });
-    
-            this.resultBuffer = device.createBuffer({
-                size: this.resolveBuffer.size,
-                usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+            passNames.forEach(passName => {
+                const querySet = device.createQuerySet({
+                    type: "timestamp",
+                    count: 2
+                });
+        
+                const resolveBuffer = device.createBuffer({
+                    size: querySet.count * 8,
+                    usage: GPUBufferUsage.QUERY_RESOLVE | GPUBufferUsage.COPY_SRC
+                });
+        
+                const resultBuffer = device.createBuffer({
+                    size: resolveBuffer.size,
+                    usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+                });   
+
+                this.passTimers[passName] = {
+                    querySet,
+                    resolveBuffer,
+                    resultBuffer,
+                    time: 0,
+                    timeCount: 0,
+                }
+
+                this.gpuTimes[passName] = 0;
             });
+
+           
         }
     }
 
-    passDescriptor(flags) {
-        if (!this.hasGPUTimer) {
+    passDescriptor(passName) {
+        const passTimer = this.passTimers[passName];
+
+        if (!passTimer) {
             return undefined;
         }
 
-        const descriptor = {
-            querySet: this.querySet
+        return {
+            querySet: passTimer.querySet,
+            beginningOfPassWriteIndex: 0,
+            endOfPassWriteIndex: 1
         };
+    }
 
-        if (flags & Timer.PASS_START) {
-            descriptor.beginningOfPassWriteIndex = 0
-        }
+    beforeSubmit(commandEncoder, passNames = this.passNames) {
+        passNames.forEach(passName => {
+            const passTimer = this.passTimers[passName];
 
-        if (flags & Timer.PASS_END) {
-            descriptor.endOfPassWriteIndex = 1
-        }
+            if (passTimer && passTimer.resultBuffer.mapState === "unmapped") {
+                const { querySet, resolveBuffer, resultBuffer } = passTimer;
 
-        return descriptor;
+                commandEncoder.resolveQuerySet(querySet, 0, querySet.count, resolveBuffer, 0);
+                commandEncoder.copyBufferToBuffer(resolveBuffer, 0, resultBuffer, 0, resultBuffer.size);
+            }
+        });
     }
 
-    frameStart() {
-        this.frameStartTime = performance.now();
-    }
+    afterSubmit(passNames = this.passNames) {
+        passNames.forEach(passName => {
+            const passTimer = this.passTimers[passName];
 
-    beforeSubmit(commandEncoder) {
-        if (this.hasGPUTimer && this.resultBuffer.mapState === "unmapped") {
-            commandEncoder.resolveQuerySet(this.querySet, 0, this.querySet.count, this.resolveBuffer, 0);
-            commandEncoder.copyBufferToBuffer(this.resolveBuffer, 0, this.resultBuffer, 0, this.resultBuffer.size);
-        }
+            if (passTimer && passTimer.resultBuffer.mapState === "unmapped") {
+                const { resultBuffer } = passTimer;
+                resultBuffer.mapAsync(GPUMapMode.READ).then(() => {
+                    const [start, end] = new BigInt64Array(resultBuffer.getMappedRange());
+                    resultBuffer.unmap();
+    
+                    const time = Number(end - start);
+    
+                    if (time >= 0) {
+                        passTimer.time += time;
+                        ++passTimer.timeCount;
+                    } else {
+                        passTimer.time = 0;
+                        passTimer.timeCount = 0;
+                    }
+    
+                    if (passTimer.timeCount === this.sampleCount) {
+                        this.gpuTimes[passName] = passTimer.time / this.sampleCount / 1000000;
+                        passTimer.time = 0;
+                        passTimer.timeCount = 0;
+                    }
+                });
+            }
+        });
     }
 
-    frameEnd() {
-        if (this.hasGPUTimer && this.resultBuffer.mapState === "unmapped") {
-            this.resultBuffer.mapAsync(GPUMapMode.READ).then(() => {
-                const [start, end] = new BigInt64Array(this.resultBuffer.getMappedRange());
-                this.resultBuffer.unmap();
+    cpuTimeStart(timerName) {
+        this.cpuTimers[timerName] ??= {
+            startTime: 0,
+            time: 0,
+            timeCount: 0
+        };
+        this.cpuTimes[timerName] ??= 0;
 
-                const time = Number(end - start);
+        this.cpuTimers[timerName].startTime = performance.now();
+    }
 
-                if (time >= 0) {
-                    this.gpuTime += time;
-                    ++this.gpuTimeCount;
-                } else {
-                    this.gpuTime = 0;
-                    this.gpuTimeCount = 0;
-                }
 
-                if (this.gpuTimeCount === FRAME_COUNT) {
-                    this.gpuAverage = this.gpuTime / FRAME_COUNT / 1000000;
-                    this.gpuTime = 0;
-                    this.gpuTimeCount = 0;
-                }
-            });
-        }
+    cpuTimeEnd(timerName) {
+        const timer = this.cpuTimers[timerName];
 
-        this.cpuTime += performance.now() - this.frameStartTime;
-        ++this.cpuTimeCount;
+        timer.time += performance.now() - timer.startTime;
+        ++timer.timeCount;
 
-        if (this.cpuTimeCount === FRAME_COUNT) {
-            this.cpuAverage = this.cpuTime / FRAME_COUNT;
-            this.cpuTime = 0;
-            this.cpuTimeCount = 0;
+        if (timer.timeCount === this.sampleCount) {
+            this.cpuTimes[timerName] = timer.time / this.sampleCount;
+            timer.time = 0;
+            timer.timeCount = 0;
         }
     }