Add auto context restoration

src/graphics/rendering/fps-autoscaler.ts

@@ -18,7 +18,7 @@ const settings = {
       finalRenderScale: 0.6,
     },
     {
-      distanceRenderScale: 0.3,
+      distanceRenderScale: 0.5,
       finalRenderScale: 1.0,
     },
     {

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

@@ -1,5 +1,6 @@
 import { DrawableDescriptor } from '../../../drawables/drawable-descriptor';
 import { FrameBuffer } from '../../graphics-library/frame-buffer/frame-buffer';
+import { ParallelCompiler } from '../../graphics-library/parallel-compiler';
 import { UniformArrayAutoScalingProgram } from '../../graphics-library/program/uniform-array-autoscaling-program';
 import { UniversalRenderingContext } from '../../graphics-library/universal-rendering-context';
 
@@ -13,9 +14,10 @@ export abstract class RenderPass {
   public async initialize(
     shaderSources: [string, string],
     descriptors: Array<DrawableDescriptor>,
-    substitutions: { [name: string]: any } = {}
+    substitutions: { [name: string]: any } = {},
+    compiler: ParallelCompiler
   ): Promise<void> {
-    await this.program.initialize(shaderSources, descriptors, substitutions);
+    await this.program.initialize(shaderSources, descriptors, substitutions, compiler);
   }
 
   public abstract render(commonUniforms: any, inputTexture?: WebGLTexture): void;

src/graphics/rendering/renderer/context-aware-renderer.ts

@@ -0,0 +1,154 @@
+import { vec2 } from 'gl-matrix';
+import { Drawable, DrawableDescriptor } from '../../../main';
+import { RuntimeSettings } from '../settings/runtime-settings';
+import { StartupSettings } from '../settings/startup-settings';
+import { Renderer } from './renderer';
+import { RendererImplementation } from './renderer-implementation';
+
+export class ContextAwareRenderer implements Renderer {
+  private renderer?: RendererImplementation;
+  private isRendererReady = false;
+  private readyPromise?: Promise<void>;
+  private runtimeOverrides: Partial<RuntimeSettings> = {};
+  private ignoreWebGL2?: boolean;
+  private previousViewAreaTopLeft?: vec2;
+  private previousViewAreaSize?: vec2;
+
+  private contextRestoredHandler = this.handleContextRestored.bind(this);
+  private contextLostHandler = this.handleContextLost.bind(this);
+
+  constructor(
+    private canvas: HTMLCanvasElement,
+    private descriptors: Array<DrawableDescriptor>,
+    private settingsOverrides: Partial<StartupSettings>
+  ) {
+    canvas.addEventListener('webglcontextrestored', this.contextRestoredHandler, false);
+
+    if (Object.prototype.hasOwnProperty.call(settingsOverrides, 'ignoreWebGL2')) {
+      this.ignoreWebGL2 = settingsOverrides.ignoreWebGL2 as boolean;
+    }
+
+    this.createRenderer();
+  }
+
+  public get initializedPromise(): Promise<void> {
+    return this.readyPromise!;
+  }
+
+  private createRenderer() {
+    try {
+      this.renderer = new RendererImplementation(
+        this.canvas,
+        this.descriptors,
+        this.ignoreWebGL2
+      );
+      this.readyPromise = this.renderer.initialize(this.settingsOverrides);
+      this.waitForRenderer();
+    } catch (e) {
+      if (!e.message.includes('Context lost')) {
+        throw e;
+      }
+      console.warn(e.message);
+    }
+  }
+
+  private async waitForRenderer() {
+    try {
+      await this.readyPromise;
+      this.isRendererReady = true;
+    } catch (e) {
+      if (!e.message.includes('Context lost')) {
+        throw e;
+      }
+      console.warn(e.message);
+    }
+
+    this.setRuntimeSettings(this.runtimeOverrides);
+    if (this.previousViewAreaTopLeft && this.previousViewAreaSize) {
+      this.setViewArea(this.previousViewAreaTopLeft, this.previousViewAreaSize);
+    }
+  }
+
+  private handleContextLost(event: Event) {
+    this.isRendererReady = false;
+    event.preventDefault();
+    console.warn('Context lost');
+  }
+
+  private handleContextRestored(event: Event) {
+    event.preventDefault();
+    console.info('Context restored');
+
+    this.createRenderer();
+  }
+
+  private handle<T>(f: () => T, defaultValue: T): T {
+    if (this.isRendererReady) {
+      try {
+        return f();
+      } catch (e) {
+        if (e.message.includes('Context lost')) {
+          this.isRendererReady = false;
+          console.warn(e.message);
+          return defaultValue;
+        }
+        throw e;
+      }
+    } else {
+      return defaultValue;
+    }
+  }
+
+  public get canvasSize(): vec2 {
+    return this.handle(() => this.renderer!.canvasSize, vec2.create());
+  }
+
+  public get viewAreaSize(): vec2 {
+    return this.handle(() => this.renderer!.viewAreaSize, vec2.create());
+  }
+
+  public get insights(): any {
+    return this.handle(() => this.renderer!.insights, {});
+  }
+
+  public setViewArea(topLeft: vec2, size: vec2): void {
+    this.previousViewAreaTopLeft = topLeft;
+    this.previousViewAreaSize = size;
+    return this.handle(() => this.renderer!.setViewArea(topLeft, size), undefined);
+  }
+
+  public setRuntimeSettings(overrides: Partial<RuntimeSettings>): void {
+    this.runtimeOverrides = {
+      ...this.runtimeOverrides,
+      ...overrides,
+    };
+
+    return this.handle(() => this.renderer!.setRuntimeSettings(overrides), undefined);
+  }
+
+  public addDrawable(drawable: Drawable): void {
+    return this.handle(() => this.renderer!.addDrawable(drawable), undefined);
+  }
+
+  public autoscaleQuality(deltaTime: number): void {
+    return this.handle(() => this.renderer!.autoscaleQuality(deltaTime), undefined);
+  }
+
+  public renderDrawables(): void {
+    return this.handle(() => this.renderer!.renderDrawables(), undefined);
+  }
+
+  public destroy(): void {
+    this.canvas.removeEventListener(
+      'webglcontextrestored',
+      this.contextRestoredHandler,
+      false
+    );
+
+    this.canvas.removeEventListener('webglcontextlost', this.contextLostHandler, false);
+
+    this.isRendererReady = false;
+
+    this.handle(() => this.renderer!.destroy(), undefined);
+  }
+}

src/graphics/rendering/renderer/renderer-implementation.ts

@@ -1,33 +1,34 @@
 import { vec2 } from 'gl-matrix';
-import { Drawable } from '../../drawables/drawable';
-import { DrawableDescriptor } from '../../drawables/drawable-descriptor';
-import { LightDrawable } from '../../drawables/lights/light-drawable';
-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 { WebGlStopwatch } from '../graphics-library/helper/stopwatch';
-import { PaletteTexture } from '../graphics-library/palette-texture';
-import { ParallelCompiler } from '../graphics-library/parallel-compiler';
+import { Drawable } from '../../../drawables/drawable';
+import { DrawableDescriptor } from '../../../drawables/drawable-descriptor';
+import { LightDrawable } from '../../../drawables/lights/light-drawable';
+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 { WebGlStopwatch } from '../../graphics-library/helper/stopwatch';
+import { PaletteTexture } from '../../graphics-library/palette-texture';
+import { ParallelCompiler } from '../../graphics-library/parallel-compiler';
 import {
   getUniversalRenderingContext,
   UniversalRenderingContext,
-} from '../graphics-library/universal-rendering-context';
-import { FpsAutoscaler } from './fps-autoscaler';
-import { Insights } from './insights';
-import { DistanceRenderPass } from './render-pass/distance-render-pass';
-import { LightsRenderPass } from './render-pass/lights-render-pass';
+} from '../../graphics-library/universal-rendering-context';
+import { FpsAutoscaler } from '../fps-autoscaler';
+import { Insights } from '../insights';
+import { DistanceRenderPass } from '../render-pass/distance-render-pass';
+import { LightsRenderPass } from '../render-pass/lights-render-pass';
+import { defaultStartupSettings } from '../settings/default-startup-settings';
+import { RuntimeSettings } from '../settings/runtime-settings';
+import { StartupSettings } from '../settings/startup-settings';
+import distanceFragmentShader100 from '../shaders/distance-fs-100.glsl';
+import distanceFragmentShader from '../shaders/distance-fs.glsl';
+import distanceVertexShader100 from '../shaders/distance-vs-100.glsl';
+import distanceVertexShader from '../shaders/distance-vs.glsl';
+import lightsFragmentShader100 from '../shaders/shading-fs-100.glsl';
+import lightsFragmentShader from '../shaders/shading-fs.glsl';
+import lightsVertexShader100 from '../shaders/shading-vs-100.glsl';
+import lightsVertexShader from '../shaders/shading-vs.glsl';
+import { UniformsProvider } from '../uniforms-provider';
 import { Renderer } from './renderer';
-import { RuntimeSettings } from './settings/runtime-settings';
-import { StartupSettings } from './settings/startup-settings';
-import distanceFragmentShader100 from './shaders/distance-fs-100.glsl';
-import distanceFragmentShader from './shaders/distance-fs.glsl';
-import distanceVertexShader100 from './shaders/distance-vs-100.glsl';
-import distanceVertexShader from './shaders/distance-vs.glsl';
-import lightsFragmentShader100 from './shaders/shading-fs-100.glsl';
-import lightsFragmentShader from './shaders/shading-fs.glsl';
-import lightsVertexShader100 from './shaders/shading-vs-100.glsl';
-import lightsVertexShader from './shaders/shading-vs.glsl';
-import { UniformsProvider } from './uniforms-provider';
 
 export class RendererImplementation implements Renderer {
   private readonly gl: UniversalRenderingContext;
@@ -41,7 +42,7 @@ export class RendererImplementation implements Renderer {
   private autoscaler: FpsAutoscaler;
 
   private applyRuntimeSettings: {
-    [key: string]: (value: any) => void;
+    [key in keyof RuntimeSettings]: (value: any) => void;
   } = {
     enableHighDpiRendering: (v) => {
       this.distanceFieldFrameBuffer.enableHighDpiRendering = v;
@@ -49,30 +50,29 @@ export class RendererImplementation implements Renderer {
     },
     tileMultiplier: (v) => (this.distancePass.tileMultiplier = v),
     isWorldInverted: (v) => (this.distancePass.isWorldInverted = v),
-    shadowLength: (v) => (this.uniformsProvider.shadowLength = v),
+    backgroundColor: (v) => (this.uniformsProvider.backgroundColor = v),
     ambientLight: (v) => (this.uniformsProvider.ambientLight = v),
     lightCutoffDistance: (v) => (this.lightsPass.lightCutoffDistance = v),
     colorPalette: (v) => this.palette!.setPalette(v),
   };
 
-  private static defaultStartupSettings: StartupSettings = {
-    shadowTraceCount: 16,
-    paletteSize: 4,
-  };
-
   setRuntimeSettings(overrides: Partial<RuntimeSettings>): void {
     Object.entries(overrides).forEach(([k, v]) => {
-      this.applyRuntimeSettings[(k as unknown) as string](v);
+      this.applyRuntimeSettings[k as keyof RuntimeSettings](v);
     });
   }
 
   constructor(
     private canvas: HTMLCanvasElement,
-    private descriptors: Array<DrawableDescriptor>
+    private descriptors: Array<DrawableDescriptor>,
+    ignoreWebGL2?: boolean
   ) {
-    this.gl = getUniversalRenderingContext(canvas);
+    this.gl = getUniversalRenderingContext(
+      canvas,
+      ignoreWebGL2 !== undefined ? ignoreWebGL2 : defaultStartupSettings.ignoreWebGL2
+    );
 
-    ParallelCompiler.initialize(this.gl);
+    this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE);
 
     this.distanceFieldFrameBuffer = new IntermediateFrameBuffer(this.gl);
     this.lightingFrameBuffer = new DefaultFrameBuffer(this.gl);
@@ -82,6 +82,11 @@ export class RendererImplementation implements Renderer {
 
     this.uniformsProvider = new UniformsProvider(this.gl);
 
+    this.setViewArea(
+      vec2.fromValues(0, canvas.clientHeight),
+      vec2.fromValues(canvas.clientWidth, canvas.clientHeight)
+    );
+
     this.queryPrecisions();
 
     this.autoscaler = new FpsAutoscaler({
@@ -93,13 +98,15 @@ export class RendererImplementation implements Renderer {
 
   public async initialize(settingsOverrides: Partial<StartupSettings>): Promise<void> {
     const settings = {
-      ...RendererImplementation.defaultStartupSettings,
+      ...defaultStartupSettings,
       ...settingsOverrides,
     };
 
     this.palette = new PaletteTexture(this.gl, settings.paletteSize);
     const promises: Array<Promise<void>> = [];
 
+    const compiler = new ParallelCompiler(this.gl);
+
     promises.push(
       this.distancePass.initialize(
         this.gl.isWebGL2
@@ -108,7 +115,8 @@ export class RendererImplementation implements Renderer {
         this.descriptors.filter(RendererImplementation.hasSdf),
         {
           paletteSize: settings.paletteSize,
-        }
+        },
+        compiler
       )
     );
     promises.push(
@@ -119,12 +127,12 @@ export class RendererImplementation implements Renderer {
         this.descriptors.filter((d) => !RendererImplementation.hasSdf(d)),
         {
           shadowTraceCount: settings.shadowTraceCount.toString(),
-        }
+        },
+        compiler
       )
     );
 
-    ParallelCompiler.compilePrograms();
-
+    await compiler.compilePrograms();
     await Promise.all(promises);
 
     try {
@@ -200,17 +208,20 @@ export class RendererImplementation implements Renderer {
       // texture units
       distanceTexture: 0,
       palette: 1,
-      // regular uniforms
+
       distanceNdcPixelSize: 2 / Math.max(...this.distanceFieldFrameBuffer.getSize()),
       shadingNdcPixelSize: 2 / Math.max(...this.distanceFieldFrameBuffer.getSize()),
     };
 
     this.distancePass.render(this.uniformsProvider.getUniforms(common));
+
+    this.gl.enable(this.gl.BLEND);
     this.lightsPass.render(
       this.uniformsProvider.getUniforms(common),
       this.distanceFieldFrameBuffer.colorTexture,
       this.palette!.colorTexture
     );
+    this.gl.disable(this.gl.BLEND);
 
     if (this.stopwatch?.isRunning) {
       this.stopwatch?.stop();

src/graphics/rendering/renderer/renderer.ts

@@ -1,6 +1,6 @@
 import { vec2 } from 'gl-matrix';
-import { Drawable } from '../../drawables/drawable';
-import { RuntimeSettings } from './settings/runtime-settings';
+import { Drawable } from '../../../drawables/drawable';
+import { RuntimeSettings } from '../settings/runtime-settings';
 
 export interface Renderer {
   readonly canvasSize: vec2;

src/graphics/rendering/uniforms-provider.ts

@@ -1,9 +1,9 @@
-import { mat2d, vec2, vec3 } from 'gl-matrix';
+import { mat2d, vec2, vec3, vec4 } from 'gl-matrix';
 import { UniversalRenderingContext } from '../graphics-library/universal-rendering-context';
 
 export class UniformsProvider {
   public ambientLight = vec3.fromValues(0.25, 0.15, 0.25);
-  public shadowLength = 400;
+  public _backgroundColor = vec4.fromValues(1, 1, 1, 1);
 
   private scaleWorldLengthToNDC = 1;
   private transformWorldToNDC = mat2d.create();
@@ -18,7 +18,7 @@ export class UniformsProvider {
     return {
       ...uniforms,
       ambientLight: this.ambientLight,
-      shadowLength: this.shadowLength,
+      backgroundColor: this._backgroundColor,
       uvToWorld: this.uvToWorld,
       worldAreaInView: this.worldAreaInView,
       squareToAspectRatio: this.squareToAspectRatio,
@@ -28,6 +28,14 @@ export class UniformsProvider {
     };
   }
 
+  public set backgroundColor(value: vec3 | vec4) {
+    if (value.length === 3) {
+      this.backgroundColor = vec4.fromValues(value[0], value[1], value[2], 1);
+    } else {
+      this._backgroundColor = value as vec4;
+    }
+  }
+
   public getViewArea(): vec2 {
     return this.worldAreaInView;
   }