Fix lights

src/graphics/rendering/render-pass/distance-render-pass.ts

@@ -0,0 +1,87 @@
+import { vec2 } from 'gl-matrix';
+import { Drawable } from '../../../drawables/drawable';
+import { Insights } from '../insights';
+import { RenderPass } from './render-pass';
+
+export class DistanceRenderPass extends RenderPass {
+  public tileMultiplier = 8;
+  public isWorldInverted = false;
+
+  private drawables: Array<Drawable> = [];
+
+  public addDrawable(drawable: Drawable) {
+    this.drawables.push(drawable);
+  }
+
+  public render(commonUniforms: any, inputTexture?: WebGLTexture) {
+    this.frame.bindAndClear(inputTexture);
+
+    const stepsInUV = 1 / this.tileMultiplier;
+
+    const worldR =
+      0.5 *
+      vec2.length(vec2.scale(vec2.create(), commonUniforms.worldAreaInView, stepsInUV));
+
+    const radiusInNDC = worldR * commonUniforms.scaleWorldLengthToNDC;
+
+    const stepsInNDC = 2 * stepsInUV;
+
+    let drawnDrawablesCount = 0;
+    for (let x = -1; x < 1; x += stepsInNDC) {
+      for (let y = -1; y < 1; y += stepsInNDC) {
+        const uniforms = {
+          ...commonUniforms,
+          maxMinDistance: radiusInNDC * (this.isWorldInverted ? -1 : 1),
+        };
+
+        const uvBottomLeft = vec2.fromValues(x / 2 + 0.5, y / 2 + 0.5);
+
+        this.program.setDrawingRectangleUV(
+          uvBottomLeft,
+          vec2.fromValues(stepsInUV, stepsInUV)
+        );
+
+        const tileCenterWorldCoordinates = vec2.transformMat2d(
+          vec2.create(),
+          vec2.add(
+            vec2.create(),
+            uvBottomLeft,
+            vec2.fromValues(stepsInUV / 2, stepsInUV / 2)
+          ),
+          uniforms.uvToWorld
+        );
+
+        const drawablesNearTile = this.drawables.filter(
+          (d) => d.minDistance(tileCenterWorldCoordinates) < 2 * worldR
+        );
+
+        drawnDrawablesCount += drawablesNearTile.length;
+
+        drawablesNearTile.forEach((p) =>
+          p.serializeToUniforms(
+            uniforms,
+            uniforms.transformWorldToNDC,
+            uniforms.scaleWorldLengthToNDC
+          )
+        );
+
+        this.program.draw(uniforms);
+      }
+    }
+
+    Insights.setValue(
+      ['render pass', 'distance', 'all drawables'],
+      this.drawables.length
+    );
+    Insights.setValue(
+      ['render pass', 'distance', 'tile count'],
+      this.tileMultiplier ** 2
+    );
+    Insights.setValue(
+      ['render pass', 'distance', 'rendered drawables'],
+      drawnDrawablesCount / this.tileMultiplier ** 2
+    );
+
+    this.drawables = [];
+  }
+}

src/graphics/rendering/render-pass/lights-render-pass.ts

@@ -0,0 +1,58 @@
+import { vec2 } from 'gl-matrix';
+import { LightDrawable } from '../../../drawables/lights/light-drawable';
+import { clamp01 } from '../../../helper/clamp';
+import { Insights } from '../insights';
+import { RenderPass } from './render-pass';
+
+export class LightsRenderPass extends RenderPass {
+  public lightPhaseOutLength = 400;
+  private drawables: Array<LightDrawable> = [];
+
+  public addDrawable(drawable: LightDrawable) {
+    this.drawables.push(drawable);
+  }
+
+  public render(commonUniforms: any, inputTexture?: WebGLTexture) {
+    this.frame.bindAndClear(inputTexture);
+
+    const tileCenterWorldCoordinates = vec2.transformMat2d(
+      vec2.create(),
+      vec2.fromValues(0.5, 0.5),
+      commonUniforms.uvToWorld
+    );
+
+    const drawablesNearTile = this.drawables.filter((l) => {
+      const d = vec2.subtract(
+        vec2.create(),
+        [
+          Math.abs(l.center.x - tileCenterWorldCoordinates.x),
+          Math.abs(l.center.y - tileCenterWorldCoordinates.y),
+        ],
+        vec2.scale(vec2.create(), commonUniforms.worldAreaInView, 0.5)
+      );
+      const distance =
+        vec2.length([Math.max(d.x, 0), Math.max(d.y, 0)]) +
+        Math.min(Math.max(d.x, d.y), 0.0);
+      l.setLightnessRatio(clamp01(1 - distance / this.lightPhaseOutLength));
+
+      return distance < this.lightPhaseOutLength;
+    });
+
+    drawablesNearTile.forEach((p) =>
+      p.serializeToUniforms(
+        commonUniforms,
+        commonUniforms.transformWorldToNDC,
+        commonUniforms.scaleWorldLengthToNDC
+      )
+    );
+
+    this.program.draw(commonUniforms);
+
+    Insights.setValue(
+      ['render pass', 'lights', 'rendered drawables'],
+      drawablesNearTile.length
+    );
+
+    this.drawables = [];
+  }
+}

src/graphics/rendering/render-pass/render-pass.ts

@@ -0,0 +1,26 @@
+import { DrawableDescriptor } from '../../../drawables/drawable-descriptor';
+import { FrameBuffer } from '../../graphics-library/frame-buffer/frame-buffer';
+import { UniformArrayAutoScalingProgram } from '../../graphics-library/program/uniform-array-autoscaling-program';
+
+export abstract class RenderPass {
+  protected program: UniformArrayAutoScalingProgram;
+
+  constructor(gl: WebGL2RenderingContext, protected frame: FrameBuffer) {
+    this.program = new UniformArrayAutoScalingProgram(gl);
+  }
+
+  public async initialize(
+    shaderSources: [string, string],
+    descriptors: Array<DrawableDescriptor>,
+    substitutions: { [name: string]: any } = {}
+  ): Promise<void> {
+    await this.program.initialize(shaderSources, descriptors, substitutions);
+  }
+
+  public abstract render(commonUniforms: any, inputTexture?: WebGLTexture): void;
+
+  public destroy(): void {
+    this.frame.destroy();
+    this.program.destroy();
+  }
+}