Add dynamic shader generation

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

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

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

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

frontend/src/scripts/drawing/graphics-library/frame-buffer/default-frame-buffer.ts

@@ -1,11 +1,8 @@
-import { FragmentShaderOnlyProgram } from './fragment-shader-only-program';
+import { IProgram } from '../program/i-program';
 import { FrameBuffer } from './frame-buffer';
 
 export class DefaultFrameBuffer extends FrameBuffer {
-  constructor(
+  constructor(gl: WebGL2RenderingContext, programs: Array<IProgram>) {
-    gl: WebGL2RenderingContext,
-    programs: Array<FragmentShaderOnlyProgram>
-  ) {
     super(gl, programs);
     this.frameBuffer = null;
 

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

@@ -1,5 +1,5 @@
 import { vec2 } from 'gl-matrix';
-import { FragmentShaderOnlyProgram } from './fragment-shader-only-program';
+import { IProgram } from '../program/i-program';
 
 export abstract class FrameBuffer {
   public renderScale = 1;
@@ -10,7 +10,7 @@ export abstract class FrameBuffer {
 
   constructor(
     protected gl: WebGL2RenderingContext,
-    protected programs: Array<FragmentShaderOnlyProgram>
+    protected programs: Array<IProgram>
   ) {}
 
   public render(uniforms: any, colorInput?: WebGLTexture) {
@@ -25,8 +25,7 @@ export abstract class FrameBuffer {
     this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
 
     this.programs.forEach((p) => {
-      p.bind();
+      p.bindAndSetUniforms(uniforms);
-      p.setUniforms(uniforms);
       p.draw();
     });
   }

frontend/src/scripts/drawing/graphics-library/frame-buffer/intermediate-frame-buffer.ts

@@ -1,13 +1,10 @@
-import { FragmentShaderOnlyProgram } from './fragment-shader-only-program';
+import { IProgram } from '../program/i-program';
 import { FrameBuffer } from './frame-buffer';
 
 export class IntermediateFrameBuffer extends FrameBuffer {
   private frameTexture: WebGLTexture;
 
-  constructor(
+  constructor(gl: WebGL2RenderingContext, programs: Array<IProgram>) {
-    gl: WebGL2RenderingContext,
-    programs: Array<FragmentShaderOnlyProgram>
-  ) {
     super(gl, programs);
 
     this.frameTexture = this.gl.createTexture();
@@ -46,7 +43,7 @@ export class IntermediateFrameBuffer extends FrameBuffer {
     this.gl.texParameteri(
       this.gl.TEXTURE_2D,
       this.gl.TEXTURE_MAG_FILTER,
-      this.gl.NEAREST
+      this.gl.LINEAR
     );
     this.gl.texParameteri(
       this.gl.TEXTURE_2D,

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

@@ -1,8 +1,14 @@
 export const createShader = (
   gl: WebGL2RenderingContext,
   type: GLenum,
-  source: string
+  source: string,
+  substitutions: { [name: string]: string }
 ): WebGLShader => {
+  source = source.replace(
+    /{(.+)}/gm,
+    (_, name: string): string => substitutions[name]
+  );
+
   const shader = gl.createShader(type);
   gl.shaderSource(shader, source);
   gl.compileShader(shader);

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

@@ -1,4 +1,4 @@
-import { InfoText } from '../../objects/types/info-text';
+import { InfoText } from '../../../objects/types/info-text';
 
 // https://www.khronos.org/registry/webgl/extensions/EXT_disjoint_timer_query_webgl2/
 

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

@@ -0,0 +1,52 @@
+import { Program } from './program';
+
+export class FragmentShaderOnlyProgram extends Program {
+  private vao: WebGLVertexArrayObject;
+
+  constructor(
+    gl: WebGL2RenderingContext,
+    vertexShaderSource: string,
+    fragmentShaderSource: string,
+    substitutions: { [name: string]: string }
+  ) {
+    super(gl, vertexShaderSource, fragmentShaderSource, substitutions);
+    this.prepareScreenQuad('a_position');
+  }
+
+  public bind() {
+    super.bind();
+    this.gl.bindVertexArray(this.vao);
+  }
+
+  public draw() {
+    this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+  }
+
+  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/program/i-program.ts

@@ -0,0 +1,5 @@
+export interface IProgram {
+  bindAndSetUniforms(values: { [name: string]: any }): void;
+  draw(): void;
+  delete(): void;
+}

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

@@ -1,11 +1,11 @@
-import { createShader } from './create-shader';
+import { createShader } from '../helper/create-shader';
-import { loadUniform } from './load-uniform';
+import { loadUniform } from '../helper/load-uniform';
+import { IProgram } from './i-program';
 
-export class FragmentShaderOnlyProgram {
+export abstract class Program implements IProgram {
-  program: WebGLProgram;
+  protected program: WebGLProgram;
-  shaders: Array<WebGLShader> = [];
+  private shaders: Array<WebGLShader> = [];
 
-  private vao: WebGLVertexArrayObject;
   private uniforms: Array<{
     name: Array<string>;
     location: WebGLUniformLocation;
@@ -13,25 +13,25 @@ export class FragmentShaderOnlyProgram {
   }> = [];
 
   constructor(
-    private gl: WebGL2RenderingContext,
+    protected gl: WebGL2RenderingContext,
-    passthroughVertexShaderSource: string,
+    vertexShaderSource: string,
-    fragmentShaderSource: string
+    fragmentShaderSource: string,
+    substitutions: { [name: string]: string }
   ) {
-    this.createProgram(passthroughVertexShaderSource, fragmentShaderSource);
+    this.createProgram(vertexShaderSource, fragmentShaderSource, substitutions);
-    this.prepareScreenQuad('a_position');
     this.queryUniforms();
   }
 
+  public bindAndSetUniforms(values: { [name: string]: any }) {
+    this.bind();
+    this.setUniforms(values);
+  }
+
   public bind() {
     this.gl.useProgram(this.program);
-    this.gl.bindVertexArray(this.vao);
   }
 
-  public draw() {
+  public setUniforms(values: { [name: string]: any }) {
-    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),
@@ -44,6 +44,13 @@ export class FragmentShaderOnlyProgram {
     });
   }
 
+  public delete() {
+    this.shaders.forEach((s) => this.gl.deleteShader(s));
+    this.gl.deleteProgram(this.program);
+  }
+
+  public abstract draw(): void;
+
   private queryUniforms() {
     const uniformCount = this.gl.getProgramParameter(
       this.program,
@@ -60,8 +67,6 @@ export class FragmentShaderOnlyProgram {
       });
     }
 
-    console.log(this.uniforms);
-
     this.uniforms.map((u1) => {
       const isSingle =
         this.uniforms.filter((u2) => u2.name.includes(u1.name[0])).length == 1;
@@ -70,20 +75,20 @@ export class FragmentShaderOnlyProgram {
       }
       return u1;
     });
-
-    console.log(this.uniforms);
   }
 
   private createProgram(
     passthroughVertexShaderSource: string,
-    fragmentShaderSource: string
+    fragmentShaderSource: string,
+    substitutions: { [name: string]: string }
   ) {
     this.program = this.gl.createProgram();
 
     const vertexShader = createShader(
       this.gl,
       this.gl.VERTEX_SHADER,
-      passthroughVertexShaderSource
+      passthroughVertexShaderSource,
+      substitutions
     );
     this.gl.attachShader(this.program, vertexShader);
     this.shaders.push(vertexShader);
@@ -91,7 +96,8 @@ export class FragmentShaderOnlyProgram {
     const fragmentShader = createShader(
       this.gl,
       this.gl.FRAGMENT_SHADER,
-      fragmentShaderSource
+      fragmentShaderSource,
+      substitutions
     );
     this.gl.attachShader(this.program, fragmentShader);
     this.shaders.push(fragmentShader);
@@ -102,36 +108,9 @@ export class FragmentShaderOnlyProgram {
       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/program/uniform-array-autoscaling-program.ts

@@ -0,0 +1,76 @@
+import { InfoText } from '../../../objects/types/info-text';
+import { FragmentShaderOnlyProgram } from './fragment-shader-only-program';
+import { IProgram } from './i-program';
+
+export class UniformArrayAutoScalingProgram implements IProgram {
+  private programs: Array<{
+    program: FragmentShaderOnlyProgram;
+    value: number;
+  }> = [];
+  private current: FragmentShaderOnlyProgram;
+
+  constructor(
+    private gl: WebGL2RenderingContext,
+    private vertexShaderSource: string,
+    private fragmentShaderSource: string,
+    private options: {
+      getValueFromUniforms: (values: { [name: string]: any }) => number;
+      uniformArraySizeName: string;
+      startingValue: number;
+      steps: number;
+      maximumValue: number;
+    }
+  ) {
+    for (
+      let i = options.startingValue;
+      i < options.maximumValue;
+      i += options.steps
+    ) {
+      this.createProgram(i);
+    }
+  }
+
+  bindAndSetUniforms(values: { [name: string]: any }): void {
+    let value = this.options.getValueFromUniforms(values);
+    value = Math.min(this.options.maximumValue, value);
+
+    InfoText.modifyRecord(this.options.uniformArraySizeName, value.toString());
+
+    const closest = this.programs.find(
+      (p) => value < p.value && value + this.options.steps >= p.value
+    );
+    if (closest) {
+      this.current = closest.program;
+    } else {
+      this.current = this.createProgram(value + this.options.steps);
+    }
+
+    this.current.bindAndSetUniforms(values);
+  }
+
+  draw(): void {
+    this.current.draw();
+  }
+
+  delete(): void {
+    this.programs.forEach((p) => p.program.delete());
+  }
+
+  private createProgram(arraySize: number): FragmentShaderOnlyProgram {
+    const program = new FragmentShaderOnlyProgram(
+      this.gl,
+      this.vertexShaderSource,
+      this.fragmentShaderSource,
+      {
+        [this.options.uniformArraySizeName]: Math.floor(arraySize).toString(),
+      }
+    );
+
+    this.programs.push({
+      program,
+      value: arraySize,
+    });
+
+    return program;
+  }
+}

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

@@ -1,7 +1,7 @@
 import { vec2 } from 'gl-matrix';
 import { Circle } from '../math/circle';
 
-export interface Drawer {
+export interface IRenderer {
   startFrame(deltaTime: DOMHighResTimeStamp): void;
   finishFrame(): void;
   giveUniforms(uniforms: any): void;
@@ -12,4 +12,5 @@ export interface Drawer {
   screenUvToWorldCoordinate(mousePosition: vec2): vec2;
   drawInfoText(text: string): void;
   isOnScreen(boundingCircle: Circle): boolean;
+  isPositionOnScreen(position: vec2): boolean;
 }

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

@@ -3,13 +3,13 @@ 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';
+import { DefaultFrameBuffer } from './graphics-library/frame-buffer/default-frame-buffer';
-import { DefaultFrameBuffer } from './graphics-library/default-frame-buffer';
+import { IntermediateFrameBuffer } from './graphics-library/frame-buffer/intermediate-frame-buffer';
-import { FragmentShaderOnlyProgram } from './graphics-library/fragment-shader-only-program';
+import { WebGlStopwatch } from './graphics-library/helper/stopwatch';
-import { IntermediateFrameBuffer } from './graphics-library/intermediate-frame-buffer';
+import { UniformArrayAutoScalingProgram } from './graphics-library/program/uniform-array-autoscaling-program';
-import { WebGlStopwatch } from './graphics-library/stopwatch';
+import { IRenderer } from './i-renderer';
 
-export class WebGl2Renderer implements Drawer {
+export class WebGl2Renderer implements IRenderer {
   private gl: WebGL2RenderingContext;
   private stopwatch?: WebGlStopwatch;
 
@@ -22,10 +22,10 @@ export class WebGl2Renderer implements Drawer {
 
   private targetDeltaTime = (1 / 30) * 1000;
   private deltaTimeError = (1 / 1000) * 1000;
-  private additiveQualityIncrease = 0.05;
+  private additiveQualityIncrease = 0.03;
-  private multiplicativeQualityDecrease = 1.5;
+  private multiplicativeQualityDecrease = 1.2;
   private timeSinceLastAdjusment = 0;
-  private adjusmentRate = 500;
+  private adjusmentRate = 300;
   private maxRenderScale = 1.5;
   private minRenderScale = 0.2;
 
@@ -46,7 +46,7 @@ export class WebGl2Renderer implements Drawer {
       this.targetDeltaTime - this.deltaTimeError
     ) {
       this.distanceFieldFrameBuffer.renderScale +=
-        this.additiveQualityIncrease / 2;
+        this.additiveQualityIncrease / 4;
       this.lightingFrameBuffer.renderScale += this.additiveQualityIncrease;
     } else if (
       this.exponentialDecayedDeltaTime >
@@ -58,7 +58,7 @@ export class WebGl2Renderer implements Drawer {
 
     this.distanceFieldFrameBuffer.renderScale = clamp(
       this.distanceFieldFrameBuffer.renderScale,
-      this.minRenderScale,
+      0.1,
       this.maxRenderScale
     );
     this.lightingFrameBuffer.renderScale = clamp(
@@ -92,11 +92,33 @@ export class WebGl2Renderer implements Drawer {
     }
 
     this.distanceFieldFrameBuffer = new IntermediateFrameBuffer(this.gl, [
-      new FragmentShaderOnlyProgram(this.gl, ...shaderSources[0]),
+      new UniformArrayAutoScalingProgram(
+        this.gl,
+        shaderSources[0][0],
+        shaderSources[0][1],
+        {
+          getValueFromUniforms: (v) => (v.lines ? v.lines.length / 2 : 0),
+          uniformArraySizeName: 'lineCount',
+          startingValue: 5,
+          steps: 5,
+          maximumValue: 100,
+        }
+      ),
     ]);
 
     this.lightingFrameBuffer = new DefaultFrameBuffer(this.gl, [
-      new FragmentShaderOnlyProgram(this.gl, ...shaderSources[1]),
+      new UniformArrayAutoScalingProgram(
+        this.gl,
+        shaderSources[1][0],
+        shaderSources[1][1],
+        {
+          getValueFromUniforms: (v) => (v.lights ? v.lights.length : 0),
+          uniformArraySizeName: 'lightCount',
+          startingValue: 1,
+          steps: 1,
+          maximumValue: 8,
+        }
+      ),
     ]);
 
     this.distanceFieldFrameBuffer.renderScale = 0.5;
@@ -118,7 +140,6 @@ export class WebGl2Renderer implements Drawer {
 
   public finishFrame() {
     this.calculateOwnUniforms();
-
     this.distanceFieldFrameBuffer.render(this.uniforms);
     this.lightingFrameBuffer.render(
       this.uniforms,
@@ -235,4 +256,8 @@ export class WebGl2Renderer implements Drawer {
   public isOnScreen(boundingCircle: Circle): boolean {
     return this.viewCircle.areIntersecting(boundingCircle);
   }
+
+  public isPositionOnScreen(position: vec2): boolean {
+    return this.viewCircle.isInside(position);
+  }
 }

frontend/src/scripts/game.ts

@@ -18,7 +18,7 @@ import { createCharacter } from './objects/world/create-character';
 import { createDungeon } from './objects/world/create-dungeon';
 
 export class Game {
-  private previousTime: DOMHighResTimeStamp = 0;
+  private previousTime?: DOMHighResTimeStamp = null;
   private objects: ObjectContainer = new ObjectContainer();
   private renderer: WebGl2Renderer;
   private previousFpsValues: Array<number> = [];
@@ -27,6 +27,11 @@ export class Game {
     const canvas: HTMLCanvasElement = document.querySelector('canvas#main');
     const overlay: HTMLElement = document.querySelector('#overlay');
 
+    document.addEventListener(
+      'visibilitychange',
+      this.handleVisibilityChange.bind(this)
+    );
+
     new CommandBroadcaster(
       [
         new KeyboardListener(document.body),
@@ -51,8 +56,18 @@ export class Game {
     createDungeon(this.objects);
   }
 
+  private handleVisibilityChange() {
+    if (!document.hidden) {
+      this.previousTime = null;
+    }
+  }
+
   @timeIt()
   private gameLoop(time: DOMHighResTimeStamp) {
+    if (this.previousTime === null) {
+      this.previousTime = time;
+    }
+
     const deltaTime = time - this.previousTime;
     this.previousTime = time;
     this.calculateFps(deltaTime);
@@ -70,6 +85,7 @@ export class Game {
   private calculateFps(deltaTime: number) {
     this.previousFpsValues.push(1000 / deltaTime);
     if (this.previousFpsValues.length > 30) {
+      this.previousFpsValues.sort();
       const text = `Min: ${this.previousFpsValues[0].toFixed(
         2
       )}\n\tMedian: ${this.previousFpsValues[

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

@@ -23,7 +23,7 @@ export class CircleLight extends GameObject {
   }
 
   private draw(c: DrawCommand) {
-    if (c.drawer.isOnScreen(this.boundingCircle)) {
+    if (c.drawer.isPositionOnScreen(this.center)) {
       c.drawer.appendToUniformList('lights', {
         center: this.center,
         radius: this.radius,

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 && Math.random() > 0.5) {
+    if (deltaHeight > 0 && Math.random() > 0.8) {
       objects.addObject(
         new CircleLight(
           currentEnd,

frontend/src/shaders/cave-distance-fs.glsl

@@ -3,7 +3,7 @@
 precision mediump float;
 
 #define INFINITY 200.0
-#define LINE_COUNT 30
+#define LINE_COUNT {lineCount}
 #define CAVE_COLOR vec3(0.36, 0.38, 0.76)
 #define AIR_COLOR vec3(0.7)
 
@@ -29,9 +29,8 @@ void main() {
     }
 
     float distance = -minDistance;
-
     fragmentColor = vec4(
-        mix(CAVE_COLOR, AIR_COLOR, clamp(distance, 0.0, 1.0)),
+        mix(CAVE_COLOR, AIR_COLOR, clamp(distance, -10.0, 0.0) / 10.0 + 1.0),
         distance / 32.0
     );
 }

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

@@ -3,9 +3,11 @@
 precision mediump float;
 
 #define INFINITY 1000.0
-#define LIGHT_COUNT 8
+#define LIGHT_COUNT {lightCount}
 #define AMBIENT_LIGHT vec3(0.15)
 #define LIGHT_DROP 400.0
+#define MIN_STEP 3.0
+#define EDGE_SMOOTHING 5.0
 
 uniform struct Light {
     vec2 center;
@@ -16,6 +18,7 @@ uniform struct Light {
 uniform sampler2D distanceTexture;
 uniform vec2 viewBoxSize;
 
+in vec2[LIGHT_COUNT] directions;
 
 float getDistance(in vec2 target, out vec3 color) {
     vec4 values = texture(distanceTexture, target);
@@ -44,43 +47,40 @@ float getFractionOfLightArriving(
         float minDistance = getDistance(target + direction * rayLength);
         movingAverageMeanDistance = movingAverageMeanDistance / 2.0 + minDistance / 2.0;
         q = min(q, movingAverageMeanDistance / rayLength);
-        rayLength = min(lightDistance, rayLength + max(5.0, minDistance));
+        rayLength = min(lightDistance, rayLength + max(MIN_STEP, minDistance));
     }
 
     return clamp(q * (lightDistance + lightRadius) / lightRadius, 0.0, 1.0);
 }
 
-vec3 getPixelColor(in vec2 worldCoordinates, in vec2 uvCoordinates) {
-    vec3 colorAtPosition;
-    float startingDistance = getDistance(uvCoordinates, colorAtPosition);
-
-    vec3 result = colorAtPosition * AMBIENT_LIGHT;
-    
-    for (int i = 0; i < LIGHT_COUNT; i++) {
-        Light light = lights[i];
-        
-        vec2 lightDelta = light.center - worldCoordinates;
-        float lightDistance = length(lightDelta);
-        vec2 lightDirection = lightDelta / lightDistance;
-
-        float r = lightDistance / LIGHT_DROP + 1.0;
-        vec3 lightColorAtPosition = light.value / (r * r);
-
-        float fractionOfLightArriving = getFractionOfLightArriving(
-            uvCoordinates, lightDirection, startingDistance, 
-            lightDistance, light.radius
-        );
-
-        result += colorAtPosition * lightColorAtPosition * fractionOfLightArriving;
-    }
-    
-    return result;
-}
-
 in vec2 worldCoordinates;
 in vec2 uvCoordinates;
 out vec4 fragmentColor;
 
 void main() {
-    fragmentColor = vec4(getPixelColor(worldCoordinates, uvCoordinates), 1.0);
+    vec3 colorAtPosition;
+    float startingDistance = getDistance(uvCoordinates, colorAtPosition);
+
+    vec3 ligthing = vec3(0.0);
+    
+    for (int i = 0; i < LIGHT_COUNT; i++) {
+        Light light = lights[i];
+        float lightDistance = distance(light.center, worldCoordinates);
+
+        float r = lightDistance / LIGHT_DROP + 1.0;
+        vec3 lightColorAtPosition = light.value / (r * r);
+
+        float fractionOfLightArriving = getFractionOfLightArriving(
+            uvCoordinates, normalize(directions[i]), startingDistance, 
+            lightDistance, light.radius
+        );
+
+        ligthing += lightColorAtPosition * fractionOfLightArriving;
+    }
+
+    fragmentColor = vec4(
+        colorAtPosition * (AMBIENT_LIGHT + 
+        step(EDGE_SMOOTHING / 2.0, clamp(startingDistance, 0.0, EDGE_SMOOTHING)) * ligthing),
+        1.0
+    );
 }

frontend/src/shaders/passthrough-distance-vs.glsl

@@ -1,5 +1,7 @@
 #version 300 es
 
+precision mediump float;
+
 uniform mat3 ndcToWorld;
 in vec4 a_position;
 out vec2 worldCoordinates;

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

@@ -1,12 +1,30 @@
 #version 300 es
 
+precision mediump float;
+
+#define LIGHT_COUNT {lightCount}
+
 uniform mat3 ndcToWorld;
 in vec4 a_position;
 out vec2 worldCoordinates;
 out vec2 uvCoordinates;
 
+
+uniform struct Light {
+    vec2 center;
+  	float radius;
+    vec3 value;
+}[LIGHT_COUNT] lights;
+
+out vec2[LIGHT_COUNT] directions;
+
 void main() {
     worldCoordinates = (vec3(a_position.xy, 1.0) * ndcToWorld).xy;
     uvCoordinates = ((a_position.xy + vec2(1.0)) / 2.0).xy;
+
+    for (int i = 0; i < LIGHT_COUNT; i++) {
+        directions[i] = lights[i].center - worldCoordinates;
+    }
+
     gl_Position = a_position;
 }

frontend/src/styles/main.scss

@@ -24,6 +24,10 @@ body {
       $outline-width $outline-width 0 #000;
     color: white;
     white-space: pre;
+
+    @media (max-width: 800px) {
+      font-size: 0.75em;
+    }
   }
 
   canvas#main {