Some improvements

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

@@ -1,4 +1,4 @@
-import { mat2d, vec2 } from 'gl-matrix';
+import { vec2 } from 'gl-matrix';
 import { BoundingBoxBase } from '../../shapes/bounding-box-base';
 import { DrawableBlob } from '../drawables/drawable-blob';
 import { DrawableTunnel } from '../drawables/drawable-tunnel';
@@ -11,26 +11,18 @@ import { IntermediateFrameBuffer } from '../graphics-library/frame-buffer/interm
 import { getWebGl2Context } from '../graphics-library/helper/get-webgl2-context';
 import { WebGlStopwatch } from '../graphics-library/helper/stopwatch';
 import { IRenderer } from '../i-renderer';
-import caveFragmentShader from '../shaders/cave-distance-fs.glsl';
-import lightsFragmentShader from '../shaders/lights-shading-fs.glsl';
-import caveVertexShader from '../shaders/passthrough-distance-vs.glsl';
-import lightsVertexShader from '../shaders/passthrough-shading-vs.glsl';
+import distanceFragmentShader from '../shaders/distance-fs.glsl';
+import distanceVertexShader from '../shaders/distance-vs.glsl';
+import lightsFragmentShader from '../shaders/shading-fs.glsl';
+import lightsVertexShader from '../shaders/shading-vs.glsl';
 import { FpsAutoscaler } from './fps-autoscaler';
 import { RenderingPass } from './rendering-pass';
+import { UniformsProvider } from './uniforms-provider';
 
 export class WebGl2Renderer implements IRenderer {
   private gl: WebGL2RenderingContext;
   private stopwatch?: WebGlStopwatch;
-
-  private scaleWorldToNDC = mat2d.create();
-  private scaleWorldAreaInViewToNDC = 1;
-
-  private viewAreaBottomLeft = vec2.create();
-  private worldAreaInView = vec2.create();
-  private squareToAspectRatio: vec2;
-  private uvToWorld: mat2d;
-  private cursorPosition = vec2.create();
-
+  private uniformsProvider: UniformsProvider;
   private distanceFieldFrameBuffer: IntermediateFrameBuffer;
   private lightingFrameBuffer: DefaultFrameBuffer;
   private distancePass: RenderingPass;
@@ -39,8 +31,6 @@ export class WebGl2Renderer implements IRenderer {
 
   private initializePromise: Promise<[void, void]> = null;
 
-  private softShadowsEnabled: boolean;
-
   constructor(private canvas: HTMLCanvasElement, private overlay: HTMLElement) {
     this.gl = getWebGl2Context(canvas);
 
@@ -49,7 +39,7 @@ export class WebGl2Renderer implements IRenderer {
 
     this.distancePass = new RenderingPass(
       this.gl,
-      [caveVertexShader, caveFragmentShader],
+      [distanceVertexShader, distanceFragmentShader],
       [DrawableTunnel.descriptor, DrawableBlob.descriptor],
       this.distanceFieldFrameBuffer
     );
@@ -66,11 +56,14 @@ export class WebGl2Renderer implements IRenderer {
       this.lightingPass.initialize(),
     ]);
 
+    this.uniformsProvider = new UniformsProvider(this.gl);
+
     this.autoscaler = new FpsAutoscaler({
       distanceRenderScale: (v) =>
         (this.distanceFieldFrameBuffer.renderScale = v as number),
       finalRenderScale: (v) => (this.lightingFrameBuffer.renderScale = v as number),
-      softShadowsEnabled: (v) => (this.softShadowsEnabled = v as boolean),
+      softShadowsEnabled: (v) =>
+        (this.uniformsProvider.softShadowsEnabled = v as boolean),
     });
 
     try {
@@ -102,105 +95,27 @@ export class WebGl2Renderer implements IRenderer {
   }
 
   public finishFrame() {
-    this.calculateMatrices();
-
-    this.distancePass.render(
-      this.uniforms,
-      this.scaleWorldAreaInViewToNDC,
-      this.scaleWorldToNDC
-    );
+    this.distancePass.render(this.uniformsProvider.uniforms);
     this.lightingPass.render(
-      this.uniforms,
-      this.scaleWorldAreaInViewToNDC,
-      this.scaleWorldToNDC,
+      this.uniformsProvider.uniforms,
       this.distanceFieldFrameBuffer.colorTexture
     );
 
     this.stopwatch?.stop();
   }
 
-  private get uniforms(): any {
-    const cursorPosition = this.uvToWorldCoordinate(this.cursorPosition);
-    return {
-      cursorPosition,
-      pixelSize:
-        (4.5 * this.scaleWorldAreaInViewToNDC) /
-        this.distanceFieldFrameBuffer.renderScale,
-      uvToWorld: this.uvToWorld,
-      worldAreaInView: this.worldAreaInView,
-      squareToAspectRatio: this.squareToAspectRatio,
-      softShadowsEnabled: this.softShadowsEnabled,
-    };
+  public setViewArea(viewArea: BoundingBoxBase) {
+    this.uniformsProvider.setViewArea(viewArea);
   }
 
-  private calculateMatrices() {
-    this.uvToWorld = mat2d.fromTranslation(mat2d.create(), this.viewAreaBottomLeft);
-    mat2d.scale(this.uvToWorld, this.uvToWorld, this.worldAreaInView);
-  }
-
-  private getScreenToWorldTransform(screenSize: vec2) {
-    const transform = mat2d.fromTranslation(mat2d.create(), this.viewAreaBottomLeft);
-    mat2d.scale(
-      transform,
-      transform,
-      vec2.divide(vec2.create(), this.worldAreaInView, screenSize)
-    );
-    mat2d.translate(transform, transform, vec2.fromValues(0.5, 0.5));
-
-    return transform;
-  }
-
-  public uvToWorldCoordinate(screenUvPosition: vec2): vec2 {
-    const resolution = vec2.fromValues(this.canvas.width, this.canvas.height);
-
-    return vec2.transformMat2d(
-      vec2.create(),
-      vec2.multiply(vec2.create(), screenUvPosition, resolution),
-      this.getScreenToWorldTransform(resolution)
-    );
+  public setCursorPosition(position: vec2) {
+    this.uniformsProvider.setCursorPosition(position);
   }
 
   public get canvasSize(): vec2 {
     return vec2.fromValues(this.canvas.clientWidth, this.canvas.clientHeight);
   }
 
-  public setViewArea(viewArea: BoundingBoxBase) {
-    this.worldAreaInView = viewArea.size;
-
-    // world coordinates
-    this.viewAreaBottomLeft = vec2.add(
-      vec2.create(),
-      viewArea.topLeft,
-      vec2.fromValues(0, -viewArea.size.y)
-    );
-
-    const scaleLongerEdgeTo1 =
-      1 / Math.max(this.worldAreaInView.x, this.worldAreaInView.y);
-
-    this.squareToAspectRatio = vec2.fromValues(
-      this.worldAreaInView.x * scaleLongerEdgeTo1,
-      this.worldAreaInView.y * scaleLongerEdgeTo1
-    );
-
-    this.scaleWorldAreaInViewToNDC = scaleLongerEdgeTo1 * 2;
-
-    mat2d.fromScaling(
-      this.scaleWorldToNDC,
-      vec2.fromValues(this.scaleWorldAreaInViewToNDC, this.scaleWorldAreaInViewToNDC)
-    );
-    const translate = vec2.scale(vec2.create(), this.viewAreaBottomLeft, -1);
-    vec2.subtract(
-      translate,
-      translate,
-      vec2.scale(vec2.create(), this.worldAreaInView, 0.5)
-    );
-    mat2d.translate(this.scaleWorldToNDC, this.scaleWorldToNDC, translate);
-  }
-
-  public setCursorPosition(position: vec2): void {
-    this.cursorPosition = position;
-  }
-
   public drawInfoText(text: string) {
     if (this.overlay.innerText != text) {
       this.overlay.innerText = text;