Add some more WebGl

frontend/custom.d.ts

@@ -1,9 +1,4 @@
-declare module '*.frag' {
+declare module '*.glsl' {
-  const content: string;
-  export default content;
-}
-
-declare module '*.vert' {
   const content: string;
   export default content;
 }

frontend/package.json

@@ -52,7 +52,6 @@
     "uuid": "^8.2.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3",
+    "webpack-dev-server": "^3.10.3"
-    "webpack-glsl-minify": "^1.4.0"
   }
 }

frontend/src/scripts/commands/types/before-draw.ts

@@ -0,0 +1,8 @@
+import { Drawer } from '../../drawing/drawer';
+import { Command } from '../command';
+
+export class BeforeDrawCommand extends Command {
+  public constructor(public readonly drawer?: Drawer) {
+    super();
+  }
+}

frontend/src/scripts/commands/types/move-to.ts

@@ -1,4 +1,3 @@
-import { Drawer } from '../../drawing/drawer';
 import { Command } from '../command';
 import { Vec2 } from '../../math/vec2';
 

frontend/src/scripts/commands/types/zoom.ts

@@ -0,0 +1,7 @@
+import { Command } from '../command';
+
+export class ZoomCommand extends Command {
+  public constructor(public readonly factor?: number) {
+    super();
+  }
+}

frontend/src/scripts/drawing/drawer.ts

@@ -1,9 +1,12 @@
 import { Vec2 } from '../math/vec2';
+import { Rectangle } from '../math/rectangle';
 
 export interface Drawer {
-  startFrame();
+  startFrame(): void;
-  finishFrame();
+  finishFrame(): void;
-  setCameraPosition(position: Vec2);
+  giveUniforms(uniforms: any): void;
+  setCameraPosition(position: Vec2): void;
   setInViewArea(size: number): Vec2;
-  drawInfoText(text: string);
+  drawInfoText(text: string): void;
+  isOnScreen(position: Vec2): boolean;
 }

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

@@ -1,24 +0,0 @@
-import { createShader } from './create-shader';
-
-export const createProgram = (
-  gl: WebGL2RenderingContext,
-  vertexShader: string,
-  fragmentShader: string
-): WebGLProgram => {
-  const program = gl.createProgram();
-
-  gl.attachShader(program, createShader(gl, gl.VERTEX_SHADER, vertexShader));
-  gl.attachShader(
-    program,
-    createShader(gl, gl.FRAGMENT_SHADER, fragmentShader)
-  );
-  gl.linkProgram(program);
-
-  const success = gl.getProgramParameter(program, gl.LINK_STATUS);
-  if (success) {
-    return program;
-  }
-
-  console.log(gl.getProgramInfoLog(program));
-  gl.deleteProgram(program);
-};

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

@@ -7,10 +7,10 @@ export const createShader = (
   gl.shaderSource(shader, source);
   gl.compileShader(shader);
   const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
-  if (success) {
+
-    return shader;
+  if (!success) {
+    throw new Error(gl.getShaderInfoLog(shader));
   }
 
-  console.log(gl.getShaderInfoLog(shader));
+  return shader;
-  gl.deleteShader(shader);
 };

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

@@ -0,0 +1,121 @@
+import passthroughVertexShader from '../../../shaders/passthrough-vs.glsl';
+import { createShader } from './create-shader';
+import { loadUniform } from './load-uniform';
+
+export class FragmentShaderOnlyProgram {
+  program: WebGLProgram;
+  shaders: Array<WebGLShader> = [];
+
+  private vao: WebGLVertexArrayObject;
+  private uniforms: Array<{
+    name: Array<string>;
+    location: WebGLUniformLocation;
+    type: GLenum;
+  }> = [];
+
+  constructor(
+    private gl: WebGL2RenderingContext,
+    fragmentShaderSource: string
+  ) {
+    this.createProgram(fragmentShaderSource);
+    this.prepareScreenQuad('a_position');
+    this.queryUniforms();
+  }
+
+  public bind() {
+    this.gl.useProgram(this.program);
+    this.gl.bindVertexArray(this.vao);
+  }
+
+  public draw() {
+    this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+  }
+
+  public setUniforms(values: 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);
+      }
+    });
+  }
+
+  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,
+      });
+    }
+  }
+
+  private createProgram(fragmentShaderSource: string) {
+    this.program = this.gl.createProgram();
+
+    const vertexShader = createShader(
+      this.gl,
+      this.gl.VERTEX_SHADER,
+      passthroughVertexShader
+    );
+    this.gl.attachShader(this.program, vertexShader);
+    this.shaders.push(vertexShader);
+
+    const fragmentShader = createShader(
+      this.gl,
+      this.gl.FRAGMENT_SHADER,
+      fragmentShaderSource
+    );
+    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));
+    }
+  }
+
+  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/load-uniform.ts

@@ -0,0 +1,41 @@
+import { Vec2 } from '../../math/vec2';
+import { Mat3 } from '../../math/mat3';
+
+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) =>
+      gl.uniform1f(l, v)
+    );
+
+    converters.set(WebGL2RenderingContext.FLOAT_VEC2, (gl, v: Vec2, l) =>
+      gl.uniform2fv(l, new Float32Array(v.list))
+    );
+
+    converters.set(WebGL2RenderingContext.FLOAT_MAT3, (gl, v: Mat3, l) =>
+      gl.uniformMatrix3fv(l, false, new Float32Array(v.transposedFlat))
+    );
+
+    converters.set(WebGL2RenderingContext.BOOL, (gl, v, l) =>
+      gl.uniform1i(l, v)
+    );
+
+    if (!converters.has(type)) {
+      throw new Error('Unimplemented webgl type');
+    }
+
+    converters.get(type)(gl, value, location);
+  }
+};

frontend/src/scripts/drawing/graphics-library/prepare-screen-quad.ts

@@ -1,26 +0,0 @@
-export const prepareScreenQuad = (
-  gl: WebGL2RenderingContext,
-  program: WebGLProgram,
-  attributeName: string
-): WebGLVertexArrayObject => {
-  const positionAttributeLocation = gl.getAttribLocation(
-    program,
-    attributeName
-  );
-
-  const positionBuffer = gl.createBuffer();
-
-  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-  gl.bufferData(
-    gl.ARRAY_BUFFER,
-    new Float32Array([-1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0]),
-    gl.STATIC_DRAW
-  );
-  const vao = gl.createVertexArray();
-
-  gl.bindVertexArray(vao);
-  gl.enableVertexAttribArray(positionAttributeLocation);
-  gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
-
-  return vao;
-};

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

@@ -0,0 +1,64 @@
+import { WebGl2Renderer } from '../webgl2-renderer';
+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/webgl2-renderer.ts

@@ -0,0 +1,109 @@
+import { Drawer } from './drawer';
+import { Vec2 } from '../math/vec2';
+import { Mat3 } from '../math/mat3';
+import { FragmentShaderOnlyProgram } from './graphics-library/fragment-shader-only-program';
+import { WebGlStopwatch } from './graphics-library/stopwatch';
+import { Rectangle } from '../math/rectangle';
+
+export class WebGl2Renderer implements Drawer {
+  private gl: WebGL2RenderingContext;
+  private program: FragmentShaderOnlyProgram;
+  private stopwatch: WebGlStopwatch;
+
+  public enableHighDpiRendering = false;
+  public renderScale = 0.5;
+
+  private viewBox: Rectangle = new Rectangle();
+
+  private nextFrameUniforms: any;
+
+  constructor(
+    private canvas: HTMLCanvasElement,
+    private overlay: HTMLElement,
+    shaderSources: Array<string>
+  ) {
+    this.gl = this.canvas.getContext('webgl2');
+    if (!this.gl) {
+      throw new Error('WebGl2 is not supported');
+    }
+
+    this.program = new FragmentShaderOnlyProgram(this.gl, shaderSources[0]);
+
+    try {
+      this.stopwatch = new WebGlStopwatch(this.gl);
+    } catch {}
+  }
+
+  private handleResize() {
+    const realToCssPixels = window.devicePixelRatio * this.renderScale;
+
+    const displayWidth = Math.floor(this.canvas.clientWidth * realToCssPixels);
+    const displayHeight = Math.floor(
+      this.canvas.clientHeight * realToCssPixels
+    );
+
+    if (
+      this.canvas.width !== displayWidth ||
+      this.canvas.height !== displayHeight
+    ) {
+      this.canvas.width = displayWidth;
+      this.canvas.height = displayHeight;
+    }
+
+    this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+  }
+
+  public startFrame() {
+    this.stopwatch?.start();
+
+    this.handleResize();
+
+    this.gl.clearColor(0, 0, 0, 0);
+    this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+
+    this.program.bind();
+    this.nextFrameUniforms = {};
+  }
+
+  public finishFrame() {
+    const resolution = new Vec2(this.canvas.width, this.canvas.height);
+
+    this.nextFrameUniforms.transform = Mat3.translateMatrix(new Vec2(0.5, 0.5))
+      .times(Mat3.scaleMatrix(this.viewBox.size.divide(resolution)))
+      .times(Mat3.translateMatrix(this.viewBox.topLeft));
+
+    this.program.setUniforms(this.nextFrameUniforms);
+    this.program.draw();
+
+    this.stopwatch?.stop();
+  }
+
+  public setCameraPosition(position: Vec2) {
+    this.viewBox.topLeft = position;
+  }
+
+  public giveUniforms(uniforms: any): void {
+    this.nextFrameUniforms = { ...this.nextFrameUniforms, ...uniforms };
+  }
+
+  public setInViewArea(size: number): Vec2 {
+    const canvasAspectRatio =
+      this.canvas.clientWidth / this.canvas.clientHeight;
+
+    this.viewBox.size = new Vec2(
+      Math.sqrt(size * canvasAspectRatio),
+      Math.sqrt(size / canvasAspectRatio)
+    );
+    return this.viewBox.size;
+  }
+
+  public drawInfoText(text: string) {
+    if (this.overlay.innerText != text) {
+      this.overlay.innerText = text;
+    }
+  }
+
+  isOnScreen(position: Vec2): boolean {
+    return this.viewBox.isInside(position);
+  }
+}

frontend/src/scripts/game.ts

@@ -1,4 +1,4 @@
-import { WebGl2Renderer } from './drawing/renderer';
+import { WebGl2Renderer } from './drawing/webgl2-renderer';
 import { KeyboardListener } from './input/keyboard-listener';
 import { MouseListener } from './input/mouse-listener';
 import { TouchListener } from './input/touch-listener';
@@ -11,16 +11,15 @@ 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';
+import caveFragmentShader from '../shaders/cave-fs.glsl';
-
+import { Dungeon } from './objects/types/dungeon';
-let passthroughVertexShader = require('../shaders/passthrough-vs.glsl') as GlslShader;
+import { BeforeDrawCommand } from './commands/types/before-draw';
-let distanceFragmentShader = require('../shaders/cave-fs.glsl') as GlslShader;
 
 export class Game {
   private previousTime: DOMHighResTimeStamp = 0;
   private objects: ObjectContainer = new ObjectContainer();
   private renderer: WebGl2Renderer;
-  private frameCount = 0;
+  private previousFpsValues: Array<number> = [];
 
   constructor() {
     const canvas: HTMLCanvasElement = document.querySelector('canvas#main');
@@ -35,12 +34,7 @@ export class Game {
       [this.objects]
     );
 
-    console.log(distanceFragmentShader);
+    this.renderer = new WebGl2Renderer(canvas, overlay, [caveFragmentShader]);
-
-    this.renderer = new WebGl2Renderer(canvas, overlay, [
-      passthroughVertexShader.sourceCode,
-      distanceFragmentShader.sourceCode,
-    ]);
 
     this.initializeScene();
     requestAnimationFrame(this.gameLoop.bind(this));
@@ -49,23 +43,37 @@ export class Game {
   private initializeScene() {
     this.objects.addObject(new Character(this.objects));
     this.objects.addObject(new InfoText());
+    this.objects.addObject(new Dungeon());
   }
 
   @timeIt()
   private gameLoop(time: DOMHighResTimeStamp) {
     const deltaTime = time - this.previousTime;
-    if (this.frameCount++ % 30 == 0) {
-      InfoText.modifyRecord('FPS', (1000 / deltaTime).toFixed(1));
-    }
-
     this.previousTime = time;
+    this.calculateFps(deltaTime);
 
     this.objects.sendCommand(new StepCommand(deltaTime));
 
     this.renderer.startFrame();
+    this.objects.sendCommand(new BeforeDrawCommand(this.renderer));
     this.objects.sendCommand(new DrawCommand(this.renderer));
     this.renderer.finishFrame();
 
     window.requestAnimationFrame(this.gameLoop.bind(this));
   }
+
+  private calculateFps(deltaTime: number) {
+    this.previousFpsValues.push(1000 / deltaTime);
+    if (this.previousFpsValues.length > 30) {
+      const text = `Min: ${this.previousFpsValues[0].toFixed(
+        2
+      )}\n\tMedian: ${this.previousFpsValues[
+        Math.floor(this.previousFpsValues.length / 2)
+      ].toFixed(2)}`;
+
+      InfoText.modifyRecord('FPS', text);
+
+      this.previousFpsValues = [];
+    }
+  }
 }

frontend/src/scripts/helper/last.ts

@@ -0,0 +1,3 @@
+export function last<T>(a: Array<T>): T | null {
+  return a.length > 0 ? a[a.length - 1] : null;
+}

frontend/src/scripts/input/mouse-listener.ts

@@ -3,6 +3,7 @@ import { PrimaryActionCommand } from '../commands/types/primary-action';
 import { SecondaryActionCommand } from '../commands/types/secondary-action';
 import { Vec2 } from '../math/vec2';
 import { SwipeCommand } from '../commands/types/swipe';
+import { ZoomCommand } from '../commands/types/zoom';
 
 export class MouseListener extends CommandGenerator {
   private previousPosition: Vec2 = null;
@@ -45,6 +46,10 @@ export class MouseListener extends CommandGenerator {
       const position = this.positionFromEvent(event);
       this.sendCommand(new SecondaryActionCommand(position));
     });
+
+    target.addEventListener('wheel', (event: MouseWheelEvent) => {
+      this.sendCommand(new ZoomCommand(event.deltaY > 0 ? 1.3 : 1 / 1.3));
+    });
   }
 
   private positionFromEvent(event: MouseEvent): Vec2 {

frontend/src/scripts/math/line.ts

@@ -1,7 +0,0 @@
-import { Vec2 } from './vec2';
-
-export interface Line {
-  a: Vec2;
-  b: Vec2;
-  normal: Vec2;
-}

frontend/src/scripts/math/rectangle.ts

@@ -0,0 +1,21 @@
+import { Typed } from '../transport/serializable';
+import { Vec2 } from './vec2';
+
+export class Rectangle extends Typed {
+  public constructor(
+    public topLeft: Vec2 = new Vec2(),
+    public size: Vec2 = new Vec2()
+  ) {
+    super();
+  }
+
+  public isInside(position: Vec2): boolean {
+    const translated = position.subtract(this.topLeft);
+    return (
+      0 <= translated.x &&
+      translated.x < this.size.x &&
+      0 <= translated.y &&
+      translated.y < this.size.y
+    );
+  }
+}

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

@@ -1,6 +1,7 @@
 import { GameObject } from '../game-object';
-import { DrawCommand } from '../../commands/types/draw';
 import { MoveToCommand } from '../../commands/types/move-to';
+import { ZoomCommand } from '../../commands/types/zoom';
+import { BeforeDrawCommand } from '../../commands/types/before-draw';
 
 export class Camera extends GameObject {
   private inViewArea = 1920 * 1080;
@@ -8,11 +9,12 @@ export class Camera extends GameObject {
   constructor() {
     super();
 
-    this.addCommandExecutor(DrawCommand, this.draw.bind(this));
+    this.addCommandExecutor(BeforeDrawCommand, this.draw.bind(this));
     this.addCommandExecutor(MoveToCommand, this.moveTo.bind(this));
+    this.addCommandExecutor(ZoomCommand, this.zoom.bind(this));
   }
 
-  private draw(c: DrawCommand) {
+  private draw(c: BeforeDrawCommand) {
     c.drawer.setCameraPosition(this.position);
     this._boundingBoxSize = c.drawer.setInViewArea(this.inViewArea);
   }
@@ -20,4 +22,8 @@ export class Camera extends GameObject {
   private moveTo(c: MoveToCommand) {
     this._position = c.position;
   }
+
+  private zoom(c: ZoomCommand) {
+    this.inViewArea *= c.factor;
+  }
 }