Add glsl loader

frontend/src/scripts/drawing/drawer.ts

@@ -4,6 +4,6 @@ export interface Drawer {
   startFrame();
   finishFrame();
   setCameraPosition(position: Vec2);
-  setInViewWidth(size: number): Vec2;
+  setInViewArea(size: number): Vec2;
   drawInfoText(text: string);
 }

frontend/src/scripts/drawing/renderer.ts

@@ -2,6 +2,7 @@ import { Drawer } from './drawer';
 import { Vec2 } from '../math/vec2';
 import { createProgram } from './graphics-library/create-program';
 import { prepareScreenQuad } from './graphics-library/prepare-screen-quad';
+import { Mat3 } from '../math/mat3';
 
 export class WebGl2Renderer implements Drawer {
   private gl: WebGL2RenderingContext;
@@ -56,29 +57,20 @@ export class WebGl2Renderer implements Drawer {
   }
 
   finishFrame() {
-    const resolutionUniformLocation = this.gl.getUniformLocation(
-      this.program,
-      'resolution'
-    );
-    this.gl.uniform2f(
-      resolutionUniformLocation,
-      this.canvas.width,
-      this.canvas.height
-    );
+    const resolution = new Vec2(this.canvas.width, this.canvas.height);
+
+    const transform = Mat3.translateMatrix(new Vec2(0.5, 0.5))
+      .times(Mat3.scaleMatrix(this.viewBoxSize.divide(resolution)))
+      .times(Mat3.translateMatrix(this.cameraPosition));
 
     const viewBoxSizeUniformLocation = this.gl.getUniformLocation(
       this.program,
-      'viewBoxSize'
+      'transform'
     );
-    this.gl.uniform2f(viewBoxSizeUniformLocation, ...this.viewBoxSize.list);
-
-    const cameraPositionUniformLocation = this.gl.getUniformLocation(
-      this.program,
-      'cameraPosition'
-    );
-    this.gl.uniform2f(
-      cameraPositionUniformLocation,
-      ...this.cameraPosition.list
+    this.gl.uniformMatrix3fv(
+      viewBoxSizeUniformLocation,
+      false,
+      new Float32Array(transform.transposedFlat)
     );
 
     this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
@@ -88,11 +80,14 @@ export class WebGl2Renderer implements Drawer {
     this.cameraPosition = position;
   }
 
-  setInViewWidth(size: number): Vec2 {
+  setInViewArea(size: number): Vec2 {
     const canvasAspectRatio =
-      this.canvas.clientHeight / this.canvas.clientWidth;
+      this.canvas.clientWidth / this.canvas.clientHeight;
 
-    this.viewBoxSize = new Vec2(size, size * canvasAspectRatio);
+    this.viewBoxSize = new Vec2(
+      Math.sqrt(size * canvasAspectRatio),
+      Math.sqrt(size / canvasAspectRatio)
+    );
     return this.viewBoxSize;
   }
 

frontend/src/scripts/game.ts

@@ -5,13 +5,17 @@ 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 passthroughVertexShader from '../shaders/passthrough.vert';
-import distanceFragmentShader from '../shaders/dist.frag';
+
 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 { GlslShader, GlslVariable, GlslVariableMap } from 'webpack-glsl-minify';
+
+let passthroughVertexShader = require('../shaders/passthrough-vs.glsl') as GlslShader;
+let distanceFragmentShader = require('../shaders/cave-fs.glsl') as GlslShader;
+
 export class Game {
   private previousTime: DOMHighResTimeStamp = 0;
   private objects: ObjectContainer = new ObjectContainer();
@@ -31,9 +35,11 @@ export class Game {
       [this.objects]
     );
 
+    console.log(distanceFragmentShader);
+
     this.renderer = new WebGl2Renderer(canvas, overlay, [
-      passthroughVertexShader,
-      distanceFragmentShader,
+      passthroughVertexShader.sourceCode,
+      distanceFragmentShader.sourceCode,
     ]);
 
     this.initializeScene();

frontend/src/scripts/math/mat3.ts

@@ -0,0 +1,78 @@
+// https://github.com/Azleur/mat3/blob/master/src/index.ts
+
+import { Vec2 } from './vec2';
+
+export class Mat3 {
+  constructor(private readonly values: Array<Array<number>>) {}
+
+  public static get Zero() {
+    return new Mat3([
+      [0, 0, 0],
+      [0, 0, 0],
+      [0, 0, 0],
+    ]);
+  }
+
+  public static get Id() {
+    return new Mat3([
+      [1, 0, 0],
+      [0, 1, 0],
+      [0, 0, 1],
+    ]);
+  }
+
+  public static get Ones() {
+    return new Mat3([
+      [1, 1, 1],
+      [1, 1, 1],
+      [1, 1, 1],
+    ]);
+  }
+
+  public static translateMatrix(by: Vec2): Mat3 {
+    return new Mat3([
+      [1, 0, 0],
+      [0, 1, 0],
+      [by.x, by.y, 1],
+    ]);
+  }
+
+  public static scaleMatrix(by: Vec2): Mat3 {
+    return new Mat3([
+      [by.x, 0, 0],
+      [0, by.y, 0],
+      [0, 0, 1],
+    ]);
+  }
+
+  public get transposed(): Mat3 {
+    const values: number[][] = [[], [], []];
+    for (let i = 0; i < 3; i++) {
+      for (let j = 0; j < 3; j++) {
+        values[i][j] = this.values[j][i];
+      }
+    }
+    return new Mat3(values);
+  }
+
+  public times(other: Mat3): Mat3 {
+    const values: number[][] = Mat3.Zero.values;
+    for (let i = 0; i < 3; i++) {
+      for (let j = 0; j < 3; j++) {
+        for (let k = 0; k < 3; k++) {
+          values[i][j] += this.values[i][k] * other.values[k][j];
+        }
+      }
+    }
+    return new Mat3(values);
+  }
+
+  public get transposedFlat(): Array<number> {
+    const transposed = this.transposed;
+    return [
+      ...transposed.values[0],
+      ...transposed.values[1],
+      ...transposed.values[2],
+    ];
+  }
+}

frontend/src/scripts/math/vec2.ts

@@ -13,10 +13,6 @@ export class Vec2 extends Typed {
     return new Vec2(this.x * scalar, this.y * scalar);
   }
 
-  public times(other: Vec2): Vec2 {
-    return new Vec2(this.x * other.x, this.y * other.y);
-  }
-
   public add(other: Vec2): Vec2 {
     return new Vec2(this.x + other.x, this.y + other.y);
   }
@@ -25,6 +21,14 @@ export class Vec2 extends Typed {
     return new Vec2(this.x - other.x, this.y - other.y);
   }
 
+  public times(other: Vec2): Vec2 {
+    return new Vec2(this.x * other.x, this.y * other.y);
+  }
+
+  public divide(other: Vec2): Vec2 {
+    return new Vec2(this.x / other.x, this.y / other.y);
+  }
+
   public get length(): number {
     return Math.sqrt(this.x * this.x + this.y * this.y);
   }

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

@@ -3,7 +3,8 @@ import { DrawCommand } from '../../commands/types/draw';
 import { MoveToCommand } from '../../commands/types/move-to';
 
 export class Camera extends GameObject {
-  private inViewWidth = 1500;
+  private inViewArea = 1920 * 1080;
+
   constructor() {
     super();
 
@@ -13,7 +14,7 @@ export class Camera extends GameObject {
 
   private draw(c: DrawCommand) {
     c.drawer.setCameraPosition(this.position);
-    this._boundingBoxSize = c.drawer.setInViewWidth(this.inViewWidth);
+    this._boundingBoxSize = c.drawer.setInViewArea(this.inViewArea);
   }
 
   private moveTo(c: MoveToCommand) {