Fix should draw condition

frontend/src/scripts/drawing/drawer.ts

@@ -1,4 +1,5 @@
 import { vec2 } from 'gl-matrix';
+import { Circle } from '../math/circle';
 
 export interface Drawer {
   startFrame(deltaTime: DOMHighResTimeStamp): void;
@@ -10,5 +11,5 @@ export interface Drawer {
   setInViewArea(size: number): vec2;
   screenUvToWorldCoordinate(mousePosition: vec2): vec2;
   drawInfoText(text: string): void;
-  isOnScreen(position: vec2): boolean;
+  isOnScreen(boundingCircle: Circle): boolean;
 }

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

@@ -1,5 +1,6 @@
 import { mat2d, vec2 } from 'gl-matrix';
 import { clamp } from '../helper/clamp';
+import { Circle } from '../math/circle';
 import { Rectangle } from '../math/rectangle';
 import { InfoText } from '../objects/types/info-text';
 import { Drawer } from './drawer';
@@ -13,6 +14,7 @@ export class WebGl2Renderer implements Drawer {
   private stopwatch?: WebGlStopwatch;
 
   private viewBox: Rectangle = new Rectangle();
+  private viewCircle: Circle = new Circle(vec2.create(), 0);
   private uniforms: any;
   private cursorPosition = vec2.create();
   private distanceFieldFrameBuffer: IntermediateFrameBuffer;
@@ -212,6 +214,15 @@ export class WebGl2Renderer implements Drawer {
       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;
   }
 
@@ -221,7 +232,7 @@ export class WebGl2Renderer implements Drawer {
     }
   }
 
-  public isOnScreen(position: vec2): boolean {
+  public isOnScreen(boundingCircle: Circle): boolean {
-    return this.viewBox.isInside(position);
+    return this.viewCircle.areIntersecting(boundingCircle);
   }
 }

frontend/src/scripts/math/circle.ts

@@ -0,0 +1,15 @@
+import { vec2 } from 'gl-matrix';
+
+export class Circle {
+  public constructor(public center: vec2, public radius: number) {}
+
+  public isInside(position: vec2): boolean {
+    const distance = vec2.distance(this.center, position);
+    return distance < this.radius;
+  }
+
+  public areIntersecting(other: Circle): boolean {
+    const distance = vec2.distance(this.center, other.center);
+    return distance < this.radius + other.radius;
+  }
+}

frontend/src/scripts/math/rectangle.ts

@@ -1,13 +1,10 @@
-import { Typed } from '../transport/serializable';
 import { vec2 } from 'gl-matrix';
 
-export class Rectangle extends Typed {
+export class Rectangle {
   public constructor(
     public topLeft: vec2 = vec2.create(),
     public size: vec2 = vec2.create()
-  ) {
+  ) {}
-    super();
-  }
 
   public isInside(position: vec2): boolean {
     const translated = vec2.subtract(vec2.create(), position, this.topLeft);

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

@@ -7,7 +7,7 @@ import { GameObject } from '../game-object';
 import { CircleLight } from './circle-light';
 
 export class Camera extends GameObject {
-  private inViewArea = 1920 * 1080;
+  private inViewArea = 1920 * 1080 * 5;
   private cursorPosition = vec2.create();
 
   constructor(private light: CircleLight) {

frontend/src/scripts/objects/types/circle-light.ts

@@ -1,9 +1,14 @@
 import { vec2, vec3 } from 'gl-matrix';
 import { DrawCommand } from '../../commands/types/draw';
 import { MoveToCommand } from '../../commands/types/move-to';
+import { Circle } from '../../math/circle';
 import { GameObject } from '../game-object';
 
+const range = 2000;
+
 export class CircleLight extends GameObject {
+  private boundingCircle: Circle;
+
   constructor(
     private center: vec2,
     private radius: number,
@@ -11,12 +16,14 @@ export class CircleLight extends GameObject {
   ) {
     super();
 
+    this.boundingCircle = new Circle(center, range);
+
     this.addCommandExecutor(DrawCommand, this.draw.bind(this));
     this.addCommandExecutor(MoveToCommand, this.moveTo.bind(this));
   }
 
   private draw(c: DrawCommand) {
-    if (c.drawer.isOnScreen(this.center)) {
+    if (c.drawer.isOnScreen(this.boundingCircle)) {
       c.drawer.appendToUniformList('lights', {
         center: this.center,
         radius: this.radius,
@@ -27,5 +34,6 @@ export class CircleLight extends GameObject {
 
   private moveTo(c: MoveToCommand) {
     this.center = c.position;
+    this.boundingCircle.center = c.position;
   }
 }

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

@@ -1,10 +1,13 @@
 import { vec2 } from 'gl-matrix';
 import { DrawCommand } from '../../commands/types/draw';
+import { Circle } from '../../math/circle';
 import { GameObject } from '../game-object';
 
 export interface Line {}
 
 export class Tunnel extends GameObject {
+  private boundingCircle: Circle;
+
   constructor(
     private from: vec2,
     private to: vec2,
@@ -13,11 +16,15 @@ export class Tunnel extends GameObject {
   ) {
     super();
 
+    this.boundingCircle = new Circle(
+      vec2.fromValues(from.x / 2 + to.x / 2, from.y / 2 + to.y / 2),
+      radiusFrom + radiusTo + vec2.distance(from, to)
+    );
     this.addCommandExecutor(DrawCommand, this.draw.bind(this));
   }
 
   private draw(c: DrawCommand) {
-    if (c.drawer.isOnScreen(this.from) || c.drawer.isOnScreen(this.to)) {
+    if (c.drawer.isOnScreen(this.boundingCircle)) {
       c.drawer.appendToUniformList('lines', this.from, this.to);
       c.drawer.appendToUniformList('radii', this.radiusFrom, this.radiusTo);
     }

frontend/src/scripts/objects/world/create-dungeon.ts

@@ -17,7 +17,7 @@ export const createDungeon = (objects: ObjectContainer) => {
       new Tunnel(previousEnd, currentEnd, previousRadius, currentToRadius)
     );
 
-    if (deltaHeight > 0) {
+    if (deltaHeight > 0 && Math.random() > 0.5) {
       objects.addObject(
         new CircleLight(
           currentEnd,

frontend/src/shaders/lights-shading-fs.glsl

@@ -2,8 +2,8 @@
 
 precision mediump float;
 
-#define INFINITY 10000.0
+#define INFINITY 1000.0
-#define LIGHT_COUNT 5
+#define LIGHT_COUNT 10
 #define AMBIENT_LIGHT vec3(0.15)
 #define LIGHT_DROP 800.0
 #define SHADOW_BIAS 0.01
@@ -24,7 +24,7 @@ float square(in float a) {
 float getDistance(in vec2 target, out vec3 color) {
     vec4 values = texture(distanceTexture, target);
     color = values.rgb;
-    return  values.w * 32.0;
+    return values.w * 32.0;
 }
 
 float getDistance(in vec2 target) {