Various improvements

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