use correct timing-helper.js

greggman · May 28, 2024 · fdcea4f · fdcea4f
1 parent e1c8fc5
commit fdcea4f
Show file tree

Hide file tree

Showing 13 changed files with 61 additions and 131 deletions.
diff --git a/webgpu/resources/js/rolling-average.js b/webgpu/resources/js/rolling-average.js
@@ -0,0 +1,20 @@
+// See https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
+export default class RollingAverage {
+  #total = 0;
+  #samples = [];
+  #cursor = 0;
+  #numSamples;
+  constructor(numSamples = 30) {
+    this.#numSamples = numSamples;
+  }
+  addSample(v) {
+    if (!Number.isNaN(v) && Number.isFinite(v)) {
+      this.#total += v - (this.#samples[this.#cursor] || 0);
+      this.#samples[this.#cursor] = v;
+      this.#cursor = (this.#cursor + 1) % this.#numSamples;
+    }
+  }
+  get() {
+    return this.#total / this.#samples.length;
+  }
+}
diff --git a/webgpu/resources/js/timing-helper.js b/webgpu/resources/js/timing-helper.js
@@ -4,6 +4,7 @@ function assert(cond, msg = '') {
   }
 }
 
+// See https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
 export default class TimingHelper {
   #canTimestamp;
   #device;

diff --git a/webgpu/timing-helper.js b/webgpu/timing-helper.js
diff --git a/webgpu/webgpu-optimization-all.html b/webgpu/webgpu-optimization-all.html
@@ -45,7 +45,10 @@
   <script type="module">
 import GUI from '../3rdparty/muigui-0.x.module.js';
 import {mat4, mat3, vec3} from '../3rdparty/wgpu-matrix.module.js';
-import {RollingAverage, TimingHelper} from './timing-helper.js';
+// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
+import TimingHelper from './resources/js/timing-helper.js';
+// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
+import RollingAverage from './resources/js/rolling-average.js';
 
 const fpsAverage = new RollingAverage();
 const jsAverage = new RollingAverage();

diff --git a/webgpu/webgpu-optimization-none.html b/webgpu/webgpu-optimization-none.html
@@ -45,7 +45,10 @@
   <script type="module">
 import GUI from '../3rdparty/muigui-0.x.module.js';
 import {mat4, mat3, vec3} from '../3rdparty/wgpu-matrix.module.js';
-import {RollingAverage, TimingHelper} from './timing-helper.js';
+// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
+import TimingHelper from './resources/js/timing-helper.js';
+// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
+import RollingAverage from './resources/js/rolling-average.js';
 
 const fpsAverage = new RollingAverage();
 const jsAverage = new RollingAverage();

diff --git a/webgpu/webgpu-optimization-step3-global-vs-per-object-uniforms.html b/webgpu/webgpu-optimization-step3-global-vs-per-object-uniforms.html
@@ -45,7 +45,10 @@
   <script type="module">
 import GUI from '../3rdparty/muigui-0.x.module.js';
 import {mat4, mat3, vec3} from '../3rdparty/wgpu-matrix.module.js';
-import {RollingAverage, TimingHelper} from './timing-helper.js';
+// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
+import TimingHelper from './resources/js/timing-helper.js';
+// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
+import RollingAverage from './resources/js/rolling-average.js';
 
 const fpsAverage = new RollingAverage();
 const jsAverage = new RollingAverage();

diff --git a/webgpu/webgpu-optimization-step4-material-uniforms.html b/webgpu/webgpu-optimization-step4-material-uniforms.html
@@ -45,7 +45,10 @@
   <script type="module">
 import GUI from '../3rdparty/muigui-0.x.module.js';
 import {mat4, mat3, vec3} from '../3rdparty/wgpu-matrix.module.js';
-import {RollingAverage, TimingHelper} from './timing-helper.js';
+// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
+import TimingHelper from './resources/js/timing-helper.js';
+// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
+import RollingAverage from './resources/js/rolling-average.js';
 
 const fpsAverage = new RollingAverage();
 const jsAverage = new RollingAverage();

diff --git a/webgpu/webgpu-optimization-step5-double-buffer-frequenly-updated-uniform-buffers.html b/webgpu/webgpu-optimization-step5-double-buffer-frequenly-updated-uniform-buffers.html
@@ -45,7 +45,10 @@
   <script type="module">
 import GUI from '../3rdparty/muigui-0.x.module.js';
 import {mat4, mat3, vec3} from '../3rdparty/wgpu-matrix.module.js';
-import {RollingAverage, TimingHelper} from './timing-helper.js';
+// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
+import TimingHelper from './resources/js/timing-helper.js';
+// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
+import RollingAverage from './resources/js/rolling-average.js';
 
 const fpsAverage = new RollingAverage();
 const jsAverage = new RollingAverage();

diff --git a/webgpu/webgpu-optimization-step5-use-buffer-offsets.html b/webgpu/webgpu-optimization-step5-use-buffer-offsets.html
@@ -45,7 +45,10 @@
   <script type="module">
 import GUI from '../3rdparty/muigui-0.x.module.js';
 import {mat4, mat3, vec3} from '../3rdparty/wgpu-matrix.module.js';
-import {RollingAverage, TimingHelper} from './timing-helper.js';
+// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
+import TimingHelper from './resources/js/timing-helper.js';
+// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
+import RollingAverage from './resources/js/rolling-average.js';
 
 const fpsAverage = new RollingAverage();
 const jsAverage = new RollingAverage();

diff --git a/webgpu/webgpu-optimization-step6-use-mapped-buffers.html b/webgpu/webgpu-optimization-step6-use-mapped-buffers.html
@@ -45,7 +45,10 @@
   <script type="module">
 import GUI from '../3rdparty/muigui-0.x.module.js';
 import {mat4, mat3, vec3} from '../3rdparty/wgpu-matrix.module.js';
-import {RollingAverage, TimingHelper} from './timing-helper.js';
+// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
+import TimingHelper from './resources/js/timing-helper.js';
+// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
+import RollingAverage from './resources/js/rolling-average.js';
 
 const fpsAverage = new RollingAverage();
 const jsAverage = new RollingAverage();

diff --git a/webgpu/webgpu-optimization-step7-double-buffer-typedarray-set-count-100.html b/webgpu/webgpu-optimization-step7-double-buffer-typedarray-set-count-100.html
@@ -45,7 +45,10 @@
   <script type="module">
 import GUI from '../3rdparty/muigui-0.x.module.js';
 import {mat4, mat3, vec3} from '../3rdparty/wgpu-matrix.module.js';
-import {RollingAverage, TimingHelper} from './timing-helper.js';
+// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
+import TimingHelper from './resources/js/timing-helper.js';
+// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
+import RollingAverage from './resources/js/rolling-average.js';
 
 const fpsAverage = new RollingAverage();
 const jsAverage = new RollingAverage();

diff --git a/webgpu/webgpu-optimization-step7-double-buffer-typedarray-set.html b/webgpu/webgpu-optimization-step7-double-buffer-typedarray-set.html
@@ -45,7 +45,10 @@
   <script type="module">
 import GUI from '../3rdparty/muigui-0.x.module.js';
 import {mat4, mat3, vec3} from '../3rdparty/wgpu-matrix.module.js';
-import {RollingAverage, TimingHelper} from './timing-helper.js';
+// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
+import TimingHelper from './resources/js/timing-helper.js';
+// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
+import RollingAverage from './resources/js/rolling-average.js';
 
 const fpsAverage = new RollingAverage();
 const jsAverage = new RollingAverage();

diff --git a/webgpu/webgpu-optimization-step7-double-buffer.html b/webgpu/webgpu-optimization-step7-double-buffer.html
@@ -45,7 +45,10 @@
   <script type="module">
 import GUI from '../3rdparty/muigui-0.x.module.js';
 import {mat4, mat3, vec3} from '../3rdparty/wgpu-matrix.module.js';
-import {RollingAverage, TimingHelper} from './timing-helper.js';
+// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
+import TimingHelper from './resources/js/timing-helper.js';
+// see https://webgpufundamentals.org/webgpu/lessons/webgpu-timing.html
+import RollingAverage from './resources/js/rolling-average.js';
 
 const fpsAverage = new RollingAverage();
 const jsAverage = new RollingAverage();