From e855c098c218315ddbe50c84122ef5b300ab6a26 Mon Sep 17 00:00:00 2001
From: Brandon Jones <tojiro@gmail.com>
Date: Thu, 28 Nov 2024 17:06:53 -0800
Subject: [PATCH] Adding timestamp tracking and switch to Tweakpane

---
 index.html                                    |  59 ++++---
 js/performance-tracker.js                     | 159 ++++++++++++++++++
 js/renderer.js                                |   4 +-
 js/webgpu-renderer/timestamp-helper.js        | 146 ++++++++++++++++
 .../webgpu-metaball-renderer.js               |   7 +-
 js/webgpu-renderer/webgpu-renderer.js         |  31 +++-
 6 files changed, 367 insertions(+), 39 deletions(-)
 create mode 100644 js/performance-tracker.js
 create mode 100644 js/webgpu-renderer/timestamp-helper.js

diff --git a/index.html b/index.html
index 9b6c4e3..37665e7 100644
--- a/index.html
+++ b/index.html
@@ -32,7 +32,8 @@
         touch-action: none;
       }
 
-      .dg.main {
+      .tp-dfwv {
+        width: 300px !important;
         position: absolute;
         z-index: 100;
         top: 1em;
@@ -47,26 +48,23 @@
             "gl-matrix": "./node_modules/gl-matrix/esm/index.js",
             "webgpu-texture-loader": "./node_modules/web-texture-tool/build/webgpu-texture-loader.js",
             "wgsl-preprocessor": "./node_modules/wgsl-preprocessor/wgsl-preprocessor.js",
-            "dat.gui": "./node_modules/dat.gui/build/dat.gui.module.js",
-            "stats.js": "./node_modules/stats.js/src/Stats.js"
+            "dat.gui": "./node_modules/dat.gui/build/dat.gui.module.js"
         }
     }
     </script>
     <script type="module">
       import dat from 'dat.gui';
-      import Stats from 'stats.js';
+      import { Pane } from 'https://cdn.jsdelivr.net/npm/tweakpane@4.0.1/dist/tweakpane.min.js';
 
       import { Gltf2Loader } from './js/mini-gltf2.js';
       import { OrbitCamera } from './js/camera.js';
 
       import { WebGPURenderer } from './js/webgpu-renderer/webgpu-renderer.js';
+      import { PerformanceTracker } from './js/performance-tracker.js';
 
       let renderer = null;
       let gltf = null;
 
-      const stats = new Stats();
-      document.body.appendChild(stats.dom);
-
       const camera = new OrbitCamera();
       camera.target = [0, 1, 0];
       camera.distance = 2.5;
@@ -84,9 +82,15 @@
         metaballResolution: 0.075
       };
 
-      let gui = new dat.GUI();
+      const stats = new PerformanceTracker();
+
+      const pane = new Pane({
+        title: document.title.split('|')[0],
+      });
+
+      stats.bindToTweakpane(pane, true);
 
-      gui.add(appSettings, 'metaballMethod', {
+      pane.addBinding(appSettings, 'metaballMethod', { options: {
         'writeBuffer()': 'writeBuffer',
         'New buffer each frame': 'newBuffer',
         'New staging buffer each frame': 'newStaging',
@@ -94,59 +98,60 @@
         'Ring of staging buffers': 'stagingRing',
         'Compute shader': 'gpuGenerated',
         'Point Cloud': 'pointCloud'
-      }).onChange(() => {
+      }}).on('change', (ev) => {
         if (renderer) {
           renderer.setMetaballMethod(appSettings.metaballMethod);
         }
       });
 
-      let rendering = gui.addFolder('Rendering');
-
-      rendering.add(appSettings, 'renderLightSprites').onChange(() => {
+      const renderOptions = pane.addFolder({
+        title: `Rendering`,
+        expanded: false,
+      });
+      renderOptions.addBinding(appSettings, 'renderLightSprites').on('change', () => {
         if (renderer) {
           renderer.lightManager.render = appSettings.renderLightSprites;
         }
       });
-
-      rendering.add(appSettings, 'renderEnvironment').onChange(() => {
+      renderOptions.addBinding(appSettings, 'renderEnvironment').on('change', () => {
         if (renderer) {
           renderer.renderEnvironment = appSettings.renderEnvironment;
         }
       });
-
-      rendering.add(appSettings, 'environmentLights').onChange(() => {
+      renderOptions.addBinding(appSettings, 'environmentLights').on('change', () => {
         if (renderer) {
           renderer.enableLights(appSettings.environmentLights, appSettings.metaballLights);
         }
       });
-
-      rendering.add(appSettings, 'metaballLights').onChange(() => {
+      renderOptions.addBinding(appSettings, 'metaballLights').on('change', () => {
         if (renderer) {
           renderer.enableLights(appSettings.environmentLights, appSettings.metaballLights);
         }
       });
 
-      rendering.add(appSettings, 'metaballStyle', {
+      renderOptions.addBinding(appSettings, 'metaballStyle', { options: {
         lava: 'lava',
         water: 'water',
         slime: 'slime',
         none: 'none',
-      }).onChange(() => {
-        renderer.setMetaballStyle(appSettings.metaballStyle);
+      }}).on('change', () => {
+        if (renderer) {
+          renderer.setMetaballStyle(appSettings.metaballStyle);
+        }
       });
 
-      rendering.add(appSettings, 'metaballResolution', {
+      renderOptions.addBinding(appSettings, 'metaballResolution', { options: {
         low: 0.2,
         medium: 0.1,
         high: 0.075,
         ultra: 0.05,
         "CPU melting": 0.03,
-      }).onChange(() => {
-        renderer.setMetaballStep(appSettings.metaballResolution);
+      }}).on('change', () => {
+        if (renderer) {
+          renderer.setMetaballStep(appSettings.metaballResolution);
+        }
       });
 
-      document.body.appendChild(gui.domElement);
-
       async function init() {
         renderer = new WebGPURenderer();
 
diff --git a/js/performance-tracker.js b/js/performance-tracker.js
new file mode 100644
index 0000000..0afddf5
--- /dev/null
+++ b/js/performance-tracker.js
@@ -0,0 +1,159 @@
+const DEFAULT_ENTRY_BUFFER_LENGTH = 20;
+export var SampleType;
+(function (SampleType) {
+    SampleType[SampleType["cpu"] = 0] = "cpu";
+    SampleType[SampleType["gpu"] = 1] = "gpu";
+})(SampleType || (SampleType = {}));
+;
+export class PerformanceEntry {
+    type;
+    buffer;
+    tweakpaneBinding;
+    tweakpaneGraph;
+    #lastBufferIndex = 0;
+    constructor(type, bufferLength = DEFAULT_ENTRY_BUFFER_LENGTH) {
+        this.type = type;
+        this.buffer = new Array(bufferLength);
+    }
+    addSample(value) {
+        this.#lastBufferIndex = (this.#lastBufferIndex + 1 % this.buffer.length);
+        this.buffer[this.#lastBufferIndex] = value;
+    }
+    get latest() {
+        return this.buffer[this.#lastBufferIndex] ?? 0;
+    }
+    get min() {
+        let min = Number.MAX_SAFE_INTEGER;
+        for (const value of this.buffer) {
+            if (value === undefined) {
+                return 0;
+            } // Don't have enough samples yet
+            min = Math.min(value, min);
+        }
+        return min;
+    }
+    get max() {
+        let max = Number.MIN_SAFE_INTEGER;
+        for (const value of this.buffer) {
+            if (value === undefined) {
+                return 0;
+            } // Don't have enough samples yet
+            max = Math.max(value, max);
+        }
+        return max;
+    }
+    get average() {
+        let avg = 0;
+        for (const value of this.buffer) {
+            if (value === undefined) {
+                return 0;
+            } // Don't have enough samples yet
+            avg += value;
+        }
+        return avg / this.buffer.length;
+    }
+}
+export class PerformanceTracker {
+    entries = new Map();
+    fps = new PerformanceEntry(SampleType.cpu);
+    #framesRendered = 0;
+    #lastFpsTime = -1;
+    #frameStart;
+    #tweakpane;
+    constructor() {
+        // Give this one a longer buffer
+        let frameJsTime = new PerformanceEntry(SampleType.cpu, 100);
+        this.entries.set('frameJs µs', frameJsTime);
+    }
+    beginFrame() {
+        this.#frameStart = performance.now();
+        if (this.#lastFpsTime == -1) {
+            this.#lastFpsTime = this.#frameStart;
+        }
+    }
+    endFrame() {
+        const endTime = performance.now();
+        const frameTime = endTime - this.#frameStart;
+        this.addSample('frameJs µs', frameTime * 1000, SampleType.cpu); // Put it in µs
+        this.#framesRendered++;
+        if (endTime - this.#lastFpsTime >= 1000) {
+            this.#updateFps(endTime);
+        }
+    }
+    #updateFps(endTime) {
+        this.fps.addSample(this.#framesRendered);
+        if (this.#tweakpane) {
+            this.#tweakpane.title = `Stats - fps: ${this.#framesRendered}`;
+        }
+        this.#framesRendered = 0;
+        this.#lastFpsTime = endTime;
+    }
+    addSample(name, value, type = SampleType.gpu) {
+        let entry = this.entries.get(name);
+        if (!entry) {
+            entry = new PerformanceEntry(type);
+            this.entries.set(name, entry);
+            this.#addTweakpaneEntry(name, false);
+        }
+        entry.addSample(value);
+        return entry;
+    }
+    getEntry(name) {
+        let entry = this.entries.get(name);
+        if (!entry) {
+            entry = new PerformanceEntry(SampleType.gpu);
+            this.entries.set(name, entry);
+            this.#addTweakpaneEntry(name, false);
+        }
+        return entry;
+    }
+    clearSamples() {
+        if (this.#tweakpane) {
+            for (const [name, entry] of this.entries.entries()) {
+                if (entry.tweakpaneBinding) {
+                    this.#tweakpane.remove(entry.tweakpaneBinding);
+                }
+                if (entry.tweakpaneGraph) {
+                    this.#tweakpane.remove(entry.tweakpaneGraph);
+                }
+            }
+        }
+        let frameJsTime = this.entries.get('frameJs µs');
+        this.entries.clear();
+        this.entries.set('frameJs µs', frameJsTime);
+        if (this.#tweakpane) {
+            this.#addTweakpaneEntry('frameJs µs', true);
+        }
+    }
+    #addTweakpaneEntry(name, graph) {
+        if (this.#tweakpane) {
+            let entry = this.entries.get(name);
+            if (entry.tweakpaneBinding) {
+                this.#tweakpane.add(entry.tweakpaneBinding);
+            }
+            else {
+                entry.tweakpaneBinding = this.#tweakpane.addBinding(entry, 'latest', { readonly: true, label: name });
+            }
+            if (graph) {
+                if (entry.tweakpaneGraph) {
+                    this.#tweakpane.add(entry.tweakpaneGraph);
+                }
+                else {
+                    entry.tweakpaneGraph = this.#tweakpane.addBinding(entry, 'latest', {
+                        readonly: true, view: 'graph', label: '',
+                        max: 16000,
+                    });
+                }
+            }
+        }
+    }
+    bindToTweakpane(pane, expanded=true) {
+        this.#tweakpane = pane.addFolder({
+            title: `Stats - fps: ${this.fps.latest}`,
+            expanded,
+        });
+        this.#addTweakpaneEntry('frameJs µs', true);
+        return this.#tweakpane;
+    }
+}
+//# sourceMappingURL=performance-tracker.js.map
\ No newline at end of file
diff --git a/js/renderer.js b/js/renderer.js
index 007f70a..c700524 100644
--- a/js/renderer.js
+++ b/js/renderer.js
@@ -156,7 +156,7 @@ export class Renderer {
       if (this.frameCount % 200 == 0) { return; }
 
       if (this.stats) {
-        this.stats.begin();
+        this.stats.beginFrame();
       }
 
       this.beforeFrame(timestamp, timeDelta);
@@ -164,7 +164,7 @@ export class Renderer {
       this.onFrame(timestamp, timeDelta);
 
       if (this.stats) {
-        this.stats.end();
+        this.stats.endFrame();
       }
     };
 
diff --git a/js/webgpu-renderer/timestamp-helper.js b/js/webgpu-renderer/timestamp-helper.js
new file mode 100644
index 0000000..3469447
--- /dev/null
+++ b/js/webgpu-renderer/timestamp-helper.js
@@ -0,0 +1,146 @@
+/** Number of timing samples to collect before computing the average */
+const AVG_SAMPLE_COUNT = 30;
+;
+/**
+ * A utility that makes it a bit easier to gather timings from WebGPU compute and render passes.
+ */
+export class TimestampHelper {
+    device;
+    #timestampsSupported = false;
+    #timestampQuerySet;
+    #timestampResolveBuffer;
+    #timestampReadbackBuffers = [];
+    #readbackBufferCount = 0;
+    #currentReadbackBuffer = null;
+    #passTimings = new Map();
+    #maxPassCount = 0;
+    #nextQueryIndex = 0;
+    #queriesUsed = new Map();
+    #averages = {};
+    constructor(device, maxPassCount = 16) {
+        this.device = device;
+        this.#maxPassCount = maxPassCount;
+        this.#timestampsSupported = this.device.features.has('timestamp-query');
+        if (this.#timestampsSupported) {
+            this.#timestampQuerySet = this.device.createQuerySet({
+                label: 'Timestamp Helper',
+                type: 'timestamp',
+                count: this.#maxPassCount,
+            });
+            this.#timestampResolveBuffer = this.device.createBuffer({
+                size: BigUint64Array.BYTES_PER_ELEMENT * this.#maxPassCount,
+                usage: GPUBufferUsage.QUERY_RESOLVE | GPUBufferUsage.COPY_SRC,
+            });
+        }
+    }
+    get timestampsSupported() {
+        return this.#timestampsSupported;
+    }
+    timestampWrites(name) {
+        if (!this.#timestampsSupported) {
+            return undefined;
+        }
+        if (this.#currentReadbackBuffer) {
+            throw new Error('Must read back the previous resolve before new timestampes can be added.');
+        }
+        if (this.#nextQueryIndex >= this.#maxPassCount * 2) {
+            throw new Error('Exceeded the number of passes that can be queried in a single resolve.');
+        }
+        const timestampWrites = {
+            querySet: this.#timestampQuerySet,
+            beginningOfPassWriteIndex: this.#nextQueryIndex,
+            endOfPassWriteIndex: this.#nextQueryIndex + 1
+        };
+        this.#queriesUsed.set(name, {
+            begin: timestampWrites.beginningOfPassWriteIndex,
+            end: timestampWrites.endOfPassWriteIndex,
+        });
+        this.#nextQueryIndex += 2;
+        return timestampWrites;
+    }
+    resolve(commandEncoder) {
+        if (!this.#timestampsSupported) {
+            return;
+        }
+        if (this.#currentReadbackBuffer) {
+            throw new Error('Must read back the previous resolve before resolve can be called again.');
+        }
+        if (this.#timestampReadbackBuffers.length > 0) {
+            this.#currentReadbackBuffer = this.#timestampReadbackBuffers.pop();
+        }
+        else {
+            this.#currentReadbackBuffer = this.device.createBuffer({
+                label: `Timestamp Readback ${this.#readbackBufferCount}`,
+                size: this.#timestampResolveBuffer.size,
+                usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST,
+            });
+            this.#readbackBufferCount++;
+        }
+        commandEncoder.resolveQuerySet(this.#timestampQuerySet, 0, this.#nextQueryIndex, this.#timestampResolveBuffer, 0);
+        commandEncoder.copyBufferToBuffer(this.#timestampResolveBuffer, 0, this.#currentReadbackBuffer, 0, this.#timestampResolveBuffer.size);
+    }
+    async read() {
+        if (!this.#currentReadbackBuffer) {
+            return;
+        }
+        let readbackBuffer = this.#currentReadbackBuffer;
+        let queries = new Map(this.#queriesUsed);
+        this.#currentReadbackBuffer = null;
+        this.#queriesUsed.clear();
+        this.#nextQueryIndex = 0;
+        await readbackBuffer.mapAsync(GPUMapMode.READ);
+        const mappedArray = new BigUint64Array(readbackBuffer.getMappedRange());
+        const results = {};
+        for (const [name, query] of queries.entries()) {
+            const passTime = Number(mappedArray[query.end] - mappedArray[query.begin]);
+            // Discard negative times
+            if (passTime >= 0) {
+                let passTimings = this.#passTimings.get(name);
+                if (!passTimings) {
+                    passTimings = {
+                        values: new Array(AVG_SAMPLE_COUNT),
+                        index: 0,
+                    };
+                    this.#passTimings.set(name, passTimings);
+                }
+                // Storing pass timings in µs
+                let passTimeMicro = passTime / 1000;
+                passTimings.values[passTimings.index++ % AVG_SAMPLE_COUNT] = passTimeMicro;
+                if (passTimings.index % AVG_SAMPLE_COUNT == 0) {
+                    // Update the average
+                    let avg = 0;
+                    for (const value of passTimings.values) {
+                        avg += value;
+                    }
+                    this.#averages[name] = avg / AVG_SAMPLE_COUNT;
+                }
+                results[name] = passTimeMicro;
+            }
+        }
+        // Update any existing keys not in the queries to 0. This way if one of them
+        // isn't present in the readback it will zero out instead of appearing to
+        // stay steady at the last reading.
+        for (const name of this.#passTimings.keys()) {
+            if (!queries.has(name)) {
+                let passTimings = this.#passTimings.get(name);
+                passTimings.values[passTimings.index++ % AVG_SAMPLE_COUNT] = 0;
+                if (passTimings.index % AVG_SAMPLE_COUNT == 0) {
+                    // Update the average
+                    let avg = 0;
+                    for (const value of passTimings.values) {
+                        avg += value;
+                    }
+                    this.#averages[name] = avg / AVG_SAMPLE_COUNT;
+                }
+            }
+        }
+        readbackBuffer.unmap();
+        this.#timestampReadbackBuffers.push(readbackBuffer);
+        return results;
+    }
+    hasPendingResults() { return this.#nextQueryIndex != 0; }
+    get averages() {
+        return this.#averages;
+    }
+}
+//# sourceMappingURL=timestamp-helper.js.map
\ No newline at end of file
diff --git a/js/webgpu-renderer/webgpu-metaball-renderer.js b/js/webgpu-renderer/webgpu-metaball-renderer.js
index 726351a..de1b1cb 100644
--- a/js/webgpu-renderer/webgpu-metaball-renderer.js
+++ b/js/webgpu-renderer/webgpu-metaball-renderer.js
@@ -686,13 +686,15 @@ export class MetaballComputeRenderer extends WebGPUMetaballRendererBase {
     this.device.queue.writeBuffer(this.indirectBuffer, 0, this.indirectArray);
   }
 
-  update(marchingCubes) {
+  update(marchingCubes, timestampHelper) {
     // Update the volume buffer with the latest isosurface values.
     //this.device.queue.writeBuffer(this.volumeBuffer, 64, marchingCubes.volume.values, 0, this.volumeElements);
 
     // Run the compute shader to fill the position/normal/index buffers.
     const commandEncoder = this.device.createCommandEncoder();
-    const passEncoder = commandEncoder.beginComputePass();
+    const passEncoder = commandEncoder.beginComputePass({
+      timestampWrites: timestampHelper.timestampWrites('Compute')
+    });
 
     const dispatchSize = [
       this.volume.width / WORKGROUP_SIZE[0],
@@ -713,6 +715,7 @@ export class MetaballComputeRenderer extends WebGPUMetaballRendererBase {
     }
 
     passEncoder.end();
+
     this.device.queue.submit([commandEncoder.finish()]);
 
     this.indexCount = this.indexBufferSize / Uint32Array.BYTES_PER_ELEMENT;
diff --git a/js/webgpu-renderer/webgpu-renderer.js b/js/webgpu-renderer/webgpu-renderer.js
index 10d1e4f..f89ca84 100644
--- a/js/webgpu-renderer/webgpu-renderer.js
+++ b/js/webgpu-renderer/webgpu-renderer.js
@@ -25,7 +25,7 @@ import { ClusteredLightManager } from './clustered-lights.js';
 import { WebGPULightSprites } from './webgpu-light-sprites.js';
 import { WebGPUglTF } from './webgpu-gltf.js';
 
-import { GPUStats } from './gpu-stats.js';
+//import { GPUStats } from './gpu-stats.js';
 
 import {
   MetaballWriteBuffer,
@@ -36,6 +36,7 @@ import {
   MetaballComputeRenderer,
   MetaballComputePointRenderer,
 } from './webgpu-metaball-renderer.js';
+import { TimestampHelper } from './timestamp-helper.js';
 
 const MetaballMethods = {
   writeBuffer: MetaballWriteBuffer,
@@ -60,7 +61,7 @@ export class WebGPURenderer extends Renderer {
 
     this.context = this.canvas.getContext('webgpu');
 
-    this.gpuStats = new GPUStats();
+    //this.gpuStats = new GPUStats();
     this.metaballMethod = null;
   }
 
@@ -84,9 +85,9 @@ export class WebGPURenderer extends Renderer {
     }
 
     // Enable timestamp queries if available
-    /*if (this.adapter.features.has('timestamp-query') != -1) {
+    if (this.adapter.features.has('timestamp-query') != -1) {
       requiredFeatures.push('timestamp-query');
-    }*/
+    }
 
     this.device = await this.adapter.requestDevice({requiredFeatures});
 
@@ -123,7 +124,7 @@ export class WebGPURenderer extends Renderer {
 
     this.renderPassDescriptor = {
       colorAttachments: [this.colorAttachment],
-      depthStencilAttachment: this.depthAttachment
+      depthStencilAttachment: this.depthAttachment,
     };
 
     this.bindGroupLayouts = {
@@ -277,6 +278,8 @@ export class WebGPURenderer extends Renderer {
 
     this.metaballRenderer = null;
     this.metaballsNeedUpdate = true;
+
+    this.timestampHelper = new TimestampHelper(this.device);
   }
 
   onResize(width, height) {
@@ -359,13 +362,14 @@ export class WebGPURenderer extends Renderer {
         return;
       }*/
 
-      await this.metaballRenderer.update(this.marchingCubes);
+      await this.metaballRenderer.update(this.marchingCubes, this.timestampHelper);
+
       this.metaballsNeedUpdate = true;
     }
   }
 
   onFrame(timestamp) {
-    this.gpuStats.begin();
+    //this.gpuStats.begin();
 
     // TODO: If we want multisampling this should attach to the resolveTarget,
     // but there seems to be a bug with that right now?
@@ -381,6 +385,8 @@ export class WebGPURenderer extends Renderer {
     const commandEncoder = this.device.createCommandEncoder({});
     this.clusteredLights.updateClusterLights(commandEncoder);
 
+    this.renderPassDescriptor.timestampWrites = this.timestampHelper.timestampWrites('Rendering');
+
     const passEncoder = commandEncoder.beginRenderPass(this.renderPassDescriptor);
 
     if (this.scene && this.renderEnvironment) {
@@ -399,9 +405,18 @@ export class WebGPURenderer extends Renderer {
     }
 
     passEncoder.end();
+
+    this.timestampHelper.resolve(commandEncoder);
+
     const commandBuffer = commandEncoder.finish();
     this.device.queue.submit([commandBuffer]);
 
-    this.gpuStats.end();
+    this.timestampHelper.read().then((results) => {
+      for (let [key, result] of Object.entries(results)) {
+        this.stats.addSample(key, result);
+      }
+    });
+
+    //this.gpuStats.end();
   }
 }
\ No newline at end of file