Adding timestamp tracking and switch to Tweakpane

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/[email protected]/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,69 +82,76 @@
         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',
         'Single staging buffer re-mapped each frame': 'singleStaging',
         '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();
 

js/renderer.js

@@ -156,15 +156,15 @@ export class Renderer {
       if (this.frameCount % 200 == 0) { return; }
 
       if (this.stats) {
-        this.stats.begin();
+        this.stats.beginFrame();
       }
 
       this.beforeFrame(timestamp, timeDelta);
 
       this.onFrame(timestamp, timeDelta);
 
       if (this.stats) {
-        this.stats.end();
+        this.stats.endFrame();
       }
     };