Remove twgl

frontend/src/scripts/drawing/drawer.ts

@@ -1,9 +1,9 @@
 import { Vec2 } from '../math/vec2';
 
 export interface Drawer {
-  startWaitingForInstructions();
-  finishWaitingForInstructions();
+  startFrame();
+  finishFrame();
   setCameraPosition(position: Vec2);
-  setViewBoxSize(size: Vec2);
-  drawCornerText(text: string);
+  setInViewWidth(size: number): Vec2;
+  drawInfoText(text: string);
 }

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

@@ -1 +0,0 @@
-//export function

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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,16 @@
+export const createShader = (
+  gl: WebGL2RenderingContext,
+  type: GLenum,
+  source: string
+): WebGLShader => {
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+  if (success) {
+    return shader;
+  }
+
+  console.log(gl.getShaderInfoLog(shader));
+  gl.deleteShader(shader);
+};

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

@@ -0,0 +1,26 @@
+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/renderer.ts

@@ -1,84 +1,102 @@
-const twgl = require('twgl.js');
-
 import { Drawer } from './drawer';
 import { Vec2 } from '../math/vec2';
+import { createProgram } from './graphics-library/create-program';
+import { prepareScreenQuad } from './graphics-library/prepare-screen-quad';
 
 export class WebGl2Renderer implements Drawer {
   private gl: WebGL2RenderingContext;
-  private programInfo: any;
-  private bufferInfo: any;
-  private vao: any;
+  private program: WebGLProgram;
+  private vao: WebGLVertexArrayObject;
 
-  constructor(
-    private canvas: HTMLCanvasElement,
-    private overlay: HTMLElement,
-    shaderSources: Array<string>
-  ) {
-    twgl.setDefaults({ attribPrefix: 'a_' });
-
-    this.gl = this.canvas.getContext('webgl2');
-    if (!this.gl) {
-      throw new Error('WebGl2 not supported');
-    }
-
-    this.programInfo = twgl.createProgramInfo(this.gl, shaderSources);
-
-    const arrays = {
-      position: {
-        numComponents: 3,
-        data: [-1.0, -1.0, 0.0, -1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, -1.0, 0.0],
-      },
-      indices: {
-        numComponents: 3,
-        data: [0, 1, 2, 0, 2, 3],
-      },
-    };
-    this.bufferInfo = twgl.createBufferInfoFromArrays(this.gl, arrays);
-    this.vao = twgl.createVAOFromBufferInfo(
-      this.gl,
-      this.programInfo,
-      this.bufferInfo
-    );
-  }
-
-  startWaitingForInstructions() {
-    //throw new Error("Method not implemented.");
-  }
+  public enableHighDpiRendering = false;
+  public renderScale = 0.33;
 
   private cameraPosition: Vec2;
   private viewBoxSize: Vec2;
 
-  finishWaitingForInstructions() {
-    const gl = this.gl;
+  constructor(
+    private canvas: HTMLCanvasElement,
+    private overlay: HTMLElement,
+    shaderSources: [string, string]
+  ) {
+    this.gl = this.canvas.getContext('webgl2');
+    if (!this.gl) {
+      throw new Error('WebGl2 is not supported');
+    }
 
-    twgl.resizeCanvasToDisplaySize(this.canvas);
-    this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
+    this.program = createProgram(this.gl, ...shaderSources);
+    this.vao = prepareScreenQuad(this.gl, this.program, 'a_position');
+  }
 
-    gl.clear(gl.COLOR_BUFFER_BIT);
+  private handleResize() {
+    const realToCssPixels = window.devicePixelRatio * this.renderScale;
 
-    const uniforms = {
-      cameraPosition: this.cameraPosition.list,
-      viewBoxSize: this.viewBoxSize.list,
-      resolution: [this.gl.canvas.width, this.gl.canvas.height],
-    };
+    const displayWidth = Math.floor(this.canvas.clientWidth * realToCssPixels);
+    const displayHeight = Math.floor(
+      this.canvas.clientHeight * realToCssPixels
+    );
 
-    this.gl.useProgram(this.programInfo.program);
+    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.handleResize();
+    this.gl.clearColor(0, 0, 0, 0);
+    this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+    this.gl.useProgram(this.program);
     this.gl.bindVertexArray(this.vao);
-    //twgl.setBuffersAndAttributes(this.gl, this.programInfo, this.bufferInfo);
+  }
 
-    twgl.setUniforms(this.programInfo, uniforms);
-    twgl.drawBufferInfo(this.gl, this.bufferInfo);
+  finishFrame() {
+    const resolutionUniformLocation = this.gl.getUniformLocation(
+      this.program,
+      'resolution'
+    );
+    this.gl.uniform2f(
+      resolutionUniformLocation,
+      this.canvas.width,
+      this.canvas.height
+    );
+
+    const viewBoxSizeUniformLocation = this.gl.getUniformLocation(
+      this.program,
+      'viewBoxSize'
+    );
+    this.gl.uniform2f(viewBoxSizeUniformLocation, ...this.viewBoxSize.list);
+
+    const cameraPositionUniformLocation = this.gl.getUniformLocation(
+      this.program,
+      'cameraPosition'
+    );
+    this.gl.uniform2f(
+      cameraPositionUniformLocation,
+      ...this.cameraPosition.list
+    );
+
+    this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
   }
 
   setCameraPosition(position: Vec2) {
     this.cameraPosition = position;
   }
 
-  setViewBoxSize(size: Vec2) {
-    this.viewBoxSize = size;
+  setInViewWidth(size: number): Vec2 {
+    const canvasAspectRatio =
+      this.canvas.clientHeight / this.canvas.clientWidth;
+
+    this.viewBoxSize = new Vec2(size, size * canvasAspectRatio);
+    return this.viewBoxSize;
   }
 
-  drawCornerText(text: string) {
+  drawInfoText(text: string) {
     if (this.overlay.innerText != text) {
       this.overlay.innerText = text;
     }

frontend/src/scripts/game.ts

@@ -16,6 +16,7 @@ export class Game {
   private previousTime: DOMHighResTimeStamp = 0;
   private objects: ObjectContainer = new ObjectContainer();
   private renderer: WebGl2Renderer;
+  private frameCount = 0;
 
   constructor() {
     const canvas: HTMLCanvasElement = document.querySelector('canvas#main');
@@ -47,14 +48,18 @@ export class Game {
   @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.objects.sendCommand(new StepCommand(deltaTime));
 
-    this.renderer.startWaitingForInstructions();
+    this.renderer.startFrame();
     this.objects.sendCommand(new DrawCommand(this.renderer));
-    this.renderer.finishWaitingForInstructions();
+    this.renderer.finishFrame();
 
-    requestAnimationFrame(this.gameLoop.bind(this));
+    window.requestAnimationFrame(this.gameLoop.bind(this));
   }
 }

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

@@ -1,23 +1,22 @@
 import { GameObject } from '../game-object';
 import { DrawCommand } from '../../commands/types/draw';
-import { Vec2 } from '../../math/vec2';
 import { MoveToCommand } from '../../commands/types/move-to';
 
 export class Camera extends GameObject {
+  private inViewWidth = 1500;
   constructor() {
     super();
-    this._boundingBoxSize = new Vec2(1200, 800);
 
     this.addCommandExecutor(DrawCommand, this.draw.bind(this));
     this.addCommandExecutor(MoveToCommand, this.moveTo.bind(this));
   }
 
-  private draw(e: DrawCommand) {
-    e.drawer.setCameraPosition(this.position);
-    e.drawer.setViewBoxSize(this.boundingBoxSize);
+  private draw(c: DrawCommand) {
+    c.drawer.setCameraPosition(this.position);
+    this._boundingBoxSize = c.drawer.setInViewWidth(this.inViewWidth);
   }
 
-  private moveTo(e: MoveToCommand) {
-    this._position = e.position;
+  private moveTo(c: MoveToCommand) {
+    this._position = c.position;
   }
 }

frontend/src/scripts/objects/types/info-text.ts

@@ -17,6 +17,6 @@ export class InfoText extends GameObject {
   private draw(e: DrawCommand) {
     let text = '';
     InfoText.records.forEach((v, k) => (text += `${k}\n\t${v}\n`));
-    e.drawer.drawCornerText(text);
+    e.drawer.drawInfoText(text);
   }
 }