Various improvements

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

@@ -23,6 +23,10 @@ export abstract class FrameBuffer {
     this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
   }
 
+  public destroy(): void {
+    this.gl.deleteFramebuffer(this.frameBuffer);
+  }
+
   public setSize(): boolean {
     const realToCssPixels =
       (this.enableHighDpiRendering ? window.devicePixelRatio : 1) * this.renderScale;

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

@@ -28,6 +28,10 @@ export class IntermediateFrameBuffer extends FrameBuffer {
     this.setSize();
   }
 
+  public destroy(): void {
+    this.gl.deleteTexture(this.frameTexture);
+  }
+
   public get colorTexture(): WebGLTexture {
     return this.frameTexture;
   }

src/graphics/graphics-library/parallel-compiler.ts

@@ -50,6 +50,7 @@ export abstract class ParallelCompiler {
     return promise;
   }
 
+  @Insights.measure('compile programs')
   public static async compilePrograms(): Promise<void> {
     ParallelCompiler.programs.forEach((p) => ParallelCompiler.gl.linkProgram(p.program));
 

src/graphics/graphics-library/program/fragment-shader-only-program.ts

@@ -20,10 +20,16 @@ export class FragmentShaderOnlyProgram extends Program {
     this.gl.bindVertexArray(this.vao!);
   }
 
-  public draw() {
+  public draw(uniforms: { [name: string]: any }) {
+    super.draw(uniforms);
     this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
   }
 
+  public destroy(): void {
+    this.gl.deleteVertexArray(this.vao!);
+    super.destroy();
+  }
+
   private prepareScreenQuad(attributeName: string) {
     const positionAttributeLocation = this.gl.getAttribLocation(
       this.program!,

src/graphics/graphics-library/program/i-program.ts

@@ -2,7 +2,6 @@ import { vec2 } from 'gl-matrix';
 
 export interface IProgram {
   setDrawingRectangleUV(bottomLeft: vec2, size: vec2): void;
-  bindAndSetUniforms(values: { [name: string]: any }): void;
-  draw(): void;
-  delete(): void;
+  draw(values: { [name: string]: any }): void;
+  destroy(): void;
 }

src/graphics/graphics-library/program/program.ts

@@ -31,11 +31,6 @@ export default abstract class Program implements IProgram {
     this.queryUniforms();
   }
 
-  public bindAndSetUniforms(values: { [name: string]: any }) {
-    this.bind();
-    this.setUniforms({ modelTransform: this.modelTransform, ...values });
-  }
-
   public setDrawingRectangleUV(bottomLeft: vec2, size: vec2) {
     mat2d.invert(this.modelTransform, this.ndcToUv);
     mat2d.translate(this.modelTransform, this.modelTransform, bottomLeft);
@@ -56,12 +51,14 @@ export default abstract class Program implements IProgram {
     });
   }
 
-  public delete() {
-    this.gl.getAttachedShaders(this.program!)?.forEach((s) => this.gl.deleteShader(s));
+  public destroy() {
     this.gl.deleteProgram(this.program!);
   }
 
-  public abstract draw(): void;
+  public draw(values: { [name: string]: any }): void {
+    this.bind();
+    this.setUniforms({ modelTransform: this.modelTransform, ...values });
+  }
 
   protected bind() {
     this.gl.useProgram(this.program!);

src/graphics/graphics-library/program/uniform-array-autoscaling-program.ts

@@ -38,7 +38,12 @@ export class UniformArrayAutoScalingProgram implements IProgram {
     await Promise.all(promises);
   }
 
-  public bindAndSetUniforms(uniforms: { [name: string]: any }): void {
+  public setDrawingRectangleUV(bottomLeft: vec2, size: vec2) {
+    this.drawingRectangleBottomLeft = bottomLeft;
+    this.drawingRectangleSize = size;
+  }
+
+  public draw(uniforms: { [name: string]: any }): void {
     const values = this.descriptors!.map((d) =>
       uniforms[d.uniformName] ? uniforms[d.uniformName].length : 0
     );
@@ -56,28 +61,16 @@ export class UniformArrayAutoScalingProgram implements IProgram {
       });
     }
 
-    this.current?.setDrawingRectangleUV(
+    this.current!.setDrawingRectangleUV(
       this.drawingRectangleBottomLeft,
       this.drawingRectangleSize
     );
-    this.current?.bindAndSetUniforms(uniforms);
+
+    this.current!.draw(uniforms);
   }
 
-  public setDrawingRectangleUV(bottomLeft: vec2, size: vec2) {
-    this.drawingRectangleBottomLeft = bottomLeft;
-    this.drawingRectangleSize = size;
-  }
-
-  public draw(): void {
-    if (!this.current) {
-      throw new Error('Method bindAndSetUniforms have not been called yet');
-    }
-
-    this.current.draw();
-  }
-
-  public delete(): void {
-    this.programs.forEach((p) => p.program.delete());
+  public destroy(): void {
+    this.programs.forEach((p) => p.program.destroy());
   }
 
   private async createProgram(

src/graphics/rendering/insights.ts

@@ -1,39 +1,54 @@
+import { last } from '../../helper/last';
+import { msToString } from '../../helper/ms-to-string';
+
 export class Insights {
   private static insights: any = {};
 
   public static setValue(key: string | Array<string>, value: any): void {
     if (Array.isArray(key)) {
-      key.reduce((previousValue, currentKey, i, a) => {
+      if (key.length == 0) {
+        throw new Error('Key length must be greater than 0');
+      }
+
+      const lastObject = key.slice(0, -1).reduce((previousValue, currentKey) => {
         if (!Object.prototype.hasOwnProperty.call(previousValue, currentKey)) {
-          previousValue[currentKey] = i == a.length - 1 ? value : {};
+          previousValue[currentKey] = {};
         }
 
         return previousValue[currentKey];
       }, Insights.insights);
+
+      lastObject[last(key)!] = value;
     } else {
       Insights.insights[key] = value;
     }
   }
 
-  public static measure(name: string) {
+  public static measure(key: string | Array<string>) {
     return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
       const targetFunction = descriptor.value;
 
       descriptor.value = function (...values: Array<any>) {
-        const start = performance.now();
-
-        const result = targetFunction.bind(this)(...values);
-
-        const end = performance.now();
-        Insights.setValue(['measurements', name], `${(end - start).toFixed(3)} ms`);
-
-        return result;
+        return Insights.measureFunction(key, () => targetFunction(...values));
       };
-
       return descriptor;
     };
   }
 
+  public static measureFunction(
+    key: string | Array<string>,
+    targetFunction: () => any
+  ): any {
+    const start = performance.now();
+    const result = targetFunction();
+    const end = performance.now();
+
+    const newKey = Array.isArray(key) ? ['measurements', ...key] : ['measurements', key];
+    Insights.setValue(newKey, msToString(end - start));
+
+    return result;
+  }
+
   public static get values(): any {
     return Insights.insights;
   }

src/graphics/rendering/rendering-pass.ts

@@ -3,6 +3,8 @@ import { Drawable } from '../../drawables/drawable';
 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';
+import { Insights } from './insights';
+import { RenderingPassName } from './rendering-pass-name';
 
 export class RenderingPass {
   public tileMultiplier = 8;
@@ -11,7 +13,11 @@ export class RenderingPass {
   private drawables: Array<Drawable> = [];
   private program: UniformArrayAutoScalingProgram;
 
-  constructor(gl: WebGL2RenderingContext, private frame: FrameBuffer) {
+  constructor(
+    gl: WebGL2RenderingContext,
+    private frame: FrameBuffer,
+    private name: RenderingPassName
+  ) {
     this.program = new UniformArrayAutoScalingProgram(gl);
   }
 
@@ -40,6 +46,7 @@ export class RenderingPass {
 
     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 = {
@@ -47,10 +54,10 @@ export class RenderingPass {
           maxMinDistance: radiusInNDC * (this.isWorldInverted ? -1 : 1),
         };
 
-        const ndcBottomLeft = vec2.fromValues(x, y);
+        const uvBottomLeft = vec2.fromValues(x / 2 + 0.5, y / 2 + 0.5);
 
         this.program.setDrawingRectangleUV(
-          [(ndcBottomLeft.x + 1) / 2, (ndcBottomLeft.y + 1) / 2],
+          uvBottomLeft,
           vec2.fromValues(stepsInUV, stepsInUV)
         );
 
@@ -58,17 +65,19 @@ export class RenderingPass {
           vec2.create(),
           vec2.add(
             vec2.create(),
-            [(ndcBottomLeft.x + 1) / 2, (ndcBottomLeft.y + 1) / 2],
+            uvBottomLeft,
             vec2.fromValues(stepsInUV / 2, stepsInUV / 2)
           ),
           uniforms.uvToWorld
         );
 
-        const primitivesNearTile = this.drawables.filter(
+        const drawablesNearTile = this.drawables.filter(
           (d) => d.distance(tileCenterWorldCoordinates) < 2 * worldR
         );
 
-        primitivesNearTile.forEach((p) =>
+        drawnDrawablesCount += drawablesNearTile.length;
+
+        drawablesNearTile.forEach((p) =>
           p.serializeToUniforms(
             uniforms,
             uniforms.transformWorldToNDC,
@@ -76,11 +85,22 @@ export class RenderingPass {
           )
         );
 
-        this.program.bindAndSetUniforms(uniforms);
-        this.program.draw();
+        this.program.draw(uniforms);
       }
     }
 
+    Insights.setValue(['render pass', this.name, 'all drawables'], this.drawables.length);
+    Insights.setValue(['render pass', this.name, 'tile count'], this.tileMultiplier ** 2);
+    Insights.setValue(
+      ['render pass', this.name, 'rendered drawables'],
+      drawnDrawablesCount / this.tileMultiplier ** 2
+    );
+
     this.drawables = [];
   }
+
+  public destroy(): void {
+    this.frame.destroy();
+    this.program.destroy();
+  }
 }

src/graphics/rendering/shaders/shading-fs.glsl

@@ -42,7 +42,7 @@ float softShadowTransparency(float startingDistance, float lightCenterDistance,
         float minDistance = getDistance(uvCoordinates + direction * rayLength);
 
         q = min(q, minDistance / rayLength);
-        rayLength += minDistance / 2.5;
+        rayLength += minDistance;
 
         if (rayLength >= lightCenterDistance) {
             return q * SHADOW_HARDNESS;
@@ -59,7 +59,7 @@ float hardShadowTransparency(float startingDistance, float lightCenterDistance,
         rayLength += getDistance(uvCoordinates + direction * rayLength);
     }
 
-    return step(lightCenterDistance, rayLength);
+    return min(1.0, step(lightCenterDistance, rayLength) + rayLength / (150.0 * shadingNdcPixelSize));
 }
 
 float shadowTransparency(float startingDistance, float lightCenterDistance, vec2 direction) {

src/graphics/rendering/startup-settings.ts

@@ -1,5 +1,4 @@
 export interface StartupSettings {
-  enableStopwatch: boolean;
   softShadowTraceCount: string;
   hardShadowTraceCount: string;
 }

src/graphics/rendering/webgl2-renderer.ts

@@ -1,6 +1,7 @@
 import { vec2, vec3 } from 'gl-matrix';
 import { Drawable } from '../../drawables/drawable';
 import { DrawableDescriptor } from '../../drawables/drawable-descriptor';
+import { msToString } from '../../helper/ms-to-string';
 import { DefaultFrameBuffer } from '../graphics-library/frame-buffer/default-frame-buffer';
 import { IntermediateFrameBuffer } from '../graphics-library/frame-buffer/intermediate-frame-buffer';
 import { getWebGl2Context } from '../graphics-library/helper/get-webgl2-context';
@@ -39,7 +40,7 @@ export class WebGl2Renderer implements Renderer {
     },
     tileMultiplier: (v) => {
       this.passes[RenderingPassName.distance].tileMultiplier = v;
-      this.passes[RenderingPassName.pixel].tileMultiplier = v;
+      this.passes[RenderingPassName.pixel].tileMultiplier = 1;
     },
     isWorldInverted: (v) => {
       this.passes[RenderingPassName.distance].isWorldInverted = v;
@@ -51,13 +52,12 @@ export class WebGl2Renderer implements Renderer {
   };
 
   private static defaultStartupSettings: StartupSettings = {
-    enableStopwatch: true,
     softShadowTraceCount: '128',
     hardShadowTraceCount: '32',
   };
 
   setRuntimeSettings(overrides: Partial<RuntimeSettings>): void {
-    Object.entries(overrides).forEach((k, v) => {
+    Object.entries(overrides).forEach(([k, v]) => {
       this.applyRuntimeSettings[(k as unknown) as string](v);
     });
   }
@@ -75,6 +75,8 @@ export class WebGl2Renderer implements Renderer {
 
     this.passes = this.createPasses();
 
+    this.passes.pixel.tileMultiplier = 1;
+
     this.uniformsProvider = new UniformsProvider(this.gl);
 
     this.autoscaler = new FpsAutoscaler({
@@ -86,18 +88,21 @@ export class WebGl2Renderer implements Renderer {
     });
   }
 
-  @Insights.measure('create render passes')
   private createPasses(): Passes {
     return {
       [RenderingPassName.distance]: new RenderingPass(
         this.gl,
-        this.distanceFieldFrameBuffer
+        this.distanceFieldFrameBuffer,
+        RenderingPassName.distance
+      ),
+      [RenderingPassName.pixel]: new RenderingPass(
+        this.gl,
+        this.lightingFrameBuffer,
+        RenderingPassName.pixel
       ),
-      [RenderingPassName.pixel]: new RenderingPass(this.gl, this.lightingFrameBuffer),
     };
   }
 
-  @Insights.measure('initialize render passes')
   public async initialize(
     palette: Array<vec3>,
     settingsOverrides: Partial<StartupSettings>
@@ -129,12 +134,10 @@ export class WebGl2Renderer implements Renderer {
 
     await Promise.all(promises);
 
-    if (settings.enableStopwatch) {
-      try {
-        this.stopwatch = new WebGlStopwatch(this.gl);
-      } catch {
-        // no problem
-      }
+    try {
+      this.stopwatch = new WebGlStopwatch(this.gl);
+    } catch {
+      // no problem
     }
   }
 
@@ -142,13 +145,6 @@ export class WebGl2Renderer implements Renderer {
     return Insights.values;
   }
 
-  public destroy(): void {
-    // todo
-    /*const extension = enableExtension(this.gl, 'WEBGL_lose_context');
-    extension.loseContext();
-    extension.restoreContext();*/
-  }
-
   private static hasSdf(descriptor: DrawableDescriptor) {
     return Object.prototype.hasOwnProperty.call(descriptor, 'sdf');
   }
@@ -178,7 +174,17 @@ export class WebGl2Renderer implements Renderer {
   }
 
   public renderDrawables() {
-    this.stopwatch?.start();
+    if (this.stopwatch) {
+      if (this.stopwatch.isReady) {
+        this.stopwatch.start();
+      } else {
+        this.stopwatch.tryGetResults();
+        Insights.setValue(
+          'GPU render time',
+          msToString(this.stopwatch.resultsInMilliSeconds)
+        );
+      }
+    }
 
     this.distanceFieldFrameBuffer.setSize();
     this.lightingFrameBuffer.setSize();
@@ -196,7 +202,9 @@ export class WebGl2Renderer implements Renderer {
       this.distanceFieldFrameBuffer.colorTexture
     );
 
-    this.stopwatch?.stop();
+    if (this.stopwatch?.isRunning) {
+      this.stopwatch?.stop();
+    }
   }
 
   public setViewArea(topLeft: vec2, size: vec2) {
@@ -210,4 +218,9 @@ export class WebGl2Renderer implements Renderer {
   public get canvasSize(): vec2 {
     return vec2.fromValues(this.canvas.clientWidth, this.canvas.clientHeight);
   }
+
+  public destroy(): void {
+    this.passes.distance.destroy();
+    this.passes.pixel.destroy();
+  }
 }

src/graphics/settings.ts

@@ -23,7 +23,7 @@ export const settings = {
       {
         distanceRenderScale: 0.3,
         finalRenderScale: 1.0,
-        softShadowsEnabled: true,
+        softShadowsEnabled: false,
       },
       /*{
         distanceRenderScale: 1.0,