Add some more WebGl

frontend/src/scripts/drawing/graphics-library/stopwatch.ts

@@ -0,0 +1,64 @@
+import { WebGl2Renderer } from '../webgl2-renderer';
+import { InfoText } from '../../objects/types/info-text';
+
+// https://www.khronos.org/registry/webgl/extensions/EXT_disjoint_timer_query_webgl2/
+
+export class WebGlStopwatch {
+  private timerExtension: any;
+  private timerQuery: WebGLQuery;
+  private isReady = true;
+
+  private resultsInNanoSeconds: number;
+
+  constructor(private gl: WebGL2RenderingContext) {
+    if (
+      this.gl
+        .getSupportedExtensions()
+        .indexOf('EXT_disjoint_timer_query_webgl2') == -1
+    ) {
+      throw new Error('Unsupported extension');
+    }
+
+    this.timerExtension = this.gl.getExtension(
+      'EXT_disjoint_timer_query_webgl2'
+    );
+  }
+
+  public start() {
+    if (this.isReady) {
+      this.timerQuery = this.gl.createQuery();
+      this.gl.beginQuery(this.timerExtension.TIME_ELAPSED_EXT, this.timerQuery);
+    }
+  }
+
+  public stop() {
+    if (this.isReady) {
+      this.gl.endQuery(this.timerExtension.TIME_ELAPSED_EXT);
+      this.isReady = false;
+    }
+
+    const available = this.gl.getQueryParameter(
+      this.timerQuery,
+      this.gl.QUERY_RESULT_AVAILABLE
+    );
+    const disjoint = this.gl.getParameter(this.timerExtension.GPU_DISJOINT_EXT);
+
+    if (available && !disjoint) {
+      this.resultsInNanoSeconds = this.gl.getQueryParameter(
+        this.timerQuery,
+        this.gl.QUERY_RESULT
+      );
+
+      InfoText.modifyRecord(
+        'Draw time',
+        `${this.resultsInMilliSeconds.toFixed(2)} ms`
+      );
+
+      this.isReady = true;
+    }
+  }
+
+  public get resultsInMilliSeconds(): number {
+    return this.resultsInNanoSeconds / 1000 / 1000;
+  }
+}