Add frame buffers

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

@@ -0,0 +1,26 @@
+import { FragmentShaderOnlyProgram } from './fragment-shader-only-program';
+import { FrameBuffer } from './frame-buffer';
+
+export class DefaultFrameBuffer extends FrameBuffer {
+  constructor(
+    gl: WebGL2RenderingContext,
+    programs: Array<FragmentShaderOnlyProgram>
+  ) {
+    super(gl, programs);
+    this.frameBuffer = null;
+
+    this.setSize();
+  }
+
+  public setSize() {
+    super.setSize();
+
+    if (
+      this.gl.canvas.width !== this.size.x ||
+      this.gl.canvas.height !== this.size.y
+    ) {
+      this.gl.canvas.width = this.size.x;
+      this.gl.canvas.height = this.size.y;
+    }
+  }
+}

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

@@ -59,6 +59,19 @@ export class FragmentShaderOnlyProgram {
         type: glUniform.type,
       });
     }
+
+    console.log(this.uniforms);
+
+    this.uniforms.map((u1) => {
+      const isSingle =
+        this.uniforms.filter((u2) => u2.name.includes(u1.name[0])).length == 1;
+      if (u1.name.includes('0') && isSingle) {
+        u1.name = u1.name.slice(0, -1);
+      }
+      return u1;
+    });
+
+    console.log(this.uniforms);
   }
 
   private createProgram(fragmentShaderSource: string) {

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

@@ -0,0 +1,48 @@
+import { Vec2 } from '../../math/vec2';
+import { FragmentShaderOnlyProgram } from './fragment-shader-only-program';
+
+export abstract class FrameBuffer {
+  public renderScale = 1;
+  public enableHighDpiRendering = false;
+
+  protected size: Vec2;
+  protected frameBuffer: WebGLFramebuffer;
+
+  constructor(
+    protected gl: WebGL2RenderingContext,
+    protected programs: Array<FragmentShaderOnlyProgram>
+  ) {}
+
+  public render(uniforms: any, input?: WebGLTexture) {
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.frameBuffer);
+
+    if (input !== null) {
+      this.gl.bindTexture(this.gl.TEXTURE_2D, input);
+    }
+
+    this.gl.viewport(0, 0, this.size.x, this.size.y);
+    this.gl.clearColor(0, 0, 0, 0);
+    this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+
+    this.programs.forEach((p) => {
+      p.bind();
+      p.setUniforms(uniforms);
+      p.draw();
+    });
+  }
+
+  public setSize() {
+    const realToCssPixels = window.devicePixelRatio * this.renderScale;
+    const canvasWidth = (this.gl.canvas as HTMLCanvasElement).clientWidth;
+    const canvasHeight = (this.gl.canvas as HTMLCanvasElement).clientHeight;
+
+    const displayWidth = Math.floor(canvasWidth * realToCssPixels);
+    const displayHeight = Math.floor(canvasHeight * realToCssPixels);
+
+    this.size = new Vec2(displayWidth, displayHeight);
+  }
+
+  public getSize(): Vec2 {
+    return this.size;
+  }
+}

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

@@ -0,0 +1,75 @@
+import { FragmentShaderOnlyProgram } from './fragment-shader-only-program';
+import { FrameBuffer } from './frame-buffer';
+
+export class IntermediateFrameBuffer extends FrameBuffer {
+  private frameTexture: WebGLTexture;
+
+  constructor(
+    gl: WebGL2RenderingContext,
+    programs: Array<FragmentShaderOnlyProgram>
+  ) {
+    super(gl, programs);
+
+    this.frameTexture = this.gl.createTexture();
+    this.configureTexture();
+
+    this.frameBuffer = this.gl.createFramebuffer();
+    this.configureFrameBuffer();
+
+    this.setSize();
+  }
+
+  public get texture(): WebGLTexture {
+    return this.frameTexture;
+  }
+
+  public setSize() {
+    super.setSize();
+
+    this.gl.bindTexture(this.gl.TEXTURE_2D, this.frameTexture);
+
+    this.gl.texImage2D(
+      this.gl.TEXTURE_2D,
+      0,
+      this.gl.RGBA,
+      this.size.x,
+      this.size.y,
+      0,
+      this.gl.RGBA,
+      this.gl.UNSIGNED_BYTE,
+      null
+    );
+  }
+
+  private configureTexture() {
+    this.gl.bindTexture(this.gl.TEXTURE_2D, this.frameTexture);
+
+    this.gl.texParameteri(
+      this.gl.TEXTURE_2D,
+      this.gl.TEXTURE_MIN_FILTER,
+      this.gl.LINEAR
+    );
+    this.gl.texParameteri(
+      this.gl.TEXTURE_2D,
+      this.gl.TEXTURE_WRAP_S,
+      this.gl.CLAMP_TO_EDGE
+    );
+    this.gl.texParameteri(
+      this.gl.TEXTURE_2D,
+      this.gl.TEXTURE_WRAP_T,
+      this.gl.CLAMP_TO_EDGE
+    );
+  }
+
+  private configureFrameBuffer() {
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.frameBuffer);
+    const attachmentPoint = this.gl.COLOR_ATTACHMENT0;
+    this.gl.framebufferTexture2D(
+      this.gl.FRAMEBUFFER,
+      attachmentPoint,
+      this.gl.TEXTURE_2D,
+      this.frameTexture,
+      0
+    );
+  }
+}

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

@@ -16,12 +16,24 @@ export const loadUniform = (
     ) => void
   > = new Map();
   {
-    converters.set(WebGL2RenderingContext.FLOAT, (gl, v, l) =>
-      gl.uniform1f(l, v)
-    );
+    converters.set(WebGL2RenderingContext.FLOAT, (gl, v, l) => {
+      gl.uniform1fv(l, new Float32Array(v));
+    });
 
-    converters.set(WebGL2RenderingContext.FLOAT_VEC2, (gl, v: Vec2, l) =>
-      gl.uniform2fv(l, new Float32Array(v.list))
+    converters.set(
+      WebGL2RenderingContext.FLOAT_VEC2,
+      (gl, v: Vec2 | Array<Vec2>, l) => {
+        if (v instanceof Array) {
+          const result = new Float32Array(v.length * 2);
+          for (let i = 0; i < v.length; i++) {
+            result[2 * i] = v[i].x;
+            result[2 * i + 1] = v[i].y;
+          }
+          gl.uniform2fv(l, new Float32Array(result));
+        } else {
+          gl.uniform2fv(l, new Float32Array(v.list));
+        }
+      }
     );
 
     converters.set(WebGL2RenderingContext.FLOAT_MAT3, (gl, v: Mat3, l) =>

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

@@ -4,18 +4,17 @@ import { Mat3 } from '../math/mat3';
 import { FragmentShaderOnlyProgram } from './graphics-library/fragment-shader-only-program';
 import { WebGlStopwatch } from './graphics-library/stopwatch';
 import { Rectangle } from '../math/rectangle';
+import { IntermediateFrameBuffer } from './graphics-library/intermediate-frame-buffer';
+import { FrameBuffer } from './graphics-library/frame-buffer';
+import { DefaultFrameBuffer } from './graphics-library/default-frame-buffer';
 
 export class WebGl2Renderer implements Drawer {
   private gl: WebGL2RenderingContext;
-  private program: FragmentShaderOnlyProgram;
   private stopwatch: WebGlStopwatch;
 
-  public enableHighDpiRendering = false;
-  public renderScale = 0.5;
-
   private viewBox: Rectangle = new Rectangle();
-
   private nextFrameUniforms: any;
+  private frameBuffers: Array<FrameBuffer> = [];
 
   constructor(
     private canvas: HTMLCanvasElement,
@@ -27,53 +26,52 @@ export class WebGl2Renderer implements Drawer {
       throw new Error('WebGl2 is not supported');
     }
 
-    this.program = new FragmentShaderOnlyProgram(this.gl, shaderSources[0]);
+    this.frameBuffers.push(
+      new IntermediateFrameBuffer(this.gl, [
+        new FragmentShaderOnlyProgram(this.gl, shaderSources[0]),
+      ])
+    );
+
+    this.frameBuffers.push(
+      new DefaultFrameBuffer(this.gl, [
+        new FragmentShaderOnlyProgram(this.gl, shaderSources[1]),
+      ])
+    );
+
+    this.frameBuffers[0].renderScale = 0.2;
+    this.frameBuffers[1].renderScale = 1;
 
     try {
       this.stopwatch = new WebGlStopwatch(this.gl);
     } catch {}
   }
 
-  private handleResize() {
-    const realToCssPixels = window.devicePixelRatio * this.renderScale;
-
-    const displayWidth = Math.floor(this.canvas.clientWidth * realToCssPixels);
-    const displayHeight = Math.floor(
-      this.canvas.clientHeight * realToCssPixels
-    );
-
-    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() {
+  startFrame(): void {
     this.stopwatch?.start();
-
-    this.handleResize();
-
-    this.gl.clearColor(0, 0, 0, 0);
-    this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
-
-    this.program.bind();
     this.nextFrameUniforms = {};
+    this.frameBuffers.forEach((f) => f.setSize());
   }
 
   public finishFrame() {
     const resolution = new Vec2(this.canvas.width, this.canvas.height);
 
     this.nextFrameUniforms.transform = Mat3.translateMatrix(new Vec2(0.5, 0.5))
-      .times(Mat3.scaleMatrix(this.viewBox.size.divide(resolution)))
+      .times(
+        Mat3.scaleMatrix(
+          this.viewBox.size.divide(this.frameBuffers[0].getSize())
+        )
+      )
       .times(Mat3.translateMatrix(this.viewBox.topLeft));
 
-    this.program.setUniforms(this.nextFrameUniforms);
-    this.program.draw();
+    this.nextFrameUniforms.transformUV = Mat3.translateMatrix(
+      new Vec2(0.5, 0.5)
+    ).times(Mat3.scaleMatrix(new Vec2(1).divide(resolution)));
+
+    this.frameBuffers[0].render(this.nextFrameUniforms);
+    this.frameBuffers[1].render(
+      this.nextFrameUniforms,
+      (this.frameBuffers[0] as IntermediateFrameBuffer).texture
+    );
 
     this.stopwatch?.stop();
   }

frontend/src/scripts/game.ts

@@ -11,7 +11,9 @@ import { Character } from './objects/types/character';
 import { InfoText } from './objects/types/info-text';
 import { timeIt } from './helper/timing';
 
-import caveFragmentShader from '../shaders/cave-fs.glsl';
+import caveFragmentShader from '../shaders/cave-distance-fs.glsl';
+import lightsShader from '../shaders/rainbow-shading-fs.glsl';
+//import lightsShader from '../shaders/lights-shading-fs.glsl';
 import { Dungeon } from './objects/types/dungeon';
 import { BeforeDrawCommand } from './commands/types/before-draw';
 
@@ -34,7 +36,10 @@ export class Game {
       [this.objects]
     );
 
-    this.renderer = new WebGl2Renderer(canvas, overlay, [caveFragmentShader]);
+    this.renderer = new WebGl2Renderer(canvas, overlay, [
+      caveFragmentShader,
+      lightsShader,
+    ]);
 
     this.initializeScene();
     requestAnimationFrame(this.gameLoop.bind(this));

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

@@ -4,10 +4,9 @@ import { Vec2 } from '../../math/vec2';
 import { last } from '../../helper/last';
 
 export interface Line {
-  from: Vec2;
-  to: Vec2;
-  normal: Vec2;
-  isLineEnd: boolean;
+  start: Vec2;
+  end: Vec2;
+  radius: number;
 }
 
 export class Dungeon extends GameObject {
@@ -19,62 +18,35 @@ export class Dungeon extends GameObject {
     this.addCommandExecutor(DrawCommand, this.draw.bind(this));
 
     let previousHeight = 0;
-    let previousPoint = {
-      from: new Vec2(),
-      to: new Vec2(-10000, 0),
-    };
+    let previousEnd = new Vec2();
 
     for (let i = 0; i < 5000; i += 50) {
       const height = previousHeight + (Math.random() - 0.5) * 200;
       previousHeight = height;
-      const current = {
-        from: previousPoint.to,
-        to: new Vec2(i, height),
-        normal: new Vec2(1.0),
-        isLineEnd: false,
-      };
-      this.lines.push(current);
-      previousPoint = current;
+      const currentEnd = new Vec2(i, height);
+
+      this.lines.push({
+        start: previousEnd,
+        end: currentEnd,
+        radius: Math.random() * 15 + 15,
+      });
+
+      previousEnd = currentEnd;
     }
-
-    last(this.lines).to = last(this.lines).to.add(new Vec2(10000, 0));
-    last(this.lines).isLineEnd = true;
-
-    const delta = new Vec2(200, 400);
-    this.lines = [
-      ...this.lines,
-      ...this.lines.map(({ from, to, normal, isLineEnd }) => ({
-        normal: normal.scale(-1),
-        from: from.add(delta),
-        to: to.add(delta),
-        isLineEnd,
-      })),
-    ];
-
-    this.calculateNormals();
-  }
-
-  private calculateNormals() {
-    this.lines.forEach((l) => {
-      const tangent = l.to.subtract(l.from);
-      l.normal = new Vec2(
-        -l.normal.x * tangent.y,
-        l.normal.x * tangent.x
-      ).normalized;
-    });
   }
 
   private draw(c: DrawCommand) {
-    const linesToBeDrawn: Array<Line> = [];
+    const lines: Array<Vec2> = [];
+    const radii: Array<number> = [];
 
     for (let line of this.lines) {
-      if (c.drawer.isOnScreen(line.from) || c.drawer.isOnScreen(line.to)) {
-        linesToBeDrawn.push(line);
-      } else if (line.isLineEnd && last(linesToBeDrawn) != null) {
-        last(linesToBeDrawn).isLineEnd = true;
+      if (c.drawer.isOnScreen(line.start) || c.drawer.isOnScreen(line.end)) {
+        lines.push(line.start);
+        lines.push(line.end);
+        radii.push(line.radius);
       }
     }
 
-    c.drawer.giveUniforms({ lines: linesToBeDrawn });
+    c.drawer.giveUniforms({ lines, radii });
   }
 }

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

@@ -0,0 +1,39 @@
+#version 300 es
+
+precision mediump float;
+
+
+#define INFINITY 10000.0
+#define LINE_COUNT 50
+
+
+uniform vec2[LINE_COUNT * 2] lines;
+uniform float[LINE_COUNT] radii;
+
+float lineDistance(in vec2 target, in vec2 start, in vec2 end, in float radius) {
+    vec2 pa = target - start, ba = end - start;
+    float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
+    return distance(pa, ba * h) - radius;
+}
+
+float getDistance(in vec2 target) {
+    float minDistance = INFINITY;
+
+    for (int i = 0; i < LINE_COUNT; i++) {
+        vec2 start = lines[2 * i];
+        vec2 end = lines[2 * i + 1];
+        float r = radii[i];
+        minDistance = min(minDistance, lineDistance(target, start, end, r));
+    }
+
+    return -minDistance;
+}
+
+uniform mat3 transform;
+out vec4 fragmentColor;
+
+void main() {
+    vec2 position = (vec3(gl_FragCoord.xy, 1.0) * transform).xy;
+    float distance = getDistance(position);
+    fragmentColor = vec4(vec3(0.0), distance / 256.0 + 0.5);
+}

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

@@ -0,0 +1,75 @@
+#version 300 es
+
+precision mediump float;
+
+#define SMOOTHING 10.0
+#define INFINITY 10000.0;
+#define LINE_COUNT 100
+
+
+float interpolate(float from, float to, float quotient) {
+    return from + (to - from) * smoothstep(0.0, 1.0, quotient);
+}
+
+vec2 rotate90deg(in vec2 vector) {
+    return vec2(-vector.y, vector.x);
+}
+
+uniform struct Line {
+    vec2 from;
+  	vec2 to;
+    vec2 normal;
+    bool isLineEnd;
+}[LINE_COUNT] lines;
+
+float lineDistance(in vec2 position, in Line line, out float h) {
+    vec2 pa = position - line.from, ba = line.to - line.from;
+    h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
+    vec2 delta = pa - ba*h;
+    // sign can return 0, double sign prevents this 
+    float side = sign(sign(dot(delta, line.normal)) - 0.5);
+    return length(delta) * side;
+}
+
+float getDistance(in vec2 target) {
+    float positiveMinDistance = INFINITY;
+    float negativeMaxDistance = INFINITY;
+
+    float leftJoinAcuteness = 0.0;
+    vec2 splitterLineNormalStart = vec2(-1.0, 0.0);
+    for (int i = 0; i < LINE_COUNT - 1; i++) {
+        vec2 splitterLineNormalEnd = rotate90deg(normalize(lines[i].normal + lines[i + 1].normal));
+
+        float h;
+        float distanceToCurrent = lineDistance(target, lines[i], h);
+        float rightJoinAcuteness = dot(lines[i + 1].to - lines[i].from, lines[i + 1].normal - lines[i].normal);
+        distanceToCurrent -= interpolate(
+            sign(leftJoinAcuteness) * SMOOTHING,
+            sign(rightJoinAcuteness) * SMOOTHING, h
+        );
+        leftJoinAcuteness = rightJoinAcuteness;
+
+        if (
+            !(
+                   dot(target - lines[i].from, splitterLineNormalStart * -sign(dot(lines[i].to - lines[i].from, splitterLineNormalStart))) > 0.0 
+                || dot(target - lines[i].to, splitterLineNormalEnd * sign(dot(lines[i].from - lines[i].to, splitterLineNormalEnd))) <= 0.0
+            )
+        ) {
+            float distanceToCurrentSign = sign(distanceToCurrent) / 2.0;
+            positiveMinDistance = min(positiveMinDistance, 1.0 / (0.5 + distanceToCurrentSign) * abs(distanceToCurrent));
+            negativeMaxDistance = min(negativeMaxDistance, 1.0 / (0.5 - distanceToCurrentSign) * abs(distanceToCurrent));
+        }
+        splitterLineNormalStart = splitterLineNormalEnd;
+    }
+
+    return positiveMinDistance < negativeMaxDistance ? positiveMinDistance : -negativeMaxDistance;
+}
+
+uniform mat3 transform;
+out vec4 fragmentColor;
+
+void main() {
+    vec2 position = (vec3(gl_FragCoord.xy, 1.0) * transform).xy;
+    fragmentColor = vec4(vec3(1.0) * clamp(0.0, 1.0, getDistance(position)), 1.0);
+    
+}

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

@@ -0,0 +1,160 @@
+#version 300 es
+
+precision mediump float;
+
+#define INFINITY 1.0 / 0.0
+
+#define WORLD_SIZE 4
+#define LIGHTS_SIZE 2
+
+#define LIGHT_PENETRATION 0.95
+#define ANTIALIASING_RADIUS 1.0
+
+uniform vec2 resolution;
+uniform vec2 mouse;
+uniform sampler2D distanceTexture;
+uniform mat3 transformUV;
+
+out vec4 fragmentColor;
+
+struct Light {
+    vec2 center;
+  	float radius;
+    vec3 color;
+    float intensity;
+};
+
+struct Circle {
+    vec2 center;
+  	float radius;
+    vec3 color;
+};
+
+Light lights[LIGHTS_SIZE];
+Circle world[WORLD_SIZE];
+
+vec3 red = vec3(5.0, 0.0, 2.0);
+vec3 blue = vec3(0.0, 0.0, 3.0);
+
+float circleDistance(in vec2 position, in Circle circle)
+{
+	return length(position - circle.center) - circle.radius;
+}
+
+float circleDistance(in vec2 position, in Light circle)
+{
+	return length(position - circle.center) - circle.radius;
+}
+
+float getDistance(in vec2 target) {
+    float distance = INFINITY;
+    for (int i = 0; i < WORLD_SIZE; i++) {
+        distance = min(distance, circleDistance(target, world[i]));
+    }
+    return distance;
+}
+
+float getDistance(in vec2 target, out Circle nearest) {
+    float distance = INFINITY;
+    for (int i = 0; i < WORLD_SIZE; i++) {
+        float distanceToCurrent = circleDistance(target, world[i]);
+        if (distanceToCurrent < distance) {
+            distance = distanceToCurrent;
+            nearest = world[i];
+        }
+    }
+    return distance;
+}
+
+void createWorld() {
+    lights[0] = Light(mouse, 40.5, vec3(1.0), 25.0);
+    lights[1] = Light(vec2(100.0, 350.0), 52.5,vec3(2.0, 1.0, 0.25), 20.5);
+    
+    world[0] = Circle(vec2(250.0, 100.0), 12.5, blue);   
+    world[1] = Circle(vec2(150.0, 50.0), 32.5, red);
+    world[2] = Circle(vec2(300.0, 350.0), 52.5, blue);
+}
+
+float escapeFromObject(inout vec2 position, in vec2 direction) {
+    float fractionOfLightPenetrating = 1.0;
+    float rayLength = 0.0;
+    for (int i = 0; i < 64; i++) {
+        float minDistance = getDistance(position);
+        if (minDistance >= 0.0) {
+            return fractionOfLightPenetrating;
+        }
+        
+        fractionOfLightPenetrating *= pow(LIGHT_PENETRATION, -minDistance);
+        rayLength += max(1.0, -minDistance);
+        position += direction * rayLength;
+    }
+    
+    return 0.0;
+}
+
+float getFractionOfLightArriving(in vec2 position, in vec2 direction, in float lightDistance, in float lightRadius) {
+    float fractionOfLightArriving = 1.0;
+
+    float rayLength = 0.0;
+    for (int j = 0; j < 64; j++) {
+        float minDistance = getDistance(position + direction * rayLength);
+        fractionOfLightArriving = min(fractionOfLightArriving, minDistance / rayLength);
+        rayLength += max(1.0, abs(minDistance));
+
+        if (rayLength > lightDistance) {
+            fractionOfLightArriving = (fractionOfLightArriving * lightDistance + lightRadius) / (2.0 * lightRadius);
+            return smoothstep(0.0, 1.0, fractionOfLightArriving);
+        }
+    }
+    
+    return 0.0;
+}
+
+vec3 getPixelColor(in vec2 position, in bool startsInside, in vec3 colorBias) {
+    vec3 result = vec3(0.0);
+    
+    for (int i = 0; i < LIGHTS_SIZE; i++) {
+        Light light = lights[i];
+        
+        float lightDistance = circleDistance(position, light);
+        vec3 lightColor = normalize(light.color) * light.intensity / mix(1.0,  lightDistance, clamp(lightDistance, 0.0, 1.0));
+        if (lightDistance < 0.0) {
+            return lightColor;
+        }       
+        
+        vec2 lightDirection = normalize(light.center - position);
+        vec2 rayStart = position;
+        
+        
+        float fractionOfLightPenetrating = 1.0;
+        if (startsInside) {
+            fractionOfLightPenetrating =  escapeFromObject(rayStart, lightDirection);
+            lightColor *= colorBias;
+    	}
+
+        float fractionOfLightArriving = getFractionOfLightArriving(rayStart, lightDirection, lightDistance, light.radius);
+        result += lightColor * fractionOfLightArriving * fractionOfLightPenetrating;
+    }
+    
+    return clamp(result, 0.0, 1.0);
+}
+
+vec3 getPixelColorAntialiased(in vec2 position) {
+    Circle nearest;
+    float minDistance = getDistance(position, nearest);
+    if (0.0 < minDistance && minDistance < 1.0) {
+		vec2 closerDirection = normalize(nearest.center - position);
+        return mix(getPixelColor(position + closerDirection, true, nearest.color), getPixelColor(position - closerDirection, false, nearest.color), minDistance);
+    }
+    
+    return getPixelColor(position, minDistance < 0.0, minDistance < 0.0 ? nearest.color : vec3(1.0));
+}
+
+void main() {
+    createWorld();
+    
+    vec2 position = gl_FragCoord.xy + vec2(0.5);
+	vec3 color = getPixelColorAntialiased(position);
+    
+    fragmentColor = vec4(color, 1.0);
+}

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

@@ -0,0 +1,32 @@
+#version 300 es
+
+precision mediump float;
+
+
+vec3 rainbow(float level) {
+	float r = float(level <= 2.0) + float(level > 4.0) * 0.5;
+	float g = max(1.0 - abs(level - 2.0) * 0.5, 0.0);
+	float b = (1.0 - (level - 4.0) * 0.5) * float(level >= 4.0);
+	return vec3(r, g, b);
+}
+
+vec4 smoothRainbow(float x) {
+    float level1 = floor(x*6.0);
+    float level2 = min(6.0, floor(x*6.0) + 1.0);
+    
+    vec3 a = rainbow(level1);
+    vec3 b = rainbow(level2);
+    
+    return vec4(mix(a, b, fract(x*6.0)), 1.0);
+}
+
+
+uniform sampler2D distanceTexture;
+uniform mat3 transformUV;
+out vec4 fragmentColor;
+
+void main() {
+    vec2 position = (vec3(gl_FragCoord.xy, 1.0) * transformUV).xy;
+    vec4 previous = texture(distanceTexture, position);
+    fragmentColor = smoothRainbow(previous.a);
+}