Add some more WebGl

frontend/src/scripts/drawing/graphics-library/create-program.ts

@@ -1,24 +0,0 @@
-import { createShader } from './create-shader';
-
-export const createProgram = (
-  gl: WebGL2RenderingContext,
-  vertexShader: string,
-  fragmentShader: string
-): WebGLProgram => {
-  const program = gl.createProgram();
-
-  gl.attachShader(program, createShader(gl, gl.VERTEX_SHADER, vertexShader));
-  gl.attachShader(
-    program,
-    createShader(gl, gl.FRAGMENT_SHADER, fragmentShader)
-  );
-  gl.linkProgram(program);
-
-  const success = gl.getProgramParameter(program, gl.LINK_STATUS);
-  if (success) {
-    return program;
-  }
-
-  console.log(gl.getProgramInfoLog(program));
-  gl.deleteProgram(program);
-};

frontend/src/scripts/drawing/graphics-library/create-shader.ts

@@ -7,10 +7,10 @@ export const createShader = (
   gl.shaderSource(shader, source);
   gl.compileShader(shader);
   const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
-  if (success) {
-    return shader;
+
+  if (!success) {
+    throw new Error(gl.getShaderInfoLog(shader));
   }
 
-  console.log(gl.getShaderInfoLog(shader));
-  gl.deleteShader(shader);
+  return shader;
 };

frontend/src/scripts/drawing/graphics-library/fragment-shader-only-program.ts

@@ -0,0 +1,121 @@
+import passthroughVertexShader from '../../../shaders/passthrough-vs.glsl';
+import { createShader } from './create-shader';
+import { loadUniform } from './load-uniform';
+
+export class FragmentShaderOnlyProgram {
+  program: WebGLProgram;
+  shaders: Array<WebGLShader> = [];
+
+  private vao: WebGLVertexArrayObject;
+  private uniforms: Array<{
+    name: Array<string>;
+    location: WebGLUniformLocation;
+    type: GLenum;
+  }> = [];
+
+  constructor(
+    private gl: WebGL2RenderingContext,
+    fragmentShaderSource: string
+  ) {
+    this.createProgram(fragmentShaderSource);
+    this.prepareScreenQuad('a_position');
+    this.queryUniforms();
+  }
+
+  public bind() {
+    this.gl.useProgram(this.program);
+    this.gl.bindVertexArray(this.vao);
+  }
+
+  public draw() {
+    this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+  }
+
+  public setUniforms(values: any) {
+    this.uniforms.forEach(({ name, location, type }) => {
+      const value = name.reduce(
+        (prev, prop) => (prev !== null && prop in prev ? prev[prop] : null),
+        values
+      );
+
+      if (value !== null) {
+        loadUniform(this.gl, value, type, location);
+      }
+    });
+  }
+
+  private queryUniforms() {
+    const uniformCount = this.gl.getProgramParameter(
+      this.program,
+      WebGL2RenderingContext.ACTIVE_UNIFORMS
+    );
+
+    for (let i = 0; i < uniformCount; i++) {
+      const glUniform = this.gl.getActiveUniform(this.program, i);
+
+      this.uniforms.push({
+        name: glUniform.name.split(/\[|\]\.|\]|\./).filter((p) => p !== ''),
+        location: this.gl.getUniformLocation(this.program, glUniform.name),
+        type: glUniform.type,
+      });
+    }
+  }
+
+  private createProgram(fragmentShaderSource: string) {
+    this.program = this.gl.createProgram();
+
+    const vertexShader = createShader(
+      this.gl,
+      this.gl.VERTEX_SHADER,
+      passthroughVertexShader
+    );
+    this.gl.attachShader(this.program, vertexShader);
+    this.shaders.push(vertexShader);
+
+    const fragmentShader = createShader(
+      this.gl,
+      this.gl.FRAGMENT_SHADER,
+      fragmentShaderSource
+    );
+    this.gl.attachShader(this.program, fragmentShader);
+    this.shaders.push(fragmentShader);
+
+    this.gl.linkProgram(this.program);
+
+    const success = this.gl.getProgramParameter(
+      this.program,
+      this.gl.LINK_STATUS
+    );
+    if (!success) {
+      throw new Error(this.gl.getProgramInfoLog(this.program));
+    }
+  }
+
+  private prepareScreenQuad(attributeName: string) {
+    const positionAttributeLocation = this.gl.getAttribLocation(
+      this.program,
+      attributeName
+    );
+
+    const positionBuffer = this.gl.createBuffer();
+
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer);
+    this.gl.bufferData(
+      this.gl.ARRAY_BUFFER,
+      new Float32Array([-1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0]),
+      this.gl.STATIC_DRAW
+    );
+    this.vao = this.gl.createVertexArray();
+
+    this.gl.bindVertexArray(this.vao);
+    this.gl.enableVertexAttribArray(positionAttributeLocation);
+    this.gl.vertexAttribPointer(
+      positionAttributeLocation,
+      2,
+      this.gl.FLOAT,
+      false,
+      0,
+      0
+    );
+  }
+}

frontend/src/scripts/drawing/graphics-library/load-uniform.ts

@@ -0,0 +1,41 @@
+import { Vec2 } from '../../math/vec2';
+import { Mat3 } from '../../math/mat3';
+
+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) =>
+      gl.uniform1f(l, v)
+    );
+
+    converters.set(WebGL2RenderingContext.FLOAT_VEC2, (gl, v: Vec2, l) =>
+      gl.uniform2fv(l, new Float32Array(v.list))
+    );
+
+    converters.set(WebGL2RenderingContext.FLOAT_MAT3, (gl, v: Mat3, l) =>
+      gl.uniformMatrix3fv(l, false, new Float32Array(v.transposedFlat))
+    );
+
+    converters.set(WebGL2RenderingContext.BOOL, (gl, v, l) =>
+      gl.uniform1i(l, v)
+    );
+
+    if (!converters.has(type)) {
+      throw new Error('Unimplemented webgl type');
+    }
+
+    converters.get(type)(gl, value, location);
+  }
+};

frontend/src/scripts/drawing/graphics-library/prepare-screen-quad.ts

@@ -1,26 +0,0 @@
-export const prepareScreenQuad = (
-  gl: WebGL2RenderingContext,
-  program: WebGLProgram,
-  attributeName: string
-): WebGLVertexArrayObject => {
-  const positionAttributeLocation = gl.getAttribLocation(
-    program,
-    attributeName
-  );
-
-  const positionBuffer = gl.createBuffer();
-
-  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-  gl.bufferData(
-    gl.ARRAY_BUFFER,
-    new Float32Array([-1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0]),
-    gl.STATIC_DRAW
-  );
-  const vao = gl.createVertexArray();
-
-  gl.bindVertexArray(vao);
-  gl.enableVertexAttribArray(positionAttributeLocation);
-  gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
-
-  return vao;
-};

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;
+  }
+}