Add more improvements

src/drawables/lights/circle-light.ts

@@ -1,5 +1,4 @@
 import { mat2d, vec2, vec3 } from 'gl-matrix';
-import { settings } from '../../graphics/settings';
 import { Drawable } from '../drawable';
 import { DrawableDescriptor } from '../drawable-descriptor';
 
@@ -8,7 +7,7 @@ export class CircleLight extends Drawable {
     return {
       uniformName: 'circleLights',
       uniformCountMacroName: 'CIRCLE_LIGHT_COUNT',
-      shaderCombinationSteps: settings.shaderCombinations.circleLightSteps,
+      shaderCombinationSteps: [0, 1, 2, 4],
       empty: new CircleLight(vec2.fromValues(0, 0), 0, vec3.fromValues(0, 0, 0), 0),
     };
   }

src/drawables/lights/flashlight.ts

@@ -1,5 +1,4 @@
 import { mat2d, vec2, vec3 } from 'gl-matrix';
-import { settings } from '../../graphics/settings';
 import { Drawable } from '../drawable';
 import { DrawableDescriptor } from '../drawable-descriptor';
 
@@ -8,7 +7,7 @@ export class Flashlight extends Drawable {
     return {
       uniformName: 'flashlights',
       uniformCountMacroName: 'FLASHLIGHT_COUNT',
-      shaderCombinationSteps: settings.shaderCombinations.flashlightSteps,
+      shaderCombinationSteps: [0, 1, 2, 4],
       empty: new Flashlight(
         vec2.fromValues(0, 0),
         vec2.fromValues(0, 0),

src/drawables/shapes/circle.ts

@@ -13,10 +13,16 @@ export class Circle extends Drawable {
           }[CIRCLE_COUNT] circles;
 
           void circleMinDistance(inout float minDistance, inout float color) {
+              float circleMinDistance = minDistance;
               for (int i = 0; i < CIRCLE_COUNT; i++) {
                   float dist = distance(circles[i].center, position) - circles[i].radius;
-                  minDistance = min(minDistance, dist);
+                  circleMinDistance = min(circleMinDistance, dist);
               }
+              minDistance = min(minDistance, circleMinDistance);
+              color = mix(2.0, color, step(
+                distanceNdcPixelSize + SURFACE_OFFSET, 
+                circleMinDistance
+              ));
           }
         `,
         distanceFunctionName: 'circleMinDistance',
@@ -32,8 +38,8 @@ export class Circle extends Drawable {
     super();
   }
 
-  public distance(position: vec2): number {
+  public distance(target: vec2): number {
-    return vec2.dist(this.center, position) - this.radius;
+    return vec2.dist(this.center, target) - this.radius;
   }
 
   protected getObjectToSerialize(transform2d: mat2d, transform1d: number): any {

src/drawables/shapes/tunnel.ts

@@ -0,0 +1,93 @@
+import { mat2d, vec2 } from 'gl-matrix';
+import { clamp01 } from '../../helper/clamp';
+import { mix } from '../../helper/mix';
+import { Drawable } from '../drawable';
+import { DrawableDescriptor } from '../drawable-descriptor';
+
+export class Tunnel extends Drawable {
+  public readonly isInverted = false;
+  public readonly toFromDelta: vec2;
+
+  public static get descriptor(): DrawableDescriptor {
+    return {
+      sdf: {
+        shader: `
+          uniform struct Tunnel {
+              vec2 from;
+              vec2 toFromDelta;
+              float fromRadius;
+              float toRadius;
+              float inverted;
+          }[TUNNEL_COUNT] tunnels;
+      
+          void tunnelMinDistance(inout float minDistance, inout float color) {
+              float tunnelMinDistance = minDistance;
+              for (int i = 0; i < TUNNEL_COUNT; i++) {
+                  Tunnel tunnel = tunnels[i];
+                  vec2 targetFromDelta = position - tunnel.from;
+                  
+                  float h = clamp(
+                        dot(targetFromDelta, tunnel.toFromDelta)
+                      / dot(tunnel.toFromDelta, tunnel.toFromDelta),
+                      0.0, 1.0
+                  );
+      
+                  float lineDistance = -mix(
+                    tunnel.fromRadius, tunnel.toRadius, h
+                  ) + tunnel.inverted * distance(
+                      targetFromDelta, tunnel.toFromDelta * h
+                  );
+      
+                  tunnelMinDistance = min(tunnelMinDistance, lineDistance);
+              }
+      
+              color = mix(2.0, color, step(
+                distanceNdcPixelSize + SURFACE_OFFSET,
+                -tunnelMinDistance
+              ));
+              minDistance = -tunnelMinDistance;
+          }
+        `,
+        distanceFunctionName: 'tunnelMinDistance',
+      },
+      uniformName: 'tunnels',
+      uniformCountMacroName: 'TUNNEL_COUNT',
+      shaderCombinationSteps: [0, 1, 2, 8, 32],
+      empty: new Tunnel(vec2.fromValues(0, 0), vec2.fromValues(0, 0), 0, 0),
+    };
+  }
+
+  constructor(
+    public readonly from: vec2,
+    public readonly to: vec2,
+    public readonly fromRadius: number,
+    public readonly toRadius: number
+  ) {
+    super();
+    this.toFromDelta = vec2.subtract(vec2.create(), to, from);
+  }
+
+  public distance(target: vec2): number {
+    const targetFromDelta = vec2.subtract(vec2.create(), target, this.from);
+
+    const h = clamp01(
+      vec2.dot(targetFromDelta, this.toFromDelta) /
+        vec2.dot(this.toFromDelta, this.toFromDelta)
+    );
+
+    return (
+      vec2.distance(targetFromDelta, vec2.scale(vec2.create(), this.toFromDelta, h)) -
+      mix(this.fromRadius, this.toRadius, h)
+    );
+  }
+
+  protected getObjectToSerialize(transform2d: mat2d, transform1d: number): any {
+    return {
+      from: vec2.transformMat2d(vec2.create(), this.from, transform2d),
+      toFromDelta: vec2.scale(vec2.create(), this.toFromDelta, transform1d),
+      fromRadius: this.fromRadius * transform1d,
+      toRadius: this.toRadius * transform1d,
+      inverted: this.isInverted ? -1 : 1,
+    };
+  }
+}

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

@@ -3,7 +3,7 @@ import { checkShader } from './check-shader';
 export const checkProgram = (gl: WebGL2RenderingContext, program: WebGLProgram) => {
   const success = gl.getProgramParameter(program, gl.LINK_STATUS);
 
-  if (!success) {
+  if (!success && !gl.isContextLost()) {
     gl.getAttachedShaders(program)?.forEach((s) => {
       checkShader(gl, s);
     });

src/graphics/graphics-library/compiling/check-shader.ts

@@ -1,7 +1,7 @@
 export const checkShader = (gl: WebGL2RenderingContext, shader: WebGLShader) => {
   const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
 
-  if (!success) {
+  if (!success && !gl.isContextLost()) {
     throw new Error(gl.getShaderInfoLog(shader)!);
   }
 };

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

@@ -7,11 +7,8 @@ export const createProgram = (
   fragmentShaderSource: string,
   substitutions: { [name: string]: string }
 ): WebGLProgram => {
-  const program = gl.createProgram();
+  // can only return null on lost context
-
+  const program = gl.createProgram()!;
-  if (!program) {
-    throw new Error('Could not create program');
-  }
 
   // const extension = tryEnableExtension(gl, 'KHR_parallel_shader_compile');
 
@@ -43,5 +40,8 @@ export const createProgram = (
 
   checkProgram(gl, program);
 
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+
   return program;
 };

src/graphics/graphics-library/compiling/create-shader.ts

@@ -9,11 +9,8 @@ export const createShader = (
     return Number.isInteger(value) ? `${value}.0` : value;
   });
 
-  const shader = gl.createShader(type);
+  // can only return null on lost context
-
+  const shader = gl.createShader(type)!;
-  if (!shader) {
-    throw new Error('Could not create shader');
-  }
 
   gl.shaderSource(shader, source);
   gl.compileShader(shader);

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

@@ -1,8 +1,8 @@
 import { FrameBuffer } from './frame-buffer';
 
 export class DefaultFrameBuffer extends FrameBuffer {
-  constructor(gl: WebGL2RenderingContext) {
+  constructor(gl: WebGL2RenderingContext, enableHighDpiRendering: boolean) {
-    super(gl);
+    super(gl, enableHighDpiRendering);
     this.frameBuffer = null;
     this.setSize();
   }

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

@@ -1,16 +1,17 @@
 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) {}
+  constructor(
+    protected gl: WebGL2RenderingContext,
+    private enableHighDpiRendering: boolean
+  ) {}
 
   public bindAndClear(colorInput?: WebGLTexture) {
     this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.frameBuffer);

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

@@ -5,8 +5,8 @@ export class IntermediateFrameBuffer extends FrameBuffer {
   private frameTexture: WebGLTexture;
   private floatLinearEnabled = false;
 
-  constructor(gl: WebGL2RenderingContext) {
+  constructor(gl: WebGL2RenderingContext, enableHighDpiRendering: boolean) {
-    super(gl);
+    super(gl, enableHighDpiRendering);
 
     enableExtension(gl, 'EXT_color_buffer_float');
 
@@ -17,18 +17,12 @@ export class IntermediateFrameBuffer extends FrameBuffer {
       // it's okay
     }
 
-    const texture = this.gl.createTexture();
+    // can only return null on lost context
-    if (!texture) {
+    this.frameTexture = this.gl.createTexture()!;
-      throw new Error('Could not create texture');
-    }
-    this.frameTexture = texture;
     this.configureTexture();
 
-    const frameBuffer = this.gl.createFramebuffer();
+    // can only return null on lost context
-    if (!frameBuffer) {
+    this.frameBuffer = this.gl.createFramebuffer()!;
-      throw new Error('Could not create frame buffer');
-    }
-    this.frameBuffer = frameBuffer;
     this.configureFrameBuffer();
 
     this.setSize();

src/graphics/graphics-library/helper/enable-extension.ts

@@ -1,11 +1,13 @@
+import { Insights } from '../../rendering/insights';
+
 const extensions: Map<string, any> = new Map();
 
-const printExtensions = () => {
+const logExtensions = () => {
   const values = {};
   for (const [k, v] of extensions.entries()) {
     values[k] = v !== null;
   }
-  //InfoText.modifyRecord('extensions', values);
+  Insights.setValue('extensions', values);
 };
 
 export const tryEnableExtension = (
@@ -23,7 +25,7 @@ export const tryEnableExtension = (
 
   extensions.set(name, extension);
 
-  printExtensions();
+  logExtensions();
 
   return extension;
 };

src/graphics/graphics-library/helper/stopwatch.ts

@@ -1,3 +1,4 @@
+import { Insights } from '../../rendering/insights';
 import { enableExtension } from './enable-extension';
 
 // https://www.khronos.org/registry/webgl/extensions/EXT_disjoint_timer_query_webgl2/
@@ -37,7 +38,7 @@ export class WebGlStopwatch {
         this.gl.QUERY_RESULT
       );
 
-      //InfoText.modifyRecord('Draw time', `${this.resultsInMilliSeconds.toFixed(2)} ms`);
+      Insights.setValue('GPU draw time', `${this.resultsInMilliSeconds.toFixed(2)} ms`);
 
       this.isReady = true;
     }

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

@@ -35,11 +35,9 @@ export class FragmentShaderOnlyProgram extends Program {
       new Float32Array([-1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0]),
       this.gl.STATIC_DRAW
     );
-    const vao = this.gl.createVertexArray();
+
-    if (!vao) {
+    // can only return null on lost context
-      throw new Error('Could not create vertex array object');
+    this.vao = this.gl.createVertexArray()!;
-    }
-    this.vao = vao;
 
     this.gl.bindVertexArray(this.vao);
     this.gl.enableVertexAttribArray(positionAttributeLocation);

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

@@ -1,5 +1,4 @@
 import { mat2d, vec2 } from 'gl-matrix';
-import { settings } from '../../settings';
 import { createProgram } from '../compiling/create-program';
 import { loadUniform } from '../helper/load-uniform';
 import { IProgram } from './i-program';
@@ -20,7 +19,7 @@ export default abstract class Program implements IProgram {
     [vertexShaderSource, fragmentShaderSource]: [string, string],
     substitutions: { [name: string]: string }
   ) {
-    substitutions = { ...settings.shaderMacros, ...substitutions };
+    substitutions = { ...substitutions };
 
     this.program = createProgram(
       this.gl,

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

@@ -18,7 +18,8 @@ export class UniformArrayAutoScalingProgram implements IProgram {
   constructor(
     private gl: WebGL2RenderingContext,
     shaderSources: [string, string],
-    private descriptors: Array<DrawableDescriptor>
+    private descriptors: Array<DrawableDescriptor>,
+    private substitutions: { [name: string]: any }
   ) {
     for (const combination of getCombinations(
       descriptors.map((o) => o.shaderCombinationSteps)
@@ -75,6 +76,7 @@ export class UniformArrayAutoScalingProgram implements IProgram {
     shaderSources: [string, string]
   ): FragmentShaderOnlyProgram {
     const substitutions = {
+      ...this.substitutions,
       macroDefinitions: this.getMacroDefinitions(combination, descriptors),
       declarations: this.getDeclarations(combination, descriptors),
       functionCalls: this.getFunctionCalls(combination, descriptors),

src/graphics/rendering/insights.ts

@@ -0,0 +1,21 @@
+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) => {
+        if (!Object.prototype.hasOwnProperty.call(previousValue, currentKey)) {
+          previousValue[currentKey] = {};
+        }
+
+        return previousValue[currentKey];
+      }, Insights.insights);
+    } else {
+      Insights.insights[key] = value;
+    }
+  }
+
+  public static get values(): any {
+    return Insights.insights;
+  }
+}

src/graphics/rendering/renderer.ts

@@ -2,13 +2,13 @@ import { vec2 } from 'gl-matrix';
 import { Drawable } from '../../drawables/drawable';
 
 export interface Renderer {
-  setViewArea(topLeft: vec2, size: vec2): void;
-
-  addDrawable(drawable: Drawable): void;
-  renderDrawables(): void;
-
-  autoscaleQuality(deltaTime: DOMHighResTimeStamp): void;
-
   readonly canvasSize: vec2;
+  readonly insights: any;
+
+  setViewArea(topLeft: vec2, size: vec2): void;
   setCursorPosition(position: vec2): void;
+  addDrawable(drawable: Drawable): void;
+  autoscaleQuality(deltaTime: DOMHighResTimeStamp): void;
+  renderDrawables(): void;
+  destroy(): void;
 }

src/graphics/rendering/rendering-pass.ts

@@ -3,7 +3,6 @@ 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 { settings } from '../settings';
 
 export class RenderingPass {
   private drawables: Array<Drawable> = [];
@@ -13,12 +12,15 @@ export class RenderingPass {
     gl: WebGL2RenderingContext,
     shaderSources: [string, string],
     drawableDescriptors: Array<DrawableDescriptor>,
-    private frame: FrameBuffer
+    private frame: FrameBuffer,
+    substitutions: { [name: string]: any },
+    private tileMultiplier: number
   ) {
     this.program = new UniformArrayAutoScalingProgram(
       gl,
       shaderSources,
-      drawableDescriptors
+      drawableDescriptors,
+      substitutions
     );
   }
 
@@ -29,7 +31,7 @@ export class RenderingPass {
   public render(commonUniforms: any, inputTexture?: WebGLTexture) {
     this.frame.bindAndClear(inputTexture);
 
-    const stepsInUV = 1 / settings.tileMultiplier;
+    const stepsInUV = 1 / this.tileMultiplier;
 
     const worldR =
       0.5 *
@@ -41,7 +43,7 @@ export class RenderingPass {
 
     for (let x = -1; x < 1; x += stepsInNDC) {
       for (let y = -1; y < 1; y += stepsInNDC) {
-        const uniforms = { ...commonUniforms, maxMinDistance: 0.0 };
+        const uniforms = { ...commonUniforms, maxMinDistance: radiusInNDC };
 
         const ndcBottomLeft = vec2.fromValues(x, y);
 

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

@@ -0,0 +1,72 @@
+#version 300 es
+
+precision lowp float;
+
+#define SURFACE_OFFSET 0.001
+ 
+uniform float maxMinDistance;
+uniform float distanceNdcPixelSize;
+in vec2 position;
+
+{macroDefinitions}
+
+{declarations}
+
+/*
+#endif
+#if BLOB_COUNT > 0
+    uniform struct {
+        vec2 headCenter;
+        vec2 leftFootCenter;
+        vec2 rightFootCenter;
+        float headRadius;
+        float footRadius;
+        float k;
+    }[BLOB_COUNT] blobs;
+
+    float smoothMin(float a, float b)
+    {
+        const float k = 2.0;
+        
+        a = pow(a, k);
+        b = pow(b, k);
+        return pow((a * b) / (a + b), 1.0 / k);
+    }
+
+    float circleMinDistance(vec2 circleCenter, float radius) {
+        return distance(position, circleCenter) - radius;
+    }
+
+    void blobMinDistance(inout float minDistance, inout float color) {
+        for (int i = 0; i < BLOB_COUNT; i++) {
+            float headDistance = circleMinDistance(blobs[i].headCenter, blobs[i].headRadius);
+            float leftFootDistance = circleMinDistance(blobs[i].leftFootCenter, blobs[i].footRadius);
+            float rightFootDistance = circleMinDistance(blobs[i].rightFootCenter, blobs[i].footRadius);
+
+            float res = min(
+                smoothMin(headDistance, leftFootDistance),
+                smoothMin(headDistance, rightFootDistance)
+            );
+
+            res = min(100.0, headDistance);
+            res = min(res, leftFootDistance);
+            res = min(res, rightFootDistance);
+            //color = mix(2.0, color, step(distanceUvPixelSize + SURFACE_OFFSET, res));
+            minDistance = min(minDistance, res);
+            color = mix(2.0, color, step(distanceNdcPixelSize + SURFACE_OFFSET, res));
+        }
+    }
+#endif
+*/
+
+out vec2 fragmentColor;
+
+void main() {
+    float minDistance = maxMinDistance;
+    float color = 1.0;
+
+    {functionCalls}
+
+    // minDistance / 2.0: NDC to UV scale
+    fragmentColor = vec2(minDistance / 2.0, color);
+}