Refactor rendering

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

@@ -1,15 +1,16 @@
+import { settings } from '../../settings';
+
 export const createShader = (
   gl: WebGL2RenderingContext,
   type: GLenum,
   source: string,
   substitutions: { [name: string]: string }
 ): WebGLShader => {
+  const allSubstitutions = { ...settings.shaderMacros, ...substitutions };
+
   source = source.replace(/{(.+)}/gm, (_, name: string): string => {
-    const value = substitutions[name];
-    if (Number.isInteger(value)) {
-      return `${value}.0`;
-    }
-    return value;
+    const value = allSubstitutions[name];
+    return Number.isInteger(value) ? `${value}.0` : value;
   });
 
   const shader = gl.createShader(type);

frontend/src/scripts/drawing/graphics-library/helper/get-webgl2-context.ts

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

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

@@ -5,11 +5,10 @@ export class FragmentShaderOnlyProgram extends Program {
 
   constructor(
     gl: WebGL2RenderingContext,
-    vertexShaderSource: string,
-    fragmentShaderSource: string,
+    shaderSources: [string, string],
     substitutions: { [name: string]: string }
   ) {
-    super(gl, vertexShaderSource, fragmentShaderSource, substitutions);
+    super(gl, shaderSources, substitutions);
     this.prepareScreenQuad('vertexPosition');
   }
 

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

@@ -1,8 +1,8 @@
 import { vec2 } from 'gl-matrix';
 
 export interface IProgram {
-  bindAndSetUniforms(values: { [name: string]: any }): void;
   setDrawingRectangle(topLeft: vec2, size: vec2): void;
+  bindAndSetUniforms(values: { [name: string]: any }): void;
   draw(): void;
   delete(): void;
 }

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

@@ -17,8 +17,7 @@ export abstract class Program implements IProgram {
 
   constructor(
     protected gl: WebGL2RenderingContext,
-    vertexShaderSource: string,
-    fragmentShaderSource: string,
+    [vertexShaderSource, fragmentShaderSource]: [string, string],
     substitutions: { [name: string]: string }
   ) {
     this.createProgram(vertexShaderSource, fragmentShaderSource, substitutions);

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

@@ -1,11 +1,14 @@
 import { vec2 } from 'gl-matrix';
 import { FragmentShaderOnlyProgram } from './fragment-shader-only-program';
 import { IProgram } from './i-program';
+import { last } from '../../../helper/last';
+import { getCombinations } from '../../../helper/get-combinations';
+import { IDrawableDescriptor } from '../../drawables/i-drawable-descriptor';
 
 export class UniformArrayAutoScalingProgram implements IProgram {
   private programs: Array<{
     program: FragmentShaderOnlyProgram;
-    value: number;
+    values: Array<number>;
   }> = [];
   private current: FragmentShaderOnlyProgram;
 
@@ -14,45 +17,33 @@ export class UniformArrayAutoScalingProgram implements IProgram {
 
   constructor(
     private gl: WebGL2RenderingContext,
-    private vertexShaderSource: string,
-    private fragmentShaderSource: string,
-    private substitutions: { [name: string]: any },
-    private options: {
-      getValueFromUniforms: (values: { [name: string]: any }) => number;
-      uniformArraySizeName: string;
-      enablingMacro: string;
-      startingValue: number;
-      steps: number;
-      maximumValue: number;
-    }
+    shaderSources: [string, string],
+    private options: Array<IDrawableDescriptor>
   ) {
-    for (
-      let i = options.startingValue;
-      i < options.maximumValue;
-      i += options.steps
-    ) {
-      this.createProgram(i);
+    const names = options.map((o) => o.countMacroName);
+    for (let combination of getCombinations(
+      options.map((o) => o.shaderCombinationSteps)
+    )) {
+      this.createProgram(names, combination, shaderSources);
     }
   }
 
-  public bindAndSetUniforms(values: { [name: string]: any }): void {
-    let value = this.options.getValueFromUniforms(values);
-    value = Math.min(this.options.maximumValue, value);
-
-    const closest = this.programs.find(
-      (p) => value < p.value && value + this.options.steps >= p.value
+  public bindAndSetUniforms(uniforms: { [name: string]: any }): void {
+    let values = this.options.map((o) =>
+      uniforms[o.uniformName] ? uniforms[o.uniformName].length : 0
     );
-    if (closest) {
-      this.current = closest.program;
-    } else {
-      this.current = this.createProgram(value + this.options.steps);
-    }
+
+    const closest = this.programs.find((p) =>
+      p.values.every((v, i) => v > values[i])
+    );
+
+    this.current = closest ? closest.program : last(this.programs).program;
 
     this.current.setDrawingRectangle(
       this.drawingRectangleTopLeft,
       this.drawingRectangleSize
     );
-    this.current.bindAndSetUniforms(values);
+    this.current.bindAndSetUniforms(uniforms);
   }
 
   public setDrawingRectangle(topLeft: vec2, size: vec2) {
@@ -68,21 +59,23 @@ export class UniformArrayAutoScalingProgram implements IProgram {
     this.programs.forEach((p) => p.program.delete());
   }
 
-  private createProgram(arraySize: number): FragmentShaderOnlyProgram {
+  private createProgram(
+    names: Array<string>,
+    combination: Array<number>,
+    shaderSources: [string, string]
+  ): FragmentShaderOnlyProgram {
+    const substitutions = {};
+    names.forEach((v, i) => (substitutions[v] = combination[i].toString()));
+
     const program = new FragmentShaderOnlyProgram(
       this.gl,
-      this.vertexShaderSource,
-      this.fragmentShaderSource,
-      {
-        [this.options.uniformArraySizeName]: Math.floor(arraySize).toString(),
-        [this.options.enablingMacro]: arraySize > 0 ? '1' : '0',
-        ...this.substitutions,
-      }
+      shaderSources,
+      substitutions
     );
 
     this.programs.push({
       program,
-      value: arraySize,
+      values: combination,
     });
 
     return program;