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 });
   }
 }