Add dynamic shader generation

frontend/src/scripts/drawing/graphics-library/frame-buffer/default-frame-buffer.ts

@@ -0,0 +1,23 @@
+import { IProgram } from '../program/i-program';
+import { FrameBuffer } from './frame-buffer';
+
+export class DefaultFrameBuffer extends FrameBuffer {
+  constructor(gl: WebGL2RenderingContext, programs: Array<IProgram>) {
+    super(gl, programs);
+    this.frameBuffer = null;
+
+    this.setSize();
+  }
+
+  public setSize() {
+    super.setSize();
+
+    if (
+      this.gl.canvas.width !== this.size.x ||
+      this.gl.canvas.height !== this.size.y
+    ) {
+      this.gl.canvas.width = this.size.x;
+      this.gl.canvas.height = this.size.y;
+    }
+  }
+}

frontend/src/scripts/drawing/graphics-library/frame-buffer/frame-buffer.ts

@@ -0,0 +1,47 @@
+import { vec2 } from 'gl-matrix';
+import { IProgram } from '../program/i-program';
+
+export abstract class FrameBuffer {
+  public renderScale = 1;
+  public enableHighDpiRendering = false;
+
+  protected size: vec2;
+  protected frameBuffer: WebGLFramebuffer;
+
+  constructor(
+    protected gl: WebGL2RenderingContext,
+    protected programs: Array<IProgram>
+  ) {}
+
+  public render(uniforms: any, colorInput?: WebGLTexture) {
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.frameBuffer);
+
+    if (colorInput !== null) {
+      this.gl.bindTexture(this.gl.TEXTURE_2D, colorInput);
+    }
+
+    this.gl.viewport(0, 0, this.size.x, this.size.y);
+    this.gl.clearColor(0, 0, 0, 0);
+    this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+
+    this.programs.forEach((p) => {
+      p.bindAndSetUniforms(uniforms);
+      p.draw();
+    });
+  }
+
+  public setSize() {
+    const realToCssPixels = window.devicePixelRatio * this.renderScale;
+    const canvasWidth = (this.gl.canvas as HTMLCanvasElement).clientWidth;
+    const canvasHeight = (this.gl.canvas as HTMLCanvasElement).clientHeight;
+
+    const displayWidth = Math.floor(canvasWidth * realToCssPixels);
+    const displayHeight = Math.floor(canvasHeight * realToCssPixels);
+
+    this.size = vec2.fromValues(displayWidth, displayHeight);
+  }
+
+  public getSize(): vec2 {
+    return this.size;
+  }
+}

frontend/src/scripts/drawing/graphics-library/frame-buffer/intermediate-frame-buffer.ts

@@ -0,0 +1,76 @@
+import { IProgram } from '../program/i-program';
+import { FrameBuffer } from './frame-buffer';
+
+export class IntermediateFrameBuffer extends FrameBuffer {
+  private frameTexture: WebGLTexture;
+
+  constructor(gl: WebGL2RenderingContext, programs: Array<IProgram>) {
+    super(gl, programs);
+
+    this.frameTexture = this.gl.createTexture();
+    this.configureTexture();
+
+    this.frameBuffer = this.gl.createFramebuffer();
+    this.configureFrameBuffer();
+
+    this.setSize();
+  }
+
+  public get colorTexture(): WebGLTexture {
+    return this.frameTexture;
+  }
+
+  public setSize() {
+    super.setSize();
+
+    this.gl.bindTexture(this.gl.TEXTURE_2D, this.frameTexture);
+
+    this.gl.texImage2D(
+      this.gl.TEXTURE_2D,
+      0,
+      this.gl.RGBA,
+      this.size.x,
+      this.size.y,
+      0,
+      this.gl.RGBA,
+      this.gl.UNSIGNED_BYTE,
+      null
+    );
+  }
+
+  private configureTexture() {
+    this.gl.bindTexture(this.gl.TEXTURE_2D, this.frameTexture);
+    this.gl.texParameteri(
+      this.gl.TEXTURE_2D,
+      this.gl.TEXTURE_MAG_FILTER,
+      this.gl.LINEAR
+    );
+    this.gl.texParameteri(
+      this.gl.TEXTURE_2D,
+      this.gl.TEXTURE_MIN_FILTER,
+      this.gl.LINEAR
+    );
+    this.gl.texParameteri(
+      this.gl.TEXTURE_2D,
+      this.gl.TEXTURE_WRAP_S,
+      this.gl.CLAMP_TO_EDGE
+    );
+    this.gl.texParameteri(
+      this.gl.TEXTURE_2D,
+      this.gl.TEXTURE_WRAP_T,
+      this.gl.CLAMP_TO_EDGE
+    );
+  }
+
+  private configureFrameBuffer() {
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.frameBuffer);
+    const attachmentPoint = this.gl.COLOR_ATTACHMENT0;
+    this.gl.framebufferTexture2D(
+      this.gl.FRAMEBUFFER,
+      attachmentPoint,
+      this.gl.TEXTURE_2D,
+      this.frameTexture,
+      0
+    );
+  }
+}

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

@@ -0,0 +1,22 @@
+export const createShader = (
+  gl: WebGL2RenderingContext,
+  type: GLenum,
+  source: string,
+  substitutions: { [name: string]: string }
+): WebGLShader => {
+  source = source.replace(
+    /{(.+)}/gm,
+    (_, name: string): string => substitutions[name]
+  );
+
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+
+  if (!success) {
+    throw new Error(gl.getShaderInfoLog(shader));
+  }
+
+  return shader;
+};

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

@@ -0,0 +1,91 @@
+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);
+  }
+};

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

@@ -0,0 +1,63 @@
+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;
+  }
+}

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

@@ -0,0 +1,52 @@
+import { Program } from './program';
+
+export class FragmentShaderOnlyProgram extends Program {
+  private vao: WebGLVertexArrayObject;
+
+  constructor(
+    gl: WebGL2RenderingContext,
+    vertexShaderSource: string,
+    fragmentShaderSource: string,
+    substitutions: { [name: string]: string }
+  ) {
+    super(gl, vertexShaderSource, fragmentShaderSource, substitutions);
+    this.prepareScreenQuad('a_position');
+  }
+
+  public bind() {
+    super.bind();
+    this.gl.bindVertexArray(this.vao);
+  }
+
+  public draw() {
+    this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+  }
+
+  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/program/i-program.ts

@@ -0,0 +1,5 @@
+export interface IProgram {
+  bindAndSetUniforms(values: { [name: string]: any }): void;
+  draw(): void;
+  delete(): void;
+}

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

@@ -0,0 +1,116 @@
+import { createShader } from '../helper/create-shader';
+import { loadUniform } from '../helper/load-uniform';
+import { IProgram } from './i-program';
+
+export abstract class Program implements IProgram {
+  protected program: WebGLProgram;
+  private shaders: Array<WebGLShader> = [];
+
+  private uniforms: Array<{
+    name: Array<string>;
+    location: WebGLUniformLocation;
+    type: GLenum;
+  }> = [];
+
+  constructor(
+    protected gl: WebGL2RenderingContext,
+    vertexShaderSource: string,
+    fragmentShaderSource: string,
+    substitutions: { [name: string]: string }
+  ) {
+    this.createProgram(vertexShaderSource, fragmentShaderSource, substitutions);
+    this.queryUniforms();
+  }
+
+  public bindAndSetUniforms(values: { [name: string]: any }) {
+    this.bind();
+    this.setUniforms(values);
+  }
+
+  public bind() {
+    this.gl.useProgram(this.program);
+  }
+
+  public setUniforms(values: { [name: string]: 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);
+      }
+    });
+  }
+
+  public delete() {
+    this.shaders.forEach((s) => this.gl.deleteShader(s));
+    this.gl.deleteProgram(this.program);
+  }
+
+  public abstract draw(): void;
+
+  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,
+      });
+    }
+
+    this.uniforms.map((u1) => {
+      const isSingle =
+        this.uniforms.filter((u2) => u2.name.includes(u1.name[0])).length == 1;
+      if (u1.name.includes('0') && isSingle) {
+        u1.name = u1.name.slice(0, -1);
+      }
+      return u1;
+    });
+  }
+
+  private createProgram(
+    passthroughVertexShaderSource: string,
+    fragmentShaderSource: string,
+    substitutions: { [name: string]: string }
+  ) {
+    this.program = this.gl.createProgram();
+
+    const vertexShader = createShader(
+      this.gl,
+      this.gl.VERTEX_SHADER,
+      passthroughVertexShaderSource,
+      substitutions
+    );
+    this.gl.attachShader(this.program, vertexShader);
+    this.shaders.push(vertexShader);
+
+    const fragmentShader = createShader(
+      this.gl,
+      this.gl.FRAGMENT_SHADER,
+      fragmentShaderSource,
+      substitutions
+    );
+    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));
+    }
+  }
+}

frontend/src/scripts/drawing/graphics-library/program/uniform-array-autoscaling-program.ts

@@ -0,0 +1,76 @@
+import { InfoText } from '../../../objects/types/info-text';
+import { FragmentShaderOnlyProgram } from './fragment-shader-only-program';
+import { IProgram } from './i-program';
+
+export class UniformArrayAutoScalingProgram implements IProgram {
+  private programs: Array<{
+    program: FragmentShaderOnlyProgram;
+    value: number;
+  }> = [];
+  private current: FragmentShaderOnlyProgram;
+
+  constructor(
+    private gl: WebGL2RenderingContext,
+    private vertexShaderSource: string,
+    private fragmentShaderSource: string,
+    private options: {
+      getValueFromUniforms: (values: { [name: string]: any }) => number;
+      uniformArraySizeName: string;
+      startingValue: number;
+      steps: number;
+      maximumValue: number;
+    }
+  ) {
+    for (
+      let i = options.startingValue;
+      i < options.maximumValue;
+      i += options.steps
+    ) {
+      this.createProgram(i);
+    }
+  }
+
+  bindAndSetUniforms(values: { [name: string]: any }): void {
+    let value = this.options.getValueFromUniforms(values);
+    value = Math.min(this.options.maximumValue, value);
+
+    InfoText.modifyRecord(this.options.uniformArraySizeName, value.toString());
+
+    const closest = this.programs.find(
+      (p) => value < p.value && value + this.options.steps >= p.value
+    );
+    if (closest) {
+      this.current = closest.program;
+    } else {
+      this.current = this.createProgram(value + this.options.steps);
+    }
+
+    this.current.bindAndSetUniforms(values);
+  }
+
+  draw(): void {
+    this.current.draw();
+  }
+
+  delete(): void {
+    this.programs.forEach((p) => p.program.delete());
+  }
+
+  private createProgram(arraySize: number): FragmentShaderOnlyProgram {
+    const program = new FragmentShaderOnlyProgram(
+      this.gl,
+      this.vertexShaderSource,
+      this.fragmentShaderSource,
+      {
+        [this.options.uniformArraySizeName]: Math.floor(arraySize).toString(),
+      }
+    );
+
+    this.programs.push({
+      program,
+      value: arraySize,
+    });
+
+    return program;
+  }
+}