Add files

src/graphics/graphics-library/frame-buffer/default-frame-buffer.ts

@@ -0,0 +1,19 @@
+import { FrameBuffer } from './frame-buffer';
+
+export class DefaultFrameBuffer extends FrameBuffer {
+  constructor(gl: WebGL2RenderingContext) {
+    super(gl);
+    this.frameBuffer = null;
+    this.setSize();
+  }
+
+  public setSize(): boolean {
+    const hasChanged = super.setSize();
+    if (hasChanged) {
+      this.gl.canvas.width = this.size.x;
+      this.gl.canvas.height = this.size.y;
+    }
+
+    return hasChanged;
+  }
+}

src/graphics/graphics-library/frame-buffer/frame-buffer.ts

@@ -0,0 +1,46 @@
+import { vec2 } from 'gl-matrix';
+import { settings } from '../../settings';
+
+export abstract class FrameBuffer {
+  public renderScale = 1;
+  public enableHighDpiRendering = settings.enableHighDpiRendering;
+
+  protected size = vec2.create();
+
+  // null means the default framebuffer
+  protected frameBuffer: WebGLFramebuffer | null = null;
+
+  constructor(protected gl: WebGL2RenderingContext) {}
+
+  public bindAndClear(colorInput?: WebGLTexture) {
+    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.frameBuffer);
+
+    if (colorInput) {
+      this.gl.bindTexture(this.gl.TEXTURE_2D, colorInput);
+    }
+
+    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);
+  }
+
+  public setSize(): boolean {
+    const realToCssPixels =
+      (this.enableHighDpiRendering ? window.devicePixelRatio : 1) * 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);
+
+    const oldSize = vec2.clone(this.getSize());
+    this.size = vec2.fromValues(displayWidth, displayHeight);
+
+    return this.size.x != oldSize.x || this.size.y != oldSize.y;
+  }
+
+  public getSize(): vec2 {
+    return this.size;
+  }
+}

src/graphics/graphics-library/frame-buffer/intermediate-frame-buffer.ts

@@ -0,0 +1,97 @@
+import { enableExtension } from '../helper/enable-extension';
+import { FrameBuffer } from './frame-buffer';
+
+export class IntermediateFrameBuffer extends FrameBuffer {
+  private frameTexture: WebGLTexture;
+  private floatLinearEnabled = false;
+
+  constructor(gl: WebGL2RenderingContext) {
+    super(gl);
+
+    enableExtension(gl, 'EXT_color_buffer_float');
+
+    try {
+      enableExtension(gl, 'OES_texture_float_linear');
+      this.floatLinearEnabled = true;
+    } catch {
+      // it's okay
+    }
+
+    const texture = this.gl.createTexture();
+    if (!texture) {
+      throw new Error('Could not create texture');
+    }
+    this.frameTexture = texture;
+    this.configureTexture();
+
+    const frameBuffer = this.gl.createFramebuffer();
+    if (!frameBuffer) {
+      throw new Error('Could not create frame buffer');
+    }
+    this.frameBuffer = frameBuffer;
+    this.configureFrameBuffer();
+
+    this.setSize();
+  }
+
+  public get colorTexture(): WebGLTexture {
+    return this.frameTexture;
+  }
+
+  public setSize(): boolean {
+    const hasChanged = super.setSize();
+    if (hasChanged) {
+      this.gl.bindTexture(this.gl.TEXTURE_2D, this.frameTexture);
+
+      this.gl.texImage2D(
+        this.gl.TEXTURE_2D,
+        0,
+        this.gl.RG16F,
+        this.size.x,
+        this.size.y,
+        0,
+        this.gl.RG,
+        this.gl.FLOAT,
+        null
+      );
+    }
+
+    return hasChanged;
+  }
+
+  private configureTexture() {
+    this.gl.bindTexture(this.gl.TEXTURE_2D, this.frameTexture);
+    this.gl.texParameteri(
+      this.gl.TEXTURE_2D,
+      this.gl.TEXTURE_MAG_FILTER,
+      this.floatLinearEnabled ? this.gl.LINEAR : this.gl.NEAREST
+    );
+    this.gl.texParameteri(
+      this.gl.TEXTURE_2D,
+      this.gl.TEXTURE_MIN_FILTER,
+      this.floatLinearEnabled ? this.gl.LINEAR : this.gl.NEAREST
+    );
+    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
+    );
+  }
+}