Some improvements

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

@@ -8,13 +8,12 @@ export class CircleLight implements ILight {
     uniformName: 'circleLights',
     countMacroName: 'circleLightCount',
     shaderCombinationSteps: settings.shaderCombinations.circleLightSteps,
-    empty: new CircleLight(vec2.fromValues(0, 0), 0, 0, vec3.fromValues(0, 0, 0), 0),
+    empty: new CircleLight(vec2.fromValues(0, 0), 0, vec3.fromValues(0, 0, 0), 0),
   };
 
   constructor(
     public center: vec2,
     public radius: number,
-    public traceRadius: number,
     public color: vec3,
     public lightness: number
   ) {}
@@ -33,7 +32,6 @@ export class CircleLight implements ILight {
     uniforms[uniformName].push({
       center: vec2.transformMat2d(vec2.create(), this.center, transform),
       radius: this.radius * scale,
-      traceRadius: this.traceRadius * scale,
       value: this.value,
     });
   }

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

@@ -1,4 +1,4 @@
-import { mat2d, vec2 } from 'gl-matrix';
+import { vec2 } from 'gl-matrix';
 import { IDrawable } from '../drawables/i-drawable';
 import { IDrawableDescriptor } from '../drawables/i-drawable-descriptor';
 import { FrameBuffer } from '../graphics-library/frame-buffer/frame-buffer';
@@ -30,12 +30,7 @@ export class RenderingPass {
     this.drawables.push(drawable);
   }
 
-  public render(
+  public render(commonUniforms: any, inputTexture?: WebGLTexture) {
-    commonUniforms: any,
-    scale: number,
-    transform: mat2d,
-    inputTexture?: WebGLTexture
-  ) {
     this.frame.bindAndClear(inputTexture);
 
     const stepsInUV = 1 / settings.tileMultiplier;
@@ -49,7 +44,7 @@ export class RenderingPass {
     for (let x = -1; x < 1; x += stepsInNDC) {
       for (let y = -1; y < 1; y += stepsInNDC) {
         const uniforms = { ...commonUniforms };
-        uniforms.maxMinDistance = 2 * worldR * scale;
+        uniforms.maxMinDistance = 2 * worldR * uniforms.scaleWorldLengthToNDC;
 
         const ndcBottomLeft = vec2.fromValues(x, y);
 
@@ -73,7 +68,11 @@ export class RenderingPass {
         );
 
         primitivesNearTile.forEach((p) =>
-          p.serializeToUniforms(uniforms, scale, transform)
+          p.serializeToUniforms(
+            uniforms,
+            uniforms.scaleWorldLengthToNDC,
+            uniforms.transformWorldToNDC
+          )
         );
 
         this.program.bindAndSetUniforms(uniforms);

frontend/src/scripts/drawing/rendering/uniforms-provider.ts

@@ -0,0 +1,95 @@
+import { mat2d, vec2 } from 'gl-matrix';
+import { BoundingBoxBase } from '../../shapes/bounding-box-base';
+
+export class UniformsProvider {
+  private scaleWorldLengthToNDC = 1;
+  private transformWorldToNDC = mat2d.create();
+
+  private viewAreaBottomLeft = vec2.create();
+  private worldAreaInView = vec2.create();
+  private squareToAspectRatio: vec2;
+  private uvToWorld: mat2d;
+  private cursorPosition = vec2.create();
+
+  public softShadowsEnabled: boolean;
+
+  public constructor(private gl: WebGL2RenderingContext) {}
+
+  public get uniforms(): any {
+    const cursorPosition = this.uvToWorldCoordinate(this.cursorPosition);
+    return {
+      cursorPosition,
+      pixelSize: 0.05,
+      uvToWorld: this.uvToWorld,
+      worldAreaInView: this.worldAreaInView,
+      squareToAspectRatio: this.squareToAspectRatio,
+      scaleWorldLengthToNDC: this.scaleWorldLengthToNDC,
+      transformWorldToNDC: this.transformWorldToNDC,
+      squareToAspectRatioTimes2: vec2.scale(vec2.create(), this.squareToAspectRatio, 2),
+      softShadowsEnabled: this.softShadowsEnabled,
+    };
+  }
+
+  private getScreenToWorldTransform(screenSize: vec2) {
+    const transform = mat2d.fromTranslation(mat2d.create(), this.viewAreaBottomLeft);
+    mat2d.scale(
+      transform,
+      transform,
+      vec2.divide(vec2.create(), this.worldAreaInView, screenSize)
+    );
+    mat2d.translate(transform, transform, vec2.fromValues(0.5, 0.5));
+
+    return transform;
+  }
+
+  public uvToWorldCoordinate(screenUvPosition: vec2): vec2 {
+    const resolution = vec2.fromValues(this.gl.canvas.width, this.gl.canvas.height);
+
+    return vec2.transformMat2d(
+      vec2.create(),
+      vec2.multiply(vec2.create(), screenUvPosition, resolution),
+      this.getScreenToWorldTransform(resolution)
+    );
+  }
+
+  public setViewArea(viewArea: BoundingBoxBase) {
+    this.worldAreaInView = viewArea.size;
+
+    // world coordinates
+    this.viewAreaBottomLeft = vec2.add(
+      vec2.create(),
+      viewArea.topLeft,
+      vec2.fromValues(0, -viewArea.size.y)
+    );
+
+    const scaleLongerEdgeTo1 =
+      1 / Math.max(this.worldAreaInView.x, this.worldAreaInView.y);
+
+    this.squareToAspectRatio = vec2.fromValues(
+      this.worldAreaInView.x * scaleLongerEdgeTo1,
+      this.worldAreaInView.y * scaleLongerEdgeTo1
+    );
+
+    this.scaleWorldLengthToNDC = scaleLongerEdgeTo1 * 2;
+
+    mat2d.fromScaling(
+      this.transformWorldToNDC,
+      vec2.fromValues(this.scaleWorldLengthToNDC, this.scaleWorldLengthToNDC)
+    );
+    mat2d.translate(
+      this.transformWorldToNDC,
+      this.transformWorldToNDC,
+      vec2.fromValues(
+        -this.viewAreaBottomLeft.x - 0.5 * this.worldAreaInView.x,
+        -this.viewAreaBottomLeft.y - 0.5 * this.worldAreaInView.y
+      )
+    );
+
+    this.uvToWorld = mat2d.fromTranslation(mat2d.create(), this.viewAreaBottomLeft);
+    mat2d.scale(this.uvToWorld, this.uvToWorld, this.worldAreaInView);
+  }
+
+  public setCursorPosition(position: vec2): void {
+    this.cursorPosition = position;
+  }
+}

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

@@ -1,4 +1,4 @@
-import { mat2d, vec2 } from 'gl-matrix';
+import { vec2 } from 'gl-matrix';
 import { BoundingBoxBase } from '../../shapes/bounding-box-base';
 import { DrawableBlob } from '../drawables/drawable-blob';
 import { DrawableTunnel } from '../drawables/drawable-tunnel';
@@ -11,26 +11,18 @@ import { IntermediateFrameBuffer } from '../graphics-library/frame-buffer/interm
 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 distanceFragmentShader from '../shaders/distance-fs.glsl';
-import lightsFragmentShader from '../shaders/lights-shading-fs.glsl';
+import distanceVertexShader from '../shaders/distance-vs.glsl';
-import caveVertexShader from '../shaders/passthrough-distance-vs.glsl';
+import lightsFragmentShader from '../shaders/shading-fs.glsl';
-import lightsVertexShader from '../shaders/passthrough-shading-vs.glsl';
+import lightsVertexShader from '../shaders/shading-vs.glsl';
 import { FpsAutoscaler } from './fps-autoscaler';
 import { RenderingPass } from './rendering-pass';
+import { UniformsProvider } from './uniforms-provider';
 
 export class WebGl2Renderer implements IRenderer {
   private gl: WebGL2RenderingContext;
   private stopwatch?: WebGlStopwatch;
-
+  private uniformsProvider: UniformsProvider;
-  private scaleWorldToNDC = mat2d.create();
-  private scaleWorldAreaInViewToNDC = 1;
-
-  private viewAreaBottomLeft = vec2.create();
-  private worldAreaInView = vec2.create();
-  private squareToAspectRatio: vec2;
-  private uvToWorld: mat2d;
-  private cursorPosition = vec2.create();
-
   private distanceFieldFrameBuffer: IntermediateFrameBuffer;
   private lightingFrameBuffer: DefaultFrameBuffer;
   private distancePass: RenderingPass;
@@ -39,8 +31,6 @@ export class WebGl2Renderer implements IRenderer {
 
   private initializePromise: Promise<[void, void]> = null;
 
-  private softShadowsEnabled: boolean;
-
   constructor(private canvas: HTMLCanvasElement, private overlay: HTMLElement) {
     this.gl = getWebGl2Context(canvas);
 
@@ -49,7 +39,7 @@ export class WebGl2Renderer implements IRenderer {
 
     this.distancePass = new RenderingPass(
       this.gl,
-      [caveVertexShader, caveFragmentShader],
+      [distanceVertexShader, distanceFragmentShader],
       [DrawableTunnel.descriptor, DrawableBlob.descriptor],
       this.distanceFieldFrameBuffer
     );
@@ -66,11 +56,14 @@ export class WebGl2Renderer implements IRenderer {
       this.lightingPass.initialize(),
     ]);
 
+    this.uniformsProvider = new UniformsProvider(this.gl);
+
     this.autoscaler = new FpsAutoscaler({
       distanceRenderScale: (v) =>
         (this.distanceFieldFrameBuffer.renderScale = v as number),
       finalRenderScale: (v) => (this.lightingFrameBuffer.renderScale = v as number),
-      softShadowsEnabled: (v) => (this.softShadowsEnabled = v as boolean),
+      softShadowsEnabled: (v) =>
+        (this.uniformsProvider.softShadowsEnabled = v as boolean),
     });
 
     try {
@@ -102,105 +95,27 @@ export class WebGl2Renderer implements IRenderer {
   }
 
   public finishFrame() {
-    this.calculateMatrices();
+    this.distancePass.render(this.uniformsProvider.uniforms);
-
-    this.distancePass.render(
-      this.uniforms,
-      this.scaleWorldAreaInViewToNDC,
-      this.scaleWorldToNDC
-    );
     this.lightingPass.render(
-      this.uniforms,
+      this.uniformsProvider.uniforms,
-      this.scaleWorldAreaInViewToNDC,
-      this.scaleWorldToNDC,
       this.distanceFieldFrameBuffer.colorTexture
     );
 
     this.stopwatch?.stop();
   }
 
-  private get uniforms(): any {
+  public setViewArea(viewArea: BoundingBoxBase) {
-    const cursorPosition = this.uvToWorldCoordinate(this.cursorPosition);
+    this.uniformsProvider.setViewArea(viewArea);
-    return {
-      cursorPosition,
-      pixelSize:
-        (4.5 * this.scaleWorldAreaInViewToNDC) /
-        this.distanceFieldFrameBuffer.renderScale,
-      uvToWorld: this.uvToWorld,
-      worldAreaInView: this.worldAreaInView,
-      squareToAspectRatio: this.squareToAspectRatio,
-      softShadowsEnabled: this.softShadowsEnabled,
-    };
   }
 
-  private calculateMatrices() {
+  public setCursorPosition(position: vec2) {
-    this.uvToWorld = mat2d.fromTranslation(mat2d.create(), this.viewAreaBottomLeft);
+    this.uniformsProvider.setCursorPosition(position);
-    mat2d.scale(this.uvToWorld, this.uvToWorld, this.worldAreaInView);
-  }
-
-  private getScreenToWorldTransform(screenSize: vec2) {
-    const transform = mat2d.fromTranslation(mat2d.create(), this.viewAreaBottomLeft);
-    mat2d.scale(
-      transform,
-      transform,
-      vec2.divide(vec2.create(), this.worldAreaInView, screenSize)
-    );
-    mat2d.translate(transform, transform, vec2.fromValues(0.5, 0.5));
-
-    return transform;
-  }
-
-  public uvToWorldCoordinate(screenUvPosition: vec2): vec2 {
-    const resolution = vec2.fromValues(this.canvas.width, this.canvas.height);
-
-    return vec2.transformMat2d(
-      vec2.create(),
-      vec2.multiply(vec2.create(), screenUvPosition, resolution),
-      this.getScreenToWorldTransform(resolution)
-    );
   }
 
   public get canvasSize(): vec2 {
     return vec2.fromValues(this.canvas.clientWidth, this.canvas.clientHeight);
   }
 
-  public setViewArea(viewArea: BoundingBoxBase) {
-    this.worldAreaInView = viewArea.size;
-
-    // world coordinates
-    this.viewAreaBottomLeft = vec2.add(
-      vec2.create(),
-      viewArea.topLeft,
-      vec2.fromValues(0, -viewArea.size.y)
-    );
-
-    const scaleLongerEdgeTo1 =
-      1 / Math.max(this.worldAreaInView.x, this.worldAreaInView.y);
-
-    this.squareToAspectRatio = vec2.fromValues(
-      this.worldAreaInView.x * scaleLongerEdgeTo1,
-      this.worldAreaInView.y * scaleLongerEdgeTo1
-    );
-
-    this.scaleWorldAreaInViewToNDC = scaleLongerEdgeTo1 * 2;
-
-    mat2d.fromScaling(
-      this.scaleWorldToNDC,
-      vec2.fromValues(this.scaleWorldAreaInViewToNDC, this.scaleWorldAreaInViewToNDC)
-    );
-    const translate = vec2.scale(vec2.create(), this.viewAreaBottomLeft, -1);
-    vec2.subtract(
-      translate,
-      translate,
-      vec2.scale(vec2.create(), this.worldAreaInView, 0.5)
-    );
-    mat2d.translate(this.scaleWorldToNDC, this.scaleWorldToNDC, translate);
-  }
-
-  public setCursorPosition(position: vec2): void {
-    this.cursorPosition = position;
-  }
-
   public drawInfoText(text: string) {
     if (this.overlay.innerText != text) {
       this.overlay.innerText = text;

frontend/src/scripts/drawing/settings.ts

@@ -17,18 +17,18 @@ export const settings = {
         softShadowsEnabled: false,
       },
       {
-        distanceRenderScale: 0.2,
+        distanceRenderScale: 0.3,
         finalRenderScale: 1.0,
         softShadowsEnabled: false,
       },
-      /* {
+      {
-        distanceRenderScale: 0.3,
+        distanceRenderScale: 0.5,
         finalRenderScale: 1.0,
-        softShadowsEnabled: true,
+        softShadowsEnabled: false,
       },
       {
-        distanceRenderScale: 1.0,
+        distanceRenderScale: 0.5,
-        finalRenderScale: 1.25,
+        finalRenderScale: 1.0,
         softShadowsEnabled: true,
       },
       {
@@ -45,7 +45,7 @@ export const settings = {
         distanceRenderScale: 2,
         finalRenderScale: 2,
         softShadowsEnabled: true,
-      },*/
+      },
     ],
     startingTargetIndex: 2,
     scalingOptions: {

frontend/src/scripts/drawing/shaders/distance-fs.glsl

@@ -0,0 +1,95 @@
+#version 300 es
+
+precision lowp float;
+
+#define LINE_COUNT {lineCount}
+#define BLOB_COUNT {blobCount}
+ 
+uniform float maxMinDistance;
+uniform float pixelSize;
+
+in vec2 position;
+
+#if LINE_COUNT > 0
+    uniform struct {
+        vec2 from;
+        vec2 toFromDelta;
+        float fromRadius;
+        float toRadius;
+    }[LINE_COUNT] lines;
+
+    void lineMinDistance(inout float minDistance, inout float color) {
+        float myMinDistance = maxMinDistance;
+        for (int i = 0; i < LINE_COUNT; i++) {
+            vec2 targetFromDelta = position - lines[i].from;
+            vec2 toFromDelta = lines[i].toFromDelta;
+            
+            float h = clamp(
+                dot(targetFromDelta, toFromDelta) / dot(toFromDelta, toFromDelta),
+                0.0, 1.0
+            );
+
+            float lineDistance = -mix(
+                lines[i].fromRadius, lines[i].toRadius, h
+            ) + distance(
+                targetFromDelta, toFromDelta * h
+            );
+
+            myMinDistance = min(myMinDistance, lineDistance);
+        }
+
+        color = mix(0.0, color, step(pixelSize, -myMinDistance));
+
+        minDistance = -myMinDistance;
+    }
+#endif
+
+#if BLOB_COUNT > 0
+    uniform struct {
+        vec2 headCenter;
+        vec2 torsoCenter;
+        vec2 leftFootCenter;
+        vec2 rightFootCenter;
+        float headRadius;
+        float torsoRadius;
+        float footRadius;
+        float k;
+    }[BLOB_COUNT] blobs;
+
+    float circleMinDistance(vec2 circleCenter, float radius) {
+        return distance(position, circleCenter) - radius;
+    }
+
+    void blobMinDistance(inout float minDistance, inout float color) {
+        for (int i = 0; i < BLOB_COUNT; i++) {
+            float res = exp2(-blobs[i].k * circleMinDistance(blobs[i].headCenter, blobs[i].headRadius));
+            res += exp2(-blobs[i].k * circleMinDistance(blobs[i].torsoCenter, blobs[i].torsoRadius));
+            res += exp2(-blobs[i].k * circleMinDistance(blobs[i].leftFootCenter, blobs[i].footRadius));
+            res += exp2(-blobs[i].k * circleMinDistance(blobs[i].rightFootCenter, blobs[i].footRadius));
+            res = -log2(res) / blobs[i].k;
+
+            color = mix(1.0, color, step(pixelSize, res));
+            
+            minDistance = min(minDistance, res);
+        }
+    }
+#endif
+
+out vec2 fragmentColor;
+
+void main() {
+    float minDistance = -maxMinDistance;
+    float color = 0.0;
+
+    #if LINE_COUNT > 0
+        lineMinDistance(minDistance, color);
+    #endif
+
+    #if BLOB_COUNT > 0
+        blobMinDistance(minDistance, color);
+    #endif
+
+
+    // minDistance / 2.0: NDC to UV scale
+    fragmentColor = vec2(minDistance / 2.0, color);
+}

frontend/src/scripts/drawing/shaders/distance-vs.glsl

@@ -0,0 +1,15 @@
+#version 300 es
+
+precision lowp float;
+
+uniform mat3 modelTransform;
+uniform vec2 squareToAspectRatio;
+
+in vec4 vertexPosition;
+out vec2 position;
+
+void main() {
+    vec3 vertexPosition2D = vec3(vertexPosition.xy, 1.0) * modelTransform;
+    gl_Position = vec4(vertexPosition2D.xy, 0.0, 1.0);
+    position = vertexPosition2D.xy * squareToAspectRatio;
+}

frontend/src/scripts/drawing/shaders/shading-fs.glsl

@@ -0,0 +1,147 @@
+#version 300 es
+
+precision lowp float;
+
+#define INFINITY 1000.0
+#define LIGHT_DROP 4.0
+#define AMBIENT_LIGHT vec3(0.3)
+
+#define CIRCLE_LIGHT_COUNT {circleLightCount}
+#define POINT_LIGHT_COUNT {pointLightCount}
+
+uniform bool softShadowsEnabled;
+
+#define AIR_COLOR vec3(0.5)
+
+uniform sampler2D distanceTexture;
+
+vec3[3] colors = vec3[](
+    vec3(0.1, 0.05, 0.1),
+    vec3(0.0, 1.0, 0.0),
+    vec3(0.0, 0.0, 1.0)
+);
+
+float getDistance(in vec2 target, out vec3 color) {
+    vec4 values = texture(distanceTexture, target);
+    color = colors[int(values[1])];
+
+    return values[0];
+}
+
+float getDistance(in vec2 target) {
+    return texture(distanceTexture, target)[0];
+}
+
+#if CIRCLE_LIGHT_COUNT > 0
+    uniform struct {
+        vec2 center;
+        float radius;
+        vec3 value;
+    }[CIRCLE_LIGHT_COUNT] circleLights;
+
+    in vec2[CIRCLE_LIGHT_COUNT] circleLightDirections;
+#endif
+
+#if POINT_LIGHT_COUNT > 0
+    uniform struct {
+        vec2 center;
+        float radius;
+        vec3 value;
+    }[POINT_LIGHT_COUNT] pointLights;
+
+    in vec2[POINT_LIGHT_COUNT] pointLightDirections;
+#endif
+
+in vec2 position;
+in vec2 uvCoordinates;
+uniform vec2 squareToAspectRatioTimes2;
+
+out vec4 fragmentColor;
+
+void main() {
+    vec3 colorAtPosition;
+    float startingDistance = getDistance(uvCoordinates, colorAtPosition);
+    if (startingDistance < 0.0) {
+        fragmentColor = vec4(colorAtPosition, 1.0);
+        return;
+    }
+
+    colorAtPosition = AIR_COLOR;
+
+    vec3 lighting = AMBIENT_LIGHT;
+
+    #if CIRCLE_LIGHT_COUNT > 0
+        for (int i = 0; i < CIRCLE_LIGHT_COUNT; i++) {
+            float lightCenterDistance = distance(circleLights[i].center, position);
+            float lightDistance = lightCenterDistance - circleLights[i].radius;
+
+            vec3 lightColorAtPosition = circleLights[i].value / pow(
+                lightDistance / LIGHT_DROP + 1.0, 2.0
+            );
+
+            vec2 targetDirection = vec2(-1.0, 0.0);
+            vec2 originalDirection = normalize(circleLightDirections[i]);
+            vec2 direction = originalDirection / squareToAspectRatioTimes2;
+
+            lightColorAtPosition *= pow(max(0.0, dot(targetDirection, originalDirection)), 10.0);
+
+            float rayLength = startingDistance;
+
+            if (softShadowsEnabled) {
+                float q = INFINITY;
+                for (int j = 0; j < 96; j++) {
+                    if (rayLength >= lightDistance) {
+                        lighting += lightColorAtPosition * clamp(
+                            (q * 2.0) / circleLights[i].radius * lightCenterDistance, 0.0, 1.0
+                        ) * step(0.0, startingDistance);
+                        break;
+                    }
+
+                    float minDistance = getDistance(uvCoordinates + direction * rayLength);
+                    q = min(q, minDistance / rayLength);
+
+                    rayLength += minDistance / 2.0;
+                }
+            } else {
+                for (int j = 0; j < 32; j++) {
+                    rayLength += getDistance(uvCoordinates + direction * rayLength);
+                }
+                if (rayLength >= lightCenterDistance) {
+                    lighting += lightColorAtPosition * step(0.0, startingDistance);
+                }
+            }
+        }
+    #endif
+
+    #if POINT_LIGHT_COUNT > 0
+        /*for (int i = 0; i < POINT_LIGHT_COUNT; i++) {
+            float lightDistance = distance(pointLights[i].center, worldCoordinates);
+
+            vec3 lightColorAtPosition = mix(
+                pointLights[i].value, 
+                vec3(0.0), 
+                sqrt(clamp(lightDistance / pointLights[i].radius, 0.0, 1.0))
+            );
+
+        
+            float q = INFINITY;
+            float rayLength = startingDistance;
+            float exponentialDecayDistance = startingDistance;
+            vec2 direction = normalize(pointLightDirections[i]) / viewBoxSize;
+
+            for (int j = 0; j < 48; j++) {
+                if (rayLength > lightDistance) {
+                    lighting += lightColorAtPosition * step(0.0, q);
+                    break;
+                }
+
+                float minDistance = getDistance(uvCoordinates + direction * rayLength);
+                exponentialDecayDistance = (exponentialDecayDistance + minDistance) / 2.0;
+                q = min(q, exponentialDecayDistance);
+                rayLength += minDistance;
+            }
+        }*/
+    #endif
+    
+    fragmentColor = vec4(colorAtPosition * lighting, 1.0);
+}

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

@@ -0,0 +1,58 @@
+#version 300 es
+
+precision lowp float;
+
+#define CIRCLE_LIGHT_COUNT {circleLightCount}
+#define POINT_LIGHT_COUNT {pointLightCount}
+
+uniform mat3 modelTransform;
+in vec4 vertexPosition;
+
+out vec2 position;
+out vec2 uvCoordinates;
+
+uniform vec2 squareToAspectRatio;
+
+#if CIRCLE_LIGHT_COUNT > 0
+    uniform struct {
+        vec2 center;
+        float radius;
+        vec3 value;
+    }[CIRCLE_LIGHT_COUNT] circleLights;
+
+    out vec2[CIRCLE_LIGHT_COUNT] circleLightDirections;
+#endif
+
+#if POINT_LIGHT_COUNT > 0
+    uniform struct {
+        vec2 center;
+        float radius;
+        vec3 value;
+    }[POINT_LIGHT_COUNT] pointLights;
+
+    out vec2[POINT_LIGHT_COUNT] pointLightDirections;
+#endif
+
+void main() {
+    vec3 vertexPosition2D = vec3(vertexPosition.xy, 1.0) * modelTransform;
+    gl_Position = vec4(vertexPosition2D.xy, 0.0, 1.0);
+    position = vertexPosition2D.xy * squareToAspectRatio;
+
+    uvCoordinates = (vertexPosition2D * mat3(
+        0.5, 0.0, 0.5,
+        0.0, 0.5, 0.5,
+        0.0, 0.0, 1.0
+    )).xy;
+
+    #if CIRCLE_LIGHT_COUNT > 0
+        for (int i = 0; i < CIRCLE_LIGHT_COUNT; i++) {
+            circleLightDirections[i] = circleLights[i].center - position;
+        }
+    #endif
+
+    #if POINT_LIGHT_COUNT > 0
+        for (int i = 0; i < POINT_LIGHT_COUNT; i++) {
+            pointLightDirections[i] = pointLights[i].center - position;
+        }
+    #endif
+}

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

@@ -21,13 +21,7 @@ export class Character extends GameObject {
   constructor(private game: IGame) {
     super();
 
-    this.light = new CircleLight(
+    this.light = new CircleLight(vec2.create(), 30, vec3.fromValues(0.67, 0.0, 0.33), 2);
-      vec2.create(),
-      40,
-      this.shape.boundingCircleRadius * 2,
-      vec3.fromValues(0.67, 0.0, 0.33),
-      2
-    );
 
     this.addCommandExecutor(StepCommand, this.stepHandler.bind(this));
     this.addCommandExecutor(RenderCommand, this.draw.bind(this));
@@ -115,7 +109,7 @@ export class Character extends GameObject {
 
   private setPosition(value: vec2) {
     this.shape.position = value;
-    this.light.center = value;
+    this.light.center = vec2.add(vec2.create(), value, vec2.fromValues(150, 0));
   }
 
   public stepHandler(c: StepCommand) {

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

@@ -10,7 +10,7 @@ export class Lamp extends GameObject {
   constructor(center: vec2, radius: number, color: vec3, lightness: number) {
     super();
 
-    this.light = new CircleLight(center, radius, radius, color, lightness);
+    this.light = new CircleLight(center, radius, color, lightness);
 
     this.addCommandExecutor(RenderCommand, this.draw.bind(this));
     this.addCommandExecutor(MoveToCommand, this.moveTo.bind(this));

frontend/src/styles/main.scss

@@ -11,7 +11,7 @@ body {
 
   #overlay {
     font-family: Helvetica, Arial, sans-serif;
-    font-size: 1em;
+    font-size: 0.75em;
     margin: 0.75em 1em;
     user-select: none;
     pointer-events: none;
@@ -25,7 +25,7 @@ body {
     white-space: pre;
 
     @media (max-width: 800px) {
-      font-size: 0.75em;
+      font-size: 0.65em;
     }
   }