Add files

src/graphics/graphics-library/helper/enable-extension.ts

@@ -0,0 +1,39 @@
+const extensions: Map<string, any> = new Map();
+
+const printExtensions = () => {
+  const values = {};
+  for (const [k, v] of extensions.entries()) {
+    values[k] = v !== null;
+  }
+  //InfoText.modifyRecord('extensions', values);
+};
+
+export const tryEnableExtension = (
+  gl: WebGL2RenderingContext,
+  name: string
+): any | null => {
+  if (extensions.has(name)) {
+    return extensions.get(name);
+  }
+
+  let extension = null;
+  if (gl.getSupportedExtensions()!.indexOf(name) != -1) {
+    extension = gl.getExtension(name);
+  }
+
+  extensions.set(name, extension);
+
+  printExtensions();
+
+  return extension;
+};
+
+export const enableExtension = (gl: WebGL2RenderingContext, name: string): any => {
+  const extension = tryEnableExtension(gl, name);
+
+  if (extension === null) {
+    throw new Error(`Unsupported extension ${name}`);
+  }
+
+  return extension;
+};

src/graphics/graphics-library/helper/get-webgl2-context.ts

@@ -0,0 +1,9 @@
+export const getWebGl2Context = (canvas: HTMLCanvasElement): WebGL2RenderingContext => {
+  const gl = canvas.getContext('webgl2');
+
+  if (!gl) {
+    throw new Error('WebGl2 is not supported');
+  }
+
+  return gl;
+};

src/graphics/graphics-library/helper/load-uniform.ts

@@ -0,0 +1,82 @@
+import { mat3, ReadonlyVec3, vec2, vec3 } from 'gl-matrix';
+
+const loaderMat3 = mat3.create();
+
+export const loadUniform = (
+  gl: WebGL2RenderingContext,
+  value: any,
+  type: GLenum,
+  location: WebGLUniformLocation
+): any => {
+  const converters: Map<
+    GLenum,
+    (gl: WebGL2RenderingContext, value: any, location: WebGLUniformLocation) => void
+  > = new Map();
+  {
+    converters.set(WebGL2RenderingContext.FLOAT, (gl, v, l) => {
+      if (v instanceof Array) {
+        if (v.length == 0) {
+          return;
+        }
+
+        gl.uniform1fv(l, new Float32Array(v));
+      } else {
+        gl.uniform1f(l, v);
+      }
+    });
+
+    converters.set(WebGL2RenderingContext.FLOAT_VEC2, (gl, v: vec2 | Array<vec2>, l) => {
+      if (v.length == 0) {
+        return;
+      }
+
+      if (v[0] instanceof Array) {
+        const result = new Float32Array(v.length * 2);
+
+        for (let i = 0; i < v.length; i++) {
+          result[2 * i] = (v[i] as Array<number>).x;
+          result[2 * i + 1] = (v[i] as Array<number>).y;
+        }
+
+        gl.uniform2fv(l, result);
+      } else {
+        gl.uniform2fv(l, v as vec2);
+      }
+    });
+
+    converters.set(
+      WebGL2RenderingContext.FLOAT_VEC3,
+      (gl, v: ReadonlyVec3 | Array<vec3>, l) => {
+        if (v.length == 0) {
+          return;
+        }
+
+        if (v[0] instanceof Array) {
+          const result = new Float32Array(v.length * 3);
+
+          for (let i = 0; i < v.length; i++) {
+            result[3 * i] = (v[i] as Array<number>)[0];
+            result[3 * i + 1] = (v[i] as Array<number>)[1];
+            result[3 * i + 2] = (v[i] as Array<number>)[2];
+          }
+
+          gl.uniform3fv(l, result);
+        } else {
+          gl.uniform3fv(l, v as vec3);
+        }
+      }
+    );
+
+    converters.set(WebGL2RenderingContext.FLOAT_MAT3, (gl, v, l) => {
+      gl.uniformMatrix3fv(l, true, mat3.fromMat2d(loaderMat3, v));
+    });
+
+    converters.set(WebGL2RenderingContext.BOOL, (gl, v, l) => gl.uniform1i(l, v));
+
+    if (!converters.has(type)) {
+      throw new Error(`Unimplemented webgl type: ${type}`);
+    }
+
+    converters.get(type)!(gl, value, location);
+  }
+};

src/graphics/graphics-library/helper/stopwatch.ts

@@ -0,0 +1,49 @@
+import { enableExtension } from './enable-extension';
+
+// 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) {
+    this.timerExtension = enableExtension(gl, '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;
+  }
+}