WIP

frontend/src/scripts/drawing/drawables/i-drawable.ts

@@ -1,7 +1,11 @@
 import { vec2 } from 'gl-matrix';
+import { ImmutableBoundingBox } from '../../physics/containers/immutable-bounding-box';
+import { GameObject } from '../../objects/game-object';
 
 export interface IDrawable {
   serializeToUniforms(uniforms: any): void;
   distance(target: vec2): number;
   minimumDistance(target: vec2): number;
+  readonly owner: GameObject;
+  readonly boundingBox: ImmutableBoundingBox;
 }

frontend/src/scripts/drawing/drawables/lights/circle-light.ts

@@ -2,6 +2,8 @@ import { ILight } from './i-light';
 import { vec2, vec3 } from 'gl-matrix';
 import { settings } from '../../settings';
 import { IDrawableDescriptor } from '../i-drawable-descriptor';
+import { ImmutableBoundingBox } from '../../../physics/containers/immutable-bounding-box';
+import { GameObject } from '../../../objects/game-object';
 
 export class CircleLight implements ILight {
   public static descriptor: IDrawableDescriptor = {
@@ -11,12 +13,15 @@ export class CircleLight implements ILight {
   };
 
   constructor(
+    public readonly owner: GameObject,
     public center: vec2,
     public radius: number,
     public color: vec3,
     public lightness: number
   ) {}
 
+  boundingBox: ImmutableBoundingBox;
+
   public distance(target: vec2): number {
     return 0;
   }

frontend/src/scripts/drawing/drawables/lights/point-light.ts

@@ -2,6 +2,8 @@ import { ILight } from './i-light';
 import { vec2, vec3 } from 'gl-matrix';
 import { IDrawableDescriptor } from '../i-drawable-descriptor';
 import { settings } from '../../settings';
+import { ImmutableBoundingBox } from '../../../physics/containers/immutable-bounding-box';
+import { GameObject } from '../../../objects/game-object';
 
 export class PointLight implements ILight {
   public static descriptor: IDrawableDescriptor = {
@@ -10,13 +12,16 @@ export class PointLight implements ILight {
     shaderCombinationSteps: settings.shaderCombinations.pointLightSteps,
   };
 
-  constructor(
+  public constructor(
+    public readonly owner: GameObject,
     public center: vec2,
     public radius: number,
     public color: vec3,
     public lightness: number
   ) {}
 
+  boundingBox: ImmutableBoundingBox;
+
   public distance(target: vec2): number {
     return vec2.distance(this.center, target) - this.radius;
   }

frontend/src/scripts/drawing/drawables/primitives/circle.ts

@@ -1,8 +1,14 @@
 import { vec2 } from 'gl-matrix';
 import { IPrimitive } from './i-primitive';
+import { ImmutableBoundingBox } from '../../../physics/containers/immutable-bounding-box';
+import { GameObject } from '../../../objects/game-object';
 
 export class Circle implements IPrimitive {
-  public constructor(public center = vec2.create(), public radius = 0) {}
+  public constructor(
+    public readonly owner: GameObject,
+    public center = vec2.create(),
+    public radius = 0
+  ) {}
 
   public serializeToUniforms(uniforms: any): void {
     throw new Error('Method not implemented.');
@@ -16,6 +22,16 @@ export class Circle implements IPrimitive {
     return vec2.distance(this.center, target) - this.radius;
   }
 
+  public get boundingBox(): ImmutableBoundingBox {
+    return new ImmutableBoundingBox(
+      this,
+      this.center.x - this.radius,
+      this.center.x + this.radius,
+      this.center.y - this.radius,
+      this.center.y + this.radius
+    );
+  }
+
   public isInside(target: vec2): boolean {
     return this.distance(target) < 0;
   }

frontend/src/scripts/drawing/drawables/primitives/rectangle.ts

@@ -1,18 +0,0 @@
-import { vec2 } from 'gl-matrix';
-
-export class Rectangle {
-  public constructor(
-    public topLeft: vec2 = vec2.create(),
-    public size: vec2 = vec2.create()
-  ) {}
-
-  public isInside(position: vec2): boolean {
-    const translated = vec2.subtract(vec2.create(), position, this.topLeft);
-    return (
-      0 <= translated.x &&
-      translated.x < this.size.x &&
-      0 <= translated.y &&
-      translated.y < this.size.y
-    );
-  }
-}

frontend/src/scripts/drawing/drawables/primitives/tunnel-shape.ts

@@ -1,10 +1,12 @@
 import { vec2 } from 'gl-matrix';
-import { clamp01 } from '../../../helper/clamp';
-import { mix } from '../../../helper/mix';
-import { Circle } from './circle';
-import { IPrimitive } from './i-primitive';
 import { IDrawableDescriptor } from '../i-drawable-descriptor';
+import { IPrimitive } from './i-primitive';
 import { settings } from '../../settings';
+import { Circle } from './circle';
+import { mix } from '../../../helper/mix';
+import { clamp01 } from '../../../helper/clamp';
+import { ImmutableBoundingBox } from '../../../physics/containers/immutable-bounding-box';
+import { GameObject } from '../../../objects/game-object';
 
 export class TunnelShape implements IPrimitive {
   public static descriptor: IDrawableDescriptor = {
@@ -14,11 +16,11 @@ export class TunnelShape implements IPrimitive {
   };
 
   public readonly toFromDelta: vec2;
-  private toFromDeltaLength: number;
 
   private boundingCircle: Circle;
 
   constructor(
+    public readonly owner: GameObject,
     public readonly from: vec2,
     public readonly to: vec2,
     public readonly fromRadius: number,
@@ -27,12 +29,13 @@ export class TunnelShape implements IPrimitive {
     this.toFromDelta = vec2.subtract(vec2.create(), to, from);
 
     this.boundingCircle = new Circle(
+      this.owner,
       vec2.fromValues(from.x / 2 + to.x / 2, from.y / 2 + to.y / 2),
       Math.max(fromRadius, toRadius) + vec2.distance(from, to)
     );
   }
 
-  serializeToUniforms(uniforms: any): void {
+  public serializeToUniforms(uniforms: any): void {
     if (!uniforms.hasOwnProperty(TunnelShape.descriptor.uniformName)) {
       uniforms[TunnelShape.descriptor.uniformName] = [];
     }
@@ -45,6 +48,27 @@ export class TunnelShape implements IPrimitive {
     });
   }
 
+  public get boundingBox(): ImmutableBoundingBox {
+    const xMin = Math.min(
+      this.from.x - this.fromRadius,
+      this.to.x - this.toRadius
+    );
+    const yMin = Math.min(
+      this.from.y - this.fromRadius,
+      this.to.y - this.toRadius
+    );
+    const xMax = Math.max(
+      this.from.x + this.fromRadius,
+      this.to.x + this.toRadius
+    );
+    const yMax = Math.max(
+      this.from.y + this.fromRadius,
+      this.to.y + this.toRadius
+    );
+
+    return new ImmutableBoundingBox(this, xMin, xMax, yMin, yMax);
+  }
+
   public distance(target: vec2): number {
     const targetFromDelta = vec2.subtract(vec2.create(), target, this.from);
     const h = clamp01(

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

@@ -1,7 +1,7 @@
 import { vec2 } from 'gl-matrix';
 
 export interface IProgram {
-  setDrawingRectangle(topLeft: vec2, size: vec2): void;
+  setDrawingRectangle(bottomLeft: vec2, size: vec2): void;
   bindAndSetUniforms(values: { [name: string]: any }): void;
   draw(): void;
   delete(): void;

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

@@ -32,10 +32,10 @@ export abstract class Program implements IProgram {
     this.setUniforms({ modelTransform: this.modelTransform, ...values });
   }
 
-  public setDrawingRectangle(topLeft: vec2, size: vec2) {
+  public setDrawingRectangle(bottomLeft: vec2, size: vec2) {
     mat2d.invert(this.modelTransform, this.ndcToUv);
 
-    mat2d.translate(this.modelTransform, this.modelTransform, topLeft);
+    mat2d.translate(this.modelTransform, this.modelTransform, bottomLeft);
     mat2d.scale(this.modelTransform, this.modelTransform, size);
     mat2d.multiply(this.modelTransform, this.modelTransform, this.ndcToUv);
   }

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

@@ -1,6 +1,6 @@
 import { vec2 } from 'gl-matrix';
-import { IPrimitive } from './drawables/primitives/i-primitive';
 import { ILight } from './drawables/lights/i-light';
+import { IPrimitive } from './drawables/primitives/i-primitive';
 
 export interface IRenderer {
   startFrame(deltaTime: DOMHighResTimeStamp): void;

frontend/src/scripts/drawing/rendering/rendering-pass.ts

@@ -1,11 +1,10 @@
-import { FrameBuffer } from '../graphics-library/frame-buffer/frame-buffer';
-import { IDrawable } from '../drawables/i-drawable';
-import { settings } from '../settings';
 import { vec2 } from 'gl-matrix';
-import { Circle } from '../drawables/primitives/circle';
 import { InfoText } from '../../objects/types/info-text';
-import { UniformArrayAutoScalingProgram } from '../graphics-library/program/uniform-array-autoscaling-program';
+import { IDrawable } from '../drawables/i-drawable';
 import { IDrawableDescriptor } from '../drawables/i-drawable-descriptor';
+import { FrameBuffer } from '../graphics-library/frame-buffer/frame-buffer';
+import { UniformArrayAutoScalingProgram } from '../graphics-library/program/uniform-array-autoscaling-program';
+import { settings } from '../settings';
 
 export class RenderingPass {
   private drawables: Array<IDrawable> = [];
@@ -30,7 +29,8 @@ export class RenderingPass {
 
   public render(
     commonUniforms: any,
-    viewCircle: Circle,
+    viewBoxCenter: vec2,
+    viewBoxRadius: number,
     inputTexture?: WebGLTexture
   ) {
     this.frame.bindAndClear(inputTexture);
@@ -38,7 +38,7 @@ export class RenderingPass {
     const tileUvSize = vec2.fromValues(q, q);
 
     const possiblyOnScreenDrawables = this.drawables.filter(
-      (p) => p.minimumDistance(viewCircle.center) < viewCircle.radius
+      (p) => p.minimumDistance(viewBoxCenter) < viewBoxRadius
     );
 
     const origin = vec2.transformMat2d(

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

@@ -1,34 +1,29 @@
 import { mat2d, vec2, vec3 } from 'gl-matrix';
+import { CircleLight } from '../drawables/lights/circle-light';
+import { ILight } from '../drawables/lights/i-light';
+import { PointLight } from '../drawables/lights/point-light';
+import { IPrimitive } from '../drawables/primitives/i-primitive';
+import { TunnelShape } from '../drawables/primitives/tunnel-shape';
+// import lightsShader from '../shaders/rainbow-shading-fs.glsl';
+import { DefaultFrameBuffer } from '../graphics-library/frame-buffer/default-frame-buffer';
+import { IntermediateFrameBuffer } from '../graphics-library/frame-buffer/intermediate-frame-buffer';
+import { getWebGl2Context } from '../graphics-library/helper/get-webgl2-context';
+import { WebGlStopwatch } from '../graphics-library/helper/stopwatch';
+import { IRenderer } from '../i-renderer';
 import caveFragmentShader from '../shaders/cave-distance-fs.glsl';
 import lightsFragmentShader 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 { DefaultFrameBuffer } from '../graphics-library/frame-buffer/default-frame-buffer';
-import { IntermediateFrameBuffer } from '../graphics-library/frame-buffer/intermediate-frame-buffer';
-import { WebGlStopwatch } from '../graphics-library/helper/stopwatch';
-import { IProgram } from '../graphics-library/program/i-program';
-import { UniformArrayAutoScalingProgram } from '../graphics-library/program/uniform-array-autoscaling-program';
-import { IRenderer } from '../i-renderer';
-import { Circle } from '../drawables/primitives/circle';
-import { IPrimitive } from '../drawables/primitives/i-primitive';
-import { Rectangle } from '../drawables/primitives/rectangle';
-import { ILight } from '../drawables/lights/i-light';
-import { settings } from '../settings';
 import { FpsAutoscaler } from './fps-autoscaler';
-import { getWebGl2Context } from '../graphics-library/helper/get-webgl2-context';
 import { RenderingPass } from './rendering-pass';
-import { TunnelShape } from '../drawables/primitives/tunnel-shape';
-import { CircleLight } from '../drawables/lights/circle-light';
-import { PointLight } from '../drawables/lights/point-light';
 
 export class WebGl2Renderer implements IRenderer {
   private gl: WebGL2RenderingContext;
   private stopwatch?: WebGlStopwatch;
 
-  private viewBox: Rectangle = new Rectangle();
-  private viewCircle: Circle = new Circle();
-
+  private viewBoxBottomLeft = vec2.create();
+  private cameraPosition = vec2.create();
+  private viewBoxSize = vec2.create();
   private cursorPosition = vec2.create();
 
   private distanceFieldFrameBuffer: IntermediateFrameBuffer;
@@ -38,6 +33,15 @@ export class WebGl2Renderer implements IRenderer {
 
   private autoscaler: FpsAutoscaler;
 
+  private matrices: {
+    distanceScreenToWorld?: mat2d;
+    worldToDistanceUV?: mat2d;
+    cursorPosition?: mat2d;
+    ndcToUv?: mat2d;
+    uvToWorld?: mat2d;
+    viewBoxSize?: mat2d;
+  } = { ndcToUv: mat2d.fromValues(0.5, 0, 0, 0.5, 0.5, 0.5) };
+
   constructor(private canvas: HTMLCanvasElement, private overlay: HTMLElement) {
     this.gl = getWebGl2Context(canvas);
 
@@ -85,64 +89,69 @@ export class WebGl2Renderer implements IRenderer {
   }
 
   public finishFrame() {
-    const uniforms = this.calculateOwnUniforms();
-    this.lightingPass.addDrawable(
-      new PointLight(uniforms.cursorPosition, 200, vec3.fromValues(1, 1, 0), 1)
-    );
-    this.distancePass.render(uniforms, this.viewCircle);
-    this.lightingPass.render(
-      uniforms,
-      this.viewCircle,
-      this.distanceFieldFrameBuffer.colorTexture
-    );
-    this.stopwatch?.stop();
-  }
-
-  private calculateOwnUniforms(): any {
-    const distanceScreenToWorld = this.getScreenToWorldTransform(
-      this.distanceFieldFrameBuffer.getSize()
-    );
-
-    const uvToWorld = mat2d.fromTranslation(
-      mat2d.create(),
-      this.viewBox.topLeft
-    );
-    mat2d.scale(uvToWorld, uvToWorld, this.viewBox.size);
-
-    const worldToDistanceUV = mat2d.scale(
-      mat2d.create(),
-      distanceScreenToWorld,
-      this.distanceFieldFrameBuffer.getSize()
-    );
-    mat2d.invert(worldToDistanceUV, worldToDistanceUV);
-
-    const ndcToUv = mat2d.fromScaling(
-      mat2d.create(),
-      vec2.fromValues(0.5, 0.5)
-    );
-    mat2d.translate(ndcToUv, ndcToUv, vec2.fromValues(1, 1));
+    this.calculateMatrices();
 
     const cursorPosition = this.screenUvToWorldCoordinate(this.cursorPosition);
 
-    return {
-      distanceScreenToWorld,
-      worldToDistanceUV,
-      cursorPosition,
-      ndcToUv,
-      uvToWorld,
-      viewBoxSize: this.viewBox.size,
-    };
+    this.lightingPass.addDrawable(
+      new PointLight(null, cursorPosition, 200, vec3.fromValues(1, 1, 0), 1)
+    );
+
+    const viewBoxRadius = vec2.length(
+      vec2.scale(vec2.create(), this.viewBoxSize, 0.5)
+    );
+
+    this.distancePass.render(
+      { ...this.matrices, cursorPosition },
+      this.cameraPosition,
+      viewBoxRadius
+    );
+
+    this.lightingPass.render(
+      { ...this.matrices, cursorPosition },
+      this.cameraPosition,
+      viewBoxRadius,
+      this.distanceFieldFrameBuffer.colorTexture
+    );
+
+    this.stopwatch?.stop();
+  }
+
+  private calculateMatrices() {
+    this.matrices.uvToWorld = mat2d.fromTranslation(
+      mat2d.create(),
+      this.viewBoxBottomLeft
+    );
+    mat2d.scale(
+      this.matrices.uvToWorld,
+      this.matrices.uvToWorld,
+      this.viewBoxSize
+    );
+
+    this.matrices.distanceScreenToWorld = this.getScreenToWorldTransform(
+      this.distanceFieldFrameBuffer.getSize()
+    );
+
+    this.matrices.worldToDistanceUV = mat2d.scale(
+      mat2d.create(),
+      this.matrices.distanceScreenToWorld,
+      this.distanceFieldFrameBuffer.getSize()
+    );
+    mat2d.invert(
+      this.matrices.worldToDistanceUV,
+      this.matrices.worldToDistanceUV
+    );
   }
 
   private getScreenToWorldTransform(screenSize: vec2) {
     const transform = mat2d.fromTranslation(
       mat2d.create(),
-      this.viewBox.topLeft
+      this.viewBoxBottomLeft
     );
     mat2d.scale(
       transform,
       transform,
-      vec2.divide(vec2.create(), this.viewBox.size, screenSize)
+      vec2.divide(vec2.create(), this.viewBoxSize, screenSize)
     );
     mat2d.translate(transform, transform, vec2.fromValues(0.5, 0.5));
 
@@ -160,12 +169,10 @@ export class WebGl2Renderer implements IRenderer {
   }
 
   public setCameraPosition(position: vec2) {
-    this.viewBox.topLeft = position;
-    const halfDiagonal = vec2.scale(vec2.create(), this.viewBox.size, 0.5);
-    this.viewCircle.center = vec2.add(
-      vec2.create(),
-      this.viewBox.topLeft,
-      halfDiagonal
+    this.cameraPosition = position;
+    this.viewBoxBottomLeft = vec2.fromValues(
+      this.cameraPosition.x - this.viewBoxSize.x / 2,
+      this.cameraPosition.y - this.viewBoxSize.y / 2
     );
   }
 
@@ -177,21 +184,10 @@ export class WebGl2Renderer implements IRenderer {
     const canvasAspectRatio =
       this.canvas.clientWidth / this.canvas.clientHeight;
 
-    this.viewBox.size = vec2.fromValues(
+    return (this.viewBoxSize = vec2.fromValues(
       Math.sqrt(size * canvasAspectRatio),
       Math.sqrt(size / canvasAspectRatio)
-    );
-
-    const halfDiagonal = vec2.scale(vec2.create(), this.viewBox.size, 0.5);
-
-    this.viewCircle.center = vec2.add(
-      vec2.create(),
-      this.viewBox.topLeft,
-      halfDiagonal
-    );
-    this.viewCircle.radius = vec2.length(halfDiagonal);
-
-    return this.viewBox.size;
+    ));
   }
 
   public drawInfoText(text: string) {

frontend/src/scripts/drawing/shaders/passthrough-shading-vs.glsl

@@ -6,6 +6,7 @@ precision mediump float;
 #define POINT_LIGHT_COUNT {pointLightCount}
 
 uniform mat3 modelTransform;
+uniform mat3 cameraTransform;
 uniform mat3 ndcToUv;
 uniform mat3 uvToWorld;