Add more improvements

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();
-
-  if (!program) {
-    throw new Error('Could not create program');
-  }
+  // can only return null on lost context
+  const program = gl.createProgram()!;
 
   // 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);
-
-  if (!shader) {
-    throw new Error('Could not create shader');
-  }
+  // can only return null on lost context
+  const shader = gl.createShader(type)!;
 
   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) {
-    super(gl);
+  constructor(gl: WebGL2RenderingContext, enableHighDpiRendering: boolean) {
+    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) {
-    super(gl);
+  constructor(gl: WebGL2RenderingContext, enableHighDpiRendering: boolean) {
+    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();
-    if (!texture) {
-      throw new Error('Could not create texture');
-    }
-    this.frameTexture = texture;
+    // can only return null on lost context
+    this.frameTexture = this.gl.createTexture()!;
     this.configureTexture();
 
-    const frameBuffer = this.gl.createFramebuffer();
-    if (!frameBuffer) {
-      throw new Error('Could not create frame buffer');
-    }
-    this.frameBuffer = frameBuffer;
+    // can only return null on lost context
+    this.frameBuffer = this.gl.createFramebuffer()!;
     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) {
-      throw new Error('Could not create vertex array object');
-    }
-    this.vao = vao;
+
+    // can only return null on lost context
+    this.vao = this.gl.createVertexArray()!;
 
     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);
+}

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

@@ -0,0 +1,15 @@
+#version 300 es
+
+precision lowp float;
+
+uniform mat3 modelTransform;
+uniform vec2 squareToAspectRatio;
+
+in vec4 vertexPosition;
+out vec2 position;
+
+void main() {
+    vec3 vertexPosition2D = vec3(vertexPosition.xy, 1.0) * modelTransform;
+    gl_Position = vec4(vertexPosition2D.xy, 0.0, 1.0);
+    position = vertexPosition2D.xy * squareToAspectRatio;
+}

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

@@ -0,0 +1,175 @@
+#version 300 es
+
+precision lowp float;
+
+#define INFINITY 1000.0
+#define LIGHT_DROP_INSIDE_RATIO 0.5
+#define AMBIENT_LIGHT vec3(0.25, 0.15, 0.25)
+#define SHADOW_HARDNESS 150.0
+#define HARD_SHADOW_TRACE_COUNT {hardShadowTraceCount}
+#define SOFT_SHADOW_TRACE_COUNT {softShadowTraceCount}
+
+{macroDefinitions}
+
+uniform bool softShadowsEnabled;
+uniform vec2 squareToAspectRatioTimes2;
+uniform float shadingNdcPixelSize;
+uniform sampler2D distanceTexture;
+
+in vec2 position;
+in vec2 uvCoordinates;
+
+vec3[3] colors = vec3[](
+    {palette}
+);
+
+float getDistance(in vec2 target, out vec3 color) {
+    vec4 values = texture(distanceTexture, target);
+    color = colors[int(values[1])];
+    return values[0];
+}
+
+float getDistance(in vec2 target) {
+    return texture(distanceTexture, target)[0];
+}
+
+float softShadowTransparency(float startingDistance, float lightCenterDistance, vec2 direction) {
+    float rayLength = startingDistance;
+    float q = 1.0 / SHADOW_HARDNESS;
+
+    for (int j = 0; j < SOFT_SHADOW_TRACE_COUNT; j++) {
+        float minDistance = getDistance(uvCoordinates + direction * rayLength);
+
+        q = min(q, minDistance / rayLength);
+        rayLength += minDistance / 2.5;
+
+        if (rayLength >= lightCenterDistance) {
+            return q * SHADOW_HARDNESS;
+        }
+    }
+
+    return 0.0;
+}
+
+float hardShadowTransparency(float startingDistance, float lightCenterDistance, vec2 direction) {
+    float rayLength = startingDistance;
+    
+    for (int j = 0; j < HARD_SHADOW_TRACE_COUNT; j++) {
+        rayLength += getDistance(uvCoordinates + direction * rayLength);
+    }
+
+    return step(lightCenterDistance, rayLength);
+}
+
+float shadowTransparency(float startingDistance, float lightCenterDistance, vec2 direction) {
+    return softShadowsEnabled ? 
+        softShadowTransparency(startingDistance, lightCenterDistance, direction) :
+        hardShadowTransparency(startingDistance, lightCenterDistance, direction);
+}
+ 
+
+#if CIRCLE_LIGHT_COUNT > 0
+    uniform struct CircleLight {
+        vec2 center;
+        float lightDrop;
+        vec3 value;
+    }[CIRCLE_LIGHT_COUNT] circleLights;
+
+    in vec2[CIRCLE_LIGHT_COUNT] circleLightDirections;
+
+    vec3 colorInPosition(CircleLight light, out float lightCenterDistance) {
+        lightCenterDistance = distance(light.center, position);
+        return light.value / pow(
+            lightCenterDistance / light.lightDrop + 1.0, 2.0
+        );
+    }
+
+    vec3 colorInPositionInside(CircleLight light) {
+        float lightCenterDistance = distance(light.center, position);
+        return light.value / pow(
+            lightCenterDistance / (light.lightDrop * LIGHT_DROP_INSIDE_RATIO) + 1.0, 2.0
+        );
+    }
+#endif
+
+#if FLASHLIGHT_COUNT > 0
+    uniform struct Flashlight {
+        vec2 center;
+        vec2 direction;
+        float lightDrop;
+        vec3 value;
+    }[FLASHLIGHT_COUNT] flashlights;
+
+    in vec2[FLASHLIGHT_COUNT] flashlightDirections;
+
+    float intensityInDirection(vec2 lightDirection, vec2 targetDirection) {
+        return smoothstep(0.0, 1.0, 10.0 * max(0.0, dot(targetDirection, lightDirection) - 0.9));
+    }
+
+    vec3 colorInPosition(Flashlight light, vec2 positionDirection, out float lightCenterDistance) {
+        lightCenterDistance = distance(light.center, position);
+        return intensityInDirection(light.direction, positionDirection) * light.value / pow(
+            lightCenterDistance / light.lightDrop + 1.0, 2.0
+        );
+    }
+
+    vec3 colorInPositionInside(Flashlight light, vec2 positionDirection) {
+        float lightCenterDistance = distance(light.center, position);
+        return intensityInDirection(light.direction, positionDirection) * light.value / pow(
+            lightCenterDistance / (light.lightDrop * LIGHT_DROP_INSIDE_RATIO) + 1.0, 2.0
+        );
+    }
+#endif
+
+out vec4 fragmentColor;
+void main() {
+    vec3 lighting = AMBIENT_LIGHT;
+    
+    vec3 colorAtPosition;
+    float startingDistance = getDistance(uvCoordinates, colorAtPosition);
+    
+    if (startingDistance < 0.0) {
+        #if CIRCLE_LIGHT_COUNT > 0
+        for (int i = 0; i < CIRCLE_LIGHT_COUNT; i++) {
+            lighting += colorInPositionInside(circleLights[i]);
+        }
+        #endif
+
+        #if FLASHLIGHT_COUNT > 0
+        for (int i = 0; i < FLASHLIGHT_COUNT; i++) {
+            lighting += colorInPositionInside(flashlights[i], normalize(flashlightDirections[i]));
+        }
+        #endif
+    } else {
+        colorAtPosition = vec3(1.0);
+
+        #if CIRCLE_LIGHT_COUNT > 0
+        for (int i = 0; i < CIRCLE_LIGHT_COUNT; i++) {
+            vec2 direction = normalize(circleLightDirections[i]) / squareToAspectRatioTimes2;
+
+            float lightCenterDistance;
+            vec3 lightColorAtPosition = colorInPosition(circleLights[i], lightCenterDistance);
+
+            lighting += lightColorAtPosition * shadowTransparency(startingDistance, lightCenterDistance, direction);
+        }
+        #endif
+
+        #if FLASHLIGHT_COUNT > 0
+        for (int i = 0; i < FLASHLIGHT_COUNT; i++) {
+            vec2 originalDirection = normalize(flashlightDirections[i]);
+            vec2 direction = originalDirection / squareToAspectRatioTimes2;
+
+            float lightCenterDistance;
+            vec3 lightColorAtPosition = colorInPosition(flashlights[i], originalDirection, lightCenterDistance);
+            
+            if (length(lightColorAtPosition) < 0.01) {
+                continue;
+            }
+
+            lighting += lightColorAtPosition * shadowTransparency(startingDistance, lightCenterDistance, direction);
+        }
+        #endif
+    }
+    
+    fragmentColor = vec4(colorAtPosition * lighting, 1.0);
+}

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

@@ -0,0 +1,58 @@
+#version 300 es
+
+precision lowp float;
+
+{macroDefinitions}
+
+uniform mat3 modelTransform;
+in vec4 vertexPosition;
+
+out vec2 position;
+out vec2 uvCoordinates;
+
+uniform vec2 squareToAspectRatio;
+
+#if CIRCLE_LIGHT_COUNT > 0
+    uniform struct CircleLight {
+        vec2 center;
+        float lightDrop;
+        vec3 value;
+    }[CIRCLE_LIGHT_COUNT] circleLights;
+
+    out vec2[CIRCLE_LIGHT_COUNT] circleLightDirections;
+#endif
+
+#if FLASHLIGHT_COUNT > 0
+    uniform struct Flashlight {
+        vec2 center;
+        vec2 direction;
+        float lightDrop;
+        vec3 value;
+    }[FLASHLIGHT_COUNT] flashlights;
+
+    out vec2[FLASHLIGHT_COUNT] flashlightDirections;
+#endif
+
+void main() {
+    vec3 vertexPosition2D = vec3(vertexPosition.xy, 1.0) * modelTransform;
+    gl_Position = vec4(vertexPosition2D.xy, 0.0, 1.0);
+    position = vertexPosition2D.xy * squareToAspectRatio;
+
+    uvCoordinates = (vertexPosition2D * mat3(
+        0.5, 0.0, 0.5,
+        0.0, 0.5, 0.5,
+        0.0, 0.0, 1.0
+    )).xy;
+
+    #if CIRCLE_LIGHT_COUNT > 0
+        for (int i = 0; i < CIRCLE_LIGHT_COUNT; i++) {
+            circleLightDirections[i] = circleLights[i].center - position;
+        }
+    #endif
+
+    #if FLASHLIGHT_COUNT > 0
+        for (int i = 0; i < FLASHLIGHT_COUNT; i++) {
+            flashlightDirections[i] = flashlights[i].center - position;
+        }
+    #endif
+}

src/graphics/rendering/webgl2-renderer-settings.ts

@@ -0,0 +1,9 @@
+export interface WebGl2RendererSettings {
+  enableHighDpiRendering: boolean;
+  enableStopwatch: boolean;
+  tileMultiplier: number;
+  shaderMacros: {
+    softShadowTraceCount: string;
+    hardShadowTraceCount: string;
+  };
+}