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) {

frontend/src/scripts/game.ts

@@ -1,21 +1,21 @@
+import caveFragmentShader from '../shaders/cave-distance-fs.glsl';
+import lightsShader from '../shaders/lights-shading-fs.glsl';
+import caveVertexShader from '../shaders/passthrough-distance-vs.glsl';
+import lightsVertexShader from '../shaders/passthrough-shading-vs.glsl';
+// import lightsShader from '../shaders/rainbow-shading-fs.glsl';
+import { CommandBroadcaster } from './commands/command-broadcaster';
+import { BeforeDrawCommand } from './commands/types/before-draw';
+import { DrawCommand } from './commands/types/draw';
+import { StepCommand } from './commands/types/step';
 import { WebGl2Renderer } from './drawing/webgl2-renderer';
+import { timeIt } from './helper/timing';
 import { KeyboardListener } from './input/keyboard-listener';
 import { MouseListener } from './input/mouse-listener';
 import { TouchListener } from './input/touch-listener';
-import { CommandBroadcaster } from './commands/command-broadcaster';
 import { ObjectContainer } from './objects/object-container';
-import { DrawCommand } from './commands/types/draw';
-
-import { StepCommand } from './commands/types/step';
 import { Character } from './objects/types/character';
-import { InfoText } from './objects/types/info-text';
-import { timeIt } from './helper/timing';
-
-import caveFragmentShader from '../shaders/cave-distance-fs.glsl';
-// import lightsShader from '../shaders/rainbow-shading-fs.glsl';
-import lightsShader from '../shaders/lights-shading-fs.glsl';
 import { Dungeon } from './objects/types/dungeon';
-import { BeforeDrawCommand } from './commands/types/before-draw';
+import { InfoText } from './objects/types/info-text';
 
 export class Game {
   private previousTime: DOMHighResTimeStamp = 0;
@@ -37,8 +37,8 @@ export class Game {
     );
 
     this.renderer = new WebGl2Renderer(canvas, overlay, [
-      caveFragmentShader,
-      lightsShader,
+      [caveVertexShader, caveFragmentShader],
+      [lightsVertexShader, lightsShader],
     ]);
 
     this.initializeScene();

frontend/src/scripts/objects/game-object.ts

@@ -1,8 +1,8 @@
-import { Typed } from '../transport/serializable';
-import { IdentityManager } from '../identity/identity-manager';
+import { vec2 } from 'gl-matrix';
 import { Command } from '../commands/command';
 import { CommandReceiver } from '../commands/command-receiver';
-import { vec2 } from 'gl-matrix';
+import { IdentityManager } from '../identity/identity-manager';
+import { Typed } from '../transport/serializable';
 
 export abstract class GameObject extends Typed implements CommandReceiver {
   public readonly id = IdentityManager.generateId();

frontend/src/scripts/objects/object-container.ts

@@ -1,7 +1,7 @@
-import { GameObject } from './game-object';
-import { Id } from '../identity/identity';
 import { Command } from '../commands/command';
 import { CommandReceiver } from '../commands/command-receiver';
+import { Id } from '../identity/identity';
+import { GameObject } from './game-object';
 
 export class ObjectContainer implements CommandReceiver {
   private objects: Map<Id, GameObject> = new Map();

frontend/src/scripts/objects/types/character.ts

@@ -1,12 +1,12 @@
+import { vec2 } from 'gl-matrix';
+import { KeyDownCommand } from '../../commands/types/key-down';
+import { KeyUpCommand } from '../../commands/types/key-up';
+import { MoveToCommand } from '../../commands/types/move-to';
+import { StepCommand } from '../../commands/types/step';
+import { SwipeCommand } from '../../commands/types/swipe';
 import { GameObject } from '../game-object';
 import { ObjectContainer } from '../object-container';
 import { Camera } from './camera';
-import { MoveToCommand } from '../../commands/types/move-to';
-import { StepCommand } from '../../commands/types/step';
-import { KeyDownCommand } from '../../commands/types/key-down';
-import { KeyUpCommand } from '../../commands/types/key-up';
-import { SwipeCommand } from '../../commands/types/swipe';
-import { vec2 } from 'gl-matrix';
 
 export class Character extends GameObject {
   private keysDown: Set<string> = new Set();

frontend/src/scripts/objects/types/dungeon.ts

@@ -1,6 +1,6 @@
-import { GameObject } from '../game-object';
-import { DrawCommand } from '../../commands/types/draw';
 import { vec2 } from 'gl-matrix';
+import { DrawCommand } from '../../commands/types/draw';
+import { GameObject } from '../game-object';
 
 export interface Line {
   start: vec2;
@@ -17,13 +17,13 @@ export class Dungeon extends GameObject {
 
     this.addCommandExecutor(DrawCommand, this.draw.bind(this));
 
-    let previousRadius = 0;
+    let previousRadius = 350;
     let previousEnd = vec2.create();
 
     for (let i = 0; i < 500000; i += 500) {
       const height = previousEnd.y + (Math.random() - 0.5) * 2000;
       const currentEnd = vec2.fromValues(i, height);
-      const currentToRadius = Math.random() * 10 + 300;
+      const currentToRadius = Math.random() * 300 + 150;
 
       this.lines.push({
         start: previousEnd,