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