Organize imports and work on integrating lighting

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

@@ -1,4 +1,3 @@
-import passthroughVertexShader from '../../../shaders/passthrough-vs.glsl';
 import { createShader } from './create-shader';
 import { loadUniform } from './load-uniform';
 
@@ -15,9 +14,10 @@ export class FragmentShaderOnlyProgram {
 
   constructor(
     private gl: WebGL2RenderingContext,
+    passthroughVertexShaderSource: string,
     fragmentShaderSource: string
   ) {
-    this.createProgram(fragmentShaderSource);
+    this.createProgram(passthroughVertexShaderSource, fragmentShaderSource);
     this.prepareScreenQuad('a_position');
     this.queryUniforms();
   }
@@ -74,13 +74,16 @@ export class FragmentShaderOnlyProgram {
     console.log(this.uniforms);
   }
 
-  private createProgram(fragmentShaderSource: string) {
+  private createProgram(
+    passthroughVertexShaderSource: string,
+    fragmentShaderSource: string
+  ) {
     this.program = this.gl.createProgram();
 
     const vertexShader = createShader(
       this.gl,
       this.gl.VERTEX_SHADER,
-      passthroughVertexShader
+      passthroughVertexShaderSource
     );
     this.gl.attachShader(this.program, vertexShader);
     this.shaders.push(vertexShader);

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

@@ -18,18 +18,27 @@ export const loadUniform = (
   > = new Map();
   {
     converters.set(WebGL2RenderingContext.FLOAT, (gl, v, l) => {
+      if (v.length == 0) {
+        return;
+      }
       gl.uniform1fv(l, new Float32Array(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, new Float32Array(result));
         } else {
           gl.uniform2fv(l, v as vec2);

frontend/src/scripts/drawing/webgl2-renderer.ts

@@ -1,16 +1,14 @@
-import { Drawer } from './drawer';
-import { mat2d, vec2, mat2, mat3 } from 'gl-matrix';
-import { FragmentShaderOnlyProgram } from './graphics-library/fragment-shader-only-program';
-import { WebGlStopwatch } from './graphics-library/stopwatch';
+import { mat2d, vec2 } from 'gl-matrix';
 import { Rectangle } from '../math/rectangle';
-import { IntermediateFrameBuffer } from './graphics-library/intermediate-frame-buffer';
-import { FrameBuffer } from './graphics-library/frame-buffer';
+import { Drawer } from './drawer';
 import { DefaultFrameBuffer } from './graphics-library/default-frame-buffer';
-import { translate } from 'gl-matrix/src/gl-matrix/mat2d';
+import { FragmentShaderOnlyProgram } from './graphics-library/fragment-shader-only-program';
+import { IntermediateFrameBuffer } from './graphics-library/intermediate-frame-buffer';
+import { WebGlStopwatch } from './graphics-library/stopwatch';
 
 export class WebGl2Renderer implements Drawer {
   private gl: WebGL2RenderingContext;
-  private stopwatch: WebGlStopwatch;
+  private stopwatch?: WebGlStopwatch;
 
   private viewBox: Rectangle = new Rectangle();
   private uniforms: any;
@@ -21,7 +19,7 @@ export class WebGl2Renderer implements Drawer {
   constructor(
     private canvas: HTMLCanvasElement,
     private overlay: HTMLElement,
-    shaderSources: Array<string>
+    shaderSources: Array<[string, string]>
   ) {
     this.gl = this.canvas.getContext('webgl2');
     if (!this.gl) {
@@ -29,14 +27,14 @@ export class WebGl2Renderer implements Drawer {
     }
 
     this.distanceFieldFrameBuffer = new IntermediateFrameBuffer(this.gl, [
-      new FragmentShaderOnlyProgram(this.gl, shaderSources[0]),
+      new FragmentShaderOnlyProgram(this.gl, ...shaderSources[0]),
     ]);
 
     this.lightingFrameBuffer = new DefaultFrameBuffer(this.gl, [
-      new FragmentShaderOnlyProgram(this.gl, shaderSources[1]),
+      new FragmentShaderOnlyProgram(this.gl, ...shaderSources[1]),
     ]);
 
-    this.distanceFieldFrameBuffer.renderScale = 0.2;
+    this.distanceFieldFrameBuffer.renderScale = 1;
     this.lightingFrameBuffer.renderScale = 1;
 
     try {
@@ -44,7 +42,7 @@ export class WebGl2Renderer implements Drawer {
     } catch {}
   }
 
-  startFrame(): void {
+  public startFrame(): void {
     this.stopwatch?.start();
     this.uniforms = {};
     this.distanceFieldFrameBuffer.setSize();
@@ -52,15 +50,31 @@ export class WebGl2Renderer implements Drawer {
   }
 
   public finishFrame() {
+    this.calculateOwnUniforms();
+
+    this.distanceFieldFrameBuffer.render(this.uniforms);
+    this.lightingFrameBuffer.render(
+      this.uniforms,
+      this.distanceFieldFrameBuffer.texture
+    );
+
+    this.stopwatch?.stop();
+  }
+
+  private calculateOwnUniforms() {
     const resolution = vec2.fromValues(this.canvas.width, this.canvas.height);
 
     const distanceScreenToWorld = this.getScreenToWorldTransform(
       this.distanceFieldFrameBuffer.getSize()
     );
 
-    const lightingScreenToWorld = this.getScreenToWorldTransform(
-      this.lightingFrameBuffer.getSize()
+    const ndcToWorld = mat2d.fromTranslation(
+      mat2d.create(),
+      this.viewBox.topLeft
     );
+    mat2d.scale(ndcToWorld, ndcToWorld, this.viewBox.size);
+    mat2d.scale(ndcToWorld, ndcToWorld, vec2.fromValues(0.5, 0.5));
+    mat2d.translate(ndcToWorld, ndcToWorld, vec2.fromValues(1, 1));
 
     const screenToWorld = this.getScreenToWorldTransform(resolution);
 
@@ -79,18 +93,10 @@ export class WebGl2Renderer implements Drawer {
 
     this.giveUniforms({
       distanceScreenToWorld,
-      lightingScreenToWorld,
       worldToDistanceUV,
       cursorPosition,
+      ndcToWorld,
     });
-
-    this.distanceFieldFrameBuffer.render(this.uniforms);
-    this.lightingFrameBuffer.render(
-      this.uniforms,
-      this.distanceFieldFrameBuffer.texture
-    );
-
-    this.stopwatch?.stop();
   }
 
   private getScreenToWorldTransform(screenSize: vec2) {