Add auto context restoration

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

@@ -0,0 +1,248 @@
+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 {
+  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';
+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';
+
+export class RendererImplementation implements Renderer {
+  private readonly gl: UniversalRenderingContext;
+  private stopwatch?: WebGlStopwatch;
+  private uniformsProvider: UniformsProvider;
+  private distanceFieldFrameBuffer: IntermediateFrameBuffer;
+  private distancePass: DistanceRenderPass;
+  private lightingFrameBuffer: DefaultFrameBuffer;
+  private lightsPass: LightsRenderPass;
+  private palette?: PaletteTexture;
+  private autoscaler: FpsAutoscaler;
+
+  private applyRuntimeSettings: {
+    [key in keyof RuntimeSettings]: (value: any) => void;
+  } = {
+    enableHighDpiRendering: (v) => {
+      this.distanceFieldFrameBuffer.enableHighDpiRendering = v;
+      this.lightingFrameBuffer.enableHighDpiRendering = v;
+    },
+    tileMultiplier: (v) => (this.distancePass.tileMultiplier = v),
+    isWorldInverted: (v) => (this.distancePass.isWorldInverted = 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),
+  };
+
+  setRuntimeSettings(overrides: Partial<RuntimeSettings>): void {
+    Object.entries(overrides).forEach(([k, v]) => {
+      this.applyRuntimeSettings[k as keyof RuntimeSettings](v);
+    });
+  }
+
+  constructor(
+    private canvas: HTMLCanvasElement,
+    private descriptors: Array<DrawableDescriptor>,
+    ignoreWebGL2?: boolean
+  ) {
+    this.gl = getUniversalRenderingContext(
+      canvas,
+      ignoreWebGL2 !== undefined ? ignoreWebGL2 : defaultStartupSettings.ignoreWebGL2
+    );
+
+    this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE);
+
+    this.distanceFieldFrameBuffer = new IntermediateFrameBuffer(this.gl);
+    this.lightingFrameBuffer = new DefaultFrameBuffer(this.gl);
+
+    this.distancePass = new DistanceRenderPass(this.gl, this.distanceFieldFrameBuffer);
+    this.lightsPass = new LightsRenderPass(this.gl, this.lightingFrameBuffer);
+
+    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({
+      distanceRenderScale: (v) =>
+        (this.distanceFieldFrameBuffer.renderScale = v as number),
+      finalRenderScale: (v) => (this.lightingFrameBuffer.renderScale = v as number),
+    });
+  }
+
+  public async initialize(settingsOverrides: Partial<StartupSettings>): Promise<void> {
+    const settings = {
+      ...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
+          ? [distanceVertexShader, distanceFragmentShader]
+          : [distanceVertexShader100, distanceFragmentShader100],
+        this.descriptors.filter(RendererImplementation.hasSdf),
+        {
+          paletteSize: settings.paletteSize,
+        },
+        compiler
+      )
+    );
+    promises.push(
+      this.lightsPass.initialize(
+        this.gl.isWebGL2
+          ? [lightsVertexShader, lightsFragmentShader]
+          : [lightsVertexShader100, lightsFragmentShader100],
+        this.descriptors.filter((d) => !RendererImplementation.hasSdf(d)),
+        {
+          shadowTraceCount: settings.shadowTraceCount.toString(),
+        },
+        compiler
+      )
+    );
+
+    await compiler.compilePrograms();
+    await Promise.all(promises);
+
+    try {
+      this.stopwatch = new WebGlStopwatch(this.gl);
+    } catch {
+      // no problem
+    }
+  }
+
+  public get insights(): any {
+    return Insights.values;
+  }
+
+  private static hasSdf(descriptor: DrawableDescriptor) {
+    return Object.prototype.hasOwnProperty.call(descriptor, 'sdf');
+  }
+
+  private queryPrecisions() {
+    const precisionToObject = (shader: GLenum, precision: GLenum) => {
+      const toExponent = (v: number): string => `2^${v}`;
+      const p = this.gl.getShaderPrecisionFormat(shader, precision)!;
+      return {
+        range: `[${toExponent(p.rangeMin)}, ${toExponent(p.rangeMax)}]`,
+        precision: toExponent(p.precision),
+      };
+    };
+
+    Insights.setValue('precisions', {
+      'vertex shader': {
+        'low float': precisionToObject(this.gl.VERTEX_SHADER, this.gl.LOW_FLOAT),
+        'medium float': precisionToObject(this.gl.VERTEX_SHADER, this.gl.MEDIUM_FLOAT),
+        'high float': precisionToObject(this.gl.VERTEX_SHADER, this.gl.HIGH_FLOAT),
+      },
+      'fragment shader': {
+        'low float': precisionToObject(this.gl.FRAGMENT_SHADER, this.gl.LOW_FLOAT),
+        'medium float': precisionToObject(this.gl.FRAGMENT_SHADER, this.gl.MEDIUM_FLOAT),
+        'high float': precisionToObject(this.gl.FRAGMENT_SHADER, this.gl.HIGH_FLOAT),
+      },
+    });
+  }
+
+  public addDrawable(drawable: Drawable): void {
+    if (
+      RendererImplementation.hasSdf((drawable.constructor as typeof Drawable).descriptor)
+    ) {
+      this.distancePass.addDrawable(drawable);
+    } else {
+      this.lightsPass.addDrawable(drawable as LightDrawable);
+    }
+  }
+
+  public autoscaleQuality(deltaTime: DOMHighResTimeStamp) {
+    this.autoscaler.autoscale(deltaTime);
+  }
+
+  public renderDrawables() {
+    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();
+
+    const common = {
+      // texture units
+      distanceTexture: 0,
+      palette: 1,
+
+      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();
+    }
+  }
+
+  public setViewArea(topLeft: vec2, size: vec2) {
+    this.uniformsProvider.setViewArea(topLeft, size);
+  }
+
+  public get viewAreaSize(): vec2 {
+    return this.uniformsProvider.getViewArea();
+  }
+
+  public get canvasSize(): vec2 {
+    return vec2.fromValues(this.canvas.clientWidth, this.canvas.clientHeight);
+  }
+
+  public destroy(): void {
+    this.distancePass.destroy();
+    this.lightsPass.destroy();
+    this.palette!.destroy();
+  }
+}

src/graphics/rendering/renderer/renderer.ts

@@ -0,0 +1,16 @@
+import { vec2 } from 'gl-matrix';
+import { Drawable } from '../../../drawables/drawable';
+import { RuntimeSettings } from '../settings/runtime-settings';
+
+export interface Renderer {
+  readonly canvasSize: vec2;
+  readonly viewAreaSize: vec2;
+  readonly insights: any;
+
+  setViewArea(topLeft: vec2, size: vec2): void;
+  setRuntimeSettings(overrides: Partial<RuntimeSettings>): void;
+  addDrawable(drawable: Drawable): void;
+  autoscaleQuality(deltaTime: DOMHighResTimeStamp): void;
+  renderDrawables(): void;
+  destroy(): void;
+}